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