PluginProbe
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder / 1.4.4
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder v1.4.4
3.6.0 3.5.0 trunk 1.0.10 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.6.1 1.0.7 1.0.8 1.0.9 1.1 1.1.1 1.2 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 All 110 releases
buttonizer-multifunctional-button / js / dashboard.js

dashboard.js in Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder 1.4.4, at js/dashboard.js

1,426 lines 60.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 var buttonizer = {
3 settings: {
4 wpButtonSaveKey: 'buttonizer_buttons',
5 wpCategorySaveKey: 'buttonizer_page_categories',
6 windowNumber: 0,
7 hasChanges: false,
8 clickedButton: false
9 },
10
11 setTimouts: {
12 a: function() {
13 return setTimeout(function() { }, 0)
14 },
15 b: function() {
16 return setTimeout(function() { }, 0)
17 },
18 },
19
20 init: function() {
21 if(document.location.href.indexOf('page=Buttonizer') === -1) {
22 return;
23 }
24
25 buttonizer.overwriteFavIcon();
26 buttonizer.faInit();
27 buttonizer.initButtons();
28 buttonizer.initIntro();
29
30 // WP color picker
31 jQuery('#button_unpushed').wpColorPicker();
32 jQuery('#button_pushed').wpColorPicker();
33 jQuery('#icon_color').wpColorPicker();
34
35 jQuery(".savebutton").each(function() {
36 jQuery(this).click(buttonizer.saveAnimation);
37 });
38
39 jQuery("input, textarea, select").change(function() {
40 buttonizer.settings.hasChanges = true;
41 });
42
43 setTimeout(function() {
44 // Init preview button
45 jQuery('.button-preview').css({
46 'background-color': jQuery("#button_unpushed").val()
47 });
48
49 jQuery(".button-preview").hover(function() {
50 jQuery(this).css({
51 'background-color': jQuery("#button_pushed").val()
52 });
53 }, function() {
54 jQuery(this).css({
55 'background-color': jQuery("#button_unpushed").val()
56 });
57 });
58 }, 500);
59
60 jQuery(".vertical-tabs .icon-or-image").each(function() {
61 buttonizer.iconImageHandler(jQuery(this));
62 });
63
64 // Remove the spam from other plugins
65 setTimeout(function() {
66 var foundOurContent = false;
67 if(jQuery(".buttonizerWarning").length > 0) {
68 foundOurContent = true;
69 var buttonizerData = jQuery(".buttonizerWarning").html();
70 var buttonizerStyle = jQuery(".buttonizerWarning").attr('class');
71 }
72
73 jQuery("#wordpress-plugin-message-spam").remove();
74
75 if(foundOurContent) {
76 jQuery(".nav-tab-wrapper").after('<div class="'+ buttonizerStyle +'">'+ buttonizerData +'</div>');
77 }
78 }, 1000);
79
80 // Hash
81 if(document.location.hash != "") {
82 if(document.location.hash != "#buttonizer-tour") {
83 var tabKey = document.location.hash;
84 buttonizer.tabNavigate(tabKey.replace("#tab_", ""));
85 }
86 }
87
88 jQuery(".buttonizer-click-to-pro").each(function() {
89 jQuery(this).click(function(e) {
90 e.preventDefault();
91 buttonizer.proInfoWindow();
92 });
93 });
94
95 buttonizer.loadPageCategorie();
96
97 if(!jQuery(".button-row").hasClass("is_category")) {
98 buttonizer.addSortable();
99 }
100 },
101
102 proInfoWindow: function() {
103 buttonizer.createWindow({
104 title: 'You like Buttonizer?',
105 text: '<p>Are you ready to try Buttonizer PRO?</p><p><b class="color-buttonizer">What do you get?</b></p>'+
106
107 '<div class="color-buttonizer-blue buttonizer-pro-checklist"><i class="fa fa-check"></i> Show on opening hours</div>' +
108 '<div class="color-buttonizer-orange buttonizer-pro-checklist"><i class="fa fa-check"></i> Show buttons on specific pages: Use page rules</div>' +
109 '<div class="color-buttonizer-blue buttonizer-pro-checklist"><i class="fa fa-check"></i> Unlimited page rules</div>' +
110 '<div class="color-buttonizer-orange buttonizer-pro-checklist"><i class="fa fa-check"></i> Add custom image or button-icon</div>' +
111 '<div class="color-buttonizer-blue buttonizer-pro-checklist"><i class="fa fa-check"></i> Exit intend</div>' +
112 '<div class="color-buttonizer-orange buttonizer-pro-checklist"><i class="fa fa-check"></i> Show on scroll</div>' +
113 '<div class="color-buttonizer-blue buttonizer-pro-checklist"><i class="fa fa-check"></i> Show on timeout</div>' +
114 '<div class="color-buttonizer-orange buttonizer-pro-checklist"><i class="fa fa-check"></i> Custom class names</div>' +
115 '<br />' +
116 '<p class="color-buttonizer text-right"><b>Do you <span><i class="fa fa-heart"></i></span> these features?</b></p>',
117 confirmText: 'Upgrade',
118 onConfirm: function() {
119 document.location.href = 'admin.php?page=Buttonizer-pricing';
120 }
121 });
122 },
123
124 overwriteFavIcon: function() {
125 if(typeof faviconUrl != 'undefined') {
126 (function () {
127 var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
128 link.type = 'image/x-icon';
129 link.rel = 'shortcut icon';
130 link.href = faviconUrl;
131 document.getElementsByTagName('head')[0].appendChild(link);
132 })();
133 }
134 },
135
136 tabNavigate: function(key) {
137 jQuery(".vertical-tabs .tab-container").each(function() {
138 if(jQuery(this).attr('id') == "tab_container_" + key) {
139 jQuery(this).show();
140 }else{
141 jQuery(this).hide();
142 }
143 });
144
145 jQuery(".vertical-tabs .tabs a").each(function() {
146 if(jQuery(this).attr('id') == "tab_container_" + key) {
147 jQuery(this).addClass('nav-tab-active');
148 }else{
149 jQuery(this).removeClass('nav-tab-active');
150 }
151 });
152
153 // jQuery("type[name=_wp_http_referer]").val();
154 },
155
156 iconImageHandler: function(currentContainer) {
157 var type = currentContainer.data("type");
158
159 // Chooser
160 currentContainer.find(".placeholder-choose a").click(function() {
161 if(type == 'image') {
162 type = 'icon';
163
164 currentContainer.find(".image-placeholder").hide();
165 currentContainer.find(".icon-placeholder").show();
166
167 currentContainer.find("input").val("");
168 }else {
169 type = 'image';
170
171 currentContainer.find(".image-placeholder").show();
172 currentContainer.find(".icon-placeholder").hide();
173 }
174 });
175
176 // Insert image and icon type
177 currentContainer.find(".image-uploader-button").click(function(e) {
178 e.preventDefault();
179
180 var custom_uploader = wp.media({
181 title: 'Choose button icon',
182 multiple: false
183 })
184 .on('select', function() {
185 var attachment = custom_uploader.state().get('selection').first().toJSON();
186 currentContainer.find('.button-preview img').attr( 'src', attachment.url).show();
187 currentContainer.find(".button-preview").show();
188
189 currentContainer.find('input').val(attachment.url);
190 })
191 .open();
192 });
193 },
194
195 colorPaletHandler: function(colorPalet) {
196 var buttonId = colorPalet.attr("data-btnid");
197 var customColors = false;
198 var currentColors = {
199 default: buttonizer.rgb2hex(colorPalet.find(".color.default").css('background-color')),
200 pushed: buttonizer.rgb2hex(colorPalet.find(".color.pushed").css('background-color')),
201 icon: buttonizer.rgb2hex(colorPalet.find(".color.icon").css('background-color'))
202 };
203
204 jQuery("#btn_row_"+ buttonId +" .button-preview").css({ 'background-color': currentColors.default });
205
206 colorPalet.click(function() {
207 var randomText = (buttonizer.settings.windowNumber + 1);
208
209 buttonizer.createWindow({
210 title: 'Choose colors',
211 text:
212 '<p>Choose the colors here of your button. You can give every button different colors.</p>' +
213 '<table width="100%" class="color-chooser-table">' +
214 '<tr><td width="150">' +
215 '<b>Button color</b>' +
216 '</td><td>' +
217 '<input type="text" class="colorpalet-initializer" value="'+ currentColors.default +'" id="color_default_'+ randomText +'" />' +
218 '</td></tr>' +
219
220 '<tr><td>' +
221 '<b>Pushed/hover color</b>' +
222 '</td><td>' +
223 '<input type="text" class="colorpalet-initializer" value="'+ currentColors.pushed +'" id="color_pushed_'+ randomText +'" />' +
224 '</td></tr>' +
225
226 '<tr><td>' +
227 '<b>Icon color</b>' +
228 '</td><td>' +
229 '<input type="text" class="colorpalet-initializer" value="'+ currentColors.icon +'" id="color_icon_'+ randomText +'" />' +
230 '</td></tr>' +
231 '</table>',
232
233 confirmText: 'Choose',
234
235 afterInit: function() {
236 jQuery(".colorpalet-initializer").wpColorPicker();
237 },
238
239 onConfirm: function() {
240 currentColors.default = jQuery("#color_default_" + randomText).val();
241 currentColors.pushed = jQuery("#color_pushed_" + randomText).val();
242 currentColors.icon = jQuery("#color_icon_" + randomText).val();
243 jQuery("#btn_row_"+ buttonId +" .button-preview").css({ 'background-color': currentColors.default });
244 customColors = true;
245
246 jQuery("#reset_colors_" + buttonId).show();
247 updatePalet();
248 }
249 });
250 });
251
252 jQuery("#reset_colors_" + buttonId).click(function() {
253 buttonizer.createWindow({
254 title: 'Back to default colors',
255 text: '<p>The button colors will reset to the choosen default button colors (from the general settings).</p>' +
256 '<p>Are you sure you want to get the default colors for this button?</p>',
257
258 canCancel: true,
259 cancelText: 'Cancel',
260 confirmText: '<i class="fa fa-thumbs-o-up"></i>&nbsp; Yes, I am',
261
262 onConfirm: function() {
263 customColors = false;
264 currentColors.default = colorPalet.find(".color.default").attr("data-default");
265 currentColors.pushed = colorPalet.find(".color.pushed").attr("data-default");
266 currentColors.icon = colorPalet.find(".color.icon").attr("data-default");
267 updatePalet();
268 jQuery("#reset_colors_" + buttonId).hide();
269 jQuery("#btn_row_"+ buttonId +" .button-preview").css({ 'background-color': currentColors.default });
270 }
271 });
272 });
273
274 function updatePalet() {
275 colorPalet.find(".color.default").css({ 'background-color': currentColors.default});
276 colorPalet.find(".color.pushed").css({ 'background-color': currentColors.pushed});
277 colorPalet.find(".color.icon").css({ 'background-color': currentColors.icon});
278 colorPalet.find(".text").html(customColors ? 'Custom colors' : 'Default colors');
279
280 colorPalet.find("input.custom").val(customColors ? '1' : '0').change();
281 colorPalet.find("input.default").val(currentColors.default);
282 colorPalet.find("input.pushed").val(currentColors.pushed);
283 colorPalet.find("input.icon").val(currentColors.icon);
284 }
285 },
286
287 rgb2hex: function(rgb) {
288 if(rgb == null || typeof rgb == "null") {
289 return '#eeeeee';
290 }
291
292 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
293 function hex(x) {
294 return ("0" + parseInt(x).toString(16)).slice(-2);
295 }
296
297 if(rgb == null || typeof rgb == "null") {
298 return '#eeeeee';
299 }
300
301 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
302 },
303
304 loadPageCategorie: function() {
305
306 },
307
308 addSortable: function() {
309 var sortable = new Sortable(document.getElementById("button-rows"), {
310 group: "button-rows",
311 sort: true,
312 animation: 150,
313 scroll: true,
314 scrollSensitivity: 30,
315 scrollSpeed: 10,
316 handle: ".drag-handle",
317
318 onSort: function (evt) {
319 jQuery("#" + evt.clone.children[0].id + " .row-info").css({
320 opacity: .45,
321 }).delay(500).animate({
322 opacity: 1,
323 }, 500);
324 }
325 });
326 },
327
328 saveAnimation: function() {
329 jQuery(".savebutton").each(function() {
330 jQuery(this).html('<i class="fa fa-cog fa-spin"></i> <span>Saving</span>');
331 });
332 buttonizer.settings.clickedButton = true;
333 jQuery('form#buttonizer').submit();
334 },
335
336 /*
337 * Buttons
338 */
339 initButtons: function() {
340 jQuery(".button-row .savebutton").each(function() {
341 jQuery(this).click(buttonizer.saveAnimation);
342 });
343
344 jQuery(".button-row").each(function() {
345 if(jQuery(this).attr("button-id") == '-1') {
346 return;
347 }
348
349 var rowObj = jQuery(this);
350 var rowId = jQuery(this).attr("button-id");
351 var buttonTitle = rowObj.find(".row-info span .row-title");
352 var buttonEdit = rowObj.find(".row-info .pencil-edit");
353 var buttonTitleField = rowObj.find(".button_title");
354 var doubleClick = setTimeout(function() {}, 100);
355 var isCategory = rowObj.hasClass('is_category');
356 var clicked = 0;
357
358 buttonEdit.click(function(e) {
359 e.preventDefault();
360 buttonTitle.dblclick();
361 });
362
363 buttonTitle.html(buttonTitleField.val());
364
365 rowObj.find(".row-info").click(function(e) {
366 if(
367 jQuery(e.target).hasClass('fa-desktop') ||
368 jQuery(e.target).hasClass('fa-mobile') ||
369 jQuery(e.target).hasClass('fa-pencil') ||
370 jQuery(e.target).hasClass('mobiledesktop') ||
371 jQuery(e.target).hasClass('is-live-button') ||
372 jQuery(e.target).hasClass('must-save-button')
373 ) {
374 return;
375 }
376
377 clicked = 0;
378 clearInterval(doubleClick);
379 doubleClick = setTimeout(function() {
380 if(clicked == 0) {
381 if(rowObj.hasClass("opened")) {
382 rowObj.removeClass("opened");
383 }else{
384 rowObj.addClass("opened");
385 }
386 }
387 clicked = 0;
388 }, 100);
389 });
390
391 buttonTitle.dblclick(function() {
392 buttonizer.updateTitle(buttonTitle, buttonTitleField, false);
393
394 clicked++;
395 });
396
397 rowObj.find(".button_showonphone").change(function(e) {
398 var isSelected = jQuery(this).is(":checked");
399
400 if(!isSelected) {
401 jQuery("#btn_row_" + rowId + " .row-info .mobile-button").addClass("selected");
402 }else {
403 jQuery("#btn_row_" + rowId + " .row-info .mobile-button").removeClass("selected");
404 }
405 });
406
407 rowObj.find('.button_title').change(function() {
408 newTitle = jQuery(this).val();
409
410 if(buttonizer.checkTitleDuplicate(newTitle, rowId)) {
411 buttonizer.updateTitle(buttonTitle, buttonTitleField, true, newTitle);
412 return;
413 }
414
415 buttonTitle.html(newTitle);
416 });
417
418 rowObj.find(".button_showondesktop").change(function(e) {
419 var isSelected = jQuery(this).is(":checked");
420
421 if(!isSelected) {
422 jQuery("#btn_row_" + rowId + " .row-info .desktop-button").addClass("selected");
423 }else {
424 jQuery("#btn_row_" + rowId + " .row-info .desktop-button").removeClass("selected");
425 }
426 });
427
428 jQuery("#button_"+ rowId +"_icon").change(function(e) {
429 rowObj.find(".button-icon").attr('class', "fa "+ jQuery(this).val() +" button-icon");
430 });
431
432 jQuery("#btn_row_" + rowId + " input").change(function() {
433 jQuery("#btn_row_" + rowId + " .row-info .is-live-button").hide();
434 jQuery("#btn_row_" + rowId + " .row-info .must-save-button").show();
435 });
436
437 if(isCategory) {
438
439 }else{
440 // Image icon handler
441 buttonizer.iconImageHandler(rowObj.find(".icon-or-image"));
442 buttonizer.colorPaletHandler(rowObj.find(".button-color-palet"));
443
444 buttonizer.buttonTypeHandler(rowObj);
445 }
446 });
447 },
448
449 updateTitle: function(buttonTitle, buttonTitleField, isDuplicate, text) {
450 if(!text) {
451 var text = '';
452 }
453
454 if(!isDuplicate) {
455 var newTitle = prompt("You can change the title of the button.\n\nNote: The visitor won't see this text - for internal use only:", buttonTitleField.val());
456 }else{
457 var newTitle = prompt("You can change the title of the button.\n\nNote: The visitor won't see this text - for internal use only:\n\nWARNING: This name is already in use. Please change the name of the button. Duplicates are not allowed due Google Analytics event names.", text);
458 }
459
460 if(!newTitle || newTitle == "") {
461 if(isDuplicate) {
462 buttonTitleField.val(buttonTitle.html());
463 }
464 return;
465 }
466
467 if(buttonizer.checkTitleDuplicate(newTitle)) {
468 buttonizer.updateTitle(buttonTitle, buttonTitleField, true, newTitle);
469 return;
470 }
471
472 buttonTitle.html(newTitle);
473 buttonTitleField.val(newTitle);
474 },
475
476 checkTitleDuplicate: function(text, allowRowId) {
477 isDuplicate = false;
478 if(!allowRowId) {
479 var allowRowId = -1;
480 }
481
482 jQuery(".button-row").each(function() {
483 if(jQuery(this).find('.button_title').val() == text && jQuery(this).attr("button-id") != allowRowId) {
484 isDuplicate = true;
485 }
486 });
487
488 return isDuplicate;
489 },
490
491 removeRow: function(id) {
492 var buttonName = jQuery("#btn_row_" +id + " .row-info span .row-title").html();
493 var wasCategory = jQuery("#btn_row_" + id).hasClass('is_category');
494
495 if(confirm("Are you sure you want to remove the row with the text: '"+ buttonName +"'?\n\nThis is not recoverable.")) {
496 jQuery("#btn_row_" +id).remove();
497
498 if(jQuery(".button-row").length > 1) {
499 jQuery(".buttonizer-no-buttons").hide();
500 }else{
501 jQuery(".buttonizer-no-buttons").show();
502 }
503 }
504 },
505
506 toggleMobile: function(id) {
507 var isSelected = jQuery("#button_"+ id +"_show_on_phone").is(":checked");
508
509 if(!isSelected) {
510 jQuery("#btn_row_" + id + " .row-info .mobile-button").removeClass("selected");
511 jQuery("#button_"+ id +"_show_on_phone").click();
512 }else {
513 jQuery("#btn_row_" + id + " .row-info .mobile-button").addClass("selected");
514 jQuery("#button_"+ id +"_show_on_phone").click();
515 }
516
517 jQuery("#btn_row_" + rowId + " .row-info .is-live-button").hide();
518 jQuery("#btn_row_" + rowId + " .row-info .must-save-button").show();
519 },
520
521 toggleDesktop: function(id) {
522 var isSelected = jQuery("#button_"+ id +"_show_on_desktop").is(":checked");
523
524 if(!isSelected) {
525 jQuery("#btn_row_" + id + " .row-info .desktop-button").removeClass("selected");
526 jQuery("#button_"+ id +"_show_on_desktop").click();
527 }else {
528 jQuery("#btn_row_" + id + " .row-info .desktop-button").addClass("selected");
529 jQuery("#button_"+ id +"_show_on_desktop").click();
530 }
531
532 jQuery("#btn_row_" + rowId + " .row-info .is-live-button").hide();
533 jQuery("#btn_row_" + rowId + " .row-info .must-save-button").show();
534 },
535
536 addRow: function() {
537 if(jQuery("#new-button").hasClass('disabled')) {
538 return;
539 }
540 buttonizer.settings.hasChanges = true;
541
542 jQuery(".buttonizer-no-buttons").hide();
543
544 var isCategory = jQuery(".button-row[button-id=-1]").hasClass("is_category");
545
546 jQuery("#new-button").attr('disabled', 'disabled').addClass('disabled');
547 var defaultRow = jQuery(".button-row[button-id=-1]").html();
548 var numberOfButtons = jQuery(".button-row").length - (isCategory ? 1 : 0);
549
550 numberOfButtons = Math.floor(Date.now() / 1000);
551 numberOfButtons = numberOfButtons + "-" + Math.floor((Math.random() * 999) + 100);
552 numberOfButtons = numberOfButtons.replace('-', '');
553
554 var newData = defaultRow.replace('/-1/g', numberOfButtons);
555 newData = newData.replace('-1', numberOfButtons);
556
557 jQuery("#button-rows, #page-categories").append((!isCategory ? '<li>' : '') + '<div class="button-row ' + (isCategory ? 'is_category' : '') + '" id="btn_row_'+ numberOfButtons +'" button-id="'+ numberOfButtons +'">' + newData + '</div>' + (!isCategory ? '</li>' : ''));
558
559 clearInterval(buttonizer.setTimouts.a);
560 clearInterval(buttonizer.setTimouts.b);
561
562 buttonizer.setTimouts.a = setTimeout(function() {
563 jQuery(".button-row *").unbind("click");
564 jQuery(".button-row").removeClass("opened");
565 jQuery(".fontawesome-searcher-clicker").remove();
566 jQuery("#btn_row_"+ numberOfButtons +" .button_title").val("New button " + numberOfButtons);
567
568 if(isCategory) {
569 jQuery("#btn_row_"+ numberOfButtons +" input").each(function() {
570 jQuery(this).attr("name", buttonizer.settings.wpCategorySaveKey + "[category_"+ numberOfButtons +"][]");
571 });
572
573 jQuery("#btn_row_"+ numberOfButtons + " select").attr("name", buttonizer.settings.wpCategorySaveKey + "[category_"+ numberOfButtons +"_type]");
574 }
575 }, 100);
576
577
578 buttonizer.setTimouts.b = setTimeout(function() {
579 buttonizer.initButtons();
580 if(!isCategory) {
581 buttonizer.updateRowInputNames(numberOfButtons);
582 jQuery("#btn_row_"+ numberOfButtons).addClass('opened');
583 jQuery("#btn_row_"+ numberOfButtons + " input.button_title").focus();
584 }else{
585 console.log("Initialize new page category");
586 jQuery("#btn_row_"+ numberOfButtons + " #categoryIsUsed").val(numberOfButtons);
587 jQuery("#btn_row_"+ numberOfButtons + " #categoryIsUsed").attr("name", buttonizer.settings.wpCategorySaveKey + '[categorieOrder][]');
588 jQuery("#btn_row_"+ numberOfButtons + " .delete-button").attr("href", "javascript:buttonizer.removeRow("+ numberOfButtons +")");
589 jQuery("#btn_row_"+ numberOfButtons + " .button_title").attr("name", buttonizer.settings.wpCategorySaveKey + "[category_"+ numberOfButtons +"_title]").val('New page category ' + (jQuery(".button-row").length - 1));
590 jQuery("#btn_row_"+ numberOfButtons + " .row-title").html("New page category " + (jQuery(".button-row").length - 1));
591 }
592 buttonizer.faInit();
593 buttonizer.loadPageCategorie();
594 jQuery("#new-button").removeAttr('disabled').removeClass('disabled');
595
596 jQuery("#btn_row_"+ numberOfButtons + " .savebutton").show();
597 }, 400);
598 },
599
600 updateRowInputNames: function(buttonId) {
601 // Textfield
602 jQuery("#btn_row_"+ buttonId + " .button_textfield")
603 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_text]")
604 .attr("id", "button_"+ buttonId +"_text").val("");
605
606 // Iconfield
607 jQuery("#btn_row_"+ buttonId + " .icon-placeholder select").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_icon]");
608
609 // Iconfield
610 jQuery("#btn_row_"+ buttonId + " .image-placeholder input").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_image]");
611
612 // Button title
613 jQuery("#btn_row_"+ buttonId + " .button_title").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_title]");
614
615 // Button show on page category
616 jQuery("#btn_row_"+ buttonId + " #button_category").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_show_on_pages]");
617
618 // Color palets
619 jQuery("#btn_row_"+ buttonId + " input.custom").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_using_custom_colors]");
620
621 jQuery("#btn_row_"+ buttonId + " input.default").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_colors_button]");
622 jQuery("#btn_row_"+ buttonId + " input.pushed").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_colors_pushed]");
623 jQuery("#btn_row_"+ buttonId + " input.icon").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_colors_icon]");
624
625 // Button action
626 jQuery("#btn_row_"+ buttonId + " .button_action").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_action]");
627
628 // Button value
629 jQuery("#btn_row_"+ buttonId + " .button_input").attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_url]");
630
631
632 // Show on phone
633 jQuery("#btn_row_"+ buttonId + " .button_showonphone")
634 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_show_on_phone]")
635 .attr("id", "button_"+ buttonId +"_show_on_phone");
636
637 jQuery("label[for='button_"+ -1 +"_show_on_phone']").attr("for", "button_"+ buttonId +"_show_on_phone");
638
639 // Show on desktop
640 jQuery("#btn_row_"+ buttonId + " .button_showondesktop")
641 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_show_on_desktop]")
642 .attr("id", "button_"+ buttonId +"_show_on_desktop");
643
644 jQuery("label[for='button_"+ -1 +"_show_on_desktop']").attr("for", "button_"+ buttonId +"_show_on_desktop");
645
646 // Url
647 jQuery("#btn_row_"+ buttonId + " .button_isurl")
648 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_url]")
649 .attr("id", "button_"+ buttonId +"_url");
650
651 jQuery("label[for='button_"+ -1 +"_url']").attr("for", "button_"+ buttonId +"_url");
652
653 // Is phone buttonId
654 jQuery("#btn_row_"+ buttonId + " .button_isphonenumber")
655 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_is_phonenumber]")
656 .attr("id", "button_"+ buttonId +"_is_phonenumber");
657
658 jQuery("label[for='button_"+ -1 +"_is_phonenumber']").attr("for", "button_"+ buttonId +"_is_phonenumber");
659
660 // New tab
661 jQuery("#btn_row_"+ buttonId + " .button_isnewtab")
662 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_url_newtab]")
663 .attr("id", "button_"+ buttonId +"_url_newtab");
664
665 jQuery("label[for='button_"+ -1 +"_url_newtab']").attr("for", "button_"+ buttonId +"_url_newtab");
666
667
668 // Show only on opening hours
669 jQuery("#btn_row_"+ buttonId + " .button_showwhenopened")
670 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_show_when_opened]")
671 .attr("id", "button_"+ buttonId +"_show_when_opened");
672
673 jQuery("label[for='button_"+ -1 +"_show_when_opened']").attr("for", "button_"+ buttonId +"_show_when_opened");
674
675 // Show only on opening hours
676 jQuery("#btn_row_"+ buttonId + " .button_showlabelonhover")
677 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_show_label_on_hover]")
678 .attr("id", "button_"+ buttonId +"_show_label_on_hover");
679
680 jQuery("label[for='button_"+ -1 +"_show_label_on_hover']").attr("for", "button_"+ buttonId +"_show_label_on_hover");
681
682 // Custom class
683 jQuery("#btn_row_"+ buttonId + " .button_custom_class")
684 .attr("name", buttonizer.settings.wpButtonSaveKey + "[button_"+ buttonId +"_custom_class]")
685 .attr("id", "button_"+ buttonId +"_custom_class");
686
687 jQuery("label[for='button_"+ -1 +"_custom_class']").attr("for", "button_"+ buttonId +"_custom_class");
688
689 /*
690 * Link fixes
691 */
692 // Delete button link
693 jQuery("#btn_row_"+ buttonId + " .delete-button").attr("href", "javascript:buttonizer.removeRow("+ buttonId +")");
694
695 // Show on mobile button link
696 jQuery("#btn_row_"+ buttonId + " .mobiledesktop.mobile-button").attr("href", "javascript:buttonizer.toggleMobile("+ buttonId +")");
697
698 // Show on desktop button link
699 jQuery("#btn_row_"+ buttonId + " .mobiledesktop.desktop-button").attr("href", "javascript:buttonizer.toggleDesktop("+ buttonId +")");
700 },
701
702 /* Button type handler */
703 buttonTypeHandler: function(rowObj) {
704 var currentButtonType = rowObj.find(".button_action");
705 var currentButtonInput = rowObj.find(".button_input");
706 var newTab = rowObj.find(".setting-new-tab");
707
708 var isInitializing = true;
709
710 var waitUntilTriggering = setTimeout(function() {});
711
712 // The button type
713 currentButtonType.change(function() {
714 isInitializing = true;
715 checkInput();
716 });
717
718 currentButtonInput.keyup(function() {
719 clearInterval(waitUntilTriggering);
720
721 waitUntilTriggering = setTimeout(function(){
722 isInitializing = true;
723 checkInput();
724 }, 250);
725 });
726
727 currentButtonInput.change(checkInput);
728
729 //
730 // Checkbox validation
731
732
733
734 function checkInput() {
735 var inputError = false;
736 var currentAction = currentButtonType.val();
737 var currentValueText = currentButtonInput.val();
738
739 if(currentAction == 'backtotop') {
740 currentButtonInput.attr("disabled", "disabled");
741 }else if(currentAction == 'gobackpage') {
742 currentButtonInput.attr("disabled", "disabled");
743
744 }else if(currentAction == 'socialsharing'){
745 currentButtonInput.attr("hidden", "hidden");
746 } else {
747 currentButtonInput.removeAttr("disabled", "disabled");
748 }
749
750 // if(!isInitializing && currentValueText == '') {
751 // isInitializing = false;
752 // rowObj.find(".input_error").html('Hello there... You left the input empty here... Do you want to fill him up? It\'s up to you.').show();
753 // return;
754 // }
755
756 if(currentButtonType.val() == 'url') {
757 newTab.show();
758 }else{
759 newTab.hide();
760 }
761
762 if(!isInitializing && currentAction == 'url' && currentValueText == '#') {
763 inputError = true;
764 rowObj.find(".input_error").html('<p>You only have #... That doesn\'t open anything...</p>');
765 }else if(!isInitializing && currentAction == 'url' && !buttonizer.buttonTypeInputController(currentValueText, 'url')) {
766 inputError = true;
767 rowObj.find(".input_error").html('<p>This looks like an invalid URL. The button may not work as expected.</p><p>&nbsp;</p><p>Do you miss <b>http://</b> or <b>https://</b>? A space somewhere on the wrong place?</p>');
768 }
769
770 if((currentAction == 'phone' || currentAction == 'whatsapp') && !/^(?=.*\d)[\d ]+$/.test(currentValueText)) {
771 inputError = true;
772 rowObj.find(".input_error").html('Invalid phone number. Please use only the number format. Omit any zeroes, brackets or dashes when adding the phone number in international format.');
773 }
774
775 if(currentAction == 'mail' && !buttonizer.buttonTypeInputController(currentValueText, 'mail')) {
776 inputError = true;
777 rowObj.find(".input_error").html('<p>This looks like an invalid mail address. Make sure the mail address looks like <b><i>user</i>@domain.com</b></p>');
778 }
779
780
781 /* Premium Code Stripped by Freemius */
782
783
784 if(!isInitializing && currentValueText == '') {
785 rowObj.find(".input_error").html('Uhm... You forgot something to fill in...').show();
786 return;
787 }
788
789 // Stay here
790 if(!isInitializing) {
791 if(currentAction != 'phone' && currentAction != 'whatsapp' && /^(?=.*\d)[\d ]+$/.test(currentValueText)) {
792 buttonizer.createWindow({
793 title: 'Uhm? Shall I call you?',
794 text:
795 '<p>It\'s looks like you are having a phone number as value. Do you want to let this button behave as a call button?</p>' +
796 '<p>If it\'s not a phone number, you can click \'No thanks\'. If you click \'Yes please\' I will change it for you.</p>',
797
798 confirmText: 'Yes please',
799 canCancel: true,
800 cancelText: 'No thanks',
801
802 onConfirm: function() {
803 currentButtonType.val('phone');
804 rowObj.find(".input_error").hide();
805 }
806 });
807 }
808
809 if(currentAction != 'url' && buttonizer.buttonTypeInputController(currentValueText, 'url')) {
810 buttonizer.createWindow({
811 title: 'Uhm? WWW.?',
812 text:
813 '<p>It\'s looks like you are having a website URL as value. Do you want to let this button behave as a link?</p>' +
814 '<p>If you just about to change that, you can click \'No thanks\'. If you click \'Yes please\' I will change it for you.</p>',
815
816 confirmText: 'Yes please',
817 canCancel: true,
818 cancelText: 'No thanks',
819
820 onConfirm: function() {
821 currentButtonType.val('url');
822 rowObj.find(".input_error").hide();
823 }
824 });
825 }
826
827 if(currentAction != 'mail' && buttonizer.buttonTypeInputController(currentValueText, 'mail')) {
828 buttonizer.createWindow({
829 title: 'Uhm? That\'s a mail address?',
830 text:
831 '<p>It\'s looks like you are having a mail address as value. Do you want to change the button action to open the mail program?</p>' +
832 '<p>If you just about to change that, you can click \'No thanks\'. If you click \'Yes please\' I will change it for you.</p>',
833
834 confirmText: 'Yes please',
835 canCancel: true,
836 cancelText: 'No thanks',
837
838 onConfirm: function() {
839 currentButtonType.val('mail');
840 currentButtonInput.val(currentValueText.replace("mailto:", ""));
841 rowObj.find(".input_error").hide();
842 }
843 });
844 }
845
846
847 /* Premium Code Stripped by Freemius */
848
849 }
850
851 if(inputError) {
852 rowObj.find(".input_error").show();
853 }else{
854 rowObj.find(".input_error").hide();
855 }
856
857 isInitializing = false;
858 };
859
860 // Start
861 checkInput();
862 },
863
864 buttonTypeInputController: function(inputValue, action) {
865 var websiteUrlPattern = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
866 var mailUrlPattern = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
867
868 // URL
869 if(action == 'url') {
870 if(websiteUrlPattern.test(inputValue) || inputValue.substring(0, 1) == '#' || inputValue.substring(0, 1) == '/') {
871 return true;
872 } else {
873 return false;
874 }
875 }else
876
877 // E-mail
878 if(action == 'mail') {
879 if(!mailUrlPattern.test(inputValue) && inputValue.indexOf("mailto:") == -1) {
880 return false;
881 } else {
882 return true;
883 }
884 }
885 },
886
887 createWindow: function(data) {
888 this.settings.windowNumber++;
889 var currentWindow = this.settings.windowNumber;
890
891 if(!data.title) {
892 data.title = '';
893 }
894
895 if(!data.text) {
896 data.text = '<p>This dialog has not text.</p><p>Weird, isn\'t it?</p>';
897 }
898
899 if(!data.confirmText) {
900 data.confirmText = 'Close';
901 }
902
903 if(!data.canCancel) {
904 data.canCancel = false;
905 }
906
907 if(!data.cancelText) {
908 data.cancelText = 'Cancel';
909 }
910
911 if(!data.onConfirm) {
912 data.onConfirm = function() {};
913 }
914
915 if(!data.onCancel) {
916 data.onCancel = function() {};
917 }
918
919 if(!data.onClose) {
920 data.onClose = function() {};
921 }
922
923 if(!data.afterInit) {
924 data.afterInit = function() {};
925 }
926
927 var windowStyle = '<div class="fs-modal active" id="buttonizer-window-'+ currentWindow +'"><div class="fs-modal-dialog">';
928
929 windowStyle += '<div class="fs-modal-header"><h4>'+ data.title +'</h4><a href="!#" class="fs-close"><i class="dashicons dashicons-no" title="Dismiss"></i></a></div>';
930
931 windowStyle += '<div class="fs-modal-body"><div class="fs-modal-panel active">';
932 windowStyle += data.text;
933 windowStyle += '</div></div>';
934
935 windowStyle += '<div class="fs-modal-footer">' + (data.canCancel ? '<button class="button cancel" tabindex="3">'+ data.cancelText +'</button> ' : '') +' <button class="button button-primary confirm" tabindex="4">'+ data.confirmText +'</button></div>';
936
937 windowStyle += '</div></div>';
938
939 jQuery("body").append(windowStyle);
940
941 jQuery(document).ready(data.afterInit);
942
943 jQuery("#buttonizer-window-"+ currentWindow + " .fs-close, #buttonizer-window-"+ currentWindow + " .fs-modal-footer button").click(function(e) {
944 e.preventDefault();
945 jQuery("#buttonizer-window-"+ currentWindow).fadeOut();
946
947 if(jQuery(this).hasClass("confirm")) {
948 data.onConfirm();
949 }
950
951 if(jQuery(this).hasClass("cancel")) {
952 data.onCancel();
953 }
954
955 data.onClose();
956 })
957 },
958
959 /*
960 * Font awesome searcher
961 */
962 faSettings: {
963 objects: 0,
964 currentSelect: {},
965 currentObject: {},
966 isGenerated: false,
967 isOpened: false
968 },
969 faInit: function() {
970 buttonizer.faSettings.isOpened = false;
971
972 if(buttonizer.faSettings.isGenerated == false && typeof fontAwesome != 'undefined') {
973 buttonizer.faSettings.isGenerated = true;
974 fontAwesome = jQuery.map(fontAwesome, function(value, index) {
975 return [index];
976 });
977 }
978
979 jQuery("body").click(function(e){
980 if(!jQuery(e.target).closest('.fontawesome-searcher').length && !jQuery(e.target).closest('.fontawesome-searcher-clicker').length){
981 jQuery(".fontawesome-searcher").hide();
982 buttonizer.faSettings.isOpened = false;
983 }
984 });
985
986 var typeTimeOut = setTimeout(function() { buttonizer.faSearchWord(''); }, 300);
987
988 var adminBody = jQuery("#wpbody");
989
990 jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").keyup(function() {
991 clearInterval(typeTimeOut);
992
993 typeTimeOut = setTimeout(function() { buttonizer.faSearchWord(jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").val()); }, 300);
994 });
995
996 jQuery("select.fa-chooser").each(function() {
997 buttonizer.faSettings.objects++;
998 var obj = jQuery(this);
999
1000 obj.hide();
1001 obj.parent().append("<a href=\"javascript:void(0)\" class=\"fontawesome-searcher-clicker\" id=\"fa-chooser_"+ buttonizer.faSettings.objects +"\">Icon: "+ obj.val() +" &nbsp; <i class=\"fa "+ obj.val() +"\"></i></a>");
1002
1003 var newObject = jQuery("#fa-chooser_" + buttonizer.faSettings.objects);
1004 newObject.click(function(e) {
1005 if(buttonizer.faSettings.isOpened == false || buttonizer.faSettings.currentSelect != obj) {
1006 jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").focus();
1007 buttonizer.faSettings.isOpened = true;
1008
1009 // Update process
1010 jQuery(".fontawesome-searcher").css({
1011 "top": newObject.offset().top - 20 + newObject.height(),
1012 "left": newObject.offset().left - adminBody.offset().left,
1013 "width": newObject.width()
1014 }).show();
1015
1016 buttonizer.faSettings.currentSelect = obj;
1017 buttonizer.faSettings.currentObject = newObject;
1018 }else{
1019 buttonizer.faSettings.isOpened = false;
1020 jQuery(".fontawesome-searcher").hide();
1021 }
1022
1023 e.preventDefault();
1024 });
1025 });
1026 },
1027 faSearchWord: function(word) {
1028 var foundMatches = [];
1029
1030 for(var i = 0; i < fontAwesome.length; i++) {
1031 if(fontAwesome[i].indexOf(word) !== -1) {
1032 foundMatches.push(fontAwesome[i]);
1033 }
1034 };
1035
1036 if(foundMatches.length == 0) {
1037 jQuery(".fontawesome-searcher .no-matches-found").show();
1038 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").hide();
1039 }else{
1040 jQuery(".fontawesome-searcher .no-matches-found").hide();
1041 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").show();
1042
1043 var text = '<table><tr>';
1044 for(var b = 0; b < foundMatches.length; b++) {
1045 if(b % 4 == 0) {
1046 text += "</tr><tr>";
1047 }
1048
1049 text += '<td><a href="javascript:buttonizer.faChooseIcon(\''+ foundMatches[b] +'\')"><i class="fa '+ foundMatches[b] +'"></i></a></td>';
1050 };
1051
1052 text += '</tr>';
1053
1054 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").html(text);
1055 }
1056 },
1057 faChooseIcon: function(icon) {
1058 buttonizer.faSettings.currentSelect.val(icon).change();
1059 buttonizer.faSettings.currentObject.html("Icon: "+ icon +" &nbsp; <i class=\"fa "+ icon +"\"></i>");
1060 jQuery("#" + buttonizer.faSettings.currentObject.attr("id")).click();
1061 },
1062
1063 /* intro */
1064 initIntro: function() {
1065 var openedDesign = false;
1066
1067 if(RegExp("welcome-splash", "gi").test(document.location.href)) {
1068 buttonizer.createWindow({
1069 title: 'Welcome to Buttonizer',
1070 text:
1071 '<img src="'+ jQuery(".buttonizer-logo img").attr("src").replace("logo.png", "plugin-icon.png") +'" width="100" align="left" style="margin-right: 20px; margin-bottom: 50px;" />' +
1072 '<p>We are pleased to welcome you to Buttonizer!</p>' +
1073 '<p>We\'ve created a tour for our new users, would you like to take the tour? We will make your first Buttonizer button there and show some things how it works!</p>' +
1074 '<p>Would you like to take the tour?</p>',
1075
1076 confirmText: 'Yes please <i class="fa fa-chevron-right" style="margin-left: 10px; vertical-align: middle;" aria-hidden="true"></i>',
1077 canCancel: true,
1078 cancelText: 'No thanks, I know how it works',
1079
1080 onConfirm: function() {
1081 document.location.href = '?page=Buttonizer&tab=buttonizer_general_settings#buttonizer-tour';
1082 },
1083
1084 onCancel: function() {
1085 document.location.href = '?page=Buttonizer';
1086 }
1087 });
1088 }
1089
1090 // Check if we need to send the user to the next page
1091 if(RegExp("buttonizer_tour_ready=toStep2", "gi").test(document.cookie)) {
1092 var d = new Date();
1093 d.setTime(d.getTime() - 10);
1094 document.cookie = "buttonizer_tour_ready=toStep2;expires="+ d.toUTCString() + ";path=/";
1095
1096 document.location.href = './admin.php?page=Buttonizer&tab=buttonizer_buttons#buttonizer-tour';
1097 return;
1098 }
1099
1100 jQuery("#take-the-tour").click(function() {
1101 setTimeout(function() {
1102 if (RegExp("buttonizer_general_settings", "gi").test(window.location.href)) {
1103 buttonizer.initIntro();
1104 }
1105 }, 250);
1106 });
1107
1108 if (RegExp("buttonizer-tour", "gi").test(window.location.href)) {
1109
1110 // Page one: General settings
1111 if(document.location.href.indexOf('buttonizer_general_settings') != -1) {
1112 var buttonizer_tour_1 = buttonizer.startTour('design');
1113 buttonizer.tabNavigate('design');
1114
1115 buttonizer_tour_1.onbeforechange(function(targetElement) {
1116 if (buttonizer_tour_1._currentStep == 5 && buttonizer_tour_1._direction == "forward") {
1117 buttonizer.tabNavigate('placing');
1118 openedDesign = true;
1119 }else if(buttonizer_tour_1._currentStep == 4 && buttonizer_tour_1._direction == "backward") {
1120 buttonizer.tabNavigate('design');
1121
1122 openedDesign = false;
1123 }
1124 }).oncomplete(function() {
1125 document.querySelector('.button.savebutton').click();
1126 }).setOptions({
1127 doneLabel: 'Save &rarr;'
1128 }).start();
1129
1130 jQuery("#tab_container_placing").click(function() {
1131 buttonizer_tour_1.nextStep();
1132 });
1133
1134 jQuery('.button.savebutton').click(function() {
1135 var d = new Date();
1136 d.setTime(d.getTime() + (2*24*60*60*1000));
1137 document.cookie = "buttonizer_tour_ready=toStep2;expires="+ d.toUTCString() + ";path=/";
1138 });
1139 }
1140
1141 if(document.location.href.indexOf('buttonizer_buttons') != -1) {
1142 var buttonizer_tour_2 = buttonizer.startTour('buttons');
1143 var buttonCreated = true;
1144
1145 buttonizer_tour_2.onchange(function(targetElement) {
1146 if(buttonizer_tour_2._currentStep == 4) {
1147 jQuery("#new-button").click();
1148 }
1149 }).setOptions({
1150 doneLabel: 'Next',
1151 hidePrev: true,
1152 hideNext: true,
1153 }).start();
1154
1155 // Create button
1156 var buttonCreated = false;
1157 jQuery("#new-button").click(function() {
1158 if(buttonCreated) {
1159 alert("Please finish the tour first.")
1160 return;
1161 }
1162 buttonCreated = true;
1163 buttonizer.addRow();
1164
1165 setTimeout(function() {
1166 var id = jQuery("#button-rows .button-row.opened").attr("id");
1167 buttonizer_tour_2.exit(true);
1168
1169 var buttonizer_tour_3 = buttonizer.startTour('edit-button', id);
1170
1171 buttonizer_tour_3.onchange(function(targetElement) {
1172 if(buttonizer_tour_3._currentStep == 1) {
1173 // buttonizer_tour_3.nextStep();
1174 }
1175 }).setOptions({
1176 doneLabel: 'Finish tour',
1177 hidePrev: true,
1178 hideNext: true,
1179 }).start();
1180 }, 400);
1181 });
1182 }
1183 }
1184 },
1185
1186 startTour: function(type, newButtonId) {
1187 var intro = introJs();
1188
1189 if(!newButtonId) {
1190 newButtonId = false;
1191 }
1192
1193 intro.setOption('tooltipPosition', 'top');
1194 intro.setOptions({
1195 showBullets: false,
1196 exitOnOverlayClick: false,
1197 skipLabel: 'Exit tour'
1198 });
1199
1200 if(type == 'design') {
1201 intro.setOptions({
1202 steps: [
1203 {
1204 intro: "Let's start the tour through Buttonizer. You can skip this at any moment."
1205 },
1206 {
1207 element: document.querySelector('.intro-styling'),
1208 intro: "Set the default colors of The Buttonizer. We recommend using the colors of your corporate identity.",
1209 position: 'top'
1210 },
1211 {
1212 element: document.querySelector('.intro-icon'),
1213 intro: "Select the main icon. This icon will appear when you have multiple floating action buttons on one page (So you can create a Floating Menu).<br><br>When you have PRO featues, you will be able to choose a custom image.",
1214 position: 'top'
1215 },
1216 {
1217 element: document.querySelector('.intro-label'),
1218 intro: "Optional: Add text If you want to have a label next to your button to explain the button action like 'Click here' or 'Contact options'.",
1219 position: 'top'
1220 },
1221 {
1222 element: document.querySelector('#tab_container_placing'),
1223 intro: "Click here to go to the position and animation page",
1224 position: 'right'
1225 },
1226 {
1227 element: document.querySelector('.intro-position'),
1228 intro: "Here you can change the placing of the Buttonizer. 5% means 5% of the screen. The default setting is bottom 5% and right 5%. It will place itself on the right corner of your screen (mobile & desktop).",
1229 position: 'top'
1230 },
1231 {
1232 element: document.querySelector('.intro-animaton'),
1233 intro: "The Button animation option is only relevant if you are going to add multiple floating action buttons on one page (create a floating menu). This option let's you choose how the different buttons will 'pop' up.",
1234 position: 'top'
1235 },
1236 {
1237 element: document.querySelector('.intro-attention'),
1238 intro: "If you want your floating action button to have extra attention from your website visitors you can add a attention animation. The button will make a specific 'move' each 10 seconds.",
1239 position: 'top'
1240 },
1241 {
1242 element: document.querySelector('.button.savebutton'),
1243 intro: "For now, we are finished here. Click the save button.",
1244 position: 'left'
1245 }
1246 ]});
1247 }else if(type == 'buttons') {
1248 intro.setOptions({
1249 steps: [
1250 {
1251 element: document.querySelector('#new-button'),
1252 intro: "Great! You are ready to make your first Floating Action Button. As an example we will make a Click-to-Call button. To start click on 'New Button'.",
1253 position: 'left'
1254 },
1255 {
1256 element: document.querySelector('#new-button'),
1257 intro: "Waiting on you for clicking the button at the right... It says '+ New button'",
1258 position: 'left'
1259 },
1260 {
1261 element: document.querySelector('#new-button'),
1262 intro: "Hello? Please click that button...",
1263 position: 'left'
1264 },
1265 {
1266 element: document.querySelector('#new-button'),
1267 intro: "Here, on the right... If you won't click it, I will click it >:-)",
1268 position: 'left'
1269 },
1270 {
1271 element: document.querySelector('#new-button'),
1272 intro: "Okay. Nothing to say.",
1273 position: 'bottom'
1274 },
1275 ]});
1276 }
1277 else if(type == 'edit-button') {
1278 intro.setOptions({
1279 steps: [
1280 {
1281 element: document.querySelector('#' + newButtonId + " .row-info"),
1282 intro: "This is the quick-button info bar.<br /><br />When you have multiple buttons, you can drag them to position them on the right place.",
1283 position: 'bottom',
1284 disableInteraction: true
1285 },
1286 {
1287 element: document.querySelector('#' + newButtonId + " .row-info .row-title"),
1288 intro: "This is the button title. Your webvisitors won't see this name, this is only visible here. We will change the name in 1 steps.",
1289 position: 'right',
1290 disableInteraction: true
1291 },
1292 {
1293 element: document.querySelector('#' + newButtonId + " .row-info .desktop-button"),
1294 intro: "This is a quick-button to enable the button on desktop. When it's blue it's enabled. When grey it's disabled for desktop.",
1295 position: 'left',
1296 disableInteraction: true
1297 },
1298 {
1299 element: document.querySelector('#' + newButtonId + " .row-info .mobile-button"),
1300 intro: "There is one for mobile too.",
1301 position: 'left',
1302 disableInteraction: true
1303 },
1304 {
1305 element: document.querySelector('#' + newButtonId + " .button_title"),
1306 intro: "Create a descent name for your Button like 'Call Button Sales department'. Your webvisitors won't see this name. Although it will appear on Google Analytics on your 'event tracking' section.",
1307 position: 'bottom'
1308 },
1309 {
1310 element: document.querySelector('#' + newButtonId + " .button-pdr"),
1311 intro: "Choose an appropriate icon or upload your own. Type 'phone' and select the phone icon to give it a phone icon.",
1312 position: 'bottom'
1313 },
1314 {
1315 element: document.querySelector('#' + newButtonId + " .button_textfield"),
1316 intro: "Optional - Add text If you want to have a label next to your button to explain the button action like 'Call our sales department'. This label will be shown next to the button.",
1317 position: 'bottom'
1318 },
1319 {
1320 element: document.querySelector('#' + newButtonId + " .button-action"),
1321 intro: "Choose the appropriate click action. When you want to add a click-to-call button select the option phone-number. Type in the phone-number you want your visitors to call when clicking on the button.",
1322 position: 'bottom'
1323 },
1324 {
1325 element: document.querySelector('#' + newButtonId + " #button_category"),
1326 intro: "Premium function - By default the button is shown on every page. If you want to show your button on selected pages you can add 'page categories'. You need a premium account if you want to do this.",
1327 position: 'bottom'
1328 },
1329 {
1330 element: document.querySelector('#' + newButtonId + " .show-mobile-btn"),
1331 intro: "Decide if your button is shown on mobile, desktop or both by selecting the show on mobile and desktop functions. If you don't select at least one of both the button won't show on your website. In the case of a call button we recommend only selecting the option 'show on mobile'. ",
1332 position: 'top'
1333 },
1334 {
1335 element: document.querySelector('#' + newButtonId + " .show-desktop-btn"),
1336 intro: "Here you can enable it on your desktop",
1337 position: 'bottom'
1338 },
1339 {
1340 element: document.querySelector('#' + newButtonId + " .must-save-button"),
1341 intro: "This is a quick save button. If your button has no changes to it, it'll say 'live'",
1342 position: 'left',
1343 disableInteraction: true
1344 },
1345 {
1346 intro: "<b>Congratulations!</b> Your first Floating Action button is ready to go live! Click on save and take a look at the result. Go to your website on your phone or desktop (if you've enabled it there too) and test your button.",
1347 },
1348 {
1349 intro: "Now it's time to get creative. Add another button on your website like a navigation button or a url to your contact page or maybe even opening Facebook Messenger. <b> It's all up to you </b> ",
1350 },
1351 {
1352 element: document.querySelector('h2 .savebutton'),
1353 intro: "Do you have a feature request, idea or do you need support? Feel free to contact us! Push the save button to finish the tour.",
1354 position: 'left',
1355 },
1356 ]});
1357 }
1358
1359 return intro;
1360 },
1361 stickyId: 0,
1362 sticky: function(type, message) {
1363 buttonizer.stickyId++;
1364
1365 var elemDiv = document.createElement('div');
1366 elemDiv.className = 'buttonizer-sticky '+ type +' sticky-'+ buttonizer.stickyId;
1367 elemDiv.innerHTML = message;
1368 document.body.appendChild(elemDiv);
1369
1370
1371 // document.body.innerHTML += '<div class="buttonizer-sticky '+ type +' sticky-'+ buttonizer.stickyId +'">'+ message +'</div>';
1372
1373 setTimeout(function() {
1374 var element = document.querySelector(".sticky-" + buttonizer.stickyId);
1375 var opacity = 1;
1376
1377 var fadeOut = setInterval(function() {
1378 opacity = opacity - 0.05;
1379 element.style.opacity = opacity;
1380
1381 if(opacity <= 0) {
1382 clearInterval(fadeOut);
1383 }
1384 }, 20);
1385 }, 4000);
1386 }
1387 };
1388
1389 function checkSelection()
1390 {
1391 var inputError = false;
1392 var elements = document.querySelectorAll(".socialSharingCheckbox");
1393 var warning = document.querySelectorAll(".warning_text");
1394 var selected = 0;
1395 for(var i = 0; i < elements.length; i++){
1396 console.log(elements);
1397 if(elements[i].checked){
1398 selected++;
1399 }
1400 }
1401 if(selected < 4){
1402 for(var d = 0; d < warning.length; d++){
1403 warning[d].setAttribute("hidden", "hidden");
1404 }
1405 }else if(selected > 3){
1406 for(var o = 0; o < warning.length; o++){
1407 warning[o].removeAttribute("hidden");
1408 elements.setAttribute("disabled", "disabled");
1409 }
1410
1411 }
1412
1413
1414 }
1415
1416 document.addEventListener('DOMContentLoaded', buttonizer.init, false);
1417
1418 window.onbeforeunload = function(){
1419 if(document.location.href.indexOf('page=Buttonizer') === -1) {
1420 return;
1421 }
1422 if(buttonizer.settings.hasChanges && !buttonizer.settings.clickedButton) {
1423 return 'You have unsaved data. Are you sure you want to leave?';
1424 }
1425 };
1426