Implement radio name group (#86)

Padax · Sep 12, 2021 · 3a415e2 · 3a415e2
1 parent e0dc79c
commit 3a415e2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 26 deletions.
diff --git a/wc/WComponent.js b/wc/WComponent.js
@@ -19,7 +19,8 @@ class WComponent extends HTMLElement{
     this.attachShadow({ mode: 'open' });
     this.setStylesheet(this.stylesheet);
     this.init();
-    this.componentDidInit();
+    //this.tabIndex = '0';  // Make component focusable
+    this.key = new Date().getTime() + Math.random();
   }
   /**
    * Call update method in attribute changed callback if attribute name is acceptable
@@ -29,9 +30,6 @@ class WComponent extends HTMLElement{
       this.update({name, oldValue, newValue});
     }
   }
-  componentDidInit() {
-    //this.tabIndex = '0';  // Make component focusable
-  }
   update(){}
   /**
    * Dynamically create getters & setters for property-attribute sync 
@@ -55,6 +53,9 @@ class WComponent extends HTMLElement{
       });
     });
   }
+  equals(component) {
+    return this.key === component.key;
+  }
   getAttributeParserByName(name) {
     if(typeof name !== 'string') {
       return undefined;

diff --git a/wc/components/Form.js b/wc/components/Form.js
@@ -123,11 +123,11 @@ class Form extends WComponent{
     if(typeof radio.name !== 'string' || radio.disabled) { return; }
 
     const radios = Array.from(this.querySelectorAll(`w-radio[name='${radio.name}']`));
-    // radios.forEach(r => {
-    //   if(!r.equals(radio)) {
-    //     r.checked = false;
-    //   }
-    // });
+    radios.forEach(r => {
+      if(!r.equals(radio)) {
+        r.checked = false;
+      }
+    });
   }
   submitHandler = e => {
     this.dispatchEvent(this.events.submit);

diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js
@@ -78,23 +78,6 @@ class Checkable extends WComponent{
     super();
   }
 
-  update({ name, oldValue, newValue } = {}) {
-    if(name === this.constructor.attributes.checked.name
-       || name === this.constructor.attributes.disabled.name) {
-      const input = this.shadowRoot.querySelector('input');
-      const value = this.getAttributeParserByName(name)(newValue, this.constructor.attributes[name]);
-      if(value) {
-        input.setAttribute(name, value);
-      } else {
-        input.removeAttribute(name);
-      }
-
-      // Trigger change event
-      if(name === this.constructor.attributes.checked.name && oldValue !== newValue) {
-        this.dispatchEvent(this.events.change);
-      }
-    }
-  }
   bindEvents() {
     this.events = {
       change: new Event('change'),
@@ -117,6 +100,19 @@ class Checkable extends WComponent{
 
     DOM.create('slot', {}, ctn);
   }
+  update({ name, newValue } = {}) {
+    const checkedAttr = this.constructor.attributes.checked;
+    const disabledAttr = this.constructor.attributes.disabled;
+    if(name === checkedAttr.name || name === disabledAttr.name) {
+      const input = this.shadowRoot.querySelector('input');
+      const value = this.getAttributeParserByName(name)(newValue, this.constructor.attributes[name]);
+      if(value) {
+        input.setAttribute(name, value);
+      } else {
+        input.removeAttribute(name);
+      }
+    }
+  }
 
 }
 Checkable.prototype.stylesheet=stylesheet;

diff --git a/wc/components/checkable/Checkbox.js b/wc/components/checkable/Checkbox.js
@@ -17,6 +17,20 @@ class Checkbox extends Checkable{
     this.bindEvents();
   }
 
+  update({ name, oldValue, newValue } = {}) {
+    super.update({ name, oldValue, newValue });
+
+    const checkedAttr = this.constructor.attributes.checked;
+    const disabledAttr = this.constructor.attributes.disabled;
+    if(name === checkedAttr.name || name === disabledAttr.name) {
+
+      // Trigger change event
+      if(name === checkedAttr.name && oldValue !== newValue) {
+        this.dispatchEvent(this.events.change);
+      }
+    }
+  }
+
   clickHandler = e => {
     this.dispatchEvent(this.events.click);
     if(!this.disabled) {

diff --git a/wc/components/checkable/Radio.js b/wc/components/checkable/Radio.js
@@ -15,6 +15,20 @@ class Radio extends Checkable{
     this.bindEvents();
   }
 
+  update({ name, oldValue, newValue } = {}) {
+    super.update({ name, oldValue, newValue });
+
+    const checkedAttr = this.constructor.attributes.checked;
+    const disabledAttr = this.constructor.attributes.disabled;
+    if(name === checkedAttr.name || name === disabledAttr.name) {
+
+      // Trigger change event
+      if(name === checkedAttr.name && checkedAttr.parser(newValue, checkedAttr)) {
+        this.dispatchEvent(this.events.change);
+      }
+    }
+  }
+
   clickHandler = e => {
     this.dispatchEvent(this.events.click);
     if(!this.disabled && !this.checked) {