Skip to content

Commit 3494a07

Browse files
9am9am
committed
add docs
- Fix bugs ctrl-radio type=range single.
1 parent ae0dce3 commit 3494a07

21 files changed

Lines changed: 812 additions & 52 deletions

‎.changeset/twelve-olives-sparkle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@9am/ctrl-panel': minor
3+
---
4+
5+
Add docs & fix bugs.

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@
2929
## Elements
3030
| Element | Screenshot | Description | Live Demo |
3131
| ------- | ---------- | ----------- | --------- |
32-
| ctrl-panel | ---------- | ----------- | --------- |
33-
| ctrl-group | ---------- | ----------- | --------- |
34-
| ctrl-slider | ![slider-range](https://user-images.githubusercontent.com/1435457/203936646-0902d3d7-0994-4b8a-a1a3-20a3f5269d00.gif)</br>![slider-knob](https://user-images.githubusercontent.com/1435457/203936642-73d7487f-e619-437c-a532-fde14d711480.gif) | ----------- | --------- |
35-
| ctrl-clamp | ![clamp-range](https://user-images.githubusercontent.com/1435457/203936632-fb207779-2102-412a-9506-b41829afc0f8.gif)</br>![clamp-knob](https://user-images.githubusercontent.com/1435457/203936627-f9135d59-790e-4d53-8228-7ade10f3b73d.gif) | ----------- | --------- |
36-
| ctrl-switch | ![switch-toggle](https://user-images.githubusercontent.com/1435457/203938021-5600c6e1-6f99-428c-99e9-66d204a5c6b0.gif)</br>![switch-range](https://user-images.githubusercontent.com/1435457/203938018-9f83e2b4-0868-4be1-a3db-a3e477b230e0.gif) | ----------- | --------- |
37-
| ctrl-radio | ![radio](https://user-images.githubusercontent.com/1435457/203936639-a55c9232-f851-4678-ac66-3e2f1ea822cf.gif) | ----------- | --------- |
38-
| ctrl-vector | ![vector](https://user-images.githubusercontent.com/1435457/203936657-13ca68fe-7c1b-4f6e-a2c1-e84bacfc829e.gif) | ----------- | --------- |
39-
| ctrl-text | ![text](https://user-images.githubusercontent.com/1435457/203936654-3a78f2df-a675-43d6-a748-ee0842081067.gif) | ----------- | --------- |
40-
| ctrl-color | ![color](https://user-images.githubusercontent.com/1435457/203936634-68099376-731f-4442-aae5-918e606c4b09.gif) | ----------- | --------- |
32+
| ctrl-panel | ---------- | The root element. | [demo](http://9am.github.io/ctrl-panel/ctrl-panel.html) |
33+
| ctrl-group | ---------- | Group ctrl-* together to shape the value. | [demo](http://9am.github.io/ctrl-panel/ctrl-group.html) |
34+
| ctrl-slider | ![slider-range](https://user-images.githubusercontent.com/1435457/203936646-0902d3d7-0994-4b8a-a1a3-20a3f5269d00.gif)</br>![slider-knob](https://user-images.githubusercontent.com/1435457/203936642-73d7487f-e619-437c-a532-fde14d711480.gif) | A numblic slider. | [demo](http://9am.github.io/ctrl-panel/ctrl-slider.html) |
35+
| ctrl-clamp | ![clamp-range](https://user-images.githubusercontent.com/1435457/203936632-fb207779-2102-412a-9506-b41829afc0f8.gif)</br>![clamp-knob](https://user-images.githubusercontent.com/1435457/203936627-f9135d59-790e-4d53-8228-7ade10f3b73d.gif) | Select a tuple low-high value. | [demo](http://9am.github.io/ctrl-panel/ctrl-clamp.html) |
36+
| ctrl-switch | ![switch-toggle](https://user-images.githubusercontent.com/1435457/203938021-5600c6e1-6f99-428c-99e9-66d204a5c6b0.gif)</br>![switch-range](https://user-images.githubusercontent.com/1435457/203938018-9f83e2b4-0868-4be1-a3db-a3e477b230e0.gif) | A ON/OFF switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-switch.html) |
37+
| ctrl-radio | ![radio](https://user-images.githubusercontent.com/1435457/203936639-a55c9232-f851-4678-ac66-3e2f1ea822cf.gif) | Multiple/Single switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-radio.html) |
38+
| ctrl-vector | ![vector](https://user-images.githubusercontent.com/1435457/203936657-13ca68fe-7c1b-4f6e-a2c1-e84bacfc829e.gif) | Select a tuple vector on a 2D surface. | [demo](http://9am.github.io/ctrl-panel/ctrl-vector.html) |
39+
| ctrl-text | ![text](https://user-images.githubusercontent.com/1435457/203936654-3a78f2df-a675-43d6-a748-ee0842081067.gif) | Text input. | [demo](http://9am.github.io/ctrl-panel/ctrl-text.html) |
40+
| ctrl-color | ![color](https://user-images.githubusercontent.com/1435457/203936634-68099376-731f-4442-aae5-918e606c4b09.gif) | Color picker. | [demo](http://9am.github.io/ctrl-panel/ctrl-color.html) |
4141

4242

4343
## Usage

‎docs/ctrl-clamp.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8">
5+
<title>ctrl-clamp</title>
6+
<link href="./main.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>&lt;ctrl-clamp&gt;</h1>
11+
<a href="./index.html">back home</a>
12+
</header>
13+
<section>
14+
<dl>
15+
<dt>Default setting</dt>
16+
<dd class="demo">
17+
<ctrl-clamp>default:</ctrl-clamp>
18+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
19+
</dd>
20+
</dl>
21+
<dl>
22+
<dt>Limit value scope with `min` and `max`</dt>
23+
<dd class="demo">
24+
<ctrl-clamp min="-10" max="10">min-max:</ctrl-clamp>
25+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
26+
</dd>
27+
</dl>
28+
<dl>
29+
<dt>Control number precision with `step`</dt>
30+
<dd class="demo">
31+
<ctrl-clamp step="any">any:</ctrl-clamp>
32+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
33+
</dd>
34+
<dd class="demo">
35+
<ctrl-clamp step="0.2">precision-0.1:</ctrl-clamp>
36+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
37+
</dd>
38+
<dd class="demo">
39+
<ctrl-clamp step="1">precision-1:</ctrl-clamp>
40+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
41+
</dd>
42+
</dl>
43+
<dl>
44+
<dt>Initialize with default value</dt>
45+
<dd class="demo">
46+
<ctrl-clamp step="1" default="[2,6]">value:</ctrl-clamp>
47+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
48+
</dd>
49+
</dl>
50+
<dl>
51+
<dt>Vertical layout</dt>
52+
<dd class="demo">
53+
<ctrl-clamp orientation="v">vertical:</ctrl-clamp>
54+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
55+
</dd>
56+
</dl>
57+
<dl>
58+
<dt>Knob type</dt>
59+
<dd class="demo">
60+
<ctrl-clamp type="knob">knob:</ctrl-clamp>
61+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
62+
</dd>
63+
</dl>
64+
</section>
65+
<script type="module" src="https://unpkg.com/@9am/ctrl-panel/dist/index.es.js"></script>
66+
<script type="module" src="./main.js"></script>
67+
</body>
68+
</html>

‎docs/ctrl-color.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8">
5+
<title>ctrl-color</title>
6+
<link href="./main.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>&lt;ctrl-color&gt;</h1>
11+
<a href="./index.html">back home</a>
12+
</header>
13+
<section>
14+
<dl>
15+
<dt>Default setting</dt>
16+
<dd class="demo">
17+
<ctrl-color>default</ctrl-color>
18+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
19+
</dd>
20+
</dl>
21+
<dl>
22+
<dt>Initialize with default value</dt>
23+
<dd class="demo">
24+
<ctrl-color default="#0F0F0F">init</ctrl-color>
25+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
26+
</dd>
27+
</dl>
28+
<dl>
29+
<dt>Vertical layout</dt>
30+
<dd class="demo">
31+
<ctrl-color default="#FF33AA" orientation="v">vertical</ctrl-color>
32+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
33+
</dd>
34+
</dl>
35+
</section>
36+
<script type="module" src="https://unpkg.com/@9am/ctrl-panel/dist/index.es.js"></script>
37+
<script type="module" src="./main.js"></script>
38+
</body>
39+
</html>

‎docs/ctrl-group.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8">
5+
<title>ctrl-group</title>
6+
<link href="./main.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>&lt;ctrl-group&gt;</h1>
11+
<a href="./index.html">back home</a>
12+
</header>
13+
<section>
14+
<dl>
15+
<dt>Default setting</dt>
16+
<dd class="demo">
17+
<ctrl-group>
18+
<span slot="label">group map:</span>
19+
<ctrl-slider name="a" type="knob" step="1">a</ctrl-slider>
20+
<ctrl-slider name="b" type="knob" step="1">b</ctrl-slider>
21+
</ctrl-group>
22+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
23+
</dd>
24+
</dl>
25+
<dl>
26+
<dt>Shape the value as array</dt>
27+
<dd class="demo">
28+
<ctrl-group data-type="array">
29+
<span slot="label">group array:</span>
30+
<ctrl-slider name="a" type="knob" step="1">a</ctrl-slider>
31+
<ctrl-slider name="b" type="knob" step="1">b</ctrl-slider>
32+
</ctrl-group>
33+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
34+
</dd>
35+
</dl>
36+
<dl>
37+
<dt>Nested</dt>
38+
<dd class="demo">
39+
<ctrl-group>
40+
<span slot="label">group:</span>
41+
<ctrl-group name="g1">
42+
<span slot="label">g1:</span>
43+
<ctrl-slider name="a" step="1">a</ctrl-slider>
44+
<ctrl-slider name="b" step="1">b</ctrl-slider>
45+
<ctrl-group name="g2" data-type="array">
46+
<span slot="label">g2:</span>
47+
<ctrl-slider name="c" step="1">c</ctrl-slider>
48+
<ctrl-slider name="d" step="1">d</ctrl-slider>
49+
</ctrl-group>
50+
</ctrl-group>
51+
</ctrl-group>
52+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
53+
</dd>
54+
</dl>
55+
<dl>
56+
<dt>Vertical layout</dt>
57+
<dd class="demo">
58+
<ctrl-group orientation="v">
59+
<span slot="label">group:</span>
60+
<ctrl-group name="g1" orientation="v">
61+
<span slot="label">g1:</span>
62+
<ctrl-slider name="a" step="1">a</ctrl-slider>
63+
<ctrl-slider name="b" step="1">b</ctrl-slider>
64+
<ctrl-group name="g2" orientation="v" data-type="array">
65+
<span slot="label">g2:</span>
66+
<ctrl-slider name="c" step="1">c</ctrl-slider>
67+
<ctrl-slider name="d" step="1">d</ctrl-slider>
68+
</ctrl-group>
69+
</ctrl-group>
70+
</ctrl-group>
71+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
72+
</dd>
73+
</dl>
74+
</section>
75+
<script type="module" src="https://unpkg.com/@9am/ctrl-panel/dist/index.es.js"></script>
76+
<script type="module">
77+
const onUpdate = (evt) => {
78+
const target = evt.currentTarget;
79+
const value = target.value;
80+
const pre = target.nextElementSibling.querySelector('pre');
81+
pre.textContent = JSON.stringify(value, null, 2);
82+
};
83+
[...document.querySelectorAll('.demo > ctrl-group')].forEach(group => {
84+
group.addEventListener('CHANGE', onUpdate);
85+
});
86+
</script>
87+
</body>
88+
</html>

‎docs/ctrl-panel.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8">
5+
<title>ctrl-panel</title>
6+
<link href="./main.css" rel="stylesheet">
7+
<link href="https://unpkg.com/@9am/ctrl-panel/dist/theme.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>&lt;ctrl-panel&gt;</h1>
12+
<a href="./index.html">back home</a>
13+
</header>
14+
<section>
15+
<dl>
16+
<dt>Default setting</dt>
17+
<dd class="demo">
18+
<ctrl-panel>
19+
<span slot="label">panel map:</span>
20+
<ctrl-slider name="a" type="knob" step="1">a</ctrl-slider>
21+
<ctrl-slider name="b" type="knob" step="1">b</ctrl-slider>
22+
</ctrl-panel>
23+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
24+
</dd>
25+
</dl>
26+
<dl>
27+
<dt>Themes</dt>
28+
<dd class="demo">
29+
<ctrl-panel>
30+
<span slot="label">ctrl-panel:</span>
31+
<ctrl-radio name="theme" orientation="v">
32+
<span slot="label">theme:</span>
33+
<ctrl-switch name="flat" default="true">flat</ctrl-switch>
34+
<ctrl-switch name="oldschool">oldschool</ctrl-switch>
35+
<ctrl-switch name="neumorphism">neumorphism</ctrl-switch>
36+
</ctrl-radio>
37+
</ctrl-panel>
38+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
39+
</dd>
40+
</dl>
41+
<dl>
42+
<dt>With open/close</dt>
43+
<dd class="demo">
44+
<ctrl-panel placement="top-right">
45+
<span slot="label">panel open/close:</span>
46+
<ctrl-slider name="a" type="knob" step="1" orientation="v">a</ctrl-slider>
47+
<ctrl-slider name="b" type="knob" step="1" orientation="v">b</ctrl-slider>
48+
</ctrl-panel>
49+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
50+
</dd>
51+
</dl>
52+
</section>
53+
<script type="module" src="https://unpkg.com/@9am/ctrl-panel/dist/index.es.js"></script>
54+
<script type="module">
55+
const onUpdate = (evt) => {
56+
const target = evt.currentTarget;
57+
const value = target.value;
58+
const pre = target.nextElementSibling.querySelector('pre');
59+
pre.textContent = JSON.stringify(value, null, 2);
60+
if (value.theme) {
61+
[...document.querySelectorAll('ctrl-panel')].forEach(panel => {
62+
panel.setAttribute('theme', value.theme);
63+
});
64+
}
65+
};
66+
[...document.querySelectorAll('.demo > ctrl-panel')].forEach(panel => {
67+
panel.addEventListener('CHANGE', onUpdate);
68+
});
69+
</script>
70+
</body>
71+
</html>

‎docs/ctrl-radio.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8">
5+
<title>ctrl-radio</title>
6+
<link href="./main.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>&lt;ctrl-radio&gt;</h1>
11+
<a href="./index.html">back home</a>
12+
</header>
13+
<section>
14+
<dl>
15+
<dt>Single selection</dt>
16+
<dd class="demo">
17+
<ctrl-radio>
18+
<span slot="label">single:</span>
19+
<ctrl-switch name="a">a</ctrl-switch>
20+
<ctrl-switch name="b">b</ctrl-switch>
21+
<ctrl-switch name="c">c</ctrl-switch>
22+
</ctrl-radio>
23+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
24+
</dd>
25+
</dl>
26+
<dl>
27+
<dt>Multiple selection</dt>
28+
<dd class="demo">
29+
<ctrl-radio multiple>
30+
<span slot="label">multiple:</span>
31+
<ctrl-switch name="a">a</ctrl-switch>
32+
<ctrl-switch name="b">b</ctrl-switch>
33+
<ctrl-switch name="c">c</ctrl-switch>
34+
</ctrl-radio>
35+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
36+
</dd>
37+
</dl>
38+
<dl>
39+
<dt>Initialize with default value</dt>
40+
<dd class="demo">
41+
<ctrl-radio>
42+
<span slot="label">single:</span>
43+
<ctrl-switch name="a">a</ctrl-switch>
44+
<ctrl-switch name="b" default="true">b</ctrl-switch>
45+
<ctrl-switch name="c">c</ctrl-switch>
46+
</ctrl-radio>
47+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
48+
</dd>
49+
<dd class="demo">
50+
<ctrl-radio multiple>
51+
<span slot="label">multiple:</span>
52+
<ctrl-switch name="a" default="true">a</ctrl-switch>
53+
<ctrl-switch name="b">b</ctrl-switch>
54+
<ctrl-switch name="c" default="true">c</ctrl-switch>
55+
</ctrl-radio>
56+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
57+
</dd>
58+
</dl>
59+
<dl>
60+
<dt>Vertical range layout</dt>
61+
<dd class="demo">
62+
<ctrl-radio>
63+
<span slot="label">single:</span>
64+
<ctrl-switch name="a" type="range" orientation="v">a</ctrl-switch>
65+
<ctrl-switch name="b" type="range" orientation="v" default="true">b</ctrl-switch>
66+
<ctrl-switch name="c" type="range" orientation="v">c</ctrl-switch>
67+
</ctrl-radio>
68+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
69+
</dd>
70+
<dd class="demo">
71+
<ctrl-radio multiple>
72+
<span slot="label">multiple:</span>
73+
<ctrl-switch name="a" type="range" orientation="v" default="true">a</ctrl-switch>
74+
<ctrl-switch name="b" type="range" orientation="v">b</ctrl-switch>
75+
<ctrl-switch name="c" type="range" orientation="v" default="true">c</ctrl-switch>
76+
</ctrl-radio>
77+
<ctrl-group><span slot="label">[value]:</span><pre></pre></ctrl-group>
78+
</dd>
79+
</dl>
80+
</section>
81+
<script type="module" src="https://unpkg.com/@9am/ctrl-panel/dist/index.es.js"></script>
82+
<script type="module" src="./main.js"></script>
83+
</body>
84+
</html>

0 commit comments

Comments
 (0)