Merge pull request #43 from WebCoder49/setcustomvalidity

Synchronise validity attributes and functions with textarea

Author: WebCoder49

code-input.js

@@ -16,12 +16,27 @@ var codeInput = {
      */
     observedAttributes: [
         "value",
-        "name",
-        "placeholder",
-        "lang",
+        "placeholder", 
+        "lang", 
         "template"
     ],
 
+    /**
+     * A list of attributes that will be moved to 
+     * the textarea after they are applied on the 
+     * code-input element.
+     */
+    textareaSyncAttributes: [
+        "value",
+        "name",
+        // Form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
+        "required",
+        "minlength", "maxlength",
+        "min", "max",
+        "type",
+        "pattern"
+    ],
+
     /* ------------------------------------
     *  ------------Templates---------------
     *  ------------------------------------ */
@@ -417,12 +432,16 @@ var codeInput = {
             textarea.value = value;
             textarea.setAttribute("spellcheck", "false");
 
-            if (this.getAttribute("name")) {
-                textarea.setAttribute("name", this.getAttribute("name")); // for use in forms
-            }
-
-            textarea.addEventListener('input', (evt) => { textarea.parentElement.update(textarea.value); textarea.parentElement.syncScroll(); });
-            textarea.addEventListener('scroll', (evt) => textarea.parentElement.syncScroll());
+            // Synchronise attributes to textarea
+            codeInput.textareaSyncAttributes.forEach((attribute) => {
+                if(this.hasAttribute(attribute)) {
+                    textarea.setAttribute(attribute, this.getAttribute(attribute));
+                }
+            });
+    
+            textarea.addEventListener('input',(evt) => { textarea.parentElement.update(textarea.value); textarea.parentElement.sync_scroll();});
+            textarea.addEventListener('scroll',(evt) =>  textarea.parentElement.sync_scroll());
+          
             this.append(textarea);
 
             // Create result element
@@ -485,7 +504,7 @@ var codeInput = {
          * to `codeInput.CodeInput.attributeChangedCallback` when modified.
          */
         static get observedAttributes() {
-            return codeInput.observedAttributes;
+           return codeInput.observedAttributes.concat(codeInput.textareaSyncAttributes);
         }
 
         /**
@@ -503,13 +522,6 @@ var codeInput = {
                     case "value":
                         this.update(newValue);
                         break;
-
-                    case "name":
-                        if (this.querySelector("textarea") !== null) {
-                            this.querySelector("textarea").setAttribute("name", newValue);
-                        }
-                        break;
-
                     case "placeholder":
                         this.querySelector("textarea").placeholder = newValue;
                         break;
@@ -554,6 +566,11 @@ var codeInput = {
 
                         this.update(this.value);
 
+                        break;
+                    default:
+                        if(codeInput.textareaSyncAttributes.includes(name)) {
+                            this.querySelector("textarea").setAttribute(name, newValue);
+                        }
                         break;
                 }
             }
@@ -578,6 +595,18 @@ var codeInput = {
                 } else {
                     this.querySelector("textarea").addEventListener("selectionchange", boundCallback, options);
                 }
+            } else if(evt_name == "invalid") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").addEventListener("invalid", boundCallback);
+                } else {
+                    this.querySelector("textarea").addEventListener("invalid", boundCallback, thirdParameter);
+                }
+            } else if(evt_name == "input") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").addEventListener("input", boundCallback);
+                } else {
+                    this.querySelector("textarea").addEventListener("input", boundCallback, thirdParameter);
+                }
             } else {
                 super.addEventListener(type, listener, options);
             }
@@ -635,7 +664,40 @@ var codeInput = {
             return this.setAttribute("placeholder", val);
         }
 
-        /**
+        /* Form validation */
+        get validity() {
+            return this.querySelector("textarea").validity;
+        }
+        get validationMessage() {
+            return this.querySelector("textarea").validationMessage;
+        }
+        setCustomValidity(error) {
+            return this.querySelector("textarea").setCustomValidity(error);
+        }
+        checkValidity() {
+            return this.querySelector("textarea").checkValidity();
+        }
+        reportValidity() {
+            return this.querySelector("textarea").reportValidity();
+        }
+
+
+        /* Sync all attributes that can be set on the `code-input` element to the `textarea` element */
+        setAttribute(qualifiedName, value) {
+            super.setAttribute(qualifiedName, value); // code-input
+            this.querySelector("textarea").setAttribute(qualifiedName, value); // textarea
+        }
+
+        getAttribute(qualifiedName) {
+            if(this.querySelector("textarea") == null) {
+                return super.getAttribute(qualifiedName);
+            }
+            return this.querySelector("textarea").getAttribute(qualifiedName); // textarea
+        }
+
+        pluginData = {}; // For plugins to store element-specific data under their name, e.g. <code-input>.pluginData.specialChars
+        
+         /**
          * Allows plugins to store data in the scope of a single element.
          * Key - name of the plugin
          * Value - object of data to be stored; different plugins may use this differently.