put key picker note hover back

1 files changed, 31 insertions, 23 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index b3f871c..53c089f 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -15,27 +15,6 @@ function scaleFrom(tonic, scale) {
     }
 }
 
-function handleNoteEnter(e) {
-    const elt = e.target;
-    const n = Note.fromString(elt.textContent).toString();
-    // todo: this should be delegated. the key selector shouldn't know
-    // about the fretboard at all.
-    elt.classList.add('hover');
-    document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
-        elt.classList.add('hover');
-    })
-}
-
-function handleNoteLeave(e) {
-    const elt = e.target;
-    const n = Note.fromString(elt.textContent).toString();
-    // ibid.
-    elt.classList.remove('hover');
-    document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
-        elt.classList.remove('hover');
-    })
-}
-
 function noteClicked(elt, justClear=false) {
     const n = Note.fromString(elt.textContent).toString();
     const count = Number(elt.getAttribute('x-data-clicked')) || 0;
@@ -114,6 +93,9 @@ export default class extends HTMLElement {
         customElements.define(this.name, this);
     }
 
+    noteEnterEvent = 'x-key-picker-note-enter'
+    noteLeaveEvent = 'x-key-picker-note-leave'
+
     constructor() {
         super();
 
@@ -128,12 +110,38 @@ export default class extends HTMLElement {
         const form = this.querySelector('form');
         form.onchange = handleFormChanged;
         form.querySelectorAll('.notes li').forEach(elt => {
-            elt.onmouseenter = handleNoteEnter;
-            elt.onmouseleave = handleNoteLeave;
+            elt.onmouseenter = this.handleNoteEnter.bind(this);
+            elt.onmouseleave = this.handleNoteLeave.bind(this);
             elt.onclick = handleNoteClick;
         });
         formChanged(form);
 
         console.log('bjc', 'Cdim', DiminishedScale('C').toString());
     }
+
+    handleNoteEnter(e) {
+        const elt = e.target;
+        const note = Note.fromString(elt.textContent)
+        elt.classList.add('hover');
+
+        const event = new CustomEvent(this.noteEnterEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: note
+        });
+        this.dispatchEvent(event);
+    }
+
+    handleNoteLeave(e) {
+        const elt = e.target;
+        const note = Note.fromString(elt.textContent)
+        elt.classList.remove('hover');
+
+        const event = new CustomEvent(this.noteLeaveEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: note
+        });
+        this.dispatchEvent(event);
+    }
 }