Skip to content

Commit 5ed16a9

Browse files
stopsopastopsopa
committed
d
1 parent 60220e2 commit 5ed16a9

4 files changed

Lines changed: 150 additions & 5 deletions

File tree

‎pages/html/checkbox/handleCheckboxDynamic/handleCheckboxDynamic.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@
6262
<br />
6363
<a href="?observeMutations">observeMutations</a>
6464
<br />
65-
<a href=".">off</a>
65+
<a href="javascript:location.href=location.href.split('?')[0]">off</a>
66+
<br />
67+
<a href="javascript:location.search=''">off v2</a>
6668
<pre>
6769
This one is not able to set default values in chekboxes
6870
because it is designed to adapt to changing number of checkboxes.

‎pages/html/input/index.html‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,28 @@
4747
margin-right: 20px;
4848
}
4949
}
50+
#addbox > div {
51+
margin-bottom: 15px;
52+
button {
53+
float: right;
54+
}
55+
}
5056
</style>
5157
</head>
5258
<body class="layout bg">
5359
<div class="body">
5460
<!-- <div class="inside" style="max-width: none; padding-left: 80px; padding-right: 30px;"> -->
5561
<div class="inside">
5662
<div class="cards">
63+
<a href="?onLoad&observeMutations">onLoad & observeMutations</a>
64+
<br />
65+
<a href="?onLoad">onLoad</a>
66+
<br />
67+
<a href="?observeMutations">observeMutations</a>
68+
<br />
69+
<a href="javascript:location.href=location.href.split('?')[0]">off</a>
70+
<br />
71+
<a href="javascript:location.search=''">off v2</a>
5772
<h2>Index</h2>
5873
<script type="editor" data-lang="sh">
5974

@@ -73,9 +88,30 @@ <h2>Index</h2>
7388

7489
<form>
7590
<h2>form</h2>
76-
<label>input: <input type="text" /></label>
91+
92+
<div id="addbox">
93+
<div>
94+
<label>
95+
input a <input type="text" name="a" value="value_a" />
96+
</label>
97+
<button type="button" name="a">remove</button>
98+
</div>
99+
<div>
100+
<label>
101+
input b <input type="text" name="b" value="value b" />
102+
</label>
103+
<button type="button" name="b">remove</button>
104+
</div>
105+
<div>
106+
<label>
107+
input c <input type="text" name="c" value="value c" />
108+
</label>
109+
<button type="button" name="c">remove</button>
110+
</div>
111+
</div>
77112
<input type="submit" value="submit" />
78113
</form>
114+
<button id="addbutton">add input</button>
79115
<button id="reset" type="button">reset</button>
80116
</div>
81117
</div>

‎pages/html/input/index.js‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import handleInput from "./handleInput.js";
22
import handleCheckboxDynamic from "../checkbox/handleCheckboxDynamic/handleCheckboxDynamic.js";
3+
const hasKeys = (function() {
4+
const url = new URL(location.href);
5+
const obj = {};
6+
[...url.searchParams.keys()].forEach((key) => {
7+
obj[key] = true;
8+
});
9+
return obj;
10+
})();
311
const form = document.querySelector("form");
412
const pre = document.querySelector("pre");
513
const resetButton = document.querySelector("#reset");
@@ -9,6 +17,42 @@ if (!form || !pre || !resetButton) {
917
form.addEventListener("submit", (e) => {
1018
e.preventDefault();
1119
});
20+
const addbox = document.querySelector("#addbox");
21+
const addbutton = document.querySelector("#addbutton");
22+
if (addbox && addbutton) {
23+
let getNextSet = function() {
24+
return sets.shift();
25+
};
26+
var getNextSet2 = getNextSet;
27+
const sets = [
28+
{ name: "d", value: "value d" },
29+
{ name: "e", value: "value ee" },
30+
{ name: "ff", value: "value f" },
31+
{ name: "h", value: "value h" }
32+
];
33+
addbutton.addEventListener("click", () => {
34+
const set = getNextSet();
35+
if (!set) {
36+
console.log("all sets are used");
37+
return;
38+
}
39+
const div = document.createElement("div");
40+
div.innerHTML = `
41+
<label>
42+
input ${set.name} <input type="text" name="${set.name}" value="${set.value}" />
43+
</label>
44+
<button type="button" name="${set.name}">remove</button>
45+
`;
46+
addbox.appendChild(div);
47+
});
48+
form.addEventListener("click", (e) => {
49+
const el = e.target;
50+
if (el.tagName === "BUTTON" && el.innerText === "remove") {
51+
const row = el.parentElement;
52+
row?.remove();
53+
}
54+
});
55+
}
1256
const preTarget = document.querySelector("#target pre");
1357
const preValue = document.querySelector("#value pre");
1458
const preType = document.querySelector("#type pre");
@@ -54,10 +98,13 @@ handleCheckboxDynamic(
5498
` + preKey.innerText;
5599
preValue.innerText = `>${target?.value}<
56100
` + preValue.innerText;
57-
58101
console.log("handleInput.event:", e2);
59102
},
60-
{ onLoad: true, events }
103+
{
104+
onLoad: hasKeys.onLoad,
105+
observeMutations: hasKeys.observeMutations,
106+
events
107+
}
61108
);
62109
},
63110
{ onLoad: true }

‎pages/html/input/index.ts‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,22 @@ import type { HandleInputEvent } from "./handleInput.js";
33

44
import handleCheckboxDynamic from "../checkbox/handleCheckboxDynamic/handleCheckboxDynamic.js";
55

6+
/**
7+
* for url http://google.com/test?abc&def#hash
8+
* returns {abc: true, def: true}
9+
*/
10+
const hasKeys = (function () {
11+
const url = new URL(location.href);
12+
13+
const obj: Record<string, boolean> = {};
14+
15+
[...url.searchParams.keys()].forEach((key) => {
16+
obj[key] = true;
17+
});
18+
19+
return obj;
20+
})();
21+
622
const form = document.querySelector("form") as HTMLFormElement;
723
const pre = document.querySelector("pre") as HTMLPreElement;
824
const resetButton = document.querySelector("#reset") as HTMLButtonElement;
@@ -15,6 +31,46 @@ form.addEventListener("submit", (e) => {
1531
e.preventDefault();
1632
});
1733

34+
const addbox = document.querySelector("#addbox") as HTMLDivElement;
35+
const addbutton = document.querySelector("#addbutton") as HTMLButtonElement;
36+
37+
if (addbox && addbutton) {
38+
const sets = [
39+
{ name: "d", value: "value d" },
40+
{ name: "e", value: "value ee" },
41+
{ name: "ff", value: "value f" },
42+
{ name: "h", value: "value h" },
43+
];
44+
function getNextSet() {
45+
return sets.shift();
46+
}
47+
48+
addbutton.addEventListener("click", () => {
49+
const set = getNextSet();
50+
if (!set) {
51+
console.log("all sets are used");
52+
return;
53+
}
54+
55+
const div = document.createElement("div");
56+
div.innerHTML = `
57+
<label>
58+
input ${set.name} <input type="text" name="${set.name}" value="${set.value}" />
59+
</label>
60+
<button type="button" name="${set.name}">remove</button>
61+
`;
62+
addbox.appendChild(div);
63+
});
64+
65+
form.addEventListener("click", (e) => {
66+
const el = e.target as HTMLElement;
67+
if (el.tagName === "BUTTON" && el.innerText === "remove") {
68+
const row = el.parentElement;
69+
row?.remove();
70+
}
71+
});
72+
}
73+
1874
const preTarget = document.querySelector("#target pre") as HTMLPreElement;
1975
const preValue = document.querySelector("#value pre") as HTMLPreElement;
2076
const preType = document.querySelector("#type pre") as HTMLPreElement;
@@ -69,7 +125,11 @@ handleCheckboxDynamic(
69125

70126
console.log("handleInput.event:", e);
71127
},
72-
{ onLoad: true, events }
128+
{
129+
onLoad: hasKeys.onLoad,
130+
observeMutations: hasKeys.observeMutations,
131+
events
132+
}
73133
);
74134
},
75135
{ onLoad: true }

0 commit comments

Comments
 (0)