Skip to content

Commit 21ae961

Browse files
CiphroxCiphrox
committed
added range slider for panel page
1 parent 628781b commit 21ae961

File tree

2 files changed

+143
-115
lines changed

2 files changed

+143
-115
lines changed

‎src/assets/styles/panel.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060

6161
.range__option {
6262
color: var(--range__option__txt--4);
63+
display:flex;
64+
align-items: center;
6365
}
6466

6567
.panel__cell {

‎src/pages/panel.astro‎

Lines changed: 141 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import "@/assets/styles/common.css";
99
<Fragment slot="header-right">
1010
<Help
1111
title="Panel"
12-
description="Press any arrow key from keyboard to cycle through the letters, up/down arrows changes the orientation to vertical and left/right keys changes to horizontal or press any letter key, that letter will appears."
12+
description="Press any arrow key from keyboard to cycle through the letters, up/down keys or vertical button changes the orientation to vertical and left/right keys or horzontal button to change orientation to horizontal. Press any letter key, that letter will appears. Use the range slider to change the number of cells."
1313
/>
1414
</Fragment>
1515
<article class="tv container__panel">
@@ -24,138 +24,164 @@ import "@/assets/styles/common.css";
2424
<span class="icon">↔️</span>
2525
</label>
2626
</section>
27+
<div class="range__option">
28+
<span>10</span>
29+
<input type="range" name="range" id="range" class="range__slider" value="0" min="10" max="26" />
30+
<span>26</span>
31+
</div>
2732

2833
<section class="scene">
2934
<letter-panel>
3035
<div class="panel" id="panel"></div>
3136
</letter-panel>
3237
</section>
3338
</article>
34-
</BaseLayout>
35-
<script>
36-
enum ArrowKeys {
37-
LEFT = 37,
38-
UP = 38,
39-
RIGHT = 39,
40-
DOWN = 40
41-
}
42-
// Define the behaviour for our new type of HTML element.
43-
class LetterPanel extends HTMLElement {
44-
#panel;
45-
#orientationPanel;
46-
#orientation = "Y";
47-
#selectedIndex = 0;
48-
#radius = "0px";
49-
#theta = 0;
50-
#angle = "0deg";
5139

52-
constructor() {
53-
super();
54-
this.#panel = this.querySelector("#panel") as HTMLElement;
55-
this.#orientationPanel = document.querySelectorAll(".orientation");
56-
this.#emitEvent();
40+
<script>
41+
enum ArrowKeys {
42+
LEFT = 37,
43+
UP = 38,
44+
RIGHT = 39,
45+
DOWN = 40
5746
}
47+
// Define the behaviour for our new type of HTML element.
48+
class LetterPanel extends HTMLElement {
49+
#panel;
50+
#cellRange;
51+
#orientationPanel;
52+
#orientation = "Y";
53+
#selectedIndex = 0;
54+
#radius = "0px";
55+
#theta = 0;
56+
#angle = "0deg";
5857

59-
connectedCallback() {
60-
this.buildPanel();
61-
//this.changePanel(); // TODO: uncomment to see complete letter panel on load
62-
this.rotatePanel({ by: "X" });
63-
}
58+
constructor() {
59+
super();
60+
this.#panel = this.querySelector("#panel") as HTMLElement;
61+
this.#orientationPanel = document.querySelectorAll(".orientation");
62+
this.#cellRange = document.querySelector("#range") as HTMLInputElement;
63+
this.buildPanel();
64+
this.#emitEvent();
65+
}
6466

65-
#emitEvent() {
66-
document.addEventListener("keyup", (e: KeyboardEvent) => {
67-
const { charCode, code, keyCode, key } = e;
68-
console.log({ charCode, code, keyCode, key });
69-
this.onKeyChange(keyCode);
70-
});
67+
connectedCallback() {
68+
this.changePanel();
69+
this.rotatePanel({ by: "X" });
70+
(this.#orientationPanel[1] as HTMLInputElement).checked = true;
71+
}
7172

72-
this.#orientationPanel.forEach((radio) => {
73-
radio.addEventListener(
74-
"click",
75-
(e: Event) => {
76-
const target = e.target as HTMLInputElement;
77-
this.#orientation = target.value;
78-
this.changePanel();
79-
target.blur(); //unfocus the radio button
80-
},
81-
false
82-
);
83-
});
84-
}
73+
#emitEvent() {
74+
document.addEventListener("keyup", (e: KeyboardEvent) => {
75+
const { charCode, code, keyCode, key } = e;
76+
console.log({ charCode, code, keyCode, key });
77+
this.onKeyChange(keyCode);
78+
});
8579

86-
doTheMath() {
87-
const cellWidth = this.#panel.offsetWidth;
88-
const cellCount = 26; //Number(cellRange.value);
89-
const halfCell = cellWidth / 2;
90-
const divideBy = Math.tan(Math.PI / cellCount);
91-
this.#radius = Math.round(halfCell / divideBy) + "px";
92-
this.#theta = 360 / cellCount;
93-
this.#angle = this.#theta * this.#selectedIndex + "deg";
94-
}
80+
this.#orientationPanel.forEach((radio) => {
81+
radio.addEventListener(
82+
"click",
83+
(e: Event) => {
84+
const target = e.target as HTMLInputElement;
85+
this.#orientation = target.value;
86+
this.changePanel();
87+
target.blur(); //unfocus the radio button
88+
},
89+
false
90+
);
91+
});
9592

96-
buildPanel(num = 26) {
97-
const fragment = document.createDocumentFragment();
98-
for (let i = 0; i < num; i++) {
99-
const div = document.createElement("div");
100-
div.classList.add("panel__cell");
101-
div.textContent = String.fromCodePoint(65 + i); // A to Z
102-
fragment.appendChild(div);
93+
this.#cellRange.addEventListener("input", (e) => {
94+
const target = e.target as HTMLInputElement;
95+
const rangeBullet = document.querySelector("#range-bullet");
96+
if (rangeBullet) {
97+
rangeBullet.textContent = target.value;
98+
}
99+
this.buildPanel();
100+
this.changePanel();
101+
this.#cellRange.blur();
102+
});
103103
}
104-
this.#panel.innerHTML = "";
105-
this.#panel.appendChild(fragment);
106-
}
107-
108-
changePanel() {
109-
//this.buildPanel(cellCount);
110-
const cells = document.querySelectorAll(".panel__cell") as unknown as HTMLElement[];
111-
this.doTheMath();
112-
cells.forEach((cell, i) => {
113-
const cellAngle = this.#theta * i;
114-
const transformString = `rotate${this.#orientation}(${cellAngle}deg) translateZ(${this.#radius})`;
115-
cell.style.transform = transformString;
116-
});
117-
this.rotatePanel({ by: this.#orientation });
118-
}
119104

120-
rotatePanel({ by = "X" }) {
121-
this.doTheMath();
122-
const transformString = `translateZ(-${this.#radius}) rotate${by}(${this.#angle})`;
123-
this.#panel.style.transform = transformString;
124-
}
105+
doTheMath() {
106+
const cellWidth = this.#panel.offsetWidth;
107+
const cellCount = this.#cellRange?.value ? Number(this.#cellRange.value) : 26;
108+
const halfCell = cellWidth / 2;
109+
const divideBy = Math.tan(Math.PI / cellCount);
110+
this.#radius = Math.round(halfCell / divideBy) + "px";
111+
this.#theta = 360 / cellCount;
112+
this.#angle = this.#theta * this.#selectedIndex + "deg";
113+
}
125114

126-
onKeyChange(code: number) {
127-
switch (code) {
128-
case ArrowKeys.RIGHT: {
129-
this.#selectedIndex++;
130-
this.#orientation = "Y";
131-
break;
115+
buildPanel(num?: number) {
116+
const count = num ?? (this.#cellRange?.value ? Number(this.#cellRange.value) : 26);
117+
const fragment = document.createDocumentFragment();
118+
for (let i = 0; i < count; i++) {
119+
const div = document.createElement("div");
120+
div.classList.add("panel__cell");
121+
div.textContent = String.fromCodePoint(65 + i); // A to Z
122+
fragment.appendChild(div);
132123
}
133-
case ArrowKeys.LEFT: {
134-
this.#selectedIndex--;
135-
this.#orientation = "Y";
136-
break;
137-
}
138-
case ArrowKeys.UP: {
139-
this.#selectedIndex++;
140-
this.#orientation = "X";
141-
break;
142-
}
143-
case ArrowKeys.DOWN: {
144-
this.#selectedIndex--;
145-
this.#orientation = "X";
146-
break;
147-
}
148-
default: {
149-
//if (isAlphabet(keyCode)) {
150-
this.#selectedIndex = 65 - code;
151-
//} else {
152-
// this.#selectedIndex--;
153-
//}
124+
this.#panel.innerHTML = "";
125+
this.#panel.appendChild(fragment);
126+
}
127+
128+
changePanel() {
129+
const cells = document.querySelectorAll(".panel__cell") as unknown as HTMLElement[];
130+
this.doTheMath();
131+
cells.forEach((cell, i) => {
132+
const cellAngle = this.#theta * i;
133+
const transformString = `rotate${this.#orientation}(${cellAngle}deg) translateZ(${this.#radius})`;
134+
cell.style.transform = transformString;
135+
});
136+
this.rotatePanel({ by: this.#orientation });
137+
}
138+
139+
rotatePanel({ by = "X" }) {
140+
this.doTheMath();
141+
const transformString = `translateZ(-${this.#radius}) rotate${by}(${this.#angle})`;
142+
this.#panel.style.transform = transformString;
143+
}
144+
145+
onKeyChange(code: number) {
146+
const VerticalButton = this.#orientationPanel[0] as HTMLInputElement;
147+
const horizontalButton = this.#orientationPanel[1] as HTMLInputElement;
148+
switch (code) {
149+
case ArrowKeys.RIGHT: {
150+
this.#selectedIndex++;
151+
this.#orientation = "Y";
152+
horizontalButton.checked = true;
153+
break;
154+
}
155+
case ArrowKeys.LEFT: {
156+
this.#selectedIndex--;
157+
this.#orientation = "Y";
158+
horizontalButton.checked = true;
159+
break;
160+
}
161+
case ArrowKeys.UP: {
162+
this.#selectedIndex++;
163+
this.#orientation = "X";
164+
VerticalButton.checked = true;
165+
break;
166+
}
167+
case ArrowKeys.DOWN: {
168+
this.#selectedIndex--;
169+
VerticalButton.checked = true;
170+
this.#orientation = "X";
171+
break;
172+
}
173+
default: {
174+
//if (isAlphabet(keyCode)) {
175+
this.#selectedIndex = 65 - code;
176+
//} else {
177+
// this.#selectedIndex--;
178+
//}
179+
}
154180
}
181+
this.changePanel();
155182
}
156-
this.changePanel();
157183
}
158-
}
159-
// Tell the browser to use our LetterPanel class for <letter-panel> elements.
160-
customElements.define("letter-panel", LetterPanel);
161-
</script>
184+
// Tell the browser to use our LetterPanel class for <letter-panel> elements.
185+
customElements.define("letter-panel", LetterPanel);
186+
</script>
187+
</BaseLayout>

0 commit comments

Comments
 (0)