-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
control-test.html
73 lines (65 loc) · 2.88 KB
/
control-test.html
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
<!DOCTYPE html>
<html>
<head>
<title>Testing index</title>
<script type="module" src="/dist/hue-like-light-card.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container" style="padding-top:8%;background: #333;height: 100%;margin: 0;position: fixed;top: 0;bottom: 0;left: 0;right: 0;">
<hue-color-temp-picker-test id="picker" mode="color"></hue-color-temp-picker-test>
<div style="width: 200px; margin:20px auto">
<hue-color-temp-mode-selector-test id="mode-selector"></hue-color-temp-mode-selector-test>
</div>
<div style="width: 300px; margin: 10px auto;">
<input type="color" id="c" />
<button id="mb1">Marker 1</button>
<button id="mb2">Marker 2</button>
<button id="mb3">Marker 3</button>
</div>
<div style="width:60px; margin: auto; position: fixed; bottom:200px;right:200px;">
<hue-brightness-rollup-test width="60" height="40" value="40"></hue-brightness-rollup-test>
</div>
</div>
<script>
function onChange(ev) {
console.log(`[Changed ${ev.detail.marker.name}] ${ev.detail.newColor}/${ev.detail.newTemp}`);
}
function onImmediateChange(ev) {
console.log(`[Drag ${ev.detail.marker.name}] ${ev.detail.newColor}/${ev.detail.newTemp}`);
}
function onModeChange(ev) {
console.log("[Mode changed]");
}
function onActiveMarkersChange(ev) {
console.log("[Active markers changed]");
}
document.addEventListener("DOMContentLoaded", () => {
window.picker = picker = document.getElementById("picker");
picker.addEventListener("change", onChange);
picker.addEventListener("immediate-value-change", onImmediateChange);
picker.addEventListener("mode-change", onModeChange);
picker.addEventListener("activemarkers-change", onActiveMarkersChange);
window.marker = picker.addMarker();
window.marker2 = picker.addMarker();
marker2.isOff = true;
window.marker3 = picker.addMarker();
marker3.fixedMode = 'temp';
var modeSelector = document.getElementById("mode-selector");
modeSelector.colorPicker = picker;
document.getElementById("c").addEventListener("input", (ev) => {
marker.color = c.value;
});
document.getElementById("mb1").addEventListener("click", () => {
marker.setActive();
});
document.getElementById("mb2").addEventListener("click", () => {
marker2.setActive();
});
document.getElementById("mb3").addEventListener("click", () => {
marker3.setActive();
});
});
</script>
</body>
</html>