settings.js
468 lines
| 1 | function embedPressRemoveURLParameter(url, parameter) { |
| 2 | //prefer to use l.search if you have a location/link object |
| 3 | let urlparts = url.split('?'); |
| 4 | if (urlparts.length >= 2) { |
| 5 | |
| 6 | let prefix = encodeURIComponent(parameter) + '='; |
| 7 | let pars = urlparts[1].split(/[&;]/g); |
| 8 | |
| 9 | //reverse iteration as may be destructive |
| 10 | for (var i = pars.length; i-- > 0;) { |
| 11 | //idiom for string.startsWith |
| 12 | if (pars[i].lastIndexOf(prefix, 0) !== -1) { |
| 13 | pars.splice(i, 1); |
| 14 | } |
| 15 | } |
| 16 | |
| 17 | return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ''); |
| 18 | } |
| 19 | return url; |
| 20 | } |
| 21 | jQuery(document).ready( function($){ |
| 22 | $('.ep-color-picker').wpColorPicker(); |
| 23 | let formDataChanged = false; |
| 24 | let $settingsForm = $('.embedpress-settings-form'); |
| 25 | let _$Forminputs = $('.embedpress-settings-form :input:not([type=submit], [disabled], button, [readonly])'); |
| 26 | _$Forminputs.on('change', function(e) { |
| 27 | //':input' selector get all form fields even textarea, input, or select |
| 28 | formDataChanged = false; |
| 29 | let fields_to_avoids = ['ep_settings_nonce', '_wp_http_referer', 'g_loading_animation', 'submit']; |
| 30 | let types_to_avoid = ['button']; |
| 31 | let yes_no_type_checkbox_radios = ['yt_branding', 'embedpress_document_powered_by', 'embedpress_pro_twitch_autoplay', 'embedpress_pro_twitch_chat']; |
| 32 | let radio_names = []; |
| 33 | for (var i = 0; i < _$Forminputs.length; i++) { |
| 34 | let ip = _$Forminputs[i]; |
| 35 | let input_type = ip.type; |
| 36 | let input_name = ip.name; |
| 37 | if (!fields_to_avoids.includes(input_name) && !types_to_avoid.includes(input_type)){ |
| 38 | let $e_input = $(ip); |
| 39 | if ('radio' === input_type){ |
| 40 | if ( !radio_names.includes(input_name)){ |
| 41 | |
| 42 | let $checked_radio = $(`input[name="${input_name}"]:checked`); |
| 43 | let $input__radio_wrap = $checked_radio.parents('.input__radio_wrap'); |
| 44 | let checked_radio_value = $checked_radio.val(); |
| 45 | $input__radio_wrap.data('value', checked_radio_value); |
| 46 | |
| 47 | if ($input__radio_wrap.data('value') != $input__radio_wrap.data('default')) { |
| 48 | formDataChanged = true; |
| 49 | //break; |
| 50 | } |
| 51 | radio_names.push(input_name); |
| 52 | } |
| 53 | } else if ('checkbox' === input_type) { |
| 54 | if ($e_input.is(":checked")){ |
| 55 | $e_input.data('value', $e_input.val()); |
| 56 | }else{ |
| 57 | if (yes_no_type_checkbox_radios.includes(input_name)){ |
| 58 | $e_input.data('value', 'no'); |
| 59 | }else{ |
| 60 | $e_input.data('value', ''); |
| 61 | } |
| 62 | } |
| 63 | if ($e_input.data('value') != $e_input.data('default')) { |
| 64 | formDataChanged = true; |
| 65 | } |
| 66 | } else { |
| 67 | if ($e_input.val() != $e_input.data('default')) { |
| 68 | formDataChanged = true; |
| 69 | //break; |
| 70 | } |
| 71 | } |
| 72 | |
| 73 | } |
| 74 | |
| 75 | } |
| 76 | if (formDataChanged === true) { |
| 77 | $settingsForm.find('.embedpress-submit-btn').addClass('ep-settings-form-changed'); |
| 78 | } else { |
| 79 | $settingsForm.find('.embedpress-submit-btn').removeClass('ep-settings-form-changed'); |
| 80 | } |
| 81 | }); |
| 82 | |
| 83 | window.onbeforeunload = function() { |
| 84 | if (formDataChanged === true) { |
| 85 | return "You have unsaved data. Are you sure to leave without saving them?"; |
| 86 | } else { |
| 87 | return; |
| 88 | } |
| 89 | }; |
| 90 | |
| 91 | // Sidebar Menu Toggle |
| 92 | $('.sidebar__dropdown .sidebar__link--toggler').on('click', function(e) { |
| 93 | e.preventDefault(); |
| 94 | let $this = $(this); |
| 95 | let $sidebarItem = $('.sidebar__item'); |
| 96 | $sidebarItem.removeClass('show'); |
| 97 | $this.parent().addClass('show'); |
| 98 | if($this.siblings('.dropdown__menu').hasClass('show')){ |
| 99 | $this.siblings('.dropdown__menu').removeClass('show'); |
| 100 | $this.siblings('.dropdown__menu').slideUp(); |
| 101 | $sidebarItem.removeClass('show'); |
| 102 | }else{ |
| 103 | $('.dropdown__menu.show').slideUp().removeClass('show'); |
| 104 | $this.siblings('.dropdown__menu').addClass('show'); |
| 105 | // $('.sidebar__menu .dropdown__menu.show').slideUp(); |
| 106 | $this.siblings('.dropdown__menu').slideDown(); |
| 107 | } |
| 108 | }) |
| 109 | |
| 110 | // Sidebar Toggle |
| 111 | $('.sidebar__toggler').on('click', function(e) { |
| 112 | e.preventDefault(); |
| 113 | $(this).siblings('.sidebar__menu').slideToggle(); |
| 114 | }) |
| 115 | |
| 116 | // Logo Remove |
| 117 | $('.preview__remove').on('click', function(e) { |
| 118 | e.preventDefault(); |
| 119 | |
| 120 | let $logo_remove_btn = $(this); |
| 121 | let $main_adjustment_wrap = $logo_remove_btn.parents('.logo__adjust__wrap'); |
| 122 | $main_adjustment_wrap.find('.preview__logo').attr('src', ''); |
| 123 | $main_adjustment_wrap.find(".logo__upload__preview").hide(); |
| 124 | $main_adjustment_wrap.find(".logo__upload").show(); |
| 125 | $main_adjustment_wrap.find(".instant__preview__img").attr('src', ''); |
| 126 | $main_adjustment_wrap.find('.preview__logo__input').val(''); |
| 127 | $main_adjustment_wrap.find('.preview__logo__input_id').val(''); |
| 128 | $settingsForm.find('.embedpress-submit-btn').addClass('ep-settings-form-changed'); |
| 129 | formDataChanged = true; |
| 130 | }) |
| 131 | |
| 132 | // Logo Controller |
| 133 | let rangeSlider = function(){ |
| 134 | let $slider = $('.logo__adjust'); |
| 135 | $slider.each(function(){ |
| 136 | let $es = $(this), |
| 137 | previewImg = $es.find('.preview__logo'), |
| 138 | opRange = $es.find('.opacity__range'), |
| 139 | xRange = $es.find('.x__range'), |
| 140 | yRange = $es.find('.y__range'), |
| 141 | $range__value = $es.find('.range__value'); |
| 142 | $range__value.each(function(){ |
| 143 | $(this).html($(this).prev().attr('value')); |
| 144 | }); |
| 145 | |
| 146 | opRange.on('input', function(){ |
| 147 | $(this).next($range__value).val(this.value); |
| 148 | previewImg.css('opacity', this.value / 100); |
| 149 | }); |
| 150 | xRange.on('input', function(){ |
| 151 | $(this).next($range__value).val(this.value); |
| 152 | previewImg.css('right', this.value + "%"); |
| 153 | }); |
| 154 | yRange.on('input', function(){ |
| 155 | $(this).next($range__value).val(this.value); |
| 156 | previewImg.css('bottom', this.value + "%"); |
| 157 | }); |
| 158 | }); |
| 159 | |
| 160 | |
| 161 | |
| 162 | }; |
| 163 | |
| 164 | rangeSlider(); |
| 165 | |
| 166 | $('.template__wrapper .input__switch .logo__adjust__toggler').on('click', function(e) { |
| 167 | e.preventDefault(); |
| 168 | $('.logo__adjust__wrap').not($(this).parents('.form__control__wrap').children('.logo__adjust__wrap')).slideUp(); |
| 169 | $('.template__wrapper .input__switch .logo__adjust__toggler').not($(this)).removeClass('show'); |
| 170 | $(this).toggleClass('show'); |
| 171 | $(this).parents('.form__control__wrap').children('.logo__adjust__wrap').slideToggle(); |
| 172 | }) |
| 173 | |
| 174 | $('.form__control__wrap .input__switch input').on('click', function() { |
| 175 | $(this).siblings('.logo__adjust__toggler.show').trigger('click'); |
| 176 | }) |
| 177 | |
| 178 | let proFeatureAlert = function() { |
| 179 | |
| 180 | $(document).on('click', '.isPro', function () { |
| 181 | $(this).siblings('.pro__alert__wrap').fadeIn(); |
| 182 | }); |
| 183 | |
| 184 | $(document).on('click', '.pro__alert__card .button', function (e) { |
| 185 | e.preventDefault(); |
| 186 | $(this).parents('.pro__alert__wrap').fadeOut(); |
| 187 | }); |
| 188 | } |
| 189 | |
| 190 | proFeatureAlert(); |
| 191 | |
| 192 | // custom logo upload for youtube |
| 193 | $(document).on('click', '.logo__upload', function(e){ |
| 194 | e.preventDefault(); |
| 195 | let $logo_uploader_btn = $(this); |
| 196 | let $main_adjustment_wrap = $logo_uploader_btn.parent('.logo__adjust__wrap'); |
| 197 | let curElement = $main_adjustment_wrap.find('.preview__logo'); |
| 198 | //let $yt_logo_upload_wrap = $main_adjustment_wrap.find("#yt_logo_upload_wrap"); |
| 199 | let $yt_logo__upload__preview = $main_adjustment_wrap.find(".logo__upload__preview"); |
| 200 | let $yt_logo_preview = $main_adjustment_wrap.find(".instant__preview__img"); |
| 201 | let $yt_logo_url = $main_adjustment_wrap.find('.preview__logo__input'); |
| 202 | let $yt_logo_id = $main_adjustment_wrap.find('.preview__logo__input_id'); |
| 203 | let button = $(this), |
| 204 | yt_logo_uploader = wp.media({ |
| 205 | title: 'Custom Logo', |
| 206 | library : { |
| 207 | uploadedTo : wp.media.view.settings.post.id, |
| 208 | type : 'image' |
| 209 | }, |
| 210 | button: { |
| 211 | text: 'Use this image' |
| 212 | }, |
| 213 | multiple: false |
| 214 | }).on('select', function() { |
| 215 | let attachment = yt_logo_uploader.state().get('selection').first().toJSON(); |
| 216 | if (attachment && attachment.id && attachment.url){ |
| 217 | $logo_uploader_btn.hide(); |
| 218 | $yt_logo_url.val(attachment.url); |
| 219 | $yt_logo_id.val(attachment.id); |
| 220 | $yt_logo_preview.attr('src', attachment.url); |
| 221 | $yt_logo__upload__preview.show(); |
| 222 | curElement.attr('src', attachment.url); |
| 223 | $settingsForm.find('.embedpress-submit-btn').addClass('ep-settings-form-changed'); |
| 224 | formDataChanged = true; |
| 225 | }else{ |
| 226 | console.log('something went wrong using selected image'); |
| 227 | } |
| 228 | }).open(); |
| 229 | }); |
| 230 | |
| 231 | |
| 232 | // Elements |
| 233 | $(document).on('change', '.element-check', function (e) { |
| 234 | let $input = $(this); |
| 235 | $.ajax({ |
| 236 | url: ajaxurl, |
| 237 | type: 'post', |
| 238 | data: { |
| 239 | action: 'embedpress_elements_action', |
| 240 | _wpnonce: embedpressObj.nonce, |
| 241 | element_type: $input.data('type'), |
| 242 | element_name: $input.data('name'), |
| 243 | checked: $input.is(":checked"), |
| 244 | }, |
| 245 | success: function(response) { |
| 246 | if (response && response.success){ |
| 247 | showSuccessMessage(); |
| 248 | }else{ |
| 249 | showErrorMessage(); |
| 250 | } |
| 251 | }, |
| 252 | error: function(error) { |
| 253 | showErrorMessage(); |
| 254 | }, |
| 255 | }); |
| 256 | }); |
| 257 | |
| 258 | // track changes in settings page |
| 259 | |
| 260 | // Save EmbedPRess Settings data using Ajax |
| 261 | $(document).on('submit', 'form.embedpress-settings-form', function (e) { |
| 262 | e.preventDefault(); |
| 263 | let $form = $(this); |
| 264 | let $submit_btn = $form.find('.embedpress-submit-btn'); |
| 265 | let submit_text = $submit_btn.text(); |
| 266 | const form_data = $form.serializeArray(); |
| 267 | const $submit_type = $submit_btn.attr('value'); |
| 268 | |
| 269 | $submit_btn.text('Saving...'); //@TODO; Translate the text; |
| 270 | const ajaxAction = { |
| 271 | name: "action", |
| 272 | value: 'embedpress_settings_action' |
| 273 | }; |
| 274 | form_data.push(ajaxAction); |
| 275 | form_data.push({ |
| 276 | name: 'submit', |
| 277 | value: $submit_type, |
| 278 | }); |
| 279 | $.ajax({ |
| 280 | url: ajaxurl, |
| 281 | type: 'post', |
| 282 | dataType: 'json', |
| 283 | data: form_data, |
| 284 | success: function(response) { |
| 285 | $submit_btn.removeClass('ep-settings-form-changed'); |
| 286 | if (response && response.success){ |
| 287 | showSuccessMessage(); |
| 288 | $submit_btn.text(submit_text); |
| 289 | formDataChanged = false; |
| 290 | }else{ |
| 291 | $submit_btn.text(submit_text); |
| 292 | showErrorMessage(); |
| 293 | } |
| 294 | }, |
| 295 | error: function(error) { |
| 296 | $submit_btn.removeClass('ep-settings-form-changed'); |
| 297 | $submit_btn.text(submit_text); |
| 298 | showErrorMessage(); |
| 299 | }, |
| 300 | }); |
| 301 | }); |
| 302 | /** |
| 303 | * It shows success message in a toast alert |
| 304 | * */ |
| 305 | function showSuccessMessage() { |
| 306 | let $success_message_node = $('.toast__message--success'); |
| 307 | $success_message_node.addClass('show'); |
| 308 | setTimeout(function (){ |
| 309 | $success_message_node.removeClass('show'); |
| 310 | }, 3000); |
| 311 | } |
| 312 | /** |
| 313 | * It shows error message in a toast alert |
| 314 | * */ |
| 315 | function showErrorMessage(){ |
| 316 | let $error_message_node = $('.toast__message--error'); |
| 317 | $error_message_node.addClass('show'); |
| 318 | setTimeout(function (){ |
| 319 | $error_message_node.removeClass('show'); |
| 320 | }, 3000); |
| 321 | } |
| 322 | |
| 323 | |
| 324 | // license |
| 325 | // $(document).on('click', '.embedpress-license-deactivation-btn', function (e) { |
| 326 | // let $this = $(this); |
| 327 | // setTimeout(function (){ |
| 328 | // $this.attr('disabled', 'disabled'); |
| 329 | // }, 2000); |
| 330 | // $this.html('Deactivating.....'); |
| 331 | // }); |
| 332 | |
| 333 | // $(document).on('click', '.embedpress-license-activation-btn', function (e) { |
| 334 | // let $this = $(this); |
| 335 | // let val = $('#embedpress-pro-license-key').val(); |
| 336 | // if (val){ |
| 337 | // setTimeout(function (){ |
| 338 | // $this.attr('disabled', 'disabled'); |
| 339 | // }, 2000); |
| 340 | // $this.html('Activating.....'); |
| 341 | // } |
| 342 | // }); |
| 343 | |
| 344 | // Helpers |
| 345 | function copyToClipboard(text) { |
| 346 | if (window.clipboardData && window.clipboardData.setData) { |
| 347 | // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible. |
| 348 | return window.clipboardData.setData("Text", text); |
| 349 | |
| 350 | } |
| 351 | else if (document.queryCommandSupported && document.queryCommandSupported("copy")) { |
| 352 | var textarea = document.createElement("textarea"); |
| 353 | textarea.textContent = text; |
| 354 | textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge. |
| 355 | document.body.appendChild(textarea); |
| 356 | textarea.select(); |
| 357 | try { |
| 358 | return document.execCommand("copy"); // Security exception may be thrown by some browsers. |
| 359 | } |
| 360 | catch (ex) { |
| 361 | console.warn("Copy to clipboard failed.", ex); |
| 362 | return false; |
| 363 | } |
| 364 | finally { |
| 365 | document.body.removeChild(textarea); |
| 366 | } |
| 367 | } |
| 368 | } |
| 369 | function validateUrl(value) { |
| 370 | return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value); |
| 371 | } |
| 372 | // Generate Shortcode |
| 373 | let $shortcodePreview = $('#ep-shortcode'); |
| 374 | |
| 375 | $(document).on('click', '#ep-shortcode-btn', function (e){ |
| 376 | e.preventDefault(); |
| 377 | let $linkNode = $('#ep-link'); |
| 378 | let link = $linkNode.val(); |
| 379 | if (!validateUrl(link)){ |
| 380 | show_attention_alert('Please enter a valid URL.'); |
| 381 | $linkNode.val(''); |
| 382 | $shortcodePreview.val(''); |
| 383 | return; |
| 384 | } |
| 385 | $linkNode.val(''); |
| 386 | var arr = link.split('.'); |
| 387 | if (arr[arr.length - 1] === 'pdf') { |
| 388 | $shortcodePreview.val('[embedpress_pdf]'+link+'[/embedpress_pdf]'); |
| 389 | } |
| 390 | else{ |
| 391 | $shortcodePreview.val('[embedpress]'+link+'[/embedpress]'); |
| 392 | } |
| 393 | $shortcodePreview.focus(); |
| 394 | }); |
| 395 | |
| 396 | $(document).on('click', '#ep-shortcode-cp', function (e){ |
| 397 | e.preventDefault(); |
| 398 | let shortcode = $shortcodePreview.val(); |
| 399 | if (shortcode.length < 1){ |
| 400 | show_error_alert('Please enter a valid URL and generate a shortcode first.'); |
| 401 | return; |
| 402 | } |
| 403 | copyToClipboard(shortcode); |
| 404 | $shortcodePreview.removeClass('active'); |
| 405 | show_success_alert('Copied to your clipboard successfully.'); |
| 406 | }); |
| 407 | |
| 408 | $shortcodePreview.on('focus', function (e) { |
| 409 | $(this).select(); |
| 410 | }); |
| 411 | |
| 412 | function show_attention_alert(message='') { |
| 413 | let $attention_message_node = $('.toast__message--attention'); |
| 414 | if (message.length>0){ |
| 415 | $attention_message_node.find('p').html(message); |
| 416 | } |
| 417 | $attention_message_node.addClass('show'); |
| 418 | setTimeout(function (){ |
| 419 | $attention_message_node.removeClass('show'); |
| 420 | history.pushState('', '', embedPressRemoveURLParameter(location.href, 'attention')); |
| 421 | }, 3000); |
| 422 | } |
| 423 | |
| 424 | function show_error_alert(message='') { |
| 425 | let $error_message_node = $('.toast__message--error'); |
| 426 | if (message.length>0){ |
| 427 | $error_message_node.find('p').html(message); |
| 428 | } |
| 429 | $error_message_node.addClass('show'); |
| 430 | setTimeout(function (){ |
| 431 | $error_message_node.removeClass('show'); |
| 432 | history.pushState('', '', embedPressRemoveURLParameter(location.href, 'error')); |
| 433 | }, 3000); |
| 434 | } |
| 435 | |
| 436 | function show_success_alert(message='') { |
| 437 | let $success_message_node = $('.toast__message--success'); |
| 438 | if (message.length>0){ |
| 439 | $success_message_node.find('p').html(message); |
| 440 | } |
| 441 | $success_message_node.addClass('show'); |
| 442 | setTimeout(function (){ |
| 443 | $success_message_node.removeClass('show'); |
| 444 | history.pushState('', '', embedPressRemoveURLParameter(location.href, 'success')); |
| 445 | }, 3000); |
| 446 | } |
| 447 | |
| 448 | $(document).ready(function() { |
| 449 | $('.calendly-event-copy-link').click(function() { |
| 450 | var eventLink = $(this).data('event-link'); |
| 451 | var tempInput = $('<input>'); |
| 452 | $('body').append(tempInput); |
| 453 | tempInput.val(eventLink).select(); |
| 454 | document.execCommand('copy'); |
| 455 | tempInput.remove(); |
| 456 | |
| 457 | var button = $(this); |
| 458 | button.find('span').text('Copied!'); |
| 459 | |
| 460 | setTimeout(function() { |
| 461 | button.find('span').text('Copy link'); |
| 462 | }, 1500); |
| 463 | }); |
| 464 | }); |
| 465 | |
| 466 | }); |
| 467 | |
| 468 |