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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { chromaticScale } from "./scale.mjs";
function dots(i) {
switch (i+1) {
case 3:
case 7:
case 9:
return '•'
case 5:
case 12:
return '••'
}
}
export default class extends HTMLElement {
// TODO: probably not worth observing frets since everything just
// gets re-rendered when they change.
static observedAttributes = ['frets', 'tonic', 'tonic-octave'];
static name = 'x-string';
static register() {
console.debug('Registering Element', this.name, this);
customElements.define(this.name, this);
}
// TODO: this is a horrible hack, but i don't know how to make
// each string's input unique. maybe wrap them in their own form?
myName() {
return 'string';
}
attributeChangedCallback(name, old, v) {
console.debug('String#attributeChangedCallback',
this, name, old, v);
if (old != v) {
this.render();
}
}
connectedCallback() {
console.debug('String#connectedCallback');
}
zot() {
console.debug('String#zot', this);
const tmpl = this.querySelector('template');
console.log(' -- tmpl', tmpl);
this.querySelectorAll('input[slot="fret"]').forEach(elt => {
console.debug(' -- del', elt, parent);
// TODO: this is precisely what i was trying to avoid: the
// code has to know exactly what the template looks like.
elt.parentNode.parentNode.removeChild(elt.parentNode);
})
}
muteClicked(e) {
console.debug('String#muteClicked', this, e);
if (this.getAttribute('value') !== 'x') {
this.setAttribute('value', 'x');
this.classList.add('muted');
} else {
this.setAttribute('value', this.getAttribute('tonic'));
this.classList.remove('muted');
}
}
fretClicked(e) {
console.debug('String#fretClicked', this, e);
console.debug(' -- note', e.target.note);
this.setAttribute('value', e.target.getAttribute('value'));
this.setAttribute('octave', e.target.getAttribute('octave'));
}
render() {
console.debug('String#render');
this.querySelectorAll('input[name="muted"]').forEach(elt => {
console.debug(' -- input', elt);
elt.onchange = this.muteClicked.bind(this);
});
this.zot();
const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic'));
let octave = this.getAttribute('tonic-octave');
const tmpl = this.querySelector('template');
this.querySelectorAll('slot[name="open"]').forEach(s => {
const note = chromaticScale[chromIndex]
s.setAttribute('value', note);
s.setAttribute('octave', octave);
s.textContent = note;
s.parentNode.onclick = this.fretClicked.bind(this);
})
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', value);
if (value === sel) {
s.checked = true;
} else {
s.checked = false;
}
if (value === 'C') {
octave++;
}
s.setAttribute('octave', octave);
s.parentNode.onclick = this.fretClicked.bind(this);
})
tmpl.parentNode.insertBefore(item, tmpl);
}
this.querySelectorAll('slot[name="selected"]').forEach(s => {
const note = this.getAttribute('value');
console.debug(' -- setting selected', note);
s.textContent = note;
})
}
}
|
