| 1 |
/** |
| 2 |
* Protected Content Preview Handler. |
| 3 |
* |
| 4 |
* Handles visual indication of protected content in Elementor editor. |
| 5 |
* Shows badge with protection type and highlights protected elements. |
| 6 |
* |
| 7 |
* @package King_Addons |
| 8 |
*/ |
| 9 |
(function ($) { |
| 10 |
'use strict'; |
| 11 |
|
| 12 |
/** |
| 13 |
* Mark protected elements in editor. |
| 14 |
*/ |
| 15 |
const markProtected = () => { |
| 16 |
$('[data-king-protected="yes"]').each(function () { |
| 17 |
const $el = $(this); |
| 18 |
|
| 19 |
// Skip if already marked. |
| 20 |
if ($el.data('king-protected-marked')) { |
| 21 |
return; |
| 22 |
} |
| 23 |
|
| 24 |
$el.addClass('king-addons-protected-preview'); |
| 25 |
$el.data('king-protected-marked', true); |
| 26 |
|
| 27 |
// Create badge with protection info. |
| 28 |
let $badge = $('<div class="king-addons-protected-badge"></div>'); |
| 29 |
|
| 30 |
const protectionType = $el.attr('data-king-protected-type') || 'Protected'; |
| 31 |
|
| 32 |
let badgeHtml = '<span class="king-addons-protected-badge-icon">🔒</span>'; |
| 33 |
badgeHtml += '<span class="king-addons-protected-badge-label">Protected</span>'; |
| 34 |
|
| 35 |
// Tooltip with details. |
| 36 |
let tooltipHtml = '<div class="king-addons-protected-tooltip">'; |
| 37 |
tooltipHtml += '<strong>Protection Info:</strong>'; |
| 38 |
tooltipHtml += '<div class="king-addons-protected-tooltip-content">' + protectionType + '</div>'; |
| 39 |
tooltipHtml += '</div>'; |
| 40 |
|
| 41 |
badgeHtml += tooltipHtml; |
| 42 |
$badge.html(badgeHtml); |
| 43 |
$el.append($badge); |
| 44 |
}); |
| 45 |
}; |
| 46 |
|
| 47 |
/** |
| 48 |
* Cleanup marks when protection is disabled. |
| 49 |
*/ |
| 50 |
const cleanupMarks = () => { |
| 51 |
$('.king-addons-protected-preview').each(function () { |
| 52 |
const $el = $(this); |
| 53 |
if (!$el.is('[data-king-protected="yes"]')) { |
| 54 |
$el.removeClass('king-addons-protected-preview'); |
| 55 |
$el.removeData('king-protected-marked'); |
| 56 |
$el.find('.king-addons-protected-badge').remove(); |
| 57 |
} |
| 58 |
}); |
| 59 |
}; |
| 60 |
|
| 61 |
/** |
| 62 |
* Handler for panel open events. |
| 63 |
*/ |
| 64 |
const onPanelOpen = () => { |
| 65 |
setTimeout(() => { |
| 66 |
markProtected(); |
| 67 |
cleanupMarks(); |
| 68 |
}, 100); |
| 69 |
}; |
| 70 |
|
| 71 |
/** |
| 72 |
* Handler for settings change. |
| 73 |
*/ |
| 74 |
const onSettingsChange = (model) => { |
| 75 |
if (!model || !model.changed) { |
| 76 |
return; |
| 77 |
} |
| 78 |
|
| 79 |
const pcKeys = Object.keys(model.changed).filter(key => key.startsWith('protected_content')); |
| 80 |
if (pcKeys.length > 0) { |
| 81 |
setTimeout(() => { |
| 82 |
// Refresh marks. |
| 83 |
$('.king-addons-protected-preview').each(function () { |
| 84 |
$(this).removeData('king-protected-marked'); |
| 85 |
$(this).find('.king-addons-protected-badge').remove(); |
| 86 |
}); |
| 87 |
markProtected(); |
| 88 |
cleanupMarks(); |
| 89 |
}, 200); |
| 90 |
} |
| 91 |
}; |
| 92 |
|
| 93 |
/** |
| 94 |
* Initialize when Elementor frontend is ready. |
| 95 |
*/ |
| 96 |
$(window).on('elementor/frontend/init', function () { |
| 97 |
// Mark already-present elements. |
| 98 |
markProtected(); |
| 99 |
|
| 100 |
// Element ready hook. |
| 101 |
if (typeof elementorFrontend !== 'undefined' && elementorFrontend.hooks) { |
| 102 |
elementorFrontend.hooks.addAction('frontend/element_ready/global', markProtected); |
| 103 |
} |
| 104 |
|
| 105 |
// Panel open events. |
| 106 |
if (typeof elementor !== 'undefined' && elementor.hooks) { |
| 107 |
elementor.hooks.addAction('panel/open_editor/widget', onPanelOpen); |
| 108 |
elementor.hooks.addAction('panel/open_editor/section', onPanelOpen); |
| 109 |
elementor.hooks.addAction('panel/open_editor/container', onPanelOpen); |
| 110 |
elementor.hooks.addAction('panel/open_editor/column', onPanelOpen); |
| 111 |
} |
| 112 |
|
| 113 |
// Settings change listener. |
| 114 |
if (typeof elementor !== 'undefined' && elementor.channels && elementor.channels.editor) { |
| 115 |
elementor.channels.editor.on('change', onSettingsChange); |
| 116 |
} |
| 117 |
|
| 118 |
// Periodic check for dynamically added elements. |
| 119 |
setInterval(() => { |
| 120 |
markProtected(); |
| 121 |
cleanupMarks(); |
| 122 |
}, 2000); |
| 123 |
}); |
| 124 |
|
| 125 |
}(jQuery)); |
| 126 |
|
| 127 |
|
| 128 |
|
| 129 |
|
| 130 |
|
| 131 |
|
| 132 |
|
| 133 |
|
