PluginProbe
MaxButtons – Create buttons / 6.9
MaxButtons – Create buttons v6.9
6.23 6.24 6.25 6.26 6.26.1 6.27 6.28 6.3 6.4 6.5 6.6 6.7 6.8 6.9 7.0 7.1 7.1.1 7.1.2 7.1.3 7.10 7.11 7.13 7.13.1 7.13.2 7.13.3 All 100 releases
maxbuttons / js / maxbuttons-admin.js

maxbuttons-admin.js in MaxButtons – Create buttons 6.9, at js/maxbuttons-admin.js

700 lines 17.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 var maxAdmin;
3
4
5 jQuery(document).ready(function($) {
6
7 maxAdmin = function ()
8 {
9 // $ = jquery;
10 return this;
11 }
12 maxAdmin.prototype = {
13 //initialized: false,
14 colorUpdateTime: true,
15 fields: null,
16 button_id: null,
17 form_updated: false,
18 tabs: null,
19
20
21 }; // MaxAdmin
22
23 maxAdmin.prototype.init = function () {
24 this.button_id = $('input[name="button_id"]').val();
25
26 // Prevents the output button from being clickable (also in admin list view )
27 $(document).on('click', ".maxbutton-preview", function(e) { e.preventDefault(); });
28 $(document).on('click', '.output .preview-toggle', $.proxy(this.toggle_preview, this));
29
30 // overview input paging
31 $('#maxbuttons .input-paging').on('change', $.proxy(this.do_paging, this));
32
33 $('.manual-toggle').on('click', $.proxy(this.toggleManual, this));
34 $('.manual-entry').draggable({
35 cancel: 'p, li',
36 });
37
38 $(document).on('submit', 'form.mb_ajax_save', $.proxy(this.formAjaxSave, this));
39 //$(document).on('click', '#maxbuttons [data-form]', $.proxy(this.buttonSubmit, this)); // DEPR - not in use || remove save buttons ( outside form )
40
41 // conditionals
42 $(document).on('reInitConditionals', $.proxy(this.initConditionials, this));
43 this.initConditionials(); // conditional options
44
45 /*
46 ****
47 ### After this only init for button main edit screen
48 ****
49
50 */
51 if ($('#new-button-form').length == 0)
52 return;
53
54
55 if (this.button_id > 0) {
56 $("#maxbuttons .mb-message").show();
57 }
58
59 this.initResponsive(); // responsive edit interface
60
61 $("#maxbuttons .output").draggable({
62 cancel: '.nodrag',
63 });
64
65 $('.color-field').wpColorPicker(
66 {
67 width: 300,
68
69 change: $.proxy( _.throttle(function(event, ui) {
70 var color = ui.color.toString();
71 this.update_color(event,ui, color);
72 }, 200), this),
73
74 }
75 );
76 /* Copy Color Interface */
77 $('.input.color .arrows').on('click', $.proxy(this.copyColor, this) );
78
79 $('#radius_toggle').on('click', $.proxy(this.toggleRadiusLock,this));
80
81 if ( typeof buttonFieldMap != 'undefined')
82 this.fields = $.parseJSON(buttonFieldMap);
83
84 // bind to all inputs, except for color-field or items with different handler.
85 $('input').not('.color-field').on('keyup change', $.proxy(this.update_preview,this));
86 $('input.color-field').on('focus', $.proxy(this.select_field, this));
87
88 $('select').on('change', $.proxy(this.update_preview, this));
89
90
91 $(window).on('beforeunload', $.proxy(function () { if (this.form_updated) return maxcol_wp.leave_page; }, this));
92
93 $(".button-save").click( $.proxy(function() {
94 this.saveIndicator(false); // prevent alert when saving.
95 $("#new-button-form").submit();
96 return false;
97 }, this) );
98
99 // Expand shortcode tabs for more examples.
100 $('.shortcode-expand').on('click', this.toggleShortcode);
101
102
103 }; // INIT
104
105
106 maxAdmin.prototype.repaint_preview = function ()
107 {
108 $('.mb_tab input[type="text"]').trigger('change');
109 $('.mb_tab input[type="number"]').trigger('change');
110 $('.mb_tab select').trigger('change');
111 $('.mb_tab input[type="hidden"]').trigger('change');
112 $('.mb_tab input[type="radio"]:checked').trigger('change');
113 $('.mb_tab input[type="checkbox"]:checked').trigger('change');
114
115 //$(document).trigger('colorUpdate', ['#text_color', $('#text_color').val() ]);
116 //$(document).trigger('colorUpdate', ['#text_color_hover', $('#text_color_hover').val() ]);
117
118 }
119
120 maxAdmin.prototype.update_preview = function(e)
121 {
122 e.preventDefault();
123 this.saveIndicator(true);
124 var target = $(e.target);
125
126 // migration to data field
127 var field = $(target).data('field');
128 if (typeof field == 'undefined')
129 var id = $(target).attr('id'); // this should change to be ready for the option to have two the same fields on multi locations.
130 else
131 var id = field;
132
133 var data = this.fields[id];
134
135 if (typeof data == 'undefined')
136 return; // field doesn't have updates
137
138 if (typeof data.css != 'undefined')
139 {
140 value = target.val();
141
142 if (typeof data.css_unit != 'undefined' && value.indexOf(data.css_unit) == -1)
143 value += data.css_unit;
144
145 // a target that is checkbox but not checked should unset (empty) value.
146 if (target.is(':checkbox') && ! target.is(':checked') )
147 value = '';
148
149 this.putCSS(data, value);
150 }
151 if (typeof data.attr != 'undefined')
152 {
153 $('.output .result').find('a').attr(data.attr, target.val());
154 }
155 if (typeof data.func != 'undefined')
156 {
157
158 eval('this.'+ data.func + '(target)');
159 }
160 };
161
162 maxAdmin.prototype.select_field = function(e)
163 {
164 $(e.target).select();
165 }
166
167 maxAdmin.prototype.toggle_preview = function (e)
168 {
169 if ( $('.output .inner').is(':hidden') )
170 {
171 $('.output .inner').show();
172 $('.output').css('height', 'auto');
173 $('.preview .preview-toggle').removeClass('dashicons-arrow-down').addClass('dashicons-arrow-up');
174 }
175 else
176 {
177 $('.output .inner').hide();
178 $('.output').css('height', 'auto');
179 $('.preview .preview-toggle').removeClass('dashicons-arrow-up').addClass('dashicons-arrow-down');
180 }
181 };
182
183
184 maxAdmin.prototype.putCSS = function(data,value,state)
185 {
186 state = state || 'both';
187
188 var element = '.maxbutton';
189 if (state == 'hover')
190 element = 'a.hover ';
191 else if(state == 'normal')
192 element = 'a.normal ';
193
194 if (typeof data.csspart != 'undefined')
195 {
196 var parts = data.csspart.split(",");
197 for(i=0; i < parts.length; i++)
198 {
199 var cpart = parts[i];
200 var fullpart = element + " ." + cpart;
201 $('.output .result').find(fullpart).css(data.css, value);
202 }
203 }
204 else
205 $('.output .result').find(element).css(data.css, value);
206 }
207
208 maxAdmin.prototype.update_color = function(event, ui, color)
209 {
210 event.preventDefault();
211
212 this.saveIndicator(true);
213
214 var target = $(event.target);
215 //var color = target.val();
216
217 if (color.indexOf('#') === -1)
218 color = '#' + color;
219
220 var id = target.attr('id');
221
222
223 if(id.indexOf('box_shadow') !== -1)
224 {
225 this.updateBoxShadow(target);
226 }
227 else if(id.indexOf('text_shadow') !== -1)
228 {
229 this.updateTextShadow(target);
230 }
231 else if (id.indexOf('gradient') !== -1)
232 {
233 if (id.indexOf('hover') == -1)
234 this.updateGradient();
235 else
236 this.updateGradient(true);
237 }
238 else if (id == 'button_preview')
239 {
240 $(".output .result").css('backgroundColor', color);
241 }
242 else // simple update
243 {
244
245 if (id.indexOf('hover') == -1)
246 {
247 state = 'normal';
248 }
249 else
250 {
251 state = 'hover';
252 }
253
254 var data = this.fields[id];
255
256 this.putCSS(data, color, state);
257 return;
258 }
259
260
261 };
262
263 maxAdmin.prototype.copyColor = function (e)
264 {
265 e.preventDefault();
266 e.stopPropagation(); // stop the color picker from closing itself.
267
268 var target = $(e.target);
269 var bindto = $(e.target).parents('[data-bind]');
270 var fieldId = '#' + bindto.data('id'); // Field which is used
271 var bindId = '#' + bindto.data('bind'); // Field is bound to.
272
273 // check which arrow was pressed
274 if (target.hasClass('arrow-right'))
275 var arrow_click = 'right';
276 else
277 var arrow_click = 'left';
278
279 // check on which side the interface is. If arrows are on right side, it's the left side (...)
280 if (bindto.hasClass('right') )
281 var if_side = 'left';
282 else
283 var if_side = 'right';
284
285 /* Decide which color to replace. If interface is left - then right click is copy to other element, but if interface is right, right is overwrite current element.
286 Left : right click - copy, left replace.
287 Right : right click - replace, left copy.
288 */
289 if (if_side == 'left')
290 {
291 if (arrow_click == 'right')
292 copy = true;
293 else
294 copy = false;
295 }
296 else if (if_side == 'right')
297 {
298 if (arrow_click == 'right')
299 copy = false;
300 else
301 copy = true;
302 }
303
304 if ( copy )
305 {
306 $(bindId).val( $(fieldId).val() );
307 $(bindId).trigger('change');
308 $(bindId).wpColorPicker('color', $(fieldId).val());
309 }
310 else
311 {
312 $(fieldId).val( $(bindId).val() );
313 $(fieldId).trigger('change');
314 $(fieldId).wpColorPicker('color', $(bindId).val());
315 }
316
317 }
318
319 maxAdmin.prototype.updateGradient = function(hover)
320 {
321 hover = hover || false;
322
323 var hovtarget = '';
324 if (hover)
325 hovtarget = "_hover";
326
327 var stop = parseInt($('#gradient_stop').val());
328
329 if (isNaN(stop) )
330 stop = 45;
331
332 var gradients_on = $('#use_gradient').prop('checked');
333
334 var start = this.hexToRgb($('#gradient_start_color' + hovtarget).val());
335 var end = this.hexToRgb($('#gradient_end_color' + hovtarget).val());
336 var startop = parseInt($('#gradient_start_opacity' + hovtarget).val());
337 var endop = parseInt($('#gradient_end_opacity' + hovtarget).val());
338
339 if (! gradients_on)
340 {
341 end = start;
342 endop = startop;
343 }
344
345 if(isNaN(startop)) startop = 100;
346 if(isNaN(endop)) endop = 100;
347
348 if (!hover)
349 var button = $('.output .result').find('a.normal');
350 else
351 var button = $('.output .result').find('a.hover');
352
353
354
355
356 button.css("background", "linear-gradient( rgba(" + start + "," + (startop/100) + ") " + stop + "%," + " rgba(" + end + "," + (endop/100) + ") )");
357 button.css("background", "-moz-linear-gradient( rgba(" + start + "," + (startop/100) + ") " + stop + "%," + " rgba(" + end + "," + (endop/100) + ") )");
358 button.css("background", "-o-linear-gradient( rgba(" + start + "," + (startop/100) + ") " + stop + "%," + " rgba(" + end + "," + (endop/100) + ") )");
359 button.css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(" +stop+ "%, rgba(" + start + "," + (startop/100) + ")), color-stop(1, rgba(" + end + "," + (endop/100) + ") ));");
360
361
362 }
363
364 maxAdmin.prototype.hexToRgb = function(hex) {
365
366 hex = hex.replace('#','');
367 var bigint = parseInt(hex, 16);
368 var r = (bigint >> 16) & 255;
369 var g = (bigint >> 8) & 255;
370 var b = bigint & 255;
371
372 return r + "," + g + "," + b;
373 }
374
375 maxAdmin.prototype.updateBoxShadow = function (target)
376 {
377 target = target || null;
378
379 var left = $("#box_shadow_offset_left").val();
380 var top = $("#box_shadow_offset_top").val();
381 var width = $("#box_shadow_width").val();
382 var spread = $('#box_shadow_spread').val();
383
384 var color = $("#box_shadow_color").val();
385 var hovcolor = $("#box_shadow_color_hover").val();
386
387 $('.output .result').find('a.normal').css("boxShadow",left + 'px ' + top + 'px ' + width + 'px ' + spread + 'px ' + color);
388 $('.output .result').find('a.hover').css("boxShadow",left + 'px ' + top + 'px ' + width + 'px ' + spread + 'px ' + hovcolor);
389 }
390
391 maxAdmin.prototype.updateTextShadow = function(target,hover)
392 {
393 hover = hover || false;
394
395 var left = $("#text_shadow_offset_left").val();
396 var top = $("#text_shadow_offset_top").val();
397 var width = $("#text_shadow_width").val();
398
399 var color = $("#text_shadow_color").val();
400 var hovcolor = $("#text_shadow_color_hover").val();
401
402 var id = $(target).attr('id');
403 var data = this.fields[id];
404
405 data.css = 'textShadow';
406
407 var value = left + 'px ' + top + 'px ' + width + 'px ' + color;
408 this.putCSS(data, value, 'normal');
409
410 value = left + 'px ' + top + 'px ' + width + 'px ' + hovcolor;
411 this.putCSS(data, value, 'hover');
412
413 }
414
415 maxAdmin.prototype.updateAnchorText = function (target)
416 {
417 var preview_text = $('.output .result').find('a .mb-text');
418
419 // This can happen when the text is removed, button is saved, so the preview doesn't load the text element.
420 if (preview_text.length === 0)
421 {
422 $('.output .result').find('a').append('<span class="mb-text"></span>');
423 $('.output .result').find('a .mb-text').css({'display':'block','line-height':'1em','box-sizing':'border-box'});
424
425 this.repaint_preview();
426 }
427 $('.output .result').find('a .mb-text').text(target.val());
428 }
429
430 maxAdmin.prototype.updateGradientOpacity = function(target)
431 {
432 this.updateGradient(true);
433 this.updateGradient(false);
434 }
435
436 maxAdmin.prototype.updateDimension = function (target)
437 {
438 var dimension = $(target).val();
439 var id = $(target).attr('id');
440 var data = this.fields[id];
441 if (dimension > 0)
442 this.putCSS(data, dimension);
443 else
444 this.putCSS(data, 'auto');
445 }
446
447 maxAdmin.prototype.updateRadius = function(target)
448 {
449 var value = target.val();
450 var fields = ['radius_bottom_left', 'radius_bottom_right', 'radius_top_left', 'radius_top_right'];
451
452 if ( $('#radius_toggle').data('lock') == 'lock')
453 {
454 for(i=0; i < fields.length; i++)
455 {
456 var id = fields[i];
457 $('#' + id).val(value);
458 var data = this.fields[id];
459 this.putCSS(data,value + 'px');
460
461 }
462
463 }
464 }
465
466 maxAdmin.prototype.toggleRadiusLock = function (event)
467 {
468 var target = $(event.target);
469 var lock = $(target).data('lock');
470 if (lock == 'lock')
471 {
472 $(target).removeClass('dashicons-lock').addClass('dashicons-unlock');
473 $(target).data('lock', 'unlock');
474 }
475 else if (lock == 'unlock')
476 {
477 $(target).removeClass('dashicons-unlock').addClass('dashicons-lock');
478 $(target).data('lock', 'lock');
479 }
480
481 }
482
483
484 maxAdmin.prototype.initResponsive = function()
485 {
486
487 window.maxFoundry.maxadmin.responsive = new mbResponsive($);
488 window.maxFoundry.maxadmin.responsive.init(this);
489
490 }
491
492
493 maxAdmin.prototype.do_paging = function(e)
494 {
495 var page = parseInt($(e.target).val());
496
497 if (page <= parseInt($(e.target).attr('max')) )
498 {
499 var url = $(e.target).data("url");
500 window.location = url + "&paged=" + page;
501
502 }
503 }
504
505
506 maxAdmin.prototype.toggleShortcode = function (e)
507 {
508 if ($('.shortcode-expand').hasClass('closed'))
509 {
510 $(' .mb-message.shortcode .expanded').css('display','inline-block');
511 $('.shortcode-expand span').removeClass('dashicons-arrow-down').addClass('dashicons-arrow-up');
512 $('.shortcode-expand').removeClass('closed').addClass('open');
513 }
514 else
515 {
516 $(' .mb-message.shortcode .expanded').css('display','none');
517 $('.shortcode-expand span').addClass('dashicons-arrow-down').removeClass('dashicons-arrow-up');
518 $('.shortcode-expand').addClass('closed').removeClass('open');
519 }
520
521 }
522
523 maxAdmin.prototype.toggleManual = function (e)
524 {
525 e.preventDefault();
526 var $target = $(e.target);
527
528 var subject = $target.data("target");
529 var $newWindow = $('.manual-entry[data-manual="' + subject + '"]');
530
531 if ($newWindow.is(':visible'))
532 {
533 $newWindow.hide();
534 return true;
535 }
536
537 var offset = $('[data-options="' + subject + '"]').position() ;
538 // top + height to position under manual link.
539 var top = offset.top + $target.height();
540
541 $newWindow.css('top', top);
542 $newWindow.css('right',15);
543 $newWindow.css('left', 'auto');
544
545 $newWindow.show();
546 }
547
548 maxAdmin.prototype.initConditionials = function ()
549 {
550 var mAP = this;
551
552
553 $('[data-show]').each(function () {
554 var condition = $(this).data('show');
555 var target = condition.target;
556 var values = condition.values;
557 var self = this;
558
559 $(document).on('change','[name="' + target + '"]', {child: this, values: values}, $.proxy(mAP.updateConditional, mAP) );
560 $('[name="' + target + '"]').trigger('change');
561
562 });
563
564
565 }
566
567 maxAdmin.prototype.updateConditional = function (event)
568 {
569 var data = event.data;
570
571 var cond_values = data.values;
572 var cond_child = data.child;
573
574 var target = $(event.currentTarget);
575 var value = $(target).val();
576
577 // if type = checkbox: cond_value checked means it has to be 'checked' to show. Otherwise 'unchecked' go hide.
578 if (target.attr('type') === 'checkbox')
579 {
580
581 var checked = $(target).prop('checked');
582
583 if (cond_values == 'checked' && checked)
584 value = 'checked';
585 else if (cond_values == 'unchecked' && !checked)
586 value = 'unchecked';
587 else
588 value = 0;
589
590 }
591
592 if (cond_values.indexOf(value) >= 0)
593 {
594
595 $(cond_child).fadeIn('fast');
596 $(cond_child).find('input, select').trigger('change');
597 }
598 else
599 {
600 $(cond_child).fadeOut('fast');
601 $(cond_child).find('input, select').trigger('change');
602 }
603
604 }
605
606 maxAdmin.prototype.saveIndicator = function(toggle)
607 {
608 if (toggle)
609 this.form_updated = true;
610 else
611 this.form_updated = false;
612 }
613
614 // General AJAX form save
615 maxAdmin.prototype.formAjaxSave = function (e)
616 {
617 e.preventDefault();
618 var url = mb_ajax.ajaxurl;
619 var form = $(e.target);
620
621 var data = form.serialize();
622
623
624 $.ajax({
625 type: "POST",
626 url: url,
627 data: data,
628
629 }).done($.proxy(this.saveDone, this));
630 }
631
632 maxAdmin.prototype.buttonSubmit = function (e)
633 {
634 e.preventDefault();
635 $('[data-form]').prop('disabled', true);
636 var formName = $(e.target).data('form');
637 $('#' + formName).submit();
638
639 }
640
641 maxAdmin.prototype.saveDone = function (res)
642 {
643 $('[data-form]').prop('disabled', false);
644
645 var json = $.parseJSON(res);
646
647 var result = json.result;
648 var title = json.title;
649
650
651 var collection_id = json.data.id;
652
653 if (typeof json.data.new_nonce !== 'undefined')
654 {
655 var nonce = json.data.new_nonce;
656 $('input[name="nonce"]').val(json.data.new_nonce);
657 }
658
659 if (result)
660 {
661 // if collection is new - add collection_id to the field
662 $('input[name="collection_id"]').val(collection_id);
663
664 // replace the location to the correct collection
665 var href = window.location.href;
666 if (href.indexOf('collection_id') === -1)
667 window.history.replaceState({}, '', href + '&collection_id=' + collection_id);
668
669 // trigger other updates if needed
670 $(document).trigger('mbFormSaved');
671
672 // update previous selection to current state;
673 var order = $('input[name="sorted"]').val();
674 $('input[name="previous_selection"]').val(order);
675
676 // in case the interface needs to be reloaded.
677 if (json.data.reload)
678 {
679 document.location.reload(true);
680 }
681
682 }
683 if (! result)
684 {
685 $modal = window.maxFoundry.maxmodal;
686 $modal.newModal('collection_error');
687 $modal.setTitle(title);
688 $modal.setContent(json.body);
689
690 $modal.setControls('<button class="modal_close button-primary">' + json.close_text + '</button>');
691 $modal.show();
692
693 }
694 }
695
696
697 }); /* END OF JQUERY */
698
699
700