diff options
| -rw-r--r-- | fretboard.mjs | 2 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | string.mjs | 31 |
3 files changed, 24 insertions, 13 deletions
diff --git a/fretboard.mjs b/fretboard.mjs index 7ba0dab..7eba9f5 100644 --- a/fretboard.mjs +++ b/fretboard.mjs @@ -120,7 +120,7 @@ export default class extends HTMLElement { item.querySelectorAll('[slot="string"]').forEach(s => { console.debug(' -- setting tonic', tonic, 'on', s); s.setAttribute('tonic', tonic); - s.setAttribute('selected', tonic); + s.setAttribute('value', tonic); s.setAttribute('frets', frets.toString()); }) tmpl.parentNode.insertBefore(item, tmpl); @@ -10,7 +10,7 @@ <body> <x-fretboard strings='6' frets='7'> <template class='string'> - <x-string tonic='' frets='' slot='string'> + <x-string tonic='' frets='' slot='string' value=''> <form> <input type='checkbox' name='muted'> <li class='fret open'><slot name='open'></slot></li> @@ -19,7 +19,7 @@ <input slot='fret' type='radio' name='' value=''> </li> </template> - <p class='selected'><slot name='selected'>selected</slot></p> + <p class='selected'><slot name='selected'></slot></p> </form> </x-string> </template> @@ -64,7 +64,7 @@ function dots(i) { 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 observedAttributes = ['frets', 'tonic', 'value']; static name = 'x-string'; static register() { @@ -104,11 +104,11 @@ export default class extends HTMLElement { muteClicked(e) { console.debug('String#muteClicked', this, e); - if (this.getAttribute('selected') !== 'x') { - this.setAttribute('selected', 'x'); + if (this.getAttribute('value') !== 'x') { + this.setAttribute('value', 'x'); this.classList.add('muted'); } else { - this.setAttribute('selected', this.getAttribute('tonic')); + this.setAttribute('value', this.getAttribute('tonic')); this.classList.remove('muted'); } } @@ -116,7 +116,7 @@ export default class extends HTMLElement { fretClicked(e) { console.debug('String#fretClicked', this, e); console.debug(' -- note', e.target.note); - this.setAttribute('selected', e.target.note); + this.setAttribute('value', e.target.getAttribute('value')); } render() { @@ -129,27 +129,38 @@ export default class extends HTMLElement { this.zot(); + const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic')); + const tmpl = this.querySelector('template'); this.querySelectorAll('slot[name="open"]').forEach(s => { - s.note = this.getAttribute('tonic'); - s.innerText = s.note; + const note = chromaticScale[chromIndex] + s.setAttribute('value', note); + s.innerText = note; s.parentNode.onclick = this.fretClicked.bind(this); }) - const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic')); + const sel = this.getAttribute('value'); 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 => { + const value = chromaticScale[chromIndex + i]; s.setAttribute('name', this.myName()); - s.setAttribute('value', chromaticScale[chromIndex + i]); + s.setAttribute('value', value); + if (value === sel) { + s.checked = true; + } else { + s.checked = false; + } s.parentNode.onclick = this.fretClicked.bind(this); }) tmpl.parentNode.insertBefore(item, tmpl); } this.querySelectorAll('slot[name="selected"]').forEach(s => { - s.innerText = this.getAttribute('selected'); + const note = this.getAttribute('value'); + console.debug(' -- setting selected', note); + s.innerText = note; }) } } |