-
Notifications
You must be signed in to change notification settings - Fork 8
/
demo.html
136 lines (118 loc) · 4.32 KB
/
demo.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
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
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Demo for <std-switch></title>
<script type="module" src="src/switch.mjs"></script>
<style>
internal-meter, std-switch {
margin: 0.2em;
}
.wide {
width: 10em;
--std-switch-track-border: 1px inset lightgray;
--std-switch-track-height: 10px;
--std-switch-track-radius: 5px;
--std-switch-track-background: gray;
--std-switch-track-background-on: lime;
--std-switch-track-shadow: none;
--std-switch-thumb-width: 22px;
--std-switch-thumb-border: 1px solid black;
}
.container {
border: 2px dashed lightgray;
padding: 8px;
margin: 24px;
}
#tot span {
pointer-events: none;
}
#tot[on] span {
color: white;
font-weight: bold;
}
#tot:not([on]) span {
float: right;
}
</style>
<body>
<h1>Demo of a prototype of <code><std-switch></code></h1>
<p><a href="https://github.com/tkent-google/std-switch/blob/master/README.md">Explainer of <code><std-switch></code></a></p>
<p>This page demonstrates how <code><std-switch></code> will work.
The current prototype is not expected to have production-level quality.
It has many bugs and missing features.</p>
<h2>Requirements</h2>
<ul>
<li>Custom elements support: <span id="ce-support">❌ (<std-switch> doesn't work at all)</span>
<li>Form-associated custom elements support: <span id="face-support">❌
(<std-switch> doesn't support form submission, fieldset/form/label element association, better disabled state)</span>
<li><code>margin-inline-start</code> CSS property support: <span id="margin-support">❌
(<std-switch> doesn't work in RTL and vertical writing)</span>
<li><code>:focus-visible</code> CSS pseudo class support: <span id="focus-visible-support">❌
(<std-switch> has focus ring on click)</span>
</ul>
<script>
let $ = document.querySelector.bind(document);
if (window.customElements)
$('#ce-support').textContent = '\u2705';
if (window.ElementInternals && ElementInternals.prototype.setFormValue)
$('#face-support').textContent = '\u2705';
if (CSS.supports('margin-inline-start', '0px'))
$('#margin-support').textContent = '\u2705';
try {
document.querySelector(':focus-visible');
$('#focus-visible-support').textContent = '\u2705';
} catch (e) {}
</script>
<h2><code><std-switch></code></h2>
<div class=container>
<form action="https://httpbin.org/get" target="_blank">
<label>Normal: <std-switch name=n1></std-switch></label> <std-switch on name=n2></std-switch><br>
<label>Disabled: <std-switch name=d1 disabled></std-switch></label><br>
<h3>Customization</h3>
<div><label>Specify width/height: <std-switch name=wh style="width: 100px; height:40px" ></std-switch></label></div>
<div><label>Thin track: <std-switch class=wide name=thin></std-switch></label></div>
<div><label>Text on track: <std-switch id="tot"></std-switch></label></div>
<input type=submit>
</form>
<div style="--std-control-theme: material">
<std-switch></std-switch><std-switch on></std-switch>
</div>
<div style="--std-control-theme: cocoa">
<std-switch></std-switch><std-switch on></std-switch>
</div>
<div style="--std-control-theme: fluent">
<std-switch></std-switch><std-switch on></std-switch>
</div>
</div>
<div dir=rtl class=container>
<label>RTL: <std-switch ></std-switch></label>
</div>
<div style="writing-mode: vertical-rl;" class=container>
<p>Vertial wirting
<std-switch></std-switch></p>
<label dir=rtl>RTL: <std-switch></std-switch></label>
</div>
<div class=container style="--std-control-theme: match-platform">
<p>An example of <code>--std-control-theme: match-platform</code> behavior.
Browsers may apply OS-specific or browser-specific appearance.</p>
<p id="platform-message">navigator.platform: ...</p>
<std-switch></std-switch><std-switch on></std-switch>
</div>
<pre></pre>
<script>
function log(msg) {
document.querySelector('pre').textContent += msg + '\n';
}
function logEvent(event) {
log(`Event type=${event.type} target=${event.target.tagName}`);
}
document.addEventListener('input', logEvent);
document.addEventListener('change', logEvent);
$('#platform-message').innerHTML = `navigator.platform: <var>${navigator.platform}</var>`;
let tot = $('#tot');
tot.addEventListener('change', e => {
tot.innerHTML = tot.on ? '<span>on</span>' : '<span>off</span>';
});
tot.innerHTML = tot.on ? '<span>on</span>' : '<span>off</span>';
</script>
</html>