Skip to content

Commit 19194ca

Browse files
stopsopastopsopa
committed
radio
1 parent fea7000 commit 19194ca

5 files changed

Lines changed: 88 additions & 16 deletions

File tree

‎.github/workflows/pipeline.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ jobs:
2929
- uses: actions/setup-node@v3
3030
with:
3131
node-version: 24.11.0
32-
cache: "yarn"
3332

3433
- name: printenv
3534
if: env.DEBUG_MODE == 'on'

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h2><a id="enc" href="/pages/encryptor/index.rendered.html">Index</a></h2>
3939
<li><a href="pages/electronics/index.html">Electronics</a></li>
4040
<li><a href="pages/dji/index.html">DJI</a></li>
4141
<li><a href="pages/network/index.html">Network</a></li>
42+
<li><a href="pages/htmx/index.html">htmx</a></li>
4243
<li><a href="pages/invest/index.html">Invest</a></li>
4344
<li><a href="pages/photopea/index.html">Photopea</a></li>
4445
<li><a href="pages/svg/index.html">SVG</a></li>

‎pages/html/handleRadio.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default function handleRadio(opt) {
2+
let tool;
23
const {
34
name,
45
selectorAll = (name) => {
@@ -28,10 +29,6 @@ export default function handleRadio(opt) {
2829

2930
const s = selectorAll(name);
3031

31-
if (typeof s !== "string") {
32-
throw new Error("handleRadio: selector must return a string");
33-
}
34-
3532
if (initState) {
3633
const sOne = selectorOne(name, initState);
3734
const el = delegateParent.querySelector(sOne);
@@ -41,24 +38,28 @@ export default function handleRadio(opt) {
4138
}
4239
}
4340

41+
let active = delegateParent.querySelector(`${s}:checked`);
42+
43+
if (!active) {
44+
active = delegateParent.querySelector(s);
45+
if (active) {
46+
active.checked = true;
47+
}
48+
}
49+
4450
const delegateFn = (e) => {
4551
const target = e.target;
4652

4753
var match = target.matches(s);
4854

4955
if (match) {
5056
const v = target.value;
51-
onChange(v);
57+
onChange(v, tool);
5258
}
5359
};
5460
delegateParent.addEventListener("click", delegateFn);
5561

56-
if (initTrigger) {
57-
const v = delegateParent.querySelector(`${s}:checked`).value;
58-
onChange(v);
59-
}
60-
61-
return {
62+
tool = {
6263
unbind: () => {
6364
delegateParent.removeEventListener("click", delegateFn);
6465
},
@@ -79,4 +80,13 @@ export default function handleRadio(opt) {
7980
}
8081
},
8182
};
83+
84+
if (initTrigger) {
85+
const activeEl = delegateParent.querySelector(`${s}:checked`);
86+
if (activeEl) {
87+
onChange(activeEl.value, tool);
88+
}
89+
}
90+
91+
return tool;
8292
}

‎pages/html/radio.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import handleRadio from "./handleRadio.js";
22
// urlwizzard.schema://urlwizzard.hostnegotiated/viewer.html?file=%2Fpages%2Fhtml%2FhandleRadio.js
33

44
const name = "mode";
5-
const initState = "single";
5+
const initState = document.querySelector('.radios input[type="radio"]:checked').value;
66
const delegateParent = document.querySelector(".radios");
77
const pre = delegateParent.querySelector("pre");
88
function locallog(...args) {
@@ -11,13 +11,23 @@ function locallog(...args) {
1111

1212
const { unbind, list } = handleRadio({
1313
name,
14-
initState: "two",
15-
delegateParent,
14+
// initState, // optional, if not provided :checked value will be used but if no :checked defined just the first one
15+
delegateParent, // optional, this will tell where to bind delegate, default will fallback to document.body
1616
initTrigger: true,
1717
selectorAll: (name) => {
1818
return `.radios input[type="radio"][name="${name}"]`;
1919
},
20-
onChange: (v) => {
20+
onChange: (v, { list }) => {
2121
locallog("radioChanged: ", v);
22+
for (const { value } of list) {
23+
locallog("remove", value);
24+
if (value) {
25+
// loader.classList.remove(value);
26+
}
27+
}
28+
if (v) {
29+
locallog("add", v);
30+
// loader.classList.add(v);
31+
}
2232
},
2333
});

‎pages/htmx/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
8+
/>
9+
10+
<title>stopsopa.github.io</title>
11+
</head>
12+
<body class="layout bg" toc>
13+
<div class="body">
14+
<div class="inside">
15+
<div class="cards">
16+
<h2>Index</h2>
17+
<script type="editor" data-lang="html">
18+
19+
<meta name="htmx-config" content='{"historyCacheSize": 0}' />
20+
<meta name="htmx-config" content='{"disableInheritance":true}' />
21+
<!-- from: https://htmx.org/quirks/ -->
22+
23+
<button hx-post="/clicked"
24+
hx-trigger="click"
25+
hx-target="#parent-div"
26+
hx-swap="outerHTML">
27+
Click Me!
28+
</button>
29+
<!-- https://htmx.org/docs/#introduction -->
30+
31+
# vebs
32+
hx-get Issues a GET request to the given URL
33+
hx-post Issues a POST request to the given URL
34+
hx-put Issues a PUT request to the given URL
35+
hx-patch Issues a PATCH request to the given URL
36+
hx-delete Issues a DELETE request to the given URL
37+
38+
# triggers
39+
hx-trigger="mouseenter"
40+
hx-trigger="click"
41+
hx-trigger="submit"
42+
hx-trigger="load"
43+
hx-trigger="every 5s"
44+
hx-trigger="intersect delay:500ms"
45+
hx-trigger="revealed once throttle:500ms" -- works with input, scroll, mousemove
46+
</script>
47+
</div>
48+
</div>
49+
</div>
50+
<script type="module" src="/js/github.js"></script>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)