EZP-31743: added new multiinput class (#1435)

ezsystems · Jul 20, 2020 · fb55307 · fb55307
1 parent 71610df
commit fb55307
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/src/bundle/Resources/encore/ez.js.config.js b/src/bundle/Resources/encore/ez.js.config.js
@@ -244,6 +244,7 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-field.js'),
             path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-file-field.js'),
             path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-preview-field.js'),
+            path.resolve(__dirname, '../public/js/scripts/fieldType/base/multi-input-field.js'),
             ...fieldTypes,
             path.resolve(__dirname, '../public/js/scripts/sidebar/extra.actions.js'),
         ])

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/multi-input-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/multi-input-field.js
@@ -0,0 +1,23 @@
+(function(global, doc, eZ) {
+    class MultiInputFieldValidator extends eZ.BaseFieldValidator {
+        constructor({ containerSelectors, ...restProps }) {
+            super(restProps);
+
+            this.containerSelectors = containerSelectors;
+        }
+
+        toggleInvalidState(isError, config, input) {
+            super.toggleInvalidState(isError, config, input);
+
+            this.containerSelectors.forEach((selector) => {
+                const invalidSelector = `.${this.classInvalid}`;
+                const container = input.closest(selector);
+                const method = !!container.querySelector(invalidSelector) ? 'add' : 'remove';
+
+                container.classList[method](this.classInvalid);
+            });
+        }
+    }
+
+    eZ.addConfig('MultiInputFieldValidator', MultiInputFieldValidator);
+})(window, window.document, window.eZ);
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js b/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js
@@ -6,7 +6,7 @@
     const SELECTOR_FIELD_EMAIL = '.ez-data-source__field--email';
     const SELECTOR_FIELD_NAME = '.ez-data-source__field--name';
 
-    class EzAuthorValidator extends global.eZ.BaseFieldValidator {
+    class EzAuthorValidator extends global.eZ.MultiInputFieldValidator {
         /**
          * Validates the 'name' input field value
          *
@@ -182,6 +182,7 @@
     const validator = new EzAuthorValidator({
         classInvalid: 'is-invalid',
         fieldSelector: SELECTOR_FIELD,
+        containerSelectors: ['.ez-data-source__author', '.ez-field-edit--ezauthor'],
         eventsMap: [
             {
                 selector: `.ez-data-source__author ${SELECTOR_FIELD_NAME} .ez-data-source__input`,