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

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