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

835 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').trigger('change', ['conditional']); // radio button
627 $('[name="' + target + '"]:checked').change(); // radio button
628
629 }
630 else {
631 $('[name="' + target + '"]').trigger('change', ['conditional']);
632 }
633 });
634
635 $('[data-has]').each(function () {
636 var condition = $(this).data('has');
637 var target = condition.target;
638 var values = condition.values;
639 var self = this;
640
641 $(document).on('change', '[name="' + target + '"]', {target: target, child: this, values: values}, $.proxy(mAP.updateHasConditional, mAP) );
642
643 });
644
645
646 }
647
648 maxAdmin.prototype.updateConditional = function (event)
649 {
650 var data = event.data;
651 var cond_values = data.values;
652 var cond_child = data.child;
653
654 var target = $(event.currentTarget);
655 var value = $(target).val();
656
657 // if type = checkbox: cond_value checked means it has to be 'checked' to show. Otherwise 'unchecked' go hide.
658 if (target.attr('type') === 'checkbox')
659 {
660
661 var checked = $(target).prop('checked');
662
663 if (cond_values == 'checked' && checked)
664 value = 'checked';
665 else if (cond_values == 'unchecked' && !checked)
666 value = 'unchecked';
667 else
668 value = 0;
669
670 }
671
672 if (cond_values.indexOf(value) >= 0)
673 {
674
675 $(cond_child).fadeIn('fast');
676 $(cond_child).find('input, select').trigger('change');
677 }
678 else
679 {
680 $(cond_child).fadeOut('fast');
681 $(cond_child).find('input, select').trigger('change');
682 }
683 }
684
685 maxAdmin.prototype.updateHasConditional = function(event)
686 {
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 true;
706 }
707 });
708
709
710 if (hascond)
711 {
712 $(cond_child).fadeIn('fast');
713 }
714 else
715 {
716 $(cond_child).fadeOut('fast');
717 }
718
719 }
720
721 maxAdmin.prototype.updateRange = function (event)
722 {
723 if (typeof event == 'undefined' || event === null )
724 {
725 var targets = $('input[type="range"]');
726 }
727 else
728 {
729 var targets = [event.target];
730 }
731
732 $(targets).each(function () {
733 var value = $(this).val();
734 $(this).parents('.input').find('.range_value output').val(value + '%');
735
736 });
737
738 }
739
740 maxAdmin.prototype.saveIndicator = function(toggle)
741 {
742 if (toggle)
743 this.form_updated = true;
744 else
745 this.form_updated = false;
746 }
747
748 // General AJAX form save
749 maxAdmin.prototype.formAjaxSave = function (e)
750 {
751 e.preventDefault();
752 var url = mb_ajax.ajaxurl;
753 var form = $(e.target);
754
755 var data = form.serialize();
756
757
758 $.ajax({
759 type: "POST",
760 url: url,
761 data: data,
762
763 }).done($.proxy(this.saveDone, this));
764 }
765
766 /*
767 maxAdmin.prototype.buttonSubmit = function (e)
768 {
769
770 e.preventDefault();
771 $('[data-form]').prop('disabled', true);
772 var formName = $(e.target).data('form');
773 $('#' + formName).submit();
774
775 }
776 */
777
778 maxAdmin.prototype.saveDone = function (res)
779 {
780 $('[data-form]').prop('disabled', false);
781
782 var json = $.parseJSON(res);
783
784 var result = json.result;
785 var title = json.title;
786
787
788 var collection_id = json.data.id;
789
790 if (typeof json.data.new_nonce !== 'undefined')
791 {
792 var nonce = json.data.new_nonce;
793 $('input[name="nonce"]').val(json.data.new_nonce);
794 }
795
796 if (result)
797 {
798 // if collection is new - add collection_id to the field
799 $('input[name="collection_id"]').val(collection_id);
800
801 // replace the location to the correct collection
802 var href = window.location.href;
803 if (href.indexOf('collection_id') === -1)
804 window.history.replaceState({}, '', href + '&collection_id=' + collection_id);
805
806 // trigger other updates if needed
807 $(document).trigger('mbFormSaved');
808
809 // update previous selection to current state;
810 var order = $('input[name="sorted"]').val();
811 $('input[name="previous_selection"]').val(order);
812
813 // in case the interface needs to be reloaded.
814 if (json.data.reload)
815 {
816 document.location.reload(true);
817 }
818
819 }
820 if (! result)
821 {
822 $modal = window.maxFoundry.maxmodal;
823 $modal.newModal('collection_error');
824 $modal.setTitle(title);
825 $modal.setContent(json.body);
826
827 $modal.setControls('<button class="modal_close button-primary">' + json.close_text + '</button>');
828 $modal.show();
829
830 }
831 }
832
833
834 }); /* END OF JQUERY */
835