| @@ -1,11 +1,11 @@ | ||
| 1 | 1 | 'use strict'; |
| 2 | 2 | |
| 3 | -jQuery(function ($) { | |
| 3 | +jQuery(document).ready(function ($) { | |
| 4 | 4 | |
| 5 | 5 | |
| 6 | 6 | // All checkboxes |
| 7 | - $('.wowp-settings').on('click', 'input:checkbox', function () { | |
| 7 | + $('#wowp-settings').on('click', 'input:checkbox', function () { | |
| 8 | 8 | checkboxchecked(this); |
| 9 | 9 | }); |
| 10 | 10 | |
| 11 | 11 | function checkboxchecked(el) { |
| @@ -15,8 +15,33 @@ | ||
| 15 | 15 | $(el).next('input[type="hidden"]').val(''); |
| 16 | 16 | } |
| 17 | 17 | } |
| 18 | 18 | |
| 19 | + // Preview | |
| 20 | + $('[data-option="preview"] input[type="checkbox"]').each(show_preview).on('click', show_preview); | |
| 21 | + | |
| 22 | + function show_preview() { | |
| 23 | + const preview = $('.wowp-preview'); | |
| 24 | + if ($(this).is(':checked')) { | |
| 25 | + $(preview).removeClass('is-hidden'); | |
| 26 | + } else { | |
| 27 | + $(preview).addClass('is-hidden'); | |
| 28 | + } | |
| 29 | + } | |
| 30 | + | |
| 31 | + // Browsers options | |
| 32 | + $('[data-option="hide_browsers"] input[type="checkbox"]').each(hide_browsers); | |
| 33 | + $('[data-option="hide_browsers"] input[type="checkbox"]').on('click', hide_browsers); | |
| 34 | + | |
| 35 | + function hide_browsers() { | |
| 36 | + const browsers = $(this).parents('.wowp-field').siblings('.wowp-field'); | |
| 37 | + if ($(this).is(':checked')) { | |
| 38 | + $(browsers).removeClass('is-hidden'); | |
| 39 | + } else { | |
| 40 | + $(browsers).addClass('is-hidden'); | |
| 41 | + } | |
| 42 | + } | |
| 43 | + | |
| 19 | 44 | // Languages options |
| 20 | 45 | $('[data-option="depending_language"] input[type="checkbox"]').each(languageOn); |
| 21 | 46 | $('[data-option="depending_language"] input[type="checkbox"]').on('click', languageOn); |
| 22 | 47 | |
| @@ -57,9 +82,9 @@ | ||
| 57 | 82 | $('.wowp-dates input[type="checkbox"]').each(datesSchedule); |
| 58 | 83 | $('#schedule').on('click', '.wowp-dates input', datesSchedule); |
| 59 | 84 | |
| 60 | 85 | function datesSchedule() { |
| 61 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 86 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 62 | 87 | if ($(this).is(':checked')) { |
| 63 | 88 | $(parent).find('.wowp-date-input').removeClass('is-hidden'); |
| 64 | 89 | } else { |
| 65 | 90 | $(parent).find('.wowp-date-input').addClass('is-hidden'); |
| @@ -75,9 +100,9 @@ | ||
| 75 | 100 | $('.wowp-dates input[type="checkbox"]').each(datesSchedule); |
| 76 | 101 | }); |
| 77 | 102 | |
| 78 | 103 | $('#schedule').on('click', '.dashicons-trash', function () { |
| 79 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 104 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 80 | 105 | $(parent).remove(); |
| 81 | 106 | }); |
| 82 | 107 | |
| 83 | 108 | // Display rules |
| @@ -90,10 +115,14 @@ | ||
| 90 | 115 | $('#display-rules .display-option select').each(displayRules); |
| 91 | 116 | }); |
| 92 | 117 | |
| 93 | 118 | $('#display-rules').on('click', '.dashicons-trash', function () { |
| 94 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 95 | - $(parent).remove(); | |
| 119 | + const userConfirmed = confirm("Are you sure you want to remove?"); | |
| 120 | + if (userConfirmed) { | |
| 121 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 122 | + $(parent).remove(); | |
| 123 | + } | |
| 124 | + | |
| 96 | 125 | }); |
| 97 | 126 | |
| 98 | 127 | $('#display-rules .display-option select').each(displayRules); |
| 99 | 128 | $('#display-rules').on('change', '.display-option select', displayRules); |
| @@ -99,9 +128,9 @@ | ||
| 99 | 128 | $('#display-rules').on('change', '.display-option select', displayRules); |
| 100 | 129 | |
| 101 | 130 | function displayRules() { |
| 102 | 131 | let type = $(this).val(); |
| 103 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 132 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 104 | 133 | $(parent).find('.display-operator, .display-ids, .display-pages').addClass('is-hidden'); |
| 105 | 134 | if (type.indexOf('custom_post_selected') !== -1) { |
| 106 | 135 | type = 'post_selected'; |
| 107 | 136 | } |
| @@ -131,10 +160,13 @@ | ||
| 131 | 160 | $('#includes-files .display-option select').each(includeFiles); |
| 132 | 161 | }); |
| 133 | 162 | |
| 134 | 163 | $('#includes-files').on('click', '.dashicons-trash', function () { |
| 135 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 136 | - $(parent).remove(); | |
| 164 | + const userConfirmed = confirm("Are you sure you want to remove?"); | |
| 165 | + if (userConfirmed) { | |
| 166 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 167 | + $(parent).remove(); | |
| 168 | + } | |
| 137 | 169 | }); |
| 138 | 170 | |
| 139 | 171 | $('#includes-files .display-option select').each(includeFiles); |
| 140 | 172 | $('#includes-files').on('change', '.display-option select', includeFiles); |
| @@ -140,19 +172,18 @@ | ||
| 140 | 172 | $('#includes-files').on('change', '.display-option select', includeFiles); |
| 141 | 173 | |
| 142 | 174 | function includeFiles() { |
| 143 | 175 | let type = $(this).val(); |
| 144 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 145 | - $(parent).find('.js-attr').addClass('is-hidden'); | |
| 146 | - | |
| 147 | - console.log(type); | |
| 148 | - | |
| 176 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 177 | + const js = $(parent).find('.js-attr'); | |
| 178 | + const css = $(parent).find('.css-only-preview'); | |
| 179 | + $(js).add(css).addClass('is-hidden'); | |
| 149 | 180 | switch (type) { |
| 150 | 181 | case 'css': |
| 151 | - $(parent).find('.js-attr').addClass('is-hidden'); | |
| 182 | + $(css).removeClass('is-hidden'); | |
| 152 | 183 | break; |
| 153 | 184 | case 'js': |
| 154 | - $(parent).find('.js-attr').removeClass('is-hidden'); | |
| 185 | + $(js).removeClass('is-hidden'); | |
| 155 | 186 | break; |
| 156 | 187 | } |
| 157 | 188 | |
| 158 | 189 | } |
| @@ -166,9 +197,9 @@ | ||
| 166 | 197 | $(temlate).insertBefore('#dequeue .btn-add-display'); |
| 167 | 198 | }); |
| 168 | 199 | |
| 169 | 200 | $('#dequeue').on('click', '.dashicons-trash', function () { |
| 170 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 201 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 171 | 202 | $(parent).remove(); |
| 172 | 203 | }); |
| 173 | 204 | |
| 174 | 205 | // Add shortcode attributes |
| @@ -178,14 +209,49 @@ | ||
| 178 | 209 | $(temlate).insertBefore('#code-attributes .btn-add-display'); |
| 179 | 210 | }); |
| 180 | 211 | |
| 181 | 212 | $('#code-attributes').on('click', '.dashicons-trash', function () { |
| 182 | - const parent = $(this).closest('.wowp-fields-group'); | |
| 213 | + const parent = $(this).closest('.wowp-fields__group'); | |
| 183 | 214 | $(parent).remove(); |
| 184 | 215 | }); |
| 185 | 216 | |
| 186 | - $('.button-editor').not('#phpglobalnav').on('click', function () { | |
| 187 | - const parent = $(this).closest('.tab-content'); | |
| 217 | + $('.button-add-img').on('click', function (event) { | |
| 218 | + event.preventDefault(); | |
| 219 | + var upload_button = $(this); | |
| 220 | + var img = $(this).data('img'); | |
| 221 | + var frame; | |
| 222 | + event.preventDefault(); | |
| 223 | + if (frame) { | |
| 224 | + frame.open(); | |
| 225 | + return; | |
| 226 | + } | |
| 227 | + frame = wp.media(); | |
| 228 | + frame.on('select', function () { | |
| 229 | + // Grab the selected attachment. | |
| 230 | + const attachment = frame.state().get('selection').first(); | |
| 231 | + let url = attachment.attributes.url; | |
| 232 | + url = url.replace('-scaled.', '.'); | |
| 233 | + let alt = attachment.attributes.alt; | |
| 234 | + let title = attachment.attributes.title; | |
| 235 | + let height = attachment.attributes.height; | |
| 236 | + let width = attachment.attributes.width; | |
| 237 | + let img = `<img src="${url}" alt="${alt}" loading="lazy" width="${width}" height="${height}">`; | |
| 238 | + frame.close(); | |
| 239 | + const editorElement = $('[data-content="wowp-tab-html-code"]').find('.CodeMirror')[0]; | |
| 240 | + const editor = editorElement.CodeMirror; | |
| 241 | + const doc = editor.getDoc(); | |
| 242 | + const cursor = doc.getCursor(); | |
| 243 | + doc.replaceRange(img, cursor); | |
| 244 | + editor.focus(); | |
| 245 | + | |
| 246 | + }); | |
| 247 | + frame.open(); | |
| 248 | + | |
| 249 | + }); | |
| 250 | + | |
| 251 | + $('.button-editor').not('#phpglobalnav').on('click', function (event) { | |
| 252 | + event.preventDefault(); | |
| 253 | + const parent = $(this).closest('.wowp-settins__tabs-content'); | |
| 188 | 254 | const id = $(this).attr('id'); |
| 189 | 255 | let comment; |
| 190 | 256 | switch (id) { |
| 191 | 257 | case 'jsnav': |
| @@ -207,10 +273,11 @@ | ||
| 207 | 273 | doc.replaceRange(comment, cursor); |
| 208 | 274 | editor.focus(); |
| 209 | 275 | }); |
| 210 | 276 | |
| 211 | - $('#phpglobalnav').on('click', function () { | |
| 212 | - const parent = $(this).closest('fieldset'); | |
| 277 | + $('#phpglobalnav').on('click', function (event) { | |
| 278 | + event.preventDefault(); | |
| 279 | + const parent = $(this).closest('.wowp-settings__page'); | |
| 213 | 280 | let comment = '// NAV: '; |
| 214 | 281 | const editorElement = $(parent).find('.CodeMirror')[0]; |
| 215 | 282 | const editor = editorElement.CodeMirror; |
| 216 | 283 | const doc = editor.getDoc(); |
| @@ -244,5 +311,155 @@ | ||
| 244 | 311 | // Alert the copied text |
| 245 | 312 | alert("Copied the shortcode: " + copyText.value); |
| 246 | 313 | }); |
| 247 | 314 | |
| 248 | -}); | |
| 315 | + $('.quickcode').on('click', function () { | |
| 316 | + const editor = $('[data-content="wowp-tab-html-code"] .CodeMirror')[0].CodeMirror; | |
| 317 | + if (editor) { | |
| 318 | + const text = $(this).data('code'); | |
| 319 | + const doc = editor.getDoc(); | |
| 320 | + const cursor = doc.getCursor(); | |
| 321 | + doc.replaceRange(text, cursor); | |
| 322 | + editor.focus(); | |
| 323 | + } | |
| 324 | + }); | |
| 325 | + | |
| 326 | + | |
| 327 | + // Copy | |
| 328 | + $('.can-copy').on('click', function () { | |
| 329 | + const parent = $(this).closest('.wowp-field'); | |
| 330 | + const input = $(parent).find('input'); | |
| 331 | + const originalTooltip = $(this).attr("data-tooltip"); | |
| 332 | + const currentElement = $(this); | |
| 333 | + | |
| 334 | + navigator.clipboard.writeText(input.val()).then(() => { | |
| 335 | + currentElement.attr("data-tooltip", "Copied"); | |
| 336 | + setTimeout(function () { | |
| 337 | + currentElement.attr("data-tooltip", originalTooltip); | |
| 338 | + }, 1000); | |
| 339 | + }); | |
| 340 | + }); | |
| 341 | + | |
| 342 | + // Quick Code | |
| 343 | + | |
| 344 | + const button_quickcodes = document.getElementById('open-quickcodes'); | |
| 345 | + | |
| 346 | + if (button_quickcodes) { | |
| 347 | + button_quickcodes.addEventListener('click', (e) => { | |
| 348 | + e.preventDefault(); | |
| 349 | + const dialog = document.getElementById('quickcodes-dialog'); | |
| 350 | + const search = document.getElementById('qc-search'); | |
| 351 | + if (dialog && typeof dialog.showModal === 'function') { | |
| 352 | + dialog.showModal(); | |
| 353 | + if (search) search.focus(); | |
| 354 | + } | |
| 355 | + }); | |
| 356 | + } | |
| 357 | + | |
| 358 | + | |
| 359 | + // Open on Cmd+K | |
| 360 | + document.addEventListener('keydown', (e) => { | |
| 361 | + if ((e.metaKey || e.ctrlKey) && e.key === 'k') { | |
| 362 | + e.preventDefault(); | |
| 363 | + document.getElementById('quickcodes-dialog').showModal(); | |
| 364 | + document.getElementById('qc-search').focus(); | |
| 365 | + } | |
| 366 | + }); | |
| 367 | + | |
| 368 | +// Filter list | |
| 369 | + | |
| 370 | + const searchInput = document.getElementById('qc-search'); | |
| 371 | + | |
| 372 | + if (searchInput) { | |
| 373 | + searchInput.addEventListener('input', (e) => { | |
| 374 | + const term = e.target.value.toLowerCase(); | |
| 375 | + document.querySelectorAll('#qc-list li').forEach(li => { | |
| 376 | + li.style.display = li.textContent.toLowerCase().includes(term) ? 'flex' : 'none'; | |
| 377 | + }); | |
| 378 | + }); | |
| 379 | + } | |
| 380 | + | |
| 381 | +// Insert at cursor position | |
| 382 | + document.querySelectorAll('#qc-list li').forEach(li => { | |
| 383 | + li.addEventListener('click', () => { | |
| 384 | + const code = li.getAttribute('data-code'); | |
| 385 | + insertAtCursor(document.querySelector('textarea'), code); | |
| 386 | + document.getElementById('quickcodes-dialog').close(); | |
| 387 | + }); | |
| 388 | + }); | |
| 389 | + | |
| 390 | +// Helper function | |
| 391 | + function insertAtCursor(el, text) { | |
| 392 | + const start = el.selectionStart; | |
| 393 | + const end = el.selectionEnd; | |
| 394 | + el.value = el.value.slice(0, start) + text + el.value.slice(end); | |
| 395 | + el.selectionStart = el.selectionEnd = start + text.length; | |
| 396 | + el.focus(); | |
| 397 | + } | |
| 398 | + | |
| 399 | + const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; | |
| 400 | + const shortcut = isMac ? 'Cmd + K' : 'Ctrl + K'; | |
| 401 | + const quickcode_hotkey = document.querySelector('#quickcode-hotkey'); | |
| 402 | + if (quickcode_hotkey) { | |
| 403 | + quickcode_hotkey.textContent = `(${shortcut})`; | |
| 404 | + } | |
| 405 | + | |
| 406 | + | |
| 407 | + // Stippets control-checkbox | |
| 408 | + $('.wowp-snippet__item > .has-checkbox input[type="checkbox"] ').each(snippet_checkbox).on('click', snippet_checkbox); | |
| 409 | + | |
| 410 | + function snippet_checkbox() { | |
| 411 | + const expand = $(this).closest('.wowp-snippet__item').find('.wowp-snippet__item-expand'); | |
| 412 | + if ($(this).is(':checked') && expand) { | |
| 413 | + $(expand).removeClass('is-hidden'); | |
| 414 | + } else { | |
| 415 | + $(expand).addClass('is-hidden'); | |
| 416 | + } | |
| 417 | + } | |
| 418 | + | |
| 419 | + // Popover | |
| 420 | + | |
| 421 | + const toggleBtn = document.getElementById('popover-toggle'); | |
| 422 | + const popover = document.getElementById('popover-box'); | |
| 423 | + | |
| 424 | + if (toggleBtn) { | |
| 425 | + | |
| 426 | + toggleBtn.addEventListener('click', (e) => { | |
| 427 | + e.preventDefault(); | |
| 428 | + popover.style.display = popover.style.display === 'block' ? 'none' : 'block'; | |
| 429 | + }); | |
| 430 | + | |
| 431 | + document.addEventListener('click', (e) => { | |
| 432 | + if (!toggleBtn.contains(e.target) && !popover.contains(e.target)) { | |
| 433 | + popover.style.display = 'none'; | |
| 434 | + } | |
| 435 | + }); | |
| 436 | + | |
| 437 | + } | |
| 438 | + | |
| 439 | + // Hide Tabs | |
| 440 | + | |
| 441 | + $('#popover-box input[type="checkbox"]').each(hide_tab).on('click', hide_tab); | |
| 442 | + | |
| 443 | + function hide_tab() { | |
| 444 | + const types = { | |
| 445 | + checkbox_hide_html: 'wowp-tab-html-code', | |
| 446 | + checkbox_hide_css: 'wowp-tab-css-code', | |
| 447 | + checkbox_hide_js: 'wowp-tab-js-code', | |
| 448 | + checkbox_hide_php: 'wowp-tab-php-code', | |
| 449 | + checkbox_hide_attributes: 'wowp-tab-attributes', | |
| 450 | + checkbox_hide_settings: 'wowp-tab-settings', | |
| 451 | + checkbox_hide_include: 'wowp-tab-include', | |
| 452 | + }; | |
| 453 | + | |
| 454 | + const id = $(this).attr('id'); | |
| 455 | + const tab = types[id]; | |
| 456 | + if ($(this).is(':checked')) { | |
| 457 | + $('#'+ tab).prop('checked', false); | |
| 458 | + $(`[for="${tab}"]`).addClass('is-hidden'); | |
| 459 | + } else { | |
| 460 | + $(`[for="${tab}"]`).removeClass('is-hidden'); | |
| 461 | + } | |
| 462 | + } | |
| 463 | + | |
| 464 | + | |
| 465 | +}); | |
