diff options
| -rw-r--r-- | fretboard.mjs | 24 | ||||
| -rw-r--r-- | history.mjs | 46 | ||||
| -rw-r--r-- | index.html | 5 |
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); + } +} @@ -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> |