Support toggle preview for choices

assets/scripts/admin/content-edit/preview-toggle.js

@@ -32,4 +32,77 @@
             });
         }
     });
+
+    /**
+     * 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');
+                    }
+                }
+            });
+        }
+    }
 };

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') }}