add realtime note selection

1 files changed, 14 insertions, 3 deletions

diff --git a/string.mjs b/string.mjs
index 2e496be..7bbfd69 100644
--- a/string.mjs
+++ b/string.mjs
@@ -23,6 +23,8 @@ export default class extends HTMLElement {
         customElements.define(this.name, this);
     }
 
+    changedEvent = 'x-string-changed';
+
     // TODO: this is a horrible hack, but i don't know how to make
     // each string's input unique. maybe wrap them in their own form?
     myName() {
@@ -43,10 +45,7 @@ export default class extends HTMLElement {
 
     zot() {
         console.debug('String#zot', this);
-        const tmpl = this.querySelector('template');
-        console.log(' -- tmpl', tmpl);
         this.querySelectorAll('input[slot="fret"]').forEach(elt => {
-            console.debug(' -- del', elt, parent);
             // TODO: this is precisely what i was trying to avoid: the
             // code has to know exactly what the template looks like.
             elt.parentNode.parentNode.removeChild(elt.parentNode);
@@ -66,6 +65,16 @@ export default class extends HTMLElement {
         });
     }
 
+    postChangedEvent() {
+        console.debug('String#postChangedEvent', this);
+        const event = new CustomEvent(this.changedEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: this
+        });
+        this.dispatchEvent(event);
+    }
+
     muteClicked(e) {
         console.debug('String#muteClicked', this, e);
         if (this.getAttribute('value') !== 'x') {
@@ -77,6 +86,7 @@ export default class extends HTMLElement {
             this.classList.remove('muted');
         }
 
+        this.postChangedEvent();
         this.updateSelected();
     }
 
@@ -107,6 +117,7 @@ export default class extends HTMLElement {
         }
         this.setAttribute('value', v);
         this.setAttribute('octave', o);
+        this.postChangedEvent();
         this.updateSelected();
     }