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