Trigger checkble click event first then change event (#86)

Padax · Sep 12, 2021 · 6a4560a · 6a4560a
1 parent 55d795b
commit 6a4560a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/wc/WComponent.js b/wc/WComponent.js
@@ -16,7 +16,6 @@ class WComponent extends HTMLElement{
   constructor(){
     super();
     this.createGettersAndSetters();
-    this.bindProps();
     this.attachShadow({ mode: 'open' });
     this.setStylesheet(this.stylesheet);
     this.componentWillRender();
@@ -27,17 +26,6 @@ class WComponent extends HTMLElement{
   componentWillRender() {}
   componentDidRender() {}
 
-  /**
-   * Set all properties from all observed attributes.
-   */
-  bindProps() {
-    if(!Array.isArray(this.constructor.observedAttributes)) {
-      return;
-    }
-    this.constructor.observedAttributes.forEach(attr => {
-      this[attr.name] = this.getAttribute(attr.name);
-    });
-  }
   /**
    * Dynamically create getters & setters for property-attribute sync 
    *  by parsing class field attribute object.

diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js
@@ -53,6 +53,7 @@ const stylesheet=`
 `;
 
 class Checkable extends WComponent{
+
   static attributes = {
     checked: {
       name: 'checked', defaultValue: false, 

diff --git a/wc/components/checkable/Checkbox.js b/wc/components/checkable/Checkbox.js
@@ -11,18 +11,20 @@ const stylesheet=`
 `;
 
 class Checkbox extends Checkable{
+
   constructor() {
     super();
     this.bindEvents();
   }
 
   clickHandler = e => {
+    this.dispatchEvent(this.events.click);
     if(!this.disabled) {
       this.checked = !this.checked;
     }
+    e.stopPropagation();
   };
 
-
 }
 Checkbox.prototype.stylesheet += stylesheet;
 Checkbox.prototype.type = 'checkbox';

diff --git a/wc/components/checkable/Radio.js b/wc/components/checkable/Radio.js
@@ -9,16 +9,20 @@ const stylesheet=`
   }
 `;
 class Radio extends Checkable{
+
   constructor() {
     super();
     this.bindEvents();
   }
 
   clickHandler = e => {
+    this.dispatchEvent(this.events.click);
     if(!this.disabled && !this.checked) {
       this.checked = !this.checked;
     }
+    e.stopPropagation();
   };
+
 }
 Radio.prototype.stylesheet += stylesheet;
 Radio.prototype.type = 'radio';