| 1 |
// Throughout the admin I chose to use slow animations to make it clear that stuff is being hidden or shown depending on settings. |
| 2 |
(function ($, pf_config) { |
| 3 |
$(document).ready(function() { |
| 4 |
initAll(); |
| 5 |
}); |
| 6 |
|
| 7 |
$(window).on('load', function() { |
| 8 |
// load the tab from where the settings was saved. |
| 9 |
$('#pf-tabs .pf-bu-tabs li[data-id="' + $('#current-tab').val() + '"]').trigger('click'); |
| 10 |
}); |
| 11 |
|
| 12 |
function initAll() { |
| 13 |
$('#pf-tabs').tabs({ |
| 14 |
active: $('#current-tab').val(), |
| 15 |
activate: function( event, ui ) { |
| 16 |
$(ui.oldTab).removeClass('pf-bu-is-active'); |
| 17 |
$(ui.newTab).addClass('pf-bu-is-active'); |
| 18 |
|
| 19 |
// set the current tab so that when the page is reloaded after save |
| 20 |
// we know which tab to activate |
| 21 |
$('#current-tab').val($(ui.newTab).attr('data-id')); |
| 22 |
} |
| 23 |
}); |
| 24 |
|
| 25 |
$('.pf-accordion').accordion({ |
| 26 |
collapsible: true, |
| 27 |
active: false |
| 28 |
}); |
| 29 |
|
| 30 |
var clipboard1 = new ClipboardJS('.pf-clipboard'); |
| 31 |
clipboard1.on('success', function(e) { |
| 32 |
// no message needs to be shown. |
| 33 |
}); |
| 34 |
|
| 35 |
initCustomButton(); |
| 36 |
initMisc(); |
| 37 |
|
| 38 |
initMediaUpload(); |
| 39 |
|
| 40 |
initCategories(); |
| 41 |
|
| 42 |
initCustomCssSelectors(); |
| 43 |
|
| 44 |
initPositioning(); |
| 45 |
} |
| 46 |
|
| 47 |
function initPositioning() { |
| 48 |
// on load |
| 49 |
togglePositioning($('#pf_button_alignment_method')); |
| 50 |
|
| 51 |
// on change |
| 52 |
$('#pf_button_alignment_method').on('change', function(e){ |
| 53 |
togglePositioning($(this)); |
| 54 |
}); |
| 55 |
} |
| 56 |
|
| 57 |
function togglePositioning(dropdown) { |
| 58 |
var button_alignment_method = $(dropdown).val(); |
| 59 |
switch(button_alignment_method) { |
| 60 |
case 'default': |
| 61 |
$('#pf-content-position').show(); |
| 62 |
$('#pf-content-position-css').hide(); |
| 63 |
break; |
| 64 |
case 'css': |
| 65 |
$('#pf-content-position').hide(); |
| 66 |
$('#pf-content-position-css').show(); |
| 67 |
break; |
| 68 |
} |
| 69 |
} |
| 70 |
|
| 71 |
function initCategories() { |
| 72 |
$('.pf-select2').select2(); |
| 73 |
} |
| 74 |
|
| 75 |
function initMediaUpload() { |
| 76 |
$('body').on('click', '.pf_upload_image_button', function(e){ |
| 77 |
var that = $(this); |
| 78 |
var hidden = $(that).attr('data-pf-element'); |
| 79 |
e.preventDefault(); |
| 80 |
|
| 81 |
var button = $(this), |
| 82 |
pf_uploader = wp.media({ |
| 83 |
title: pf_config.i10n.upload_window_title, |
| 84 |
library : { |
| 85 |
uploadedTo : wp.media.view.settings.post.id, |
| 86 |
type : 'image' |
| 87 |
}, |
| 88 |
button: { |
| 89 |
text: pf_config.i10n.upload_window_button_title |
| 90 |
}, |
| 91 |
multiple: false |
| 92 |
}).on('select', function() { |
| 93 |
var attachment = pf_uploader.state().get('selection').first().toJSON(); |
| 94 |
// `hidden` is DOM text (the data-pf-element attribute read above). |
| 95 |
// .find() parses it strictly as a selector; $() would treat a value |
| 96 |
// starting with '<' as HTML and build elements from it instead. |
| 97 |
// The image is likewise built and given src as an attribute rather |
| 98 |
// than concatenated into an HTML string. |
| 99 |
$(document).find(hidden).val(attachment.url).trigger('change'); |
| 100 |
$(document).find(hidden + '_label') |
| 101 |
.empty().append($('<img>').attr('src', attachment.url)); |
| 102 |
}) |
| 103 |
.open(); |
| 104 |
}); |
| 105 |
} |
| 106 |
|
| 107 |
function initCustomButton() { |
| 108 |
if(! $('#custom-btn').prop('checked')){ |
| 109 |
$('div.custom-btn').addClass('disabled'); |
| 110 |
} |
| 111 |
$('body').on('click', function(e) { |
| 112 |
if($('#custom-btn').prop('checked')){ |
| 113 |
$('div.custom-btn').removeClass('disabled'); |
| 114 |
}else{ |
| 115 |
$('div.custom-btn').addClass('disabled'); |
| 116 |
} |
| 117 |
}); |
| 118 |
} |
| 119 |
|
| 120 |
function initMisc() { |
| 121 |
$('.pf-color-picker').wpColorPicker({ |
| 122 |
change: function (event, ui) { |
| 123 |
var hex = ui.color.toString(); |
| 124 |
$('#text_color').val('#' + hex); |
| 125 |
$('#printfriendly-text2').css('color','#' + hex); |
| 126 |
} |
| 127 |
}); |
| 128 |
|
| 129 |
$('#text_size').change(function(){ |
| 130 |
size = $('#text_size').val(); |
| 131 |
$('#printfriendly-text2').css('font-size',parseInt(size)); |
| 132 |
}).change(); |
| 133 |
|
| 134 |
$('#css input').change(function() { |
| 135 |
if($(this).is(':checked')) { |
| 136 |
$(this).val('off'); |
| 137 |
$('#margin, #txt-color, #txt-size').hide('slow'); |
| 138 |
pf_reset_style(); |
| 139 |
} else { |
| 140 |
$(this).val('on'); |
| 141 |
$('#margin, #txt-color, #txt-size').show('slow'); |
| 142 |
pf_apply_style(); |
| 143 |
} |
| 144 |
}).change(); |
| 145 |
|
| 146 |
$('#custom_text').on('change keyup', function(){ |
| 147 |
custom_text_change(); |
| 148 |
}); |
| 149 |
|
| 150 |
$("[name='printfriendly_option[custom_button_text]']").change(function(){ |
| 151 |
custom_text_change(); |
| 152 |
}); |
| 153 |
|
| 154 |
initialize_preview('#custom_image', '#pf-custom-button'); |
| 155 |
initialize_preview("[name='printfriendly_option[custom_button_icon]']", '#pf-custom-button'); |
| 156 |
initialize_preview('#upload-an-image', '#pf-image'); |
| 157 |
|
| 158 |
$('#custom_image').on('focus', function() { |
| 159 |
$('#custom-image').prop('checked', true); |
| 160 |
$('#pf-custom-button-error').show(); |
| 161 |
}); |
| 162 |
$('#button-style input.radio').on('change', function() { |
| 163 |
if($('#custom-image').is(':checked')) { |
| 164 |
$('#pf-custom-button-error').show(); |
| 165 |
} else { |
| 166 |
$('#pf-custom-button-error').hide(); |
| 167 |
} |
| 168 |
}).change(); |
| 169 |
|
| 170 |
$('#pf-logo').on('change', function() { |
| 171 |
if($(this).val() == 'favicon') { |
| 172 |
$('.custom-logo, #image-preview').hide(); |
| 173 |
} else { |
| 174 |
$('.custom-logo').css('display', 'inline-block'); |
| 175 |
$('#image-preview').show(); |
| 176 |
} |
| 177 |
}).change(); |
| 178 |
|
| 179 |
$('#website_protocol').on('change', function() { |
| 180 |
if($(this).val() == 'https') { |
| 181 |
$('#https-beta-registration').show('slow'); |
| 182 |
} else { |
| 183 |
$('#https-beta-registration').hide('slow'); |
| 184 |
} |
| 185 |
}).change(); |
| 186 |
|
| 187 |
function pf_reset_style() { |
| 188 |
$('#printfriendly-text2').css('font-size',14); |
| 189 |
$('#printfriendly-text2').css('color','#000000'); |
| 190 |
} |
| 191 |
|
| 192 |
function pf_apply_style() { |
| 193 |
$('#printfriendly-text2').css('color', '#' + $('#text_color').val() ); |
| 194 |
size = $('#text_size').val(); |
| 195 |
$('#printfriendly-text2').css('font-size',parseInt(size)); |
| 196 |
} |
| 197 |
|
| 198 |
// postboxes setup |
| 199 |
$('.if-js-closed').removeClass('if-js-closed').addClass('closed'); |
| 200 |
|
| 201 |
// categories checkboxes |
| 202 |
var category_ids = $('#category_ids').val(); |
| 203 |
|
| 204 |
if( typeof category_ids !== 'undefined' ) { |
| 205 |
category_ids = category_ids.split(','); |
| 206 |
|
| 207 |
if(category_ids[0] == 'all') { |
| 208 |
var ids = []; |
| 209 |
$('#categorydiv :checkbox').each(function() { |
| 210 |
$(this).prop('checked', true); |
| 211 |
}); |
| 212 |
$('#category-all :checkbox').each(function() { |
| 213 |
ids.push($(this).val()); |
| 214 |
}); |
| 215 |
// for older wp versions we do not have per category settings so |
| 216 |
// ids array will be empty and in that case we shouldn't replace 'all' |
| 217 |
if(ids.length != 0) { |
| 218 |
$('#category_ids').val(ids.join(',')); |
| 219 |
} |
| 220 |
} else { |
| 221 |
|
| 222 |
$('#categorydiv :checkbox').each(function() { |
| 223 |
if($.inArray($(this).val(), category_ids) != -1) { |
| 224 |
$(this).prop('checked', true); |
| 225 |
} |
| 226 |
}); |
| 227 |
} |
| 228 |
} |
| 229 |
|
| 230 |
$('#categorydiv :checkbox').click(function() { |
| 231 |
var values = $('#category_ids').val(); |
| 232 |
var ids = []; |
| 233 |
if(values != '') |
| 234 |
ids = values.split(','); |
| 235 |
|
| 236 |
var id = $(this).val(); |
| 237 |
|
| 238 |
if($(this).is(':checked')) |
| 239 |
ids.push(id); |
| 240 |
else { |
| 241 |
ids = $.grep(ids, function(value) { |
| 242 |
return value != id; |
| 243 |
}); |
| 244 |
} |
| 245 |
|
| 246 |
$('#category_ids').val(ids.join(',')); |
| 247 |
}); |
| 248 |
|
| 249 |
$('#custom_image').click(function() { |
| 250 |
$("#custom-image-rb").prop('checked', true); |
| 251 |
$("#custom-image-rb").trigger("change"); |
| 252 |
}); |
| 253 |
|
| 254 |
$('#custom_text').click(function() { |
| 255 |
$("#custom-text-rb").prop('checked', true); |
| 256 |
$("#custom-text-rb").trigger("change"); |
| 257 |
}); |
| 258 |
|
| 259 |
$('.pf-show-element').on('click', function(e){ |
| 260 |
e.preventDefault(); |
| 261 |
var that = $(this); |
| 262 |
that.hide('slow'); |
| 263 |
// .find() parses the value strictly as a selector, so a value like |
| 264 |
// '<img onerror=...>' can never be built into an element the way |
| 265 |
// jQuery's $() would. Preferred over document.querySelectorAll, |
| 266 |
// which would reject jQuery's own pseudo-selectors (:visible, :eq). |
| 267 |
var target = that.attr('data-element'); |
| 268 |
if (target) { |
| 269 |
try { $(document).find(target).show('slow'); } |
| 270 |
catch (e) { /* not a valid selector; nothing to show */ } |
| 271 |
} |
| 272 |
}); |
| 273 |
|
| 274 |
} |
| 275 |
|
| 276 |
function custom_text_change(){ |
| 277 |
// remove html tags |
| 278 |
var text = $('#custom_text').val().replace(/(<([^>]+)>)/gi, ""); |
| 279 |
$('#buttongroup3 span:not(.printandpdf)').text( text ); |
| 280 |
var newText = $('#custom-text-no').prop('checked') ? '' : text; |
| 281 |
// .text(), not .html(): the tag-strip on line above is a regex and |
| 282 |
// regexes do not sanitise HTML (an unclosed '<img src=x onerror=...' |
| 283 |
// survives it). Nothing here is meant to render as markup. |
| 284 |
$('#printfriendly-text2').text( newText ); |
| 285 |
$('#printfriendly-text2').css('color','#' + $('#text_color').val()); |
| 286 |
} |
| 287 |
|
| 288 |
function initialize_preview(urlInputSelector, previewSelector) { |
| 289 |
var el = $(urlInputSelector); |
| 290 |
var imgUrl = $.trim(el.val()); |
| 291 |
var preview = $(previewSelector + '-preview'); |
| 292 |
var error = $(previewSelector + '-error'); |
| 293 |
|
| 294 |
// set the dimensions of the image |
| 295 |
if(urlInputSelector === '#custom_image'){ |
| 296 |
$('#custom-img-width, #custom-img-height').on('change', function(ewh){ |
| 297 |
var _width = $('#custom-img-width').val(); |
| 298 |
var _height = $('#custom-img-height').val(); |
| 299 |
var _img = preview.find('img'); |
| 300 |
_img.css('width', ''); |
| 301 |
_img.css('height', ''); |
| 302 |
if(_img.length > 0 && parseInt(_width) > 0){ |
| 303 |
_img.css('width', _width + 'px'); |
| 304 |
} |
| 305 |
if(_img.length > 0 && parseInt(_height) > 0){ |
| 306 |
_img.css('height', _height + 'px'); |
| 307 |
} |
| 308 |
}); |
| 309 |
} |
| 310 |
|
| 311 |
el.on('input paste change keyup', function() { |
| 312 |
setTimeout(function() { |
| 313 |
// ie shows error if we try to merge the two below into a single statement |
| 314 |
var img = $('<img/>'); |
| 315 |
var customButtonIcon = $("[name='printfriendly_option[custom_button_icon]']:checked").val(); |
| 316 |
|
| 317 |
if (customButtonIcon === 'custom-image') { |
| 318 |
imgUrl = $('#custom_image').val(); |
| 319 |
} else if (customButtonIcon === 'no-image') { |
| 320 |
imgUrl = ''; |
| 321 |
} else { |
| 322 |
imgUrl = customButtonIcon; |
| 323 |
} |
| 324 |
|
| 325 |
preview.html(''); |
| 326 |
error.html(''); |
| 327 |
if(imgUrl != '') { |
| 328 |
img.on('load', function(){ |
| 329 |
preview.html('').append(img); |
| 330 |
}); |
| 331 |
img.on('error', function(){ |
| 332 |
error.html('<div class="error settings-error"><p><strong>' + pf_config.i10n.invalid_image_url + '</strong></p></div>'); |
| 333 |
}); |
| 334 |
img.attr('src',imgUrl); |
| 335 |
} |
| 336 |
}, 100); |
| 337 |
}); |
| 338 |
} |
| 339 |
|
| 340 |
function initCustomCssSelectors() { |
| 341 |
$('.pf-algo-usage-' + $("[name='printfriendly_option[pf_algo]']:checked").val()).show(); |
| 342 |
|
| 343 |
$("[name='printfriendly_option[pf_algo]']").on('click', function(e){ |
| 344 |
$('.pf-algo-usage').hide(); |
| 345 |
$('.pf-algo-usage-' + $(this).val()).show(); |
| 346 |
}); |
| 347 |
|
| 348 |
$('.pf-algo-usage-css input[type="text"], input[name="printfriendly_option[pf_algo_css_content]"]').on('keyup change click', function(e){ |
| 349 |
$selectors = ''; |
| 350 |
$('.pf-algo-usage-css input[type="text"]').each(function(index, element){ |
| 351 |
if($(element).val().trim() !== ''){ |
| 352 |
$selectors += $(element).attr('data-selector-name') + '=' + $(element).val() + ';'; |
| 353 |
} |
| 354 |
}); |
| 355 |
|
| 356 |
$fallback = $('input[name="printfriendly_option[pf_algo_css_content]"]:checked').val(); |
| 357 |
$template = $('.pf-algo-usage-css').attr('data-tag-template'); |
| 358 |
$template = $template.replace('#1', $selectors).replace('#2', $fallback); |
| 359 |
var encodedStr = $template.replace(/[\u00A0-\u9999<>\&]/g, function(i) { |
| 360 |
return '&#'+i.charCodeAt(0)+';'; |
| 361 |
}); |
| 362 |
$('.pf-custom-css-code').html(encodedStr); |
| 363 |
$('.pf-custom-css-code-snippet').attr('data-clipboard-text', $template); |
| 364 |
}); |
| 365 |
} |
| 366 |
|
| 367 |
})(jQuery, pf_config); |
| 368 |
|
