https://levieuxchateau.be/wp-content/plugins/plugin-grafoman-wordp…/js/ajax-modalbox.js?ver=1790421692

1
2jQuery(function($) {
3  jQuery(document).ready( function() {
4
5    console.log('ajax-modalbox.js loaded');
6
7    $('.showfrontendeditor').on('click', function(){
8      $('body').toggleClass('frontendeditor');
9    });
10
11    // - Margins
12
13    $('.openmarginsettings').on('click', function(){
14      console.log('open or close margins');
15      let wrapper = $(this).parents('.dialogwrap');
16      wrapper.find('.marginpaddingdsettings').toggleClass('d-none');
17      wrapper.find('.marginpaddingdsettings').empty();
18      let div_margins = document.createElement('div');
19      let div_paddings = document.createElement('div');
20      div_margins.className = "margins";
21      div_paddings.className = "paddings";
22      wrapper.find('.marginpaddingdsettings').append(div_margins);
23      wrapper.find('.marginpaddingdsettings').append(div_paddings);
24      loadBlokMargins(wrapper);
25    });
26
27    function loadBlokMargins(wrapper, loadDefaultValues=false) {
28      console.log('loadBlokMargins: '+loadDefaultValues);
29      let jsonobj = wrapper.data('cssjson');
30      jsonobj = wrapper[0].dataset.cssjson;
31      
32      if(jsonobj){
33        let jsonparse = JSON.parse(jsonobj);
34        
35        // Load default if not set or if loadDefaultValues is set to true
36        if(Object.keys(jsonparse.margins).length == 0 || loadDefaultValues == true){
37          console.log('json margin data is empty or set to default, load default');
38          jsonparse.margins = getDefaults(wrapper.data('layout')).initmargins;
39        }
40        
41        if(Object.keys(jsonparse.paddings).length == 0 || loadDefaultValues == true){
42          console.log('json padding data is empty or set to default, load default');
43          jsonparse.paddings = getDefaults(wrapper.data('layout')).initpaddings;
44        }
45
46        for (var property in jsonparse.margins) {
47          var label = document.createElement("label");
48          label.textContent = property + ":";
49
50          var input = document.createElement("input");
51          input.type = "number";
52          input.name = property;
53          input.min = "-25";
54          input.max = "100";
55          input.value = jsonparse.margins[property];
56          input.onchange = function () {
57            updateJsonSpacing(wrapper);
58            updateClasses(wrapper);
59          };
60          wrapper.find('.marginpaddingdsettings .margins').append(label);
61          wrapper.find('.marginpaddingdsettings .margins').append(input);
62        }
63
64        for (var property in jsonparse.paddings) {
65          var label = document.createElement("label");
66          label.textContent = property + ":";
67
68          var input = document.createElement("input");
69          input.type = "number";
70          input.name = property;
71          input.min = "-25";
72          input.max = "100";
73          input.value = jsonparse.paddings[property];
74          input.onchange = function () {
75            updateJsonSpacing(wrapper);
76            updateClasses(wrapper);
77          };
78          wrapper.find('.marginpaddingdsettings .paddings').append(label);
79          wrapper.find('.marginpaddingdsettings .paddings').append(input);
80        }
81
82        var savespacing = document.createElement("button");
83        savespacing.name = "savespacing";
84        savespacing.innerText = "Save";
85        savespacing.onclick = function () {
86          saveDataAttrToDB(wrapper);
87        }
88
89        var resetspacing = document.createElement("button");
90        resetspacing.name = "resetspacing";
91        resetspacing.innerText = "Reset";
92        resetspacing.onclick = function () {
93          resetSpacingToDefault(wrapper);
94        }
95
96        wrapper.find('.marginpaddingdsettings').append(savespacing);
97        wrapper.find('.marginpaddingdsettings').append(resetspacing);
98
99      }
100    }
101
102    function getDefaults(layout){
103      let jsoninit = document.querySelector('div.jsoninit').dataset.jsoninit;
104      jsoninit = JSON.parse(jsoninit);
105
106      if(!jsoninit[layout]){
107        layout = 'default';
108      }
109      return jsoninit[layout];
110    }
111
112    function resetSpacingToDefault(wrapper){
113      console.log('resetSpacingToDefault');
114      wrapper.find('.marginpaddingdsettings').empty();
115      let div_margins = document.createElement('div');
116      let div_paddings = document.createElement('div');
117      div_margins.className = "margins";
118      div_paddings.className = "paddings";
119      wrapper.find('.marginpaddingdsettings').append(div_margins);
120      wrapper.find('.marginpaddingdsettings').append(div_paddings);
121      loadBlokMargins(wrapper, true);
122      updateJsonSpacing(wrapper);
123      updateClasses(wrapper);
124    }
125    
126
127    function saveDataAttrToDB(wrapper){
128      console.log('click savespacing');
129      wrapper.find('.marginpaddingdsettings').addClass('d-none');
130      wrapper.find('.classlistsettings').addClass('d-none');
131      let jsonobj = JSON.parse(wrapper[0].dataset.cssjson);
132      let newCssMargins = jsonobj.margins;
133      let newCssPaddings = jsonobj.paddings;
134      let defaultMargins = getDefaults(wrapper[0].dataset.layout);
135      let defaultPaddings = getDefaults(wrapper[0].dataset.layout);
136      
137      // Compare the new margins value with the init value and check if new value is not empty
138      if( (newCssMargins.length == 0) || (JSON.stringify(newCssMargins) == JSON.stringify(defaultMargins))){
139        console.log('empty newCssMargins');
140        newCssMargins = [];
141        jsonobj.margins = newCssMargins;
142      }
143
144      // Compare the new paddings value with the init value and check if new value is not empty
145      if( (newCssPaddings.length == 0) || (JSON.stringify(newCssPaddings) == JSON.stringify(defaultPaddings))){
146        console.log('empty newCssPaddings');
147        defaultPaddings = [];
148        jsonobj.paddings = defaultPaddings;
149      }
150      
151      // Save to data attr
152      wrapper[0].dataset.cssjson = JSON.stringify(jsonobj);
153
154      // Save to acf subfield with ajax
155      let the_id = wrapper[0].dataset.the_id;
156      let the_name = wrapper[0].dataset.the_name;
157      let css_json = wrapper[0].dataset.cssjson;
158      let layout = wrapper[0].dataset.layout;
159
160      showToast('Bezig met opslaan...', 'success');
161
162      $.ajax({
163        type: "POST",
164        url: grf_script_vars.ajax_url,
165        data: {
166          action:'set_data',
167          the_id: the_id,
168          the_name: the_name,
169          layout: layout,
170          setval: css_json
171        },
172        success: function(response){
173          let arrResponse = response.split('|');
174          console.log(arrResponse);
175          wrapper.removeClass('notsaved');
176          showToast('Instellingen zijn opgeslagen', 'success');
177        }
178      });
179    }
180
181
182
183
184
185    // - Classes
186
187    $('.openclasslistsettings').on('click', function(){
188      console.log('open or close classes');
189      let wrapper = $(this).parents('.dialogwrap');
190      wrapper.find('.classlistsettings').toggleClass('d-none');
191      wrapper.find('.classlistsettings').empty();
192      loadBlokClasses(wrapper);
193    });
194
195    function loadBlokClasses(wrapper) {
196      let jsonobj = wrapper[0].dataset.cssjson;
197      
198      if(jsonobj){
199        let jsonparse = JSON.parse(jsonobj);
200        let classlist = getDefaultClasslist(wrapper[0].dataset.layout);
201        // console.log(classlist);
202        // console.log(jsonparse.classnames);
203
204        for (var property in classlist) {
205          var label = document.createElement("label");
206          label.textContent = classlist[property];
207
208          var input = document.createElement("input");
209          input.type = "checkbox";
210          input.name = classlist[property];
211          if(jsonparse.classnames.includes(classlist[property])){
212            input.checked = true;
213          }
214          
215          input.onchange = function () {
216            if(this.checked){
217              jsonparse.classnames.push(this.name);
218            }else{
219              for (let i = 0; i < jsonparse.classnames.length; i++) { 
220                if (jsonparse.classnames[i] === this.name) { 
221                  let spliced = jsonparse.classnames.splice(i, 1); 
222                } 
223              }
224            }
225            wrapper[0].dataset.cssjson = JSON.stringify(jsonparse);
226            updateJsonSpacing(wrapper);
227            updateClasses(wrapper);
228          };
229          label.prepend(input);
230          wrapper.find('.classlistsettings').append(label);
231        }
232
233        var saveClasses = document.createElement("button");
234        saveClasses.name = "saveclasses";
235        saveClasses.innerText = "Save";
236        saveClasses.onclick = function () {
237          saveDataAttrToDB(wrapper);
238        }
239
240        var resetClasses = document.createElement("button");
241        resetClasses.name = "resetlasses";
242        resetClasses.innerText = "Reset";
243        resetClasses.onclick = function () {
244          console.log('resetlasses');
245          resetClassesToDefault(wrapper);
246        }
247
248        wrapper.find('.classlistsettings').append(saveClasses);
249        wrapper.find('.classlistsettings').append(resetClasses);
250
251      }
252    }
253
254    function getDefaultClasslist(layout){
255      let jsoninit = document.querySelector('div.jsoninit').dataset.jsoninit;
256      jsoninit = JSON.parse(jsoninit);
257
258      if(!jsoninit[layout]){
259        layout = 'default';
260      }
261      return jsoninit[layout].classlist;
262    }
263
264    function resetClassesToDefault(wrapper){
265      console.log('resetClassesToDefault');
266      let event = new Event('change');
267      let checkboxes = wrapper[0].querySelectorAll('input');
268      for (let i = 0; i < checkboxes.length; i++) { 
269        checkboxes[i].checked = false;

270        checkboxes[i].dispatchEvent(event);
271      }
272    }
273
274
275    // - Update classes
276    function updateJsonSpacing(wrapper){
277      console.log('updateJsonSpacing');
278      let jsonobj = wrapper[0].dataset.cssjson;
279      let jsonparse = JSON.parse(jsonobj);
280
281      if(Object.keys(jsonparse.margins).length == 0){
282        console.log('updateJsonSpacing | json margin data is empty or set to default, load default');
283        jsonparse.margins = getDefaults(wrapper.data('layout')).initmargins;
284      }
285
286      if(Object.keys(jsonparse.paddings).length == 0){
287        console.log('updateJsonSpacing | json padding data is empty or set to default, load default');
288        jsonparse.paddings = getDefaults(wrapper.data('layout')).initpaddings;
289      }
290      
291      let margins = wrapper[0].querySelectorAll('.marginpaddingdsettings .margins input');
292      let paddings = wrapper[0].querySelectorAll('.marginpaddingdsettings .paddings input');
293
294      for (var i = 0; i < margins.length; i++) {
295        //console.log(margins[i].name +'-'+margins[i].value);
296
297        if (!isNaN(margins[i].value) && margins[i].value >= -25 && margins[i].value <= 100) {
298          jsonparse.margins[margins[i].name] = parseInt(margins[i].value);
299          wrapper[0].dataset.cssjson = JSON.stringify(jsonparse);
300        } else {
301          console.log("Ongeldige waarde. Voer een getal in tussen -25 en 100.");
302        }
303      }
304
305      for (var i = 0; i < paddings.length; i++) {
306        //console.log(paddings[i].name +'-'+paddings[i].value);
307
308        if (!isNaN(paddings[i].value) && paddings[i].value >= -25 && paddings[i].value <= 100) {
309          jsonparse.paddings[paddings[i].name] = parseInt(paddings[i].value);
310          wrapper[0].dataset.cssjson = JSON.stringify(jsonparse);
311        } else {
312          console.log("Ongeldige waarde. Voer een getal in tussen -25 en 100.");
313        }
314      }
315      
316    }
317
318    // - Update classes
319    function updateClasses(wrapper){
320      console.log('updateClasses');
321      let arrClasses = [];
322      let jsonobj = wrapper[0].dataset.cssjson;
323      let layout = wrapper[0].dataset.layout;
324      let xtraClasses = wrapper[0].dataset.xtraclasses;
325      if(layout == 'text'){layout="textonly";}
326      arrClasses.push('section');
327      arrClasses.push(layout);
328      arrClasses.push(xtraClasses);
329
330      if(jsonobj){
331        let jsonparse = JSON.parse(jsonobj);
332        console.log(jsonparse);
333        for (var property in jsonparse.margins){
334          arrClasses.push(property+'-'+jsonparse.margins[property]);
335        }
336        for (var property in jsonparse.paddings){
337          arrClasses.push(property+'-'+jsonparse.paddings[property]);
338        }
339        for (var property in jsonparse.classnames){
340          arrClasses.push(jsonparse.classnames[property]);
341        }
342      }
343      let newClasses = arrClasses.join(' ');
344      console.log(newClasses);
345      wrapper[0].querySelector('.section').classList = newClasses;
346    }
347  })
348
349
350  
351  
352  function showToast(message, classname){
353    // get the toast container
354    var toaster = document.getElementById('liveToast');       
355    toaster.classList.remove('success', 'error');
356    toaster.classList.add(classname);
357    toaster.querySelector('.toast-title').innerHTML = 'Grafoman';       
358    toaster.querySelector('.toast-body').innerHTML = message;
359
360
361    try {
362      var visibleToast = new understrap.Toast(toaster, {'autohide': true, 'delay': 3500});
363      visibleToast.show();
364    } catch (error) {
365      console.error(error);
366      console.log(message);
367    }
368
369
370    
371  }
372
373  $( function() {
374    $( ".marginpaddingdsettings, .classlistsettings" ).draggable();
375  } );
376
377});