From edcfd2066a1244ada47a06b9fbee3b37d2887305 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Thu, 26 Mar 2026 15:33:23 +0100 Subject: [PATCH 1/3] Support toggle preview for choices --- .../admin/content-edit/preview-toggle.js | 61 +++++++++++++++++++ templates/macros/modules_edit.html.twig | 6 ++ 2 files changed, 67 insertions(+) diff --git a/assets/scripts/admin/content-edit/preview-toggle.js b/assets/scripts/admin/content-edit/preview-toggle.js index a168a40e..d56d557b 100644 --- a/assets/scripts/admin/content-edit/preview-toggle.js +++ b/assets/scripts/admin/content-edit/preview-toggle.js @@ -32,4 +32,65 @@ 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); + }); + + // Initialize all choice elements on load + document.querySelectorAll('[data-edit-content-toggle-choice]').forEach(function(choiceField) { + updateChoice(choiceField); + }); + + function updateChoice(choiceField) { + // Verificar que sea un select o input radio + 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; + + // Si tiene valores específicos, verificar si el valor seleccionado está en la lista + 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 { + // Si no tiene valores específicos, usar comportamiento booleano + 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 69f5c376..3246bd44 100644 --- a/templates/macros/modules_edit.html.twig +++ b/templates/macros/modules_edit.html.twig @@ -126,6 +126,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') }} From 3e9f0ddeb44abd0c5e1071e3cd775eec2f1830f7 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Thu, 26 Mar 2026 16:52:22 +0100 Subject: [PATCH 2/3] Support toggle preview for choices --- .../admin/content-edit/preview-toggle.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/assets/scripts/admin/content-edit/preview-toggle.js b/assets/scripts/admin/content-edit/preview-toggle.js index d56d557b..b5022003 100644 --- a/assets/scripts/admin/content-edit/preview-toggle.js +++ b/assets/scripts/admin/content-edit/preview-toggle.js @@ -1,4 +1,5 @@ import {registerFeature} from '@softspring/cms-bundle/scripts/tools'; +import {filterCurrentFilterElements} from "./filter-preview"; registerFeature('admin_content_edit_preview_toggle', _init); @@ -47,11 +48,23 @@ function _init() { updateChoice(event.target); }); - // Initialize all choice elements on load - document.querySelectorAll('[data-edit-content-toggle-choice]').forEach(function(choiceField) { - updateChoice(choiceField); + 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) { // Verificar que sea un select o input radio let isSelect = choiceField.tagName === 'SELECT'; From c9066785fd29d9255b087e135d98b835a4eae135 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Fri, 27 Mar 2026 09:20:01 +0100 Subject: [PATCH 3/3] Fix preview-toggle.js --- assets/scripts/admin/content-edit/preview-toggle.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/scripts/admin/content-edit/preview-toggle.js b/assets/scripts/admin/content-edit/preview-toggle.js index b5022003..fad4c0af 100644 --- a/assets/scripts/admin/content-edit/preview-toggle.js +++ b/assets/scripts/admin/content-edit/preview-toggle.js @@ -1,5 +1,4 @@ import {registerFeature} from '@softspring/cms-bundle/scripts/tools'; -import {filterCurrentFilterElements} from "./filter-preview"; registerFeature('admin_content_edit_preview_toggle', _init); @@ -66,7 +65,7 @@ function _init() { initializeChoices(); function updateChoice(choiceField) { - // Verificar que sea un select o input radio + // Check that it is a select or radio input let isSelect = choiceField.tagName === 'SELECT'; // TODO add support for radio buttons @@ -85,7 +84,7 @@ function _init() { htmlTargetElements.forEach(function (htmlTargetElement) { let targetValues = htmlTargetElement.dataset.editContentToggleChoiceTargetValues; - // Si tiene valores específicos, verificar si el valor seleccionado está en la lista + // 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)); @@ -96,7 +95,7 @@ function _init() { htmlTargetElement.classList.add('d-none'); } } else { - // Si no tiene valores específicos, usar comportamiento booleano + // If it has no specific values, use boolean behavior if (selectedValue) { htmlTargetElement.classList.remove('d-none'); } else {