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

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