Fix reset controls, bump v0.3.0

Author: mirisuzanne

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changes
 
+## v0.3.0 = 2024-09-20
+
+- NEW: Allow `data-reset="*"` universal reset buttons
+- REFACTOR: Only add a single event listener per reset button
+- BREAKING: Replaced `GroundControl.onReset()` => `GroundControl.reSet()`
+- FIX: Changing the `switch-control.value` programmatically
+  correctly invokes `onPress` or `onUnpress`
+
 ## v0.2.1 - 2024-08-26
 
 - FIX: `switch-control` raw file out-of-date 🙈

README.md

@@ -92,15 +92,15 @@ Make sure you include the `<script>` in your project
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://www.unpkg.com/@terriblemia/ground-control@0.2.1/index.js"
+  src="https://www.unpkg.com/@terriblemia/ground-control@0.3.0/index.js"
 ></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://esm.sh/@terriblemia/ground-control@0.2.1"
+  src="https://esm.sh/@terriblemia/ground-control@0.3.0"
 ></script>
 ```
 

ground-control-raw.js

@@ -89,11 +89,11 @@ class GroundControl extends HTMLElement {
   get usedValue() { return this.value || this.dataset.off; }
 
   set inputId(value) {
-    this.#inputId = value;
+    if (this.#inputId) { this.#removeResetListener(); }
 
-    this.#removeResetListener();
+    this.#inputId = value;
     this.#related.resets = this.#findAll(
-      `button[data-reset~=${value}]`
+      `button:is([data-reset~=${value}], [data-reset="*"])`
     );
     this.#addResetListener();
 
@@ -131,7 +131,7 @@ class GroundControl extends HTMLElement {
   onValueChange;
   onEventChange;
 
-  onReset = () => {
+  reSet = () => {
     this.value = this.initialValue;
   };
 
@@ -182,15 +182,27 @@ class GroundControl extends HTMLElement {
 
   #addResetListener = () => {
     this.#related.resets.forEach((resetBtn) => {
-      resetBtn.addEventListener('click', this.onReset);
+      resetBtn.resetTargets = [
+        ...(resetBtn.resetTargets || []),
+        this
+      ];
+
+      if (!resetBtn.resetListener) {
+        resetBtn.resetListener = () => {
+          resetBtn.resetTargets.forEach((target) => { target.reSet(); });
+        }
+        resetBtn.addEventListener('click', resetBtn.resetListener);
+      }
     });
   };
 
   #removeResetListener = () => {
-    if (!this.#related.resets) { return; }
+    this.#related.resets?.forEach((resetBtn) => {
+      resetBtn.resetTargets.filter((target) => target !== this);
 
-    this.#related.resets.forEach((resetBtn) => {
-      resetBtn.removeEventListener('click', this.onReset);
+      if (resetBtn.resetTargets.length === 0) {
+        resetBtn.removeEventListener('click', resetBtn.resetListener);
+      }
     });
   };
 }

ground-control.js

@@ -89,11 +89,11 @@ export default class GroundControl extends HTMLElement {
   get usedValue() { return this.value || this.dataset.off; }
 
   set inputId(value) {
-    this.#inputId = value;
+    if (this.#inputId) { this.#removeResetListener(); }
 
-    this.#removeResetListener();
+    this.#inputId = value;
     this.#related.resets = this.#findAll(
-      `button[data-reset~=${value}]`
+      `button:is([data-reset~=${value}], [data-reset="*"])`
     );
     this.#addResetListener();
 
@@ -131,7 +131,7 @@ export default class GroundControl extends HTMLElement {
   onValueChange;
   onEventChange;
 
-  onReset = () => {
+  reSet = () => {
     this.value = this.initialValue;
   };
 
@@ -182,15 +182,27 @@ export default class GroundControl extends HTMLElement {
 
   #addResetListener = () => {
     this.#related.resets.forEach((resetBtn) => {
-      resetBtn.addEventListener('click', this.onReset);
+      resetBtn.resetTargets = [
+        ...(resetBtn.resetTargets || []),
+        this
+      ];
+
+      if (!resetBtn.resetListener) {
+        resetBtn.resetListener = () => {
+          resetBtn.resetTargets.forEach((target) => { target.reSet(); });
+        }
+        resetBtn.addEventListener('click', resetBtn.resetListener);
+      }
     });
   };
 
   #removeResetListener = () => {
-    if (!this.#related.resets) { return; }
+    this.#related.resets?.forEach((resetBtn) => {
+      resetBtn.resetTargets.filter((target) => target !== this);
 
-    this.#related.resets.forEach((resetBtn) => {
-      resetBtn.removeEventListener('click', this.onReset);
+      if (resetBtn.resetTargets.length === 0) {
+        resetBtn.removeEventListener('click', resetBtn.resetListener);
+      }
     });
   };
 }

index.html

@@ -265,7 +265,7 @@ <h2>Outputs & Resets</h2>
         <dd><output for="color-scheme"></output></dd>
       </dl>
 
-      <button data-reset="blackout layout title-font color-scheme hue">reset all</button>
+      <button data-reset="*">reset all</button>
 
       <h2>ToDo</h2>
       <ul>
@@ -300,9 +300,10 @@ <h2>ToDo</h2>
         constructor() {
           super();
           GroundControl.blockDisplay(this);
-          this.onPress = () => this.CSS = true;
-          this.onUnPress = () => this.CSS = false;
         };
+
+        onPress = () => this.CSS = true;
+        onUnPress = () => this.CSS = false;
       }
 
       CSSToggle.register();

input-control-raw.js

@@ -16,12 +16,13 @@ class InputControl extends GroundControl {
 
   #input;
 
+  get listenFor () {
+    return this.dataset.event || 'change';
+  }
+
   constructor() {
     super();
     GroundControl.blockDisplay(this);
-
-    this.addEventListener('change', this.onInputChange);
-    this.addEventListener('input', this.onInputChange);
   }
 
   connectedCallback() {
@@ -38,16 +39,21 @@ class InputControl extends GroundControl {
 
     this.initialValue = this.#input.value;
     this.value = this.storedValue || this.initialValue;
+
+    this.addEventListener(this.listenFor, this.onInputChange);
   }
 
-  onInputChange = (event) => {
-    const onType = this.dataset.event || 'change';
-    if (onType !== event.type) return;
+  disconnectedCallback() {
+    this.removeEventListener(this.listenFor, this.onInputChange);
+  }
 
+  onInputChange = () => {
     this.value = this.#input.value;
   }
 
   onValueChange = () => {
+    if (this.#input.value === this.value) return;
+
     this.#input.value = this.value;
   }
 

input-control.js

@@ -18,12 +18,13 @@ export default class InputControl extends GroundControl {
 
   #input;
 
+  get listenFor () {
+    return this.dataset.event || 'change';
+  }
+
   constructor() {
     super();
     GroundControl.blockDisplay(this);
-
-    this.addEventListener('change', this.onInputChange);
-    this.addEventListener('input', this.onInputChange);
   }
 
   connectedCallback() {
@@ -40,16 +41,21 @@ export default class InputControl extends GroundControl {
 
     this.initialValue = this.#input.value;
     this.value = this.storedValue || this.initialValue;
+
+    this.addEventListener(this.listenFor, this.onInputChange);
   }
 
-  onInputChange = (event) => {
-    const onType = this.dataset.event || 'change';
-    if (onType !== event.type) return;
+  disconnectedCallback() {
+    this.removeEventListener(this.listenFor, this.onInputChange);
+  }
 
+  onInputChange = () => {
     this.value = this.#input.value;
   }
 
   onValueChange = () => {
+    if (this.#input.value === this.value) return;
+
     this.#input.value = this.value;
   }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@terriblemia/ground-control",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Web Component for user control of HTML attributes and CSS properties",
   "main": "index.js",
   "scripts": {

package.json

@@ -69,7 +69,7 @@ class SwitchControl extends GroundControl {
         break;
     }
 
-    this.doToggleActions();
+    this.setValueToPressed();
   };
 
   connectedCallback() {
@@ -80,7 +80,7 @@ class SwitchControl extends GroundControl {
       this.pressed = this.#isPressedValue(this.storedValue);
     }
 
-    this.doToggleActions();
+    this.setValueToPressed();
   };
 
   disconnectedCallback() {
@@ -89,26 +89,23 @@ class SwitchControl extends GroundControl {
 
   onTogglePress = () => {
     this.pressed = !this.pressed;
-    this.doToggleActions();
+    this.setValueToPressed();
   };
 
-  doToggleActions = () => {
+  setValueToPressed = () => {
     if (!this.toggle) return;
-
     this.value = this.pressedValue;
+    this.doToggleActions();
+  }
 
+  doToggleActions = () => {
     if (this.pressed && this.onPress) this.onPress();
     if (!this.pressed && this.onUnPress) this.onUnPress();
   };
 
   onValueChange = () => {
-    if (this.usedValue !== this.pressedValue) {
-      this.pressed = this.#isPressedValue(this.usedValue);
-    }
-  };
-
-  onReset = () => {
-    this.pressed = this.#isPressedValue(this.initialValue);
+    if (this.value === this.pressedValue) return;
+    this.pressed = this.#isPressedValue(this.value);
     this.doToggleActions();
   };