| 1 |
/** |
| 2 |
* Conditional Display Preview Handler. |
| 3 |
* |
| 4 |
* Handles visual indication of Conditional Display settings in Elementor editor. |
| 5 |
* Shows badge with active conditions and highlights elements with CD enabled. |
| 6 |
* |
| 7 |
* @package King_Addons |
| 8 |
*/ |
| 9 |
(function ($) { |
| 10 |
'use strict'; |
| 11 |
|
| 12 |
/** |
| 13 |
* Mark elements with Conditional Display enabled. |
| 14 |
*/ |
| 15 |
const markElements = () => { |
| 16 |
$('[data-king-cd-enabled]').each(function () { |
| 17 |
const $el = $(this); |
| 18 |
|
| 19 |
// Skip if already processed. |
| 20 |
if ($el.data('kingCdMarked')) { |
| 21 |
return; |
| 22 |
} |
| 23 |
|
| 24 |
$el.addClass('king-addons-cd-preview'); |
| 25 |
$el.data('kingCdMarked', true); |
| 26 |
|
| 27 |
// Create badge container. |
| 28 |
let $badge = $('<div class="king-addons-cd-badge"></div>'); |
| 29 |
|
| 30 |
// Get conditions info. |
| 31 |
const conditions = $el.attr('data-king-cd-conditions'); |
| 32 |
let badgeHtml = '<span class="king-addons-cd-badge-icon">🔒</span>'; |
| 33 |
badgeHtml += '<span class="king-addons-cd-badge-label">CD</span>'; |
| 34 |
|
| 35 |
if (conditions && conditions.length > 0) { |
| 36 |
const conditionsArray = conditions.split(', '); |
| 37 |
const conditionsCount = conditionsArray.length; |
| 38 |
|
| 39 |
badgeHtml += '<span class="king-addons-cd-badge-count">' + conditionsCount + '</span>'; |
| 40 |
|
| 41 |
// Tooltip with conditions list. |
| 42 |
let tooltipHtml = '<div class="king-addons-cd-tooltip">'; |
| 43 |
tooltipHtml += '<strong>Active Conditions:</strong><ul>'; |
| 44 |
conditionsArray.forEach(function (cond) { |
| 45 |
tooltipHtml += '<li>' + cond + '</li>'; |
| 46 |
}); |
| 47 |
tooltipHtml += '</ul></div>'; |
| 48 |
|
| 49 |
badgeHtml += tooltipHtml; |
| 50 |
} |
| 51 |
|
| 52 |
$badge.html(badgeHtml); |
| 53 |
$el.append($badge); |
| 54 |
}); |
| 55 |
}; |
| 56 |
|
| 57 |
/** |
| 58 |
* Remove marks when CD is disabled. |
| 59 |
*/ |
| 60 |
const cleanupMarks = () => { |
| 61 |
$('.king-addons-cd-preview').each(function () { |
| 62 |
const $el = $(this); |
| 63 |
if (!$el.is('[data-king-cd-enabled]')) { |
| 64 |
$el.removeClass('king-addons-cd-preview'); |
| 65 |
$el.removeData('kingCdMarked'); |
| 66 |
$el.find('.king-addons-cd-badge').remove(); |
| 67 |
} |
| 68 |
}); |
| 69 |
}; |
| 70 |
|
| 71 |
/** |
| 72 |
* Handler for panel open events. |
| 73 |
*/ |
| 74 |
const onPanelOpen = () => { |
| 75 |
setTimeout(() => { |
| 76 |
markElements(); |
| 77 |
cleanupMarks(); |
| 78 |
}, 100); |
| 79 |
}; |
| 80 |
|
| 81 |
/** |
| 82 |
* Handler for element settings change. |
| 83 |
* |
| 84 |
* @param {Object} model Element model. |
| 85 |
*/ |
| 86 |
const onSettingsChange = (model) => { |
| 87 |
if (!model || !model.changed) { |
| 88 |
return; |
| 89 |
} |
| 90 |
|
| 91 |
// Check if CD-related setting changed. |
| 92 |
const cdKeys = Object.keys(model.changed).filter(key => key.startsWith('cd_')); |
| 93 |
if (cdKeys.length > 0) { |
| 94 |
setTimeout(() => { |
| 95 |
// Refresh all marks. |
| 96 |
$('.king-addons-cd-preview').each(function () { |
| 97 |
$(this).removeData('kingCdMarked'); |
| 98 |
$(this).find('.king-addons-cd-badge').remove(); |
| 99 |
}); |
| 100 |
markElements(); |
| 101 |
cleanupMarks(); |
| 102 |
}, 200); |
| 103 |
} |
| 104 |
}; |
| 105 |
|
| 106 |
/** |
| 107 |
* Initialize when Elementor frontend is ready. |
| 108 |
*/ |
| 109 |
$(window).on('elementor/frontend/init', () => { |
| 110 |
// Mark already-present elements. |
| 111 |
markElements(); |
| 112 |
|
| 113 |
// When a new element is loaded in preview. |
| 114 |
if (typeof elementorFrontend !== 'undefined' && elementorFrontend.hooks) { |
| 115 |
elementorFrontend.hooks.addAction('frontend/element_ready/global', markElements); |
| 116 |
} |
| 117 |
|
| 118 |
// Panel open events. |
| 119 |
if (typeof elementor !== 'undefined' && elementor.hooks) { |
| 120 |
elementor.hooks.addAction('panel/open_editor/section', onPanelOpen); |
| 121 |
elementor.hooks.addAction('panel/open_editor/widget', onPanelOpen); |
| 122 |
elementor.hooks.addAction('panel/open_editor/column', onPanelOpen); |
| 123 |
elementor.hooks.addAction('panel/open_editor/container', onPanelOpen); |
| 124 |
} |
| 125 |
|
| 126 |
// Listen to settings changes. |
| 127 |
if (typeof elementor !== 'undefined' && elementor.channels && elementor.channels.editor) { |
| 128 |
elementor.channels.editor.on('change', onSettingsChange); |
| 129 |
} |
| 130 |
|
| 131 |
// Periodic check for dynamically added elements. |
| 132 |
setInterval(() => { |
| 133 |
markElements(); |
| 134 |
cleanupMarks(); |
| 135 |
}, 2000); |
| 136 |
}); |
| 137 |
|
| 138 |
}(jQuery)); |
| 139 |
|
| 140 |
|
| 141 |
|
| 142 |
|
| 143 |
|
| 144 |
|
| 145 |
|
