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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import h, { classNames } from 'lib/h'
import * as dom from 'lib/dom'
import * as play from 'view/play'
import * as layout from 'view/layout'
import * as chord from 'chord'
import * as options from 'view/options'
// View
export function view(): Element[] {
let opts = options.load()
return layout.view(
h('form',
{
className: 'g-Form',
onsubmit
},
chordCheckbox({ name: 'major', label: '', checked: opts.major }),
chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }),
chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }),
chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }),
chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }),
labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
h('input', { type: 'submit', value: 'Play' })
)
)
}
function chordCheckbox({ name, label, checked }: any): Element {
return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked })
}
function onsubmit(event: Event): void {
event.preventDefault()
let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
let opts = {
major: input('major').checked,
minor: input('minor').checked,
seventh: input('seventh').checked,
minorSeventh: input('minorSeventh').checked,
majorSeventh: input('majorSeventh').checked,
bpm: parseInt(input('bpm').value),
beatsPerChord: parseInt(input('beatsPerChord').value)
}
options.save(opts)
dom.show(play.view(opts))
}
type LabelInputParams = {
className?: string,
type: string,
name: string,
label: string,
checked?: boolean,
value?: string
}
function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
return h('label',
className !== undefined ? { className } : {},
h('input', { type, name, checked, value }),
label
)
}
|
