admin-script.js
222 lines
| 1 | jQuery(document).ready(function ($) { |
| 2 | |
| 3 | $('.oxyplug-preload-has-tooltip').on('mouseenter', function () { |
| 4 | const tooltip_text = $(this).data('tooltip').trim(); |
| 5 | if (tooltip_text.length > 0) { |
| 6 | // Link |
| 7 | let link = ''; |
| 8 | let href = $(this).data('href'); |
| 9 | let href_text = $(this).data('href-text'); |
| 10 | if (href && href_text) { |
| 11 | link = ` <a href="${href.trim()}" target="_blank">${href_text.trim()}</a>`; |
| 12 | } |
| 13 | |
| 14 | $(this).prepend('<div class="oxyplug-preload-tooltip">' + tooltip_text + link + '</div>'); |
| 15 | $(this).find('.oxyplug-preload-tooltip').css('top', $(this).height() + 5).fadeIn(); |
| 16 | } |
| 17 | }).on('mouseleave', function () { |
| 18 | $(this).find('.oxyplug-preload-tooltip').fadeOut(function () { |
| 19 | $(this).remove(); |
| 20 | }); |
| 21 | }); |
| 22 | |
| 23 | $(document).on('click', '.oxyplug-preload-add-more', function () { |
| 24 | const $new_el = $(this).prev().clone(true); |
| 25 | $new_el.find('md-outlined-text-field').val(''); |
| 26 | $new_el.find('.oxyplug-preload-remove-url').show(); |
| 27 | $(this).before($new_el); |
| 28 | }); |
| 29 | |
| 30 | $(document).on('click', 'md-outlined-text-field.has-clear-button md-icon-button', function () { |
| 31 | $(this).parent().val('').trigger('input'); |
| 32 | }); |
| 33 | |
| 34 | $(document).on('click', '.oxyplug-preload-remove-url', function () { |
| 35 | const name_attr = $(this).prev().attr('name').trim(); |
| 36 | $(this).parent().remove(); |
| 37 | |
| 38 | const inputs = $(`[name="${name_attr}"]`); |
| 39 | if (inputs.length === 1) { |
| 40 | inputs[0].error = false; |
| 41 | inputs[0].errorText = ''; |
| 42 | $(inputs[0]).removeClass('oxyplug-preload-invalid'); |
| 43 | } |
| 44 | }); |
| 45 | |
| 46 | $(document).on('change', '.oxyplug-preload-switch-wrap md-switch', function () { |
| 47 | const $text_el = $(this).next('span'); |
| 48 | if (this.selected) { |
| 49 | $text_el.addClass('active'); |
| 50 | } else { |
| 51 | $text_el.removeClass('active'); |
| 52 | } |
| 53 | }); |
| 54 | |
| 55 | const check_url_validity = function (ele) { |
| 56 | let url_regex = /^https?:\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[-a-zA-Z0-9@:%._+~#=]*)*(\?[a-zA-Z0-9=&._-]*)?$/; |
| 57 | const inputs_count = $(`[name="${$(ele).attr('name').trim()}"`).length; |
| 58 | if (inputs_count === 1) { |
| 59 | url_regex = /^(https?:\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[-a-zA-Z0-9@:%._+~#=]*)*(\?[a-zA-Z0-9=&._-]*)?)?$/; |
| 60 | } |
| 61 | |
| 62 | const value = $(ele).val().trim(); |
| 63 | if (url_regex.test(value)) { |
| 64 | ele.error = false; |
| 65 | ele.errorText = ''; |
| 66 | $(ele).removeClass('oxyplug-preload-invalid'); |
| 67 | } else { |
| 68 | ele.error = true; |
| 69 | ele.errorText = oxyplug_preload_defines.trans.invalid_url; |
| 70 | $(ele).addClass('oxyplug-preload-invalid'); |
| 71 | } |
| 72 | } |
| 73 | |
| 74 | $(document).on('input', '[name^="preloads"]', function () { |
| 75 | check_url_validity(this); |
| 76 | }); |
| 77 | |
| 78 | $(document).on('click', '#oxyplug-preload-save-preloads', function () { |
| 79 | const $this = $(this); |
| 80 | const types = ['script', 'style', 'font']; |
| 81 | const data = [ |
| 82 | {name: 'action', value: 'oxyplug_preload_save_preloads'}, |
| 83 | {name: 'oxyplug_preload_save_preloads_nonce', value: $(this).attr('data-nonce')} |
| 84 | ]; |
| 85 | |
| 86 | // Featured image preload |
| 87 | const $featured_image_preload = $('[name="featured_image_preload"]'); |
| 88 | if ($featured_image_preload[0].selected) { |
| 89 | data.push({name: $featured_image_preload.attr('name'), value: 'on'}); |
| 90 | } |
| 91 | |
| 92 | // CSS/JS/Font preload |
| 93 | types.forEach(type => { |
| 94 | $(`[name="preloads[${type}][]"]`).each(function () { |
| 95 | check_url_validity(this); |
| 96 | data.push({ |
| 97 | name: $(this).attr('name'), |
| 98 | value: $(this).val().trim() |
| 99 | }); |
| 100 | }); |
| 101 | }); |
| 102 | |
| 103 | if ($('.oxyplug-preload-invalid').length === 0) { |
| 104 | $.ajax({ |
| 105 | url: ajaxurl, |
| 106 | type: 'POST', |
| 107 | dataType: 'json', |
| 108 | data: data, |
| 109 | success(response) { |
| 110 | oxyplug_preload_snackbar('success', response.data.messages[0]); |
| 111 | }, |
| 112 | error(response) { |
| 113 | console.log('response', response); |
| 114 | oxyplug_preload_snackbar('error', response.responseJSON.messages[0], 0); |
| 115 | }, |
| 116 | complete() { |
| 117 | $this.trigger('oxypreloadload'); |
| 118 | } |
| 119 | }); |
| 120 | } else { |
| 121 | $this.trigger('oxypreloadload'); |
| 122 | } |
| 123 | }); |
| 124 | |
| 125 | const $has_loading_el = $('.oxyplug-preload-has-loading'); |
| 126 | $has_loading_el.on('click', function () { |
| 127 | const $this = $(this); |
| 128 | $this.next('.oxyplug-preload-spinner-wrap').addClass('show'); |
| 129 | setTimeout(function () { |
| 130 | $this.prop('disabled', true); |
| 131 | }, 100); |
| 132 | }); |
| 133 | |
| 134 | $has_loading_el.on('oxypreloadload', function () { |
| 135 | const $this = $(this); |
| 136 | $this.next('.oxyplug-preload-spinner-wrap').removeClass('show'); |
| 137 | setTimeout(function () { |
| 138 | $this.prop('disabled', false); |
| 139 | }, 200); |
| 140 | }); |
| 141 | |
| 142 | function oxyplug_preload_snackbar(status, message, timeout_in_milliseconds, anchor, title) { |
| 143 | const $ = jQuery |
| 144 | if (message) { |
| 145 | if (status >= 200 && status <= 299) { |
| 146 | status = 'success' |
| 147 | } else if (status >= 400 && status <= 599) { |
| 148 | status = 'error' |
| 149 | } |
| 150 | |
| 151 | // 500 milliseconds per word for timeout |
| 152 | if (timeout_in_milliseconds === undefined) { |
| 153 | timeout_in_milliseconds = message.split(/\s+/).length * 500 |
| 154 | } |
| 155 | if (timeout_in_milliseconds != 0 && timeout_in_milliseconds < 4500) { |
| 156 | timeout_in_milliseconds = 4500 |
| 157 | } |
| 158 | |
| 159 | if (!title) { |
| 160 | if (status == 'success') { |
| 161 | title = 'Success!' |
| 162 | } else if (status == 'error') { |
| 163 | title = 'Failure!' |
| 164 | } else if (status == 'warning') { |
| 165 | title = 'Warning!' |
| 166 | } else if (status == 'info') { |
| 167 | title = 'Info' |
| 168 | } |
| 169 | } |
| 170 | |
| 171 | let $snackbar = $('#oxyplug-preload-snackbar') |
| 172 | if ($snackbar.length) { |
| 173 | $snackbar.find('.oxyplug-preload-close').trigger('click') |
| 174 | $snackbar[0].className = `oxyplug-preload-${status}` |
| 175 | |
| 176 | const $second_part = $snackbar.find('.second-part') |
| 177 | $second_part.find('h3').text(title) |
| 178 | $second_part.find('p').text(message) |
| 179 | if (anchor) { |
| 180 | $second_part.find('a').attr('href', anchor.href).text(anchor.text).show() |
| 181 | } else { |
| 182 | $second_part.find('a').hide() |
| 183 | } |
| 184 | } else { |
| 185 | $snackbar = $('<div>', {id: 'oxyplug-preload-snackbar', class: `oxyplug-preload-${status}`}) |
| 186 | const $first_part = $('<div>', {class: 'first-part'}) |
| 187 | const $first_part_icon = $('<span>') |
| 188 | $first_part.append($first_part_icon) |
| 189 | |
| 190 | const $second_part = $('<div>', {class: 'second-part'}) |
| 191 | const $second_part_title = $('<h3>').text(title) |
| 192 | const $second_part_message = $('<p>').text(message) |
| 193 | $second_part.append($second_part_title, $second_part_message) |
| 194 | if (anchor) { |
| 195 | const $second_part_anchor = $('<a>') |
| 196 | $second_part_anchor.attr('href', anchor.href).text(anchor.text) |
| 197 | $second_part.append($second_part_title, $second_part_message, $second_part_anchor) |
| 198 | } |
| 199 | |
| 200 | const $third_part = $('<div>', {class: 'third-part'}) |
| 201 | const $close = $('<span>', {class: 'oxyplug-preload-close'}) |
| 202 | $close.on('click', function () { |
| 203 | $('#oxyplug-preload-snackbar').removeClass('show') |
| 204 | }) |
| 205 | $third_part.append($close) |
| 206 | |
| 207 | $snackbar.append($first_part, $second_part, $third_part) |
| 208 | $('body').append($snackbar) |
| 209 | } |
| 210 | |
| 211 | setTimeout(function () { |
| 212 | $snackbar.addClass('show') |
| 213 | if (timeout_in_milliseconds > 0) { |
| 214 | setTimeout(function () { |
| 215 | $snackbar.removeClass('show') |
| 216 | }, timeout_in_milliseconds) |
| 217 | } |
| 218 | }, 100) |
| 219 | |
| 220 | } |
| 221 | } |
| 222 | }); |