convert to web components

one less thing to hard-code: element ids, which were brittle already.

1 files changed, 38 insertions, 11 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index 8b330cc..38fdc0f 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -83,15 +83,42 @@ function openClick(e) {
     formChanged(elt.closest('form'));
 }
 
-export default function (form) {
-    console.debug('Fretboard()', form);
-    form.onchange = handleFormChanged;
-    form.querySelectorAll('.open').forEach(elt => {
-        elt.onclick = openClick;
-    });
-    form.querySelectorAll('input[type="radio"]').forEach(elt => {
-        elt.onmousedown = fretMousedown;
-        elt.onclick = fretClick;
-    });
-    formChanged(form);
+// export default function (form, { onSave }) {
+// }
+
+export default class extends HTMLElement {
+    static name = 'x-fretboard'
+    static register() {
+        console.debug('Registering Element', this.name, this);
+        customElements.define(this.name, this);
+    }
+
+    constructor() {
+        super();
+
+        console.debug('Fretboard#constructor', this);
+    }
+
+    connectedCallback() {
+        console.debug('Fretboard#connectedCallback', this);
+
+        // TODO: don't trawl the dom, custom element means we know
+        // what's inside.
+        const form = this.querySelector('form');
+        form.onchange = handleFormChanged;
+        form.querySelectorAll('.open').forEach(elt => {
+            elt.onclick = openClick;
+        });
+        form.querySelectorAll('input[type="radio"]').forEach(elt => {
+            elt.onmousedown = fretMousedown;
+            elt.onclick = fretClick;
+        });
+        form.querySelectorAll('.save').forEach(elt => {
+            elt.onclick = (e) => {
+                e.preventDefault();
+                console.log('Fretboard#onSave');
+            };
+        })
+        formChanged(form);
+    }
 }