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 overflow-y: scroll;
13 height: 100%;
14 width: 100%;
15}
16
17.control-panel > * {
18 max-width: 300px;
19}
20
21.control-panel legend {
22 line-height: 1rem;
23 margin: auto;
24 border-bottom: 3px double var(--main-solid);
25 padding-top: 0.5rem;
26 padding-bottom: 0.2rem;
27 padding-left: 0.5rem;
28 padding-right: 0.5rem;
29}
30
31.control {
32 display: flex;
33 flex-direction: column;
34 flex-shrink: 0;
35}
36
37`);
38
39async function createControl(target, spec) {
40 await $mod(`control/${spec.type}`, target, [spec]);
41}
42
43export async function main(target, name, controls) {
44 const id = name.toLowerCase().replace(/\s+/g, "-");
45
46 const container = document.createElement("fieldset");
47 container.className = "control-panel";
48 container.setAttribute("aria-labelledby", id);
49
50 const legend = document.createElement("legend");
51 legend.id = id;
52 legend.innerText = name;
53 container.appendChild(legend);
54
55 for (const control of controls) {
56 await createControl(container, control);
57 }
58
59 target.appendChild(container);
60
61 return { replace: true };
62}
63