wip: making some progress on the grid

 - got radio buttons back, but open/selected still have different
 interfaces. should use getAttribute() everywhere

1 files changed, 155 insertions, 0 deletions

diff --git a/string.mjs b/string.mjs
new file mode 100644
index 0000000..4e1f198
--- /dev/null
+++ b/string.mjs
@@ -0,0 +1,155 @@
+import { chromaticScale } from "./scale.mjs";
+
+function dots(i) {
+    switch (i+1) {
+    case 3:
+    case 7:
+    case 9:
+        return '•'
+    case 5:
+    case 12:
+        return '••'
+    }
+}
+
+/*
+        this.querySelectorAll('.open').forEach(elt => {
+            elt.onclick = this.openClicked.bind(this);
+        });
+        this.querySelectorAll('input[type="radio"]').forEach(elt => {
+            elt.onmousedown = this.fretMousedown.bind(this);
+            elt.onclick = this.fretClicked.bind(this);
+        });
+
+
+    #mousedownVal;
+    fretMousedown(e) {
+        // at mousedown time, the form hasn't yet been changed. to support
+        // deselecting elements, we need to know what the previous
+        // selection was, so store it here.
+        //
+        // it'd be nice to be able to do this just in the click handler.
+        this.#mousedownVal = e.target.checked;
+    }
+
+    openClicked(e) {
+        const elt = e.target.parentNode;
+        if (elt.classList.contains('muted')) {
+            elt.classList.remove('muted');
+            elt.querySelectorAll('input[type="radio"]').forEach(input => {
+                input.disabled = false;
+            })
+        } else {
+            elt.classList.add('muted');
+            elt.querySelectorAll('input[type="radio"]').forEach(input => {
+                input.checked = false;
+                input.disabled = true;
+            })
+        }
+        this.formChanged();
+    }
+
+    fretClicked(e) {
+        const elt = e.target;
+        // if this element was selected at mousedown time, deselect it
+        // now.
+        if (this.#mousedownVal) {
+            elt.checked = false;
+            // doesn't get called automatically.
+            this.formChanged();
+        }
+    }
+ */
+
+export default class extends HTMLElement {
+    // TODO: probably not worth observing frets since everything just
+    // gets re-rendered when they change.
+    static observedAttributes = ['frets', 'tonic', 'selected'];
+
+    static name = 'x-string';
+    static register() {
+        console.debug('Registering Element', this.name, this);
+        customElements.define(this.name, this);
+    }
+
+    // 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() {
+        return 'string';
+    }
+
+    attributeChangedCallback(name, old, v) {
+        console.debug('String#attributeChangedCallback',
+            this, name, old, v);
+        if (old != v) {
+            this.render();
+        }
+    }
+
+    connectedCallback() {
+        console.debug('String#connectedCallback');
+    }
+
+    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);
+        })
+    }
+
+    muteClicked(e) {
+        console.debug('String#muteClicked', this, e);
+        if (this.getAttribute('selected') !== 'x') {
+            this.setAttribute('selected', 'x');
+            this.classList.add('muted');
+        } else {
+            this.setAttribute('selected', this.getAttribute('tonic'));
+            this.classList.remove('muted');
+        }
+    }
+
+    fretClicked(e) {
+        console.debug('String#fretClicked', this, e);
+        console.debug(' -- note', e.target.note);
+        this.setAttribute('selected', e.target.note);
+    }
+
+    render() {
+        console.debug('String#render');
+
+        this.querySelectorAll('input[name="muted"]').forEach(elt => {
+            console.debug(' -- input', elt);
+            elt.onchange = this.muteClicked.bind(this);
+        });
+
+        this.zot();
+
+        const tmpl = this.querySelector('template');
+        this.querySelectorAll('slot[name="open"]').forEach(s => {
+            s.note = this.getAttribute('tonic');
+            s.innerText = s.note;
+            s.parentNode.onclick = this.fretClicked.bind(this);
+        })
+
+        const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic'));
+        const frets = Number(this.getAttribute('frets'));
+        for (let i = 1; i <= frets; i++) {
+            const item = tmpl.content.cloneNode(true);
+            item.querySelectorAll('input[slot="fret"]').forEach(s => {
+                s.setAttribute('name', this.myName());
+                s.setAttribute('value', chromaticScale[chromIndex + i]);
+                s.parentNode.onclick = this.fretClicked.bind(this);
+            })
+            tmpl.parentNode.insertBefore(item, tmpl);
+        }
+
+        this.querySelectorAll('slot[name="selected"]').forEach(s => {
+            s.innerText = this.getAttribute('selected');
+        })
+    }
+}