Add preview color attribute feature

assets/scripts/admin-cms.js

@@ -14,6 +14,7 @@ import './admin/content-edit/preview-background-color';
 import './admin/content-edit/preview-block';
 import './admin/content-edit/preview-class';
 import './admin/content-edit/preview-collection-node-class';
+import './admin/content-edit/preview-color-attribute';
 import './admin/content-edit/contenteditable';
 import './admin/content-edit/contenteditable-focus';
 import './admin/content-edit/preview-fill';
@@ -30,7 +31,7 @@ import './admin/content-forms';
 import './admin/routes-forms';
 import './admin/fields-visibility';
 import './admin/locales-widgets';
-import './admin/versions-diff'; 
+import './admin/versions-diff';
 
 import './types/block-type';
 import './types/color-type';

assets/scripts/admin/content-edit/preview-color-attribute.js

@@ -0,0 +1,73 @@
+import {registerFeature} from '@softspring/cms-bundle/scripts/tools';
+
+registerFeature('admin_content_edit_preview_color_attribute', _init);
+
+/**
+ * Init behaviour
+ * @private
+ */
+function _init() {
+    document.addEventListener('input', onEditColorAttribute);
+    document.addEventListener('change', onEditColorAttribute);
+}
+
+/**
+ * Sets a color field to target element attribute
+ *
+ * The preview target element must have the "data-edit-color-attribute-{attributeName}-target" attribute
+ * The input field must have the "data-edit-color-attribute-{attributeName}-input"
+ * Both data attributes must have the same value (as identifier)
+ */
+function onEditColorAttribute(event) {
+    if (!event.target) {
+        return;
+    }
+
+    let moduleEdit = event.target.closest('.cms-module-edit');
+    if (!moduleEdit) {
+        return;
+    }
+
+    let preview = moduleEdit.querySelector('.module-preview');
+    if (!preview) {
+        return;
+    }
+
+    const kebabize = (str) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase());
+    const escapeAttrValue = (value) => typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+
+    Object.keys(event.target.dataset).forEach((dataAttribute) => {
+        if (!dataAttribute.startsWith('editColorAttribute') || !dataAttribute.endsWith('Input')) {
+            return;
+        }
+
+        const targetHashes = event.target.dataset[dataAttribute]
+            .split(',')
+            .map((hash) => hash.trim())
+            .filter(Boolean);
+
+        if (!targetHashes.length) {
+            return;
+        }
+
+        const targetAttributeName = dataAttribute
+            .replace(/^editColorAttribute/, '')
+            .replace(/Input$/, '');
+
+        if (!targetAttributeName) {
+            return;
+        }
+
+        const attributeName = kebabize(targetAttributeName);
+        targetHashes.forEach((targetHash) => {
+            const htmlTargetElements = preview.querySelectorAll("[data-edit-color-attribute-" + attributeName + "-target=\"" + escapeAttrValue(targetHash) + "\"]");
+            if (!htmlTargetElements.length) {
+                return;
+            }
+
+            htmlTargetElements.forEach((htmlTargetElement) => {
+                htmlTargetElement.setAttribute(attributeName, event.target.value);
+            });
+        });
+    });
+}

assets/scripts/types/color-type.js

@@ -25,7 +25,12 @@ function _init() {
         }
 
         let widget = event.target;
-        let toggler = widget.closest('.input-group').querySelector('[data-color-type=toggler]');
+        let inputGroup = widget.closest('.input-group');
+        if (!inputGroup) {
+            return;
+        }
+
+        let toggler = inputGroup.querySelector('[data-color-type=toggler]');
 
         if (!toggler) {
             return;
@@ -40,7 +45,16 @@ function _init() {
 }
 
 function colorDatePicker(toggler) {
-    let widget = toggler.closest('.input-group').querySelector('[data-color-type=widget]');
+    if (!toggler) {
+        return;
+    }
+
+    let inputGroup = toggler.closest('.input-group');
+    if (!inputGroup) {
+        return;
+    }
+
+    let widget = inputGroup.querySelector('[data-color-type=widget]');
 
     if (!widget) {
         return;
@@ -56,7 +70,16 @@ function colorDatePicker(toggler) {
 
     if (!widget.hasAttribute('data-edit-bgcolor-input')) return;
 
-    let modulePreview = widget.closest('.cms-module-edit').querySelector('.module-preview');
+    let moduleEdit = widget.closest('.cms-module-edit');
+    if (!moduleEdit) {
+        return;
+    }
+
+    let modulePreview = moduleEdit.querySelector('.module-preview');
+    if (!modulePreview) {
+        return;
+    }
+
     let htmlTargetElements = modulePreview.querySelectorAll("[data-edit-bgcolor-target='" + widget.dataset.editBgcolorInput + "']");
     if (htmlTargetElements.length) {
 
@@ -66,4 +89,4 @@ function colorDatePicker(toggler) {
             htmlTargetElements.forEach((htmlTargetElement) => htmlTargetElement.style.backgroundColor = widget.value);
         }
     }
-}
+}

src/Form/Type/ColorType.php

@@ -4,6 +4,9 @@
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ColorType as SymfonyColorType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
 
 class ColorType extends AbstractType
 {
@@ -12,8 +15,21 @@ public function getBlockPrefix(): string
         return 'cms_color';
     }
 
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'show_toggler' => true,
+        ]);
+        $resolver->setAllowedTypes('show_toggler', 'bool');
+    }
+
     public function getParent(): string
     {
         return SymfonyColorType::class;
     }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        $view->vars['show_toggler'] = $options['show_toggler'];
+    }
 }

src/Twig/Extension/EditFormExtension.php

@@ -23,9 +23,22 @@ public function getFilters(): array
         ];
     }
 
-    public function formViewSetAttr(FormView $formView, string $name, string $value): void
+    public function formViewSetAttr(FormView $formView, string $name, string $value, bool $allowMultiple = false): void
     {
-        $formView->vars['attr'][$name] = $value;
+        $current = (string) ($formView->vars['attr'][$name] ?? '');
+
+        if (!$allowMultiple || '' === $current) {
+            $formView->vars['attr'][$name] = $value;
+
+            return;
+        }
+
+        $values = array_filter(array_map('trim', explode(',', $current)));
+        if (!in_array($value, $values, true)) {
+            $values[] = $value;
+        }
+
+        $formView->vars['attr'][$name] = implode(',', $values);
     }
 
     public function sha1($value): string

templates/forms/types_theme.html.twig

@@ -37,14 +37,18 @@
 {% endblock html_class_widget %}
 
 {% block cms_color_widget %}
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <div class="input-group-text">
-                <input type="checkbox" data-color-type="toggler" {{ form.vars.data ? 'checked="checked"' : '' }} />
+    {% if form.vars.show_toggler %}
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <div class="input-group-text">
+                    <input type="checkbox" data-color-type="toggler" {{ form.vars.data ? 'checked="checked"' : '' }} />
+                </div>
             </div>
+            {{ form_widget(form, {'attr': {'data-color-type': 'widget'}, 'disabled': not form.vars.data}) }}
         </div>
-        {{ form_widget(form, {'attr': {'data-color-type': 'widget'}, 'disabled': not form.vars.data}) }}
-    </div>
+    {% else %}
+        {{ form_widget(form) }}
+    {% endif %}
 {% endblock cms_color_widget %}
 
 {% block html_id_widget %}

templates/macros/modules_edit.html.twig

@@ -117,6 +117,13 @@
     {% endif %}
 {%- endmacro -%}
 
+{%- macro link_color_attribute (formField, attributeName, defaultValue = null) -%}
+    {% set value_hash = (formField.vars.name~'_'~random())|sfs_cms_sha1|slice(0,8) %}
+    {{ _self._update_link_value(formField, 'data-edit-color-attribute-'~attributeName~'-input', value_hash, true) }}
+    data-edit-color-attribute-{{ attributeName }}-target="{{ value_hash }}"
+    {{ attributeName }}="{{ formField.vars.data|default(defaultValue)|default('#000000') }}"
+{%- endmacro -%}
+
 {%- macro bg_color_style(formField) -%}
     {{ formField.vars.data ? 'background-color:'~formField.vars.data~';' : '' }}
 {%- endmacro -%}
@@ -184,8 +191,8 @@
     {% endif %}
 {%- endmacro _module_name -%}
 
-{%- macro _update_link_value (formField, dataField, value = false) -%}
-    {% if not formField.vars.attr[dataField]|default(false) %}
-        {{ sfs_cms_form_view_set_attr(formField, dataField, value == false ? (formField.vars.name~'_'~random())|sfs_cms_sha1|slice(0,8) : value) }}
+{%- macro _update_link_value (formField, dataField, value = false, allowMultiple = false) -%}
+    {% if not formField.vars.attr[dataField]|default(false) or allowMultiple %}
+        {{ sfs_cms_form_view_set_attr(formField, dataField, value == false ? (formField.vars.name~'_'~random())|sfs_cms_sha1|slice(0,8) : value, allowMultiple) }}
     {% endif %}
 {%- endmacro _update_link_value -%}