append history when ‘+’ button clicked

3 files changed, 66 insertions, 9 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index d862952..ef9e0b5 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -103,28 +103,38 @@ export default class extends HTMLElement {
 
         // 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 => {
+        this.form = this.querySelector('form');
+        this.form.onchange = handleFormChanged;
+        this.form.querySelectorAll('.open').forEach(elt => {
             elt.onclick = openClick;
         });
-        form.querySelectorAll('input[type="radio"]').forEach(elt => {
+        this.form.querySelectorAll('input[type="radio"]').forEach(elt => {
             elt.onmousedown = fretMousedown;
             elt.onclick = fretClick;
         });
 
-        form.querySelectorAll('.save').forEach(elt => {
+        this.form.querySelectorAll('.save').forEach(elt => {
             elt.onclick = (e) => {
                 console.log('Fretboard#onSave');
                 e.preventDefault();
                 const event = new CustomEvent(this.saveEvent, {
                     bubbles: true,
                     cancelable: true,
-                    detail: new FormData(form)
+                    detail: this
                 });
                 this.dispatchEvent(event);
             };
         })
-        formChanged(form);
+        formChanged(this.form);
+    }
+
+    get notes() {
+        console.debug('Fretboard#notes', this);
+        const formData = new FormData(this.form);
+        return Array.from(this.form.querySelectorAll('tbody .selected')).map(elt => {
+            const string = Array.from(elt.parentNode.classList).filter(x => x.startsWith('string'))[0];
+            const val = formData.get(string);
+            return fretToNote(this.form, string, val);
+        })
     }
 }
diff --git a/history.mjs b/history.mjs
new file mode 100644
index 0000000..f056ac7
--- /dev/null
+++ b/history.mjs
@@ -0,0 +1,46 @@
+export default class extends HTMLElement {
+    static name = 'x-chords-history'
+    static register() {
+        console.debug('Registering Element', this.name, this);
+        customElements.define(this.name, this);
+    }
+
+    delayMs = 1000;
+    #list
+
+    oldList = [
+        'GCEGCE',
+        'EBEGBE'
+    ];
+
+    constructor() {
+        super();
+
+        console.debug('History#constructor', this);
+        this.onClick = e => console.debug('history click', e);
+
+        this.template = this.querySelector('template');
+        this.list = this.querySelector('ol');
+
+        // mess around with custom states
+        this._internals = this.attachInternals();
+    }
+
+    connectedCallback() {
+        console.debug('History#connectedCallback', this);
+    }
+
+    add(fretboard) {
+        console.debug('History#add', this, fretboard);
+        this._internals.states.add('fresh');
+        setTimeout(_ => this._internals.states.delete('fresh'),
+            this.delayMs);
+
+        const item = this.template.content.cloneNode(true);
+        // TODO: i don't think this is how slots are supposed to work,
+        // but maybe they're not really for this at all?
+        item.querySelectorAll('[name="fretboard"]')
+            .forEach(s => s.innerText = fretboard.notes.join(' '));
+        this.list.appendChild(item);
+    }
+}
diff --git a/index.html b/index.html
index 623c5cf..72fd0f5 100644
--- a/index.html
+++ b/index.html
@@ -157,8 +157,9 @@
         <fieldset>
           <legend>history</legend>
           <ol>
-            <li>GCEGCE</li>
-            <li>EBEGBE</li>
+            <template>
+              <li><slot name='fretboard'>dummy</slot></li>
+            </template>
           </ol>
         </fieldset>
       </form>