radio

Author: stopsopa

pages/html/handleRadio.html

@@ -29,9 +29,11 @@ <h1>handleRadio Demo</h1>
     <hr />
 
     <button id="btn-dark">Select Dark via Code</button>
-    <button id="btn-unbind">Unbind (Stop Listening)</button>
+    | | |
     <button id="btn-bind">Bind (Start Listening)</button>
-    <span>status: <span id="status">idle</span></span>
+    <button id="btn-unbind">Unbind (Stop Listening)</button>
+    | | |
+    <span id="status">idle</span>
 
     <hr />
 
@@ -51,19 +53,21 @@ <h3>Tool.list output:</h3>
         initState: "system",
         initTrigger: true,
         autoBind: false, // this will tell not to bind automatically
-        onChange: (value, tool) => {
+        onChange: (value, t) => {
           display.innerText = value;
           console.log("Changed to:", value);
-
-          // Update the list output to show the live state
-          listOutput.innerText = JSON.stringify(
-            tool.list.map((i) => ({ value: i.value, checked: i.el.checked })),
-            null,
-            2
-          );
+          updateListOutput(t);
         },
       });
 
+      function updateListOutput(t = tool) {
+        listOutput.innerText = JSON.stringify(
+          t.list.map((i) => ({ value: i.value, checked: i.checked })),
+          null,
+          2
+        );
+      }
+
       document.getElementById("btn-dark").addEventListener("click", () => {
         tool.checkByValue("dark");
         // Note: tool.checkByValue just sets checked = true,
@@ -74,12 +78,7 @@ <h3>Tool.list output:</h3>
         // Let's see if we should trigger onChange manually or if the user expects it.
         // handleRadio.js doesn't seem to have a way to trigger onChange programmatically besides initTrigger.
 
-        // Re-render list to show change
-        listOutput.innerText = JSON.stringify(
-          tool.list.map((i) => ({ value: i.value, checked: i.el.checked })),
-          null,
-          2
-        );
+        updateListOutput();
         // Since checkByValue doesn't trigger click, we manually update display here for the demo
         display.innerText = "dark (set via code)";
       });
@@ -90,6 +89,7 @@ <h3>Tool.list output:</h3>
       };
 
       updateStatus();
+      updateListOutput();
 
       document.getElementById("btn-unbind").addEventListener("click", () => {
         tool.unbind();

pages/html/handleRadio.js

@@ -93,15 +93,13 @@ export default function handleRadio(opt) {
     getStatus: () => {
       return isBound;
     },
-    list: [...delegateParent.querySelectorAll(s)].reduce((acc, el) => {
-      acc.push({
+    get list() {
+      return [...delegateParent.querySelectorAll(s)].map((el) => ({
         el,
         checked: el.checked,
         value: el.value,
-      });
-
-      return acc;
-    }, []),
+      }));
+    },
     checkByValue: (value) => {
       const selector = selectorOne(name, value);
 

pages/html/index.template.html

@@ -169,6 +169,7 @@ <h2>input[type="color"]</h2>
 
         <div class="cards">
           <h2>input[type="radio"]</h2>
+          <p>See also <a href="handleRadio.html">handleRadio.js example</a></p>
 
           <div class="radios">
             <label> <input type="radio" name="mode" value="one" /> one </label>