IBX-9332: Add refine text support to eztext fields (#1416)

Author: GrabowskiM

src/bundle/Resources/public/js/scripts/admin.input.text.js

@@ -1,5 +1,6 @@
 (function (global, doc) {
     const INPUT_PADDING = 12;
+    const TEXTAREA_SCROLLBAR_PADDING = 6;
     const togglePasswordVisibility = (event) => {
         const passwordTogglerBtn = event.currentTarget;
         const passwordShowIcon = passwordTogglerBtn.querySelector('.ibexa-input-text-wrapper__password-show');
@@ -40,9 +41,12 @@
         inputClearBtns.forEach((clearBtn) => clearBtn.addEventListener('click', clearText, false));
         passwordTogglerBtns.forEach((passwordTogglerBtn) => passwordTogglerBtn.addEventListener('click', togglePasswordVisibility, false));
         recalculateStyling();
+        attachListenersToMultilineInputs();
     };
     const recalculateInputStyling = (inputActionsContainer) => {
-        const input = inputActionsContainer.closest('.ibexa-input-text-wrapper').querySelector('input');
+        const textWrapper = inputActionsContainer.closest('.ibexa-input-text-wrapper');
+        const inputType = textWrapper.classList.contains('ibexa-input-text-wrapper--multiline') ? 'textarea' : 'input';
+        const input = textWrapper.querySelector(inputType);
 
         if (!input || input.type === 'number') {
             return;
@@ -64,6 +68,30 @@
             recalculateInputStyling(inputActionsContainer);
         });
     };
+    const attachListenersToMultilineInputs = () => {
+        const multilineInputWrappers = doc.querySelectorAll('.ibexa-input-text-wrapper.ibexa-input-text-wrapper--multiline');
+
+        multilineInputWrappers.forEach((multilineInputWrapper) => {
+            const textareaComponent = multilineInputWrapper.querySelector('.ibexa-input--textarea');
+
+            const textareaComponentObserver = new ResizeObserver(() => {
+                toggleScrollbarStyles(multilineInputWrapper);
+            });
+
+            textareaComponentObserver.observe(textareaComponent);
+            toggleScrollbarStyles(multilineInputWrapper);
+        });
+    };
+    const toggleScrollbarStyles = (multilineInputWrapper) => {
+        const textareaComponent = multilineInputWrapper.querySelector('textarea');
+        const { scrollHeight, clientHeight, offsetWidth, clientWidth } = textareaComponent;
+        const { overflowY } = global.getComputedStyle(textareaComponent);
+        const hasScrollbar = overflowY !== 'hidden' && scrollHeight > clientHeight;
+        const scrollbarWidth = offsetWidth - clientWidth;
+
+        multilineInputWrapper.classList.toggle('ibexa-input-text-wrapper--scrollbar-visible', hasScrollbar);
+        multilineInputWrapper.style.setProperty('--scrollbar-width', `${scrollbarWidth + TEXTAREA_SCROLLBAR_PADDING}px`);
+    };
 
     doc.body.addEventListener('ibexa-inputs:added', attachListenersToAllInputs, false);
     doc.body.addEventListener('ibexa-inputs:recalculate-styling', recalculateStyling, false);

src/bundle/Resources/public/scss/_inputs.scss

@@ -111,6 +111,10 @@
             box-shadow 0s; // Chrome does not render box-shadow properly with transition
         height: calculateRem(120px);
         padding: calculateRem(10px) calculateRem(16px);
+
+        &.form-control {
+            min-height: calculateRem(48px);
+        }
     }
 
     &--checkbox,
@@ -406,7 +410,7 @@
         top: 50%;
         right: calculateRem(8px);
         transform: translate(0, -50%);
-        height: calculateRem(24px);
+        min-height: calculateRem(24px);
         padding: 0;
         fill: var(--ibexa-btn-icon-fill-color, #{$ibexa-color-dark});
         z-index: 1;
@@ -452,6 +456,23 @@
         }
     }
 
+    &--multiline {
+        .ibexa-input-text-wrapper {
+            &__actions {
+                top: calculateRem(8px);
+                transform: none;
+            }
+        }
+
+        &.ibexa-input-text-wrapper--scrollbar-visible {
+            .ibexa-input-text-wrapper {
+                &__actions {
+                    right: var(--scrollbar-width, 0);
+                }
+            }
+        }
+    }
+
     &:hover {
         .ibexa-input {
             border-color: var(--ibexa-input-hover-border-color, #{$ibexa-color-primary});

src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig

@@ -3,6 +3,7 @@
 {% set is_password_type = type|default('') == 'password' %}
 {% set is_password_input = is_password_input|default(is_password_type) %}
 {% set has_search = has_search|default(false) %}
+{% set is_multiline = is_multiline|default(false) %}
 {% set extra_btn = extra_btn|default({})|merge({
     label: extra_btn.label|default(''),
     attr: extra_btn.attr|default({})|merge({
@@ -20,6 +21,7 @@
         ~ (is_password_input ? ' ibexa-input-text-wrapper--password')
         ~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
         ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
+        ~ (is_multiline ? ' ibexa-input-text-wrapper--multiline')
     )|trim
 }) %}
 

src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig

@@ -268,7 +268,18 @@
 
 {% block textarea_widget -%}
     {% set attr = attr|merge({class: (attr.class|default('') ~ ' ibexa-input ibexa-input--textarea')|trim}) %}
-    {{- parent() -}}
+    {%- set input_html -%}
+        {{- parent() -}}
+    {%- endset -%}
+    {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { is_multiline: true } -%}
+        {% block content %}
+            {{ input_html }}
+        {% endblock %}
+
+        {% block actions %}
+            {{ extra_actions_after|default(null)}}
+        {% endblock %}
+    {%- endembed -%}
 {%- endblock textarea_widget %}
 
 {%- block richtext_widget -%}