@joinbox/formsync - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.1.0](https://github.com/joinbox/ui-components/compare/@joinbox/formsync@2.0.3...@joinbox/formsync@2.1.0) (2021-07-06)
+
+
+### Features
+
+* **FormSync:** sync disabled attribute ([abc5d2f](https://github.com/joinbox/ui-components/commit/abc5d2fabfed6b46cb5ba8d46c8c3a2bc9af4a6d))
+
+
+
+
+
 ## [2.0.3](https://github.com/joinbox/ui-components/compare/@joinbox/formsync@2.0.2...@joinbox/formsync@2.0.3) (2021-06-21)
@@ -8,0 +19,0 @@

FormSyncElement.js

@@ -180,2 +180,27 @@ (function () {
 
+    /**
+     * Copies an attribute and its value from one element to another
+     */
+    var copyAttribute = ({ sourceElement, targetElement, attribute, overwrite = true } = {}) => {
+        /* global HTMLElement */
+        if (!(sourceElement instanceof HTMLElement)) {
+            throw new Error(`copyAttribute: sourceElement must be a HTMLElement, is ${sourceElement} instead.`)
+        }
+        if (!(targetElement instanceof HTMLElement)) {
+            throw new Error(`copyAttribute: sourceElement must be a HTMLElement, is ${targetElement} instead.`)
+        }
+        if (typeof attribute !== 'string') {
+            throw new Error(`copyAttribute: attribute must be a string, is ${attribute} instead.`)
+        }
+
+        // Don't overwrite existing attribute if overwrite is false
+        if (!overwrite && targetElement.hasAttribute(attribute)) return;
+
+        targetElement.setAttribute(
+            attribute,
+            sourceElement.getAttribute(attribute),
+        );
+
+    };
+
     /* global HTMLElement, document, requestAnimationFrame */
@@ -201,6 +226,6 @@ class FormSync extends HTMLElement {
                     // Split string at comma and only use valid (non-empty) values
-                    transform: value => !value ? [] : value
+                    transform: value => (!value ? [] : value
                         .split(',')
                         .map(item => item.trim())
-                        .filter(item => !!item),
+                        .filter(item => !!item)),
                 }]),
@@ -270,2 +295,3 @@ );
                 this.copyPlaceholder(inputConfig.input, cloneInput);
+                this.copyDisabled(inputConfig.input, cloneInput);
                 this.connectLabelToInput(cloneLabel, cloneInput);
@@ -324,16 +350,28 @@
         copyPlaceholder(originalInput, clonedInput) {
-            if (
-                originalInput &&
-                clonedInput &&
-                originalInput.hasAttribute('placeholder') &&
-                !clonedInput.hasAttribute('placeholder')
-            ) {
-                clonedInput.setAttribute(
-                    'placeholder',
-                    originalInput.getAttribute('placeholder'),
-                );
-            }
+            if (!originalInput || !clonedInput) return;
+            copyAttribute({
+                sourceElement: originalInput,
+                targetElement: clonedInput,
+                attribute: 'placeholder',
+                overwrite: false,
+            });
         }
 
         /**
+         * Clones disabled attribute from original to cloned input. If it is already set on cloned
+         * input, let's assume this was done on purpose and don't overwrite it.
+         * @param {HTMLElement} originalInput
+         * @param {HTMLElement} clonedInput
+         */
+        copyDisabled(originalInput, clonedInput) {
+            if (!originalInput || !clonedInput) return;
+            copyAttribute({
+                sourceElement: originalInput,
+                targetElement: clonedInput,
+                attribute: 'disabled',
+                overwrite: false,
+            });
+        }
+
+        /**
          * Copies options of original to cloned <select> input
@@ -355,3 +393,3 @@ * @param {HTMLElement} originalInput
          * When **one** cloned radio button is changed, we might therefore have to change multiple
-         * original radio inputs. Do so by syncing the whole form. 
+         * original radio inputs. Do so by syncing the whole form.
          * TODO: Find a better solution.
@@ -368,2 +406,5 @@ */
 
+        /**
+         * See comment at this.setupInputSync()
+         */
         syncSimilarRadioInputs(radioInput) {
@@ -373,3 +414,2 @@ // Get all radio inputs with the same name attribute
             const similarClonedInputs = this.querySelectorAll(`input[type="radio"][name="${name}"]`);
-            // Call
             Array.from(similarClonedInputs).forEach((input) => {
@@ -383,3 +423,2 @@ const sync = input.inputSync;
             });
-
         }
@@ -386,0 +425,0 @@

package.json

 {
   "name": "@joinbox/formsync",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Synchronizes forms and elements between an original form (e.g. one created by Drupal) and another form (e.g. freely created as a template based on mockups).",
@@ -32,3 +32,3 @@ "main": "FormSync.js",
   },
-  "gitHead": "4f5599928c21fa9b64bafc1315435ee7faec26c6"
+  "gitHead": "2208424f02df4d9f1b0192d5c5b10e513cc79da8"
 }

src/FormSync.js

 import canReadAttributes from '../../../src/shared/canReadAttributes.js';
 import InputSync from './InputSync.js';
+import copyAttribute from './copyAttribute.js';
 
@@ -24,6 +25,6 @@ /* global HTMLElement, document, requestAnimationFrame */
                 // Split string at comma and only use valid (non-empty) values
-                transform: value => !value ? [] : value
+                transform: value => (!value ? [] : value
                     .split(',')
                     .map(item => item.trim())
-                    .filter(item => !!item),
+                    .filter(item => !!item)),
             }]),
@@ -93,2 +94,3 @@ );
             this.copyPlaceholder(inputConfig.input, cloneInput);
+            this.copyDisabled(inputConfig.input, cloneInput);
             this.connectLabelToInput(cloneLabel, cloneInput);
@@ -147,16 +149,28 @@
     copyPlaceholder(originalInput, clonedInput) {
-        if (
-            originalInput &&
-            clonedInput &&
-            originalInput.hasAttribute('placeholder') &&
-            !clonedInput.hasAttribute('placeholder')
-        ) {
-            clonedInput.setAttribute(
-                'placeholder',
-                originalInput.getAttribute('placeholder'),
-            );
-        }
+        if (!originalInput || !clonedInput) return;
+        copyAttribute({
+            sourceElement: originalInput,
+            targetElement: clonedInput,
+            attribute: 'placeholder',
+            overwrite: false,
+        });
     }
 
     /**
+     * Clones disabled attribute from original to cloned input. If it is already set on cloned
+     * input, let's assume this was done on purpose and don't overwrite it.
+     * @param {HTMLElement} originalInput
+     * @param {HTMLElement} clonedInput
+     */
+    copyDisabled(originalInput, clonedInput) {
+        if (!originalInput || !clonedInput) return;
+        copyAttribute({
+            sourceElement: originalInput,
+            targetElement: clonedInput,
+            attribute: 'disabled',
+            overwrite: false,
+        });
+    }
+
+    /**
      * Copies options of original to cloned <select> input
@@ -178,3 +192,3 @@ * @param {HTMLElement} originalInput
      * When **one** cloned radio button is changed, we might therefore have to change multiple
-     * original radio inputs. Do so by syncing the whole form. 
+     * original radio inputs. Do so by syncing the whole form.
      * TODO: Find a better solution.
@@ -191,2 +205,5 @@ */
 
+    /**
+     * See comment at this.setupInputSync()
+     */
     syncSimilarRadioInputs(radioInput) {
@@ -196,3 +213,2 @@ // Get all radio inputs with the same name attribute
         const similarClonedInputs = this.querySelectorAll(`input[type="radio"][name="${name}"]`);
-        // Call
         Array.from(similarClonedInputs).forEach((input) => {
@@ -206,3 +222,2 @@ const sync = input.inputSync;
         });
-
     }
@@ -209,0 +224,0 @@

No alert changes

Improved metrics

Total package byte prevSize

83515

increased by8.97%

Number of package files

22

increased by15.79%

Lines of code

1626

increased by11.68%

No dependency changes