1 files changed, 20 insertions, 13 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index d3671f0..d9be758 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -29,6 +29,7 @@ export default class extends HTMLElement {
     }
 
     saveEvent = 'x-fretboard-save';
+    changedEvent = 'x-fretboard-changed';
     playEvent = 'x-fretboard-play';
     stopEvent = 'x-fretboard-stop';
 
@@ -74,6 +75,7 @@ export default class extends HTMLElement {
             }
         });
         this.formChanged();
+        this.postChangedEvent();
     }
 
     get notes() {
@@ -82,12 +84,6 @@ export default class extends HTMLElement {
         });
     }
 
-    get tonics() {
-        return Array.from(this.querySelectorAll('x-string')).map(elt => {
-            return elt.getAttribute('tonic');
-        });
-    }
-
     get octaves() {
         return Array.from(this.querySelectorAll('x-string')).map(elt => {
             return Number(elt.getAttribute('octave'));
@@ -95,12 +91,9 @@ export default class extends HTMLElement {
     }
 
     zotStrings() {
-        console.debug('Fretboard#zotStrings', this);
         const tmpl = this.querySelector('template.string');
-        console.log(' -- tmpl', tmpl);
         const parent = tmpl.parentNode;
         parent.querySelectorAll('[slot="string"]').forEach(elt => {
-            console.debug(' -- del', elt);
             parent.removeChild(elt);
         })
     }
@@ -110,6 +103,21 @@ export default class extends HTMLElement {
         this.zotStrings();
     }
 
+    postChangedEvent() {
+        console.debug('Fretboard#postChangedEvent', this, this.changedEvent);
+        const event = new CustomEvent(this.changedEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: this
+        });
+        this.dispatchEvent(event);
+    }
+
+    stringChanged(e) {
+        console.debug('Fretboard#stringChanged', this, e);
+        this.postChangedEvent();
+    }
+
     #strings; #frets;
     formChanged() {
         console.debug('Fretboard#formChanged', this);
@@ -118,20 +126,16 @@ export default class extends HTMLElement {
         // robust.
         const [strings, frets] =
             [this.getAttribute('strings'), this.getAttribute('frets')].map(s => Number(s));
-        console.debug(' -- strings', strings, 'frets', frets);
         if (strings && frets && strings !== this.#strings && frets != this.#frets) {
             console.debug(' -- rerender table');
             this.zotForm();
 
             const tmpl = this.querySelector('template.string');
             for (let i = 0; i < strings; i++) {
-                console.debug(' -- appending string', i, tmpl);
                 const item = tmpl.content.cloneNode(true);
-                console.debug(' -- item', item);
                 const tonic = openStrings[i];
                 const octave = stringOctaves[i];
                 item.querySelectorAll('[slot="string"]').forEach(s => {
-                    console.debug(' -- setting tonic', tonic, 'on', s);
                     s.setAttribute('tonic', tonic);
                     s.setAttribute('tonic-octave', octave);
                     s.setAttribute('value', tonic);
@@ -140,6 +144,9 @@ export default class extends HTMLElement {
                 })
                 tmpl.parentNode.insertBefore(item, tmpl);
             }
+            this.querySelectorAll('[slot="string"]').forEach(s => {
+                s.addEventListener(s.changedEvent, this.stringChanged.bind(this));
+            });
             this.#frets = frets;
             this.#strings = strings;
         }