PluginProbe
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder / 1.4.3
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder v1.4.3
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.3, at js/dashboard.js

1,423 lines 60.8 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 } else {
744 currentButtonInput.removeAttr("disabled", "disabled");
745 }
746
747 // if(!isInitializing && currentValueText == '') {
748 // isInitializing = false;
749 // 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();
750 // return;
751 // }
752
753 if(currentButtonType.val() == 'url') {
754 newTab.show();
755 }else{
756 newTab.hide();
757 }
758
759 if(!isInitializing && currentAction == 'url' && currentValueText == '#') {
760 inputError = true;
761 rowObj.find(".input_error").html('<p>You only have #... That doesn\'t open anything...</p>');
762 }else if(!isInitializing && currentAction == 'url' && !buttonizer.buttonTypeInputController(currentValueText, 'url')) {
763 inputError = true;
764 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>');
765 }
766
767 if((currentAction == 'phone' || currentAction == 'whatsapp') && !/^(?=.*\d)[\d ]+$/.test(currentValueText)) {
768 inputError = true;
769 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.');
770 }
771
772 if(currentAction == 'mail' && !buttonizer.buttonTypeInputController(currentValueText, 'mail')) {
773 inputError = true;
774 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>');
775 }
776
777
778 /* Premium Code Stripped by Freemius */
779
780
781 if(!isInitializing && currentValueText == '') {
782 rowObj.find(".input_error").html('Uhm... You forgot something to fill in...').show();
783 return;
784 }
785
786 // Stay here
787 if(!isInitializing) {
788 if(currentAction != 'phone' && currentAction != 'whatsapp' && /^(?=.*\d)[\d ]+$/.test(currentValueText)) {
789 buttonizer.createWindow({
790 title: 'Uhm? Shall I call you?',
791 text:
792 '<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>' +
793 '<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>',
794
795 confirmText: 'Yes please',
796 canCancel: true,
797 cancelText: 'No thanks',
798
799 onConfirm: function() {
800 currentButtonType.val('phone');
801 rowObj.find(".input_error").hide();
802 }
803 });
804 }
805
806 if(currentAction != 'url' && buttonizer.buttonTypeInputController(currentValueText, 'url')) {
807 buttonizer.createWindow({
808 title: 'Uhm? WWW.?',
809 text:
810 '<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>' +
811 '<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>',
812
813 confirmText: 'Yes please',
814 canCancel: true,
815 cancelText: 'No thanks',
816
817 onConfirm: function() {
818 currentButtonType.val('url');
819 rowObj.find(".input_error").hide();
820 }
821 });
822 }
823
824 if(currentAction != 'mail' && buttonizer.buttonTypeInputController(currentValueText, 'mail')) {
825 buttonizer.createWindow({
826 title: 'Uhm? That\'s a mail address?',
827 text:
828 '<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>' +
829 '<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>',
830
831 confirmText: 'Yes please',
832 canCancel: true,
833 cancelText: 'No thanks',
834
835 onConfirm: function() {
836 currentButtonType.val('mail');
837 currentButtonInput.val(currentValueText.replace("mailto:", ""));
838 rowObj.find(".input_error").hide();
839 }
840 });
841 }
842
843
844 /* Premium Code Stripped by Freemius */
845
846 }
847
848 if(inputError) {
849 rowObj.find(".input_error").show();
850 }else{
851 rowObj.find(".input_error").hide();
852 }
853
854 isInitializing = false;
855 };
856
857 // Start
858 checkInput();
859 },
860
861 buttonTypeInputController: function(inputValue, action) {
862 var websiteUrlPattern = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
863 var mailUrlPattern = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
864
865 // URL
866 if(action == 'url') {
867 if(websiteUrlPattern.test(inputValue) || inputValue.substring(0, 1) == '#' || inputValue.substring(0, 1) == '/') {
868 return true;
869 } else {
870 return false;
871 }
872 }else
873
874 // E-mail
875 if(action == 'mail') {
876 if(!mailUrlPattern.test(inputValue) && inputValue.indexOf("mailto:") == -1) {
877 return false;
878 } else {
879 return true;
880 }
881 }
882 },
883
884 createWindow: function(data) {
885 this.settings.windowNumber++;
886 var currentWindow = this.settings.windowNumber;
887
888 if(!data.title) {
889 data.title = '';
890 }
891
892 if(!data.text) {
893 data.text = '<p>This dialog has not text.</p><p>Weird, isn\'t it?</p>';
894 }
895
896 if(!data.confirmText) {
897 data.confirmText = 'Close';
898 }
899
900 if(!data.canCancel) {
901 data.canCancel = false;
902 }
903
904 if(!data.cancelText) {
905 data.cancelText = 'Cancel';
906 }
907
908 if(!data.onConfirm) {
909 data.onConfirm = function() {};
910 }
911
912 if(!data.onCancel) {
913 data.onCancel = function() {};
914 }
915
916 if(!data.onClose) {
917 data.onClose = function() {};
918 }
919
920 if(!data.afterInit) {
921 data.afterInit = function() {};
922 }
923
924 var windowStyle = '<div class="fs-modal active" id="buttonizer-window-'+ currentWindow +'"><div class="fs-modal-dialog">';
925
926 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>';
927
928 windowStyle += '<div class="fs-modal-body"><div class="fs-modal-panel active">';
929 windowStyle += data.text;
930 windowStyle += '</div></div>';
931
932 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>';
933
934 windowStyle += '</div></div>';
935
936 jQuery("body").append(windowStyle);
937
938 jQuery(document).ready(data.afterInit);
939
940 jQuery("#buttonizer-window-"+ currentWindow + " .fs-close, #buttonizer-window-"+ currentWindow + " .fs-modal-footer button").click(function(e) {
941 e.preventDefault();
942 jQuery("#buttonizer-window-"+ currentWindow).fadeOut();
943
944 if(jQuery(this).hasClass("confirm")) {
945 data.onConfirm();
946 }
947
948 if(jQuery(this).hasClass("cancel")) {
949 data.onCancel();
950 }
951
952 data.onClose();
953 })
954 },
955
956 /*
957 * Font awesome searcher
958 */
959 faSettings: {
960 objects: 0,
961 currentSelect: {},
962 currentObject: {},
963 isGenerated: false,
964 isOpened: false
965 },
966 faInit: function() {
967 buttonizer.faSettings.isOpened = false;
968
969 if(buttonizer.faSettings.isGenerated == false && typeof fontAwesome != 'undefined') {
970 buttonizer.faSettings.isGenerated = true;
971 fontAwesome = jQuery.map(fontAwesome, function(value, index) {
972 return [index];
973 });
974 }
975
976 jQuery("body").click(function(e){
977 if(!jQuery(e.target).closest('.fontawesome-searcher').length && !jQuery(e.target).closest('.fontawesome-searcher-clicker').length){
978 jQuery(".fontawesome-searcher").hide();
979 buttonizer.faSettings.isOpened = false;
980 }
981 });
982
983 var typeTimeOut = setTimeout(function() { buttonizer.faSearchWord(''); }, 300);
984
985 var adminBody = jQuery("#wpbody");
986
987 jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").keyup(function() {
988 clearInterval(typeTimeOut);
989
990 typeTimeOut = setTimeout(function() { buttonizer.faSearchWord(jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").val()); }, 300);
991 });
992
993 jQuery("select.fa-chooser").each(function() {
994 buttonizer.faSettings.objects++;
995 var obj = jQuery(this);
996
997 obj.hide();
998 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>");
999
1000 var newObject = jQuery("#fa-chooser_" + buttonizer.faSettings.objects);
1001 newObject.click(function(e) {
1002 if(buttonizer.faSettings.isOpened == false || buttonizer.faSettings.currentSelect != obj) {
1003 jQuery(".fontawesome-searcher .fontawesome-searcher-searchbar input").focus();
1004 buttonizer.faSettings.isOpened = true;
1005
1006 // Update process
1007 jQuery(".fontawesome-searcher").css({
1008 "top": newObject.offset().top - 20 + newObject.height(),
1009 "left": newObject.offset().left - adminBody.offset().left,
1010 "width": newObject.width()
1011 }).show();
1012
1013 buttonizer.faSettings.currentSelect = obj;
1014 buttonizer.faSettings.currentObject = newObject;
1015 }else{
1016 buttonizer.faSettings.isOpened = false;
1017 jQuery(".fontawesome-searcher").hide();
1018 }
1019
1020 e.preventDefault();
1021 });
1022 });
1023 },
1024 faSearchWord: function(word) {
1025 var foundMatches = [];
1026
1027 for(var i = 0; i < fontAwesome.length; i++) {
1028 if(fontAwesome[i].indexOf(word) !== -1) {
1029 foundMatches.push(fontAwesome[i]);
1030 }
1031 };
1032
1033 if(foundMatches.length == 0) {
1034 jQuery(".fontawesome-searcher .no-matches-found").show();
1035 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").hide();
1036 }else{
1037 jQuery(".fontawesome-searcher .no-matches-found").hide();
1038 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").show();
1039
1040 var text = '<table><tr>';
1041 for(var b = 0; b < foundMatches.length; b++) {
1042 if(b % 4 == 0) {
1043 text += "</tr><tr>";
1044 }
1045
1046 text += '<td><a href="javascript:buttonizer.faChooseIcon(\''+ foundMatches[b] +'\')"><i class="fa '+ foundMatches[b] +'"></i></a></td>';
1047 };
1048
1049 text += '</tr>';
1050
1051 jQuery(".fontawesome-searcher .fontawesome-searcher-icons").html(text);
1052 }
1053 },
1054 faChooseIcon: function(icon) {
1055 buttonizer.faSettings.currentSelect.val(icon).change();
1056 buttonizer.faSettings.currentObject.html("Icon: "+ icon +" &nbsp; <i class=\"fa "+ icon +"\"></i>");
1057 jQuery("#" + buttonizer.faSettings.currentObject.attr("id")).click();
1058 },
1059
1060 /* intro */
1061 initIntro: function() {
1062 var openedDesign = false;
1063
1064 if(RegExp("welcome-splash", "gi").test(document.location.href)) {
1065 buttonizer.createWindow({
1066 title: 'Welcome to Buttonizer',
1067 text:
1068 '<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;" />' +
1069 '<p>We are pleased to welcome you to Buttonizer!</p>' +
1070 '<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>' +
1071 '<p>Would you like to take the tour?</p>',
1072
1073 confirmText: 'Yes please <i class="fa fa-chevron-right" style="margin-left: 10px; vertical-align: middle;" aria-hidden="true"></i>',
1074 canCancel: true,
1075 cancelText: 'No thanks, I know how it works',
1076
1077 onConfirm: function() {
1078 document.location.href = '?page=Buttonizer&tab=buttonizer_general_settings#buttonizer-tour';
1079 },
1080
1081 onCancel: function() {
1082 document.location.href = '?page=Buttonizer';
1083 }
1084 });
1085 }
1086
1087 // Check if we need to send the user to the next page
1088 if(RegExp("buttonizer_tour_ready=toStep2", "gi").test(document.cookie)) {
1089 var d = new Date();
1090 d.setTime(d.getTime() - 10);
1091 document.cookie = "buttonizer_tour_ready=toStep2;expires="+ d.toUTCString() + ";path=/";
1092
1093 document.location.href = './admin.php?page=Buttonizer&tab=buttonizer_buttons#buttonizer-tour';
1094 return;
1095 }
1096
1097 jQuery("#take-the-tour").click(function() {
1098 setTimeout(function() {
1099 if (RegExp("buttonizer_general_settings", "gi").test(window.location.href)) {
1100 buttonizer.initIntro();
1101 }
1102 }, 250);
1103 });
1104
1105 if (RegExp("buttonizer-tour", "gi").test(window.location.href)) {
1106
1107 // Page one: General settings
1108 if(document.location.href.indexOf('buttonizer_general_settings') != -1) {
1109 var buttonizer_tour_1 = buttonizer.startTour('design');
1110 buttonizer.tabNavigate('design');
1111
1112 buttonizer_tour_1.onbeforechange(function(targetElement) {
1113 if (buttonizer_tour_1._currentStep == 5 && buttonizer_tour_1._direction == "forward") {
1114 buttonizer.tabNavigate('placing');
1115 openedDesign = true;
1116 }else if(buttonizer_tour_1._currentStep == 4 && buttonizer_tour_1._direction == "backward") {
1117 buttonizer.tabNavigate('design');
1118
1119 openedDesign = false;
1120 }
1121 }).oncomplete(function() {
1122 document.querySelector('.button.savebutton').click();
1123 }).setOptions({
1124 doneLabel: 'Save &rarr;'
1125 }).start();
1126
1127 jQuery("#tab_container_placing").click(function() {
1128 buttonizer_tour_1.nextStep();
1129 });
1130
1131 jQuery('.button.savebutton').click(function() {
1132 var d = new Date();
1133 d.setTime(d.getTime() + (2*24*60*60*1000));
1134 document.cookie = "buttonizer_tour_ready=toStep2;expires="+ d.toUTCString() + ";path=/";
1135 });
1136 }
1137
1138 if(document.location.href.indexOf('buttonizer_buttons') != -1) {
1139 var buttonizer_tour_2 = buttonizer.startTour('buttons');
1140 var buttonCreated = true;
1141
1142 buttonizer_tour_2.onchange(function(targetElement) {
1143 if(buttonizer_tour_2._currentStep == 4) {
1144 jQuery("#new-button").click();
1145 }
1146 }).setOptions({
1147 doneLabel: 'Next',
1148 hidePrev: true,
1149 hideNext: true,
1150 }).start();
1151
1152 // Create button
1153 var buttonCreated = false;
1154 jQuery("#new-button").click(function() {
1155 if(buttonCreated) {
1156 alert("Please finish the tour first.")
1157 return;
1158 }
1159 buttonCreated = true;
1160 buttonizer.addRow();
1161
1162 setTimeout(function() {
1163 var id = jQuery("#button-rows .button-row.opened").attr("id");
1164 buttonizer_tour_2.exit(true);
1165
1166 var buttonizer_tour_3 = buttonizer.startTour('edit-button', id);
1167
1168 buttonizer_tour_3.onchange(function(targetElement) {
1169 if(buttonizer_tour_3._currentStep == 1) {
1170 // buttonizer_tour_3.nextStep();
1171 }
1172 }).setOptions({
1173 doneLabel: 'Finish tour',
1174 hidePrev: true,
1175 hideNext: true,
1176 }).start();
1177 }, 400);
1178 });
1179 }
1180 }
1181 },
1182
1183 startTour: function(type, newButtonId) {
1184 var intro = introJs();
1185
1186 if(!newButtonId) {
1187 newButtonId = false;
1188 }
1189
1190 intro.setOption('tooltipPosition', 'top');
1191 intro.setOptions({
1192 showBullets: false,
1193 exitOnOverlayClick: false,
1194 skipLabel: 'Exit tour'
1195 });
1196
1197 if(type == 'design') {
1198 intro.setOptions({
1199 steps: [
1200 {
1201 intro: "Let's start the tour through Buttonizer. You can skip this at any moment."
1202 },
1203 {
1204 element: document.querySelector('.intro-styling'),
1205 intro: "Set the default colors of The Buttonizer. We recommend using the colors of your corporate identity.",
1206 position: 'top'
1207 },
1208 {
1209 element: document.querySelector('.intro-icon'),
1210 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.",
1211 position: 'top'
1212 },
1213 {
1214 element: document.querySelector('.intro-label'),
1215 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'.",
1216 position: 'top'
1217 },
1218 {
1219 element: document.querySelector('#tab_container_placing'),
1220 intro: "Click here to go to the position and animation page",
1221 position: 'right'
1222 },
1223 {
1224 element: document.querySelector('.intro-position'),
1225 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).",
1226 position: 'top'
1227 },
1228 {
1229 element: document.querySelector('.intro-animaton'),
1230 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.",
1231 position: 'top'
1232 },
1233 {
1234 element: document.querySelector('.intro-attention'),
1235 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.",
1236 position: 'top'
1237 },
1238 {
1239 element: document.querySelector('.button.savebutton'),
1240 intro: "For now, we are finished here. Click the save button.",
1241 position: 'left'
1242 }
1243 ]});
1244 }else if(type == 'buttons') {
1245 intro.setOptions({
1246 steps: [
1247 {
1248 element: document.querySelector('#new-button'),
1249 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'.",
1250 position: 'left'
1251 },
1252 {
1253 element: document.querySelector('#new-button'),
1254 intro: "Waiting on you for clicking the button at the right... It says '+ New button'",
1255 position: 'left'
1256 },
1257 {
1258 element: document.querySelector('#new-button'),
1259 intro: "Hello? Please click that button...",
1260 position: 'left'
1261 },
1262 {
1263 element: document.querySelector('#new-button'),
1264 intro: "Here, on the right... If you won't click it, I will click it >:-)",
1265 position: 'left'
1266 },
1267 {
1268 element: document.querySelector('#new-button'),
1269 intro: "Okay. Nothing to say.",
1270 position: 'bottom'
1271 },
1272 ]});
1273 }
1274 else if(type == 'edit-button') {
1275 intro.setOptions({
1276 steps: [
1277 {
1278 element: document.querySelector('#' + newButtonId + " .row-info"),
1279 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.",
1280 position: 'bottom',
1281 disableInteraction: true
1282 },
1283 {
1284 element: document.querySelector('#' + newButtonId + " .row-info .row-title"),
1285 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.",
1286 position: 'right',
1287 disableInteraction: true
1288 },
1289 {
1290 element: document.querySelector('#' + newButtonId + " .row-info .desktop-button"),
1291 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.",
1292 position: 'left',
1293 disableInteraction: true
1294 },
1295 {
1296 element: document.querySelector('#' + newButtonId + " .row-info .mobile-button"),
1297 intro: "There is one for mobile too.",
1298 position: 'left',
1299 disableInteraction: true
1300 },
1301 {
1302 element: document.querySelector('#' + newButtonId + " .button_title"),
1303 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.",
1304 position: 'bottom'
1305 },
1306 {
1307 element: document.querySelector('#' + newButtonId + " .button-pdr"),
1308 intro: "Choose an appropriate icon or upload your own. Type 'phone' and select the phone icon to give it a phone icon.",
1309 position: 'bottom'
1310 },
1311 {
1312 element: document.querySelector('#' + newButtonId + " .button_textfield"),
1313 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.",
1314 position: 'bottom'
1315 },
1316 {
1317 element: document.querySelector('#' + newButtonId + " .button-action"),
1318 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.",
1319 position: 'bottom'
1320 },
1321 {
1322 element: document.querySelector('#' + newButtonId + " #button_category"),
1323 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.",
1324 position: 'bottom'
1325 },
1326 {
1327 element: document.querySelector('#' + newButtonId + " .show-mobile-btn"),
1328 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'. ",
1329 position: 'top'
1330 },
1331 {
1332 element: document.querySelector('#' + newButtonId + " .show-desktop-btn"),
1333 intro: "Here you can enable it on your desktop",
1334 position: 'bottom'
1335 },
1336 {
1337 element: document.querySelector('#' + newButtonId + " .must-save-button"),
1338 intro: "This is a quick save button. If your button has no changes to it, it'll say 'live'",
1339 position: 'left',
1340 disableInteraction: true
1341 },
1342 {
1343 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.",
1344 },
1345 {
1346 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> ",
1347 },
1348 {
1349 element: document.querySelector('h2 .savebutton'),
1350 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.",
1351 position: 'left',
1352 },
1353 ]});
1354 }
1355
1356 return intro;
1357 },
1358 stickyId: 0,
1359 sticky: function(type, message) {
1360 buttonizer.stickyId++;
1361
1362 var elemDiv = document.createElement('div');
1363 elemDiv.className = 'buttonizer-sticky '+ type +' sticky-'+ buttonizer.stickyId;
1364 elemDiv.innerHTML = message;
1365 document.body.appendChild(elemDiv);
1366
1367
1368 // document.body.innerHTML += '<div class="buttonizer-sticky '+ type +' sticky-'+ buttonizer.stickyId +'">'+ message +'</div>';
1369
1370 setTimeout(function() {
1371 var element = document.querySelector(".sticky-" + buttonizer.stickyId);
1372 var opacity = 1;
1373
1374 var fadeOut = setInterval(function() {
1375 opacity = opacity - 0.05;
1376 element.style.opacity = opacity;
1377
1378 if(opacity <= 0) {
1379 clearInterval(fadeOut);
1380 }
1381 }, 20);
1382 }, 4000);
1383 }
1384 };
1385
1386 function checkSelection()
1387 {
1388 var inputError = false;
1389 var elements = document.querySelectorAll(".socialSharingCheckbox");
1390 var warning = document.querySelectorAll(".warning_text");
1391 var selected = 0;
1392 for(var i = 0; i < elements.length; i++){
1393 console.log(elements);
1394 if(elements[i].checked){
1395 selected++;
1396 }
1397 }
1398 if(selected < 4){
1399 for(var d = 0; d < warning.length; d++){
1400 warning[d].setAttribute("hidden", "hidden");
1401 }
1402 }else if(selected > 3){
1403 for(var o = 0; o < warning.length; o++){
1404 warning[o].removeAttribute("hidden");
1405 elements.setAttribute("disabled", "disabled");
1406 }
1407
1408 }
1409
1410
1411 }
1412
1413 document.addEventListener('DOMContentLoaded', buttonizer.init, false);
1414
1415 window.onbeforeunload = function(){
1416 if(document.location.href.indexOf('page=Buttonizer') === -1) {
1417 return;
1418 }
1419 if(buttonizer.settings.hasChanges && !buttonizer.settings.clickedButton) {
1420 return 'You have unsaved data. Are you sure you want to leave?';
1421 }
1422 };
1423