From 9353c94aedf64384afdcef3bc9cffbcc6e348d73 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Mon, 12 May 2025 09:52:18 -0400 Subject: convert to web components one less thing to hard-code: element ids, which were brittle already. --- fretboard.mjs | 49 +++++++--- index.html | 275 +++++++++++++++++++++++++++++---------------------------- key-picker.mjs | 38 +++++--- main.mjs | 29 +++--- notes.org | 6 ++ 5 files changed, 230 insertions(+), 167 deletions(-) diff --git a/fretboard.mjs b/fretboard.mjs index 8b330cc..38fdc0f 100644 --- a/fretboard.mjs +++ b/fretboard.mjs @@ -83,15 +83,42 @@ function openClick(e) { formChanged(elt.closest('form')); } -export default function (form) { - console.debug('Fretboard()', form); - form.onchange = handleFormChanged; - form.querySelectorAll('.open').forEach(elt => { - elt.onclick = openClick; - }); - form.querySelectorAll('input[type="radio"]').forEach(elt => { - elt.onmousedown = fretMousedown; - elt.onclick = fretClick; - }); - formChanged(form); +// export default function (form, { onSave }) { +// } + +export default class extends HTMLElement { + static name = 'x-fretboard' + static register() { + console.debug('Registering Element', this.name, this); + customElements.define(this.name, this); + } + + constructor() { + super(); + + console.debug('Fretboard#constructor', this); + } + + connectedCallback() { + console.debug('Fretboard#connectedCallback', this); + + // 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 => { + elt.onclick = openClick; + }); + form.querySelectorAll('input[type="radio"]').forEach(elt => { + elt.onmousedown = fretMousedown; + elt.onclick = fretClick; + }); + form.querySelectorAll('.save').forEach(elt => { + elt.onclick = (e) => { + e.preventDefault(); + console.log('Fretboard#onSave'); + }; + }) + formChanged(form); + } } diff --git a/index.html b/index.html index 7bee462..edf0061 100644 --- a/index.html +++ b/index.html @@ -8,149 +8,154 @@ -
- - - - - - - - - - - - - - + + +
open••••selected
+ + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
open••••selected
E
A
D
G
B
E
+ + + E + + + + + + + + + + + A + + + + + + + + + + + D + + + + + + + + + + + G + + + + + + + + + + + B + + + + + + + + + + + E + + + + + + + + + + + - -
+ + + -
-
- key - - - - + + +
+ key + + + + -
+
-
    -
  1. C
    2. -
  2. D
    3. -
  3. E
    4. -
  4. F
    5. -
  5. G
    6. -
  6. A
    7. -
  7. B
    8. -
-
+
    +
  1. C
    2. +
  2. D
    3. +
  3. E
    4. +
  4. F
    5. +
  5. G
    6. +
  6. A
    7. +
  7. B
    8. +
+
-

Available triads:

-
    -
  • Amin
    • -
  • C
    • -
  • Dmin
    • -
  • Emin
    • -
  • F
    • -
  • G
    • -
-
- +

Available triads:

+
    +
  • Amin
    • +
  • C
    • +
  • Dmin
    • +
  • Emin
    • +
  • F
    • +
  • G
    • +
+
+ + -
+ +
- saved + history
  1. GCEGCE
  2. EBEGBE
    3. diff --git a/key-picker.mjs b/key-picker.mjs index 3aa8340..b24422d 100644 --- a/key-picker.mjs +++ b/key-picker.mjs @@ -106,15 +106,33 @@ function handleFormChanged(e) { formChanged(e.target.form); } -export default function (form) { - console.debug('KeyPicker()', form); - form.onchange = handleFormChanged; - form.querySelectorAll('.notes li').forEach(elt => { - elt.onmouseenter = handleNoteEnter; - elt.onmouseleave = handleNoteLeave; - elt.onclick = handleNoteClick; - }); - formChanged(form); +export default class extends HTMLElement { + static name = 'x-key-picker' + static register() { + console.debug('Registering Element', this.name, this); + customElements.define(this.name, this); + } + + constructor() { + super(); + + console.debug('KeyPicker#constructor', this); + } + + connectedCallback() { + console.debug('KeyPicker#connectedCallback', this); - console.log('bjc', 'Cdim', DiminishedScale('C').toString()); + // TODO: don't trawl the dom, custom element means we know + // what's inside. + const form = this.querySelector('form'); + form.onchange = handleFormChanged; + form.querySelectorAll('.notes li').forEach(elt => { + elt.onmouseenter = handleNoteEnter; + elt.onmouseleave = handleNoteLeave; + elt.onclick = handleNoteClick; + }); + formChanged(form); + + console.log('bjc', 'Cdim', DiminishedScale('C').toString()); + } } diff --git a/main.mjs b/main.mjs index 3054208..f0e4ed8 100644 --- a/main.mjs +++ b/main.mjs @@ -2,25 +2,32 @@ import Fretboard, { fretToNote } from './fretboard.mjs'; import KeyPicker from './key-picker.mjs'; import History from './history.mjs'; +function memoize(fn) { + let val = undefined; + return function () { + if (val === undefined) { + val = fn(); + } + return val; + } +} + function notes(form) { const strings = ['string1', 'string2', 'string3', 'string4', 'string5', 'string6']; const formData = new FormData(form); - console.log('notes', form, formData); + console.debug('notes', form, formData); return strings.map((klass) => fretToNote(form, klass, formData.get(klass))); } function onSave(form) { - console.log('we done saved', form, notes(form)); + console.debug('we done saved', form, notes(form)); } +function init() { + console.debug('App#init', this); -function main() { - const fretboard = document.getElementById('fretboard'); - const keyPicker = document.getElementById('key-picker'); - const history = document.getElementById('history'); - - Fretboard(fretboard, { onSave }); - KeyPicker(keyPicker); - History(history, keyPicker); + Fretboard.register(); + KeyPicker.register(); + History.register(); } -document.addEventListener('DOMContentLoaded', main); +document.addEventListener('DOMContentLoaded', init); diff --git a/notes.org b/notes.org index 82d94de..01cb344 100644 --- a/notes.org +++ b/notes.org @@ -1,3 +1,9 @@ +* convert to web components +https://developer.mozilla.org/en-US/docs/Web/API/Web_components +** don't trawl dom when setting up behavior +since it's a custom element, we should know its exact layout at all +times, so ~querySelector~ shouldn't be necessary. + * well-tempered scale | semi-tones | freq | just | interval | |------------+-----------+------+----------| -- cgit v1.3