diff --git a/assets/scripts/admin/content-edit/preview-toggle.js b/assets/scripts/admin/content-edit/preview-toggle.js index a168a40e..fad4c0af 100644 --- a/assets/scripts/admin/content-edit/preview-toggle.js +++ b/assets/scripts/admin/content-edit/preview-toggle.js @@ -32,4 +32,77 @@ function _init() { }); } }); + + /** + * Toggles content from choice (select or radio elements) + * + * The toggle target element must have the "data-edit-content-toggle-choice-target" attribute + * and data-edit-content-toggle-choice-target-values that have a list of options values + * The choice field must have the "data-edit-content-toggle-choice" + * Both data attributes must have the same value (as identificator) + */ + document.addEventListener('change', function (event) { + if (!event.target || !event.target.hasAttribute('data-edit-content-toggle-choice')) return; + + updateChoice(event.target); + }); + + function initializeChoices() { + // Initialize all choice elements on load + document.querySelectorAll('[data-edit-content-toggle-choice]').forEach(function(choiceField) { + updateChoice(choiceField); + }); + } + + document.addEventListener("collection.node.add.after", function (event) { // (1) + initializeChoices(); + }); + + document.addEventListener("collection.node.insert.after", function (event) { // (1) + initializeChoices(); + }); + + initializeChoices(); + + function updateChoice(choiceField) { + // Check that it is a select or radio input + let isSelect = choiceField.tagName === 'SELECT'; + + // TODO add support for radio buttons + + if (!isSelect) { + console.error('data-edit-content-toggle-choice feature only can be applied to selects') + return; + } + + let modulePreview = choiceField.closest('.cms-module-edit').querySelector('.module-preview'); + let selectedValue = choiceField.type == 'radio' ? choiceField.checked : choiceField.value; + + let htmlTargetElements = modulePreview.querySelectorAll("[data-edit-content-toggle-choice-target='" + choiceField.dataset.editContentToggleChoice + "']"); + + if (htmlTargetElements.length) { + htmlTargetElements.forEach(function (htmlTargetElement) { + let targetValues = htmlTargetElement.dataset.editContentToggleChoiceTargetValues; + + // If it has specific values, check whether the selected value is in the list + if (targetValues) { + let valuesArray = targetValues.split(',').map(v => v.trim()); + let shouldShow = valuesArray.includes(String(selectedValue)); + + if (shouldShow) { + htmlTargetElement.classList.remove('d-none'); + } else { + htmlTargetElement.classList.add('d-none'); + } + } else { + // If it has no specific values, use boolean behavior + if (selectedValue) { + htmlTargetElement.classList.remove('d-none'); + } else { + htmlTargetElement.classList.add('d-none'); + } + } + }); + } + } }; diff --git a/templates/macros/modules_edit.html.twig b/templates/macros/modules_edit.html.twig index a769203d..18890ed8 100644 --- a/templates/macros/modules_edit.html.twig +++ b/templates/macros/modules_edit.html.twig @@ -133,6 +133,12 @@ data-edit-content-toggle-target="{{ formField.vars.attr['data-edit-content-toggle-input'] }}" {%- endmacro -%} +{%- macro link_choice_toggle(formField, choiceValues) -%} + {{ _self._update_link_value(formField, 'data-edit-content-toggle-choice') }} + data-edit-content-toggle-choice-target="{{ formField.vars.attr['data-edit-content-toggle-choice'] }}" + data-edit-content-toggle-choice-target-values="{{ choiceValues|join(',') }}" +{%- endmacro -%} + {%- macro link_media_preview (formField, locale = null, placeholder = null) -%} {{ _self._update_link_value(formField, 'data-media-preview-input') }}