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

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