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

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