-
Notifications
You must be signed in to change notification settings - Fork 0
/
controls.js
55 lines (50 loc) · 1.46 KB
/
controls.js
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
const es = sel => document.querySelectorAll(sel)
const bindAll = function(sel, eventName, callback) {
const l = es(sel)
for(let i = 0; i < l.length; i++) {
const input = l[i]
input.addEventListener(eventName, function(event) {
callback(event)
})
}
}
const templateControl = function(key, item) {
const t =
`
<div>
<label for="" class="gua-label">
<input type="range" class="gua-auto-slider" id=""
value="${item.value}"
data-value="config.${key}"
>
${item._comment}:<span class="gua-label"></span>
</label>
</div>
`
return t
}
const insertControls = function() {
const div = e('.gua-controls')
const keys = Object.keys(config)
for( let k of keys) {
const item = config[k]
const html = templateControl(k, item)
div.insertAdjacentHTML('beforeend', html)
}
}
const bindEvents = function() {
bindAll('.gua-auto-slider', 'input', function(event) {
const target = event.target
const bindVar = target.dataset.value
const v = target.value
eval(bindVar + ".value=" + v)
const label = target.closest('label').querySelector('.gua-label')
label.innerText = v
})
}
const main = function() {
// 生成配置
insertControls()
bindEvents()
}
main()