PluginProbe
MaxButtons – Create buttons / 6.27
MaxButtons – Create buttons v6.27
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.27, at js/maxbuttons-admin.js

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