convert to web components

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

1 files changed, 28 insertions, 10 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index 3aa8340..b24422d 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -106,15 +106,33 @@ function handleFormChanged(e) {
     formChanged(e.target.form);
 }
 
-export default function (form) {
-    console.debug('KeyPicker()', form);
-    form.onchange = handleFormChanged;
-    form.querySelectorAll('.notes li').forEach(elt => {
-        elt.onmouseenter = handleNoteEnter;
-        elt.onmouseleave = handleNoteLeave;
-        elt.onclick = handleNoteClick;
-    });
-    formChanged(form);
+export default class extends HTMLElement {
+    static name = 'x-key-picker'
+    static register() {
+        console.debug('Registering Element', this.name, this);
+        customElements.define(this.name, this);
+    }
+
+    constructor() {
+        super();
+
+        console.debug('KeyPicker#constructor', this);
+    }
+
+    connectedCallback() {
+        console.debug('KeyPicker#connectedCallback', this);
 
-    console.log('bjc', 'Cdim', DiminishedScale('C').toString());
+        // TODO: don't trawl the dom, custom element means we know
+        // what's inside.
+        const form = this.querySelector('form');
+        form.onchange = handleFormChanged;
+        form.querySelectorAll('.notes li').forEach(elt => {
+            elt.onmouseenter = handleNoteEnter;
+            elt.onmouseleave = handleNoteLeave;
+            elt.onclick = handleNoteClick;
+        });
+        formChanged(form);
+
+        console.log('bjc', 'Cdim', DiminishedScale('C').toString());
+    }
 }