ponder.ooo
馃悕馃悕馃悕
1
2$css(`
3
4.control-panel {
5 display: flex;
6 flex-direction: column;
7 gap: 1rem;
8 padding: 0.5rem;
9 background: var(--main-background);
10 font-family: var(--main-font);
11 color: var(--main-solid);
12 max-width: 300px;
13 overflow-y: scroll;
14}
15
16.control-panel legend {
17 line-height: 1rem;
18 margin: auto;
19 border-bottom: 3px double var(--main-solid);
20 padding-top: 0.5rem;
21 padding-bottom: 0.2rem;
22 padding-left: 0.5rem;
23 padding-right: 0.5rem;
24}
25
26.control {
27 display: flex;
28 flex-direction: column;
29 flex-shrink: 0;
30}
31
32`);
33
34async function createControl(target, spec) {
35 await $mod(`control/${spec.type}`, target, [spec]);
36}
37
38export async function main(target, name, controls) {
39 const id = name.toLowerCase().replace(/\s+/g, "-");
40
41 const container = document.createElement("fieldset");
42 container.className = "control-panel";
43 container.setAttribute("aria-labelledby", id);
44
45 const legend = document.createElement("legend");
46 legend.id = id;
47 legend.innerText = name;
48 container.appendChild(legend);
49
50 for (const control of controls) {
51 await createControl(container, control);
52 }
53
54 target.appendChild(container);
55
56 return { replace: true };
57}
58