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

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