key-picker.mjs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { MajorScale, MinorScale, chromaticScale } from "./scale.mjs";

function scaleFrom(tonic, diatonic) {
    switch (diatonic) {
    case 'major':
        return MajorScale(tonic);
    case 'minor':
        return MinorScale(tonic);
    default:
        throw new Error('how this happen')
    }
}

function formChanged(form) {
    const formData = new FormData(form);
    const scale = scaleFrom(formData.get('tonic'), formData.get('diatonic'));
    ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
        Array.from(form.getElementsByClassName(c)).forEach(elt => elt.innerText = scale[i]);
    });
}

function handleFormChanged(e) {
    formChanged(e.target.form);
}

export default function KeyPicker(form) {
    console.debug('KeyPicker()', form);
    form.onchange = handleFormChanged;
    formChanged(form);
}