ponder.ooo
馃悕馃悕馃悕
1
2$css(`
3 nothing- {
4 display: block;
5 background-color: var(--main-background);
6 width: 100%;
7 height: 100%;
8 border-radius: 0;
9 }
10
11 nothing-:focus::before {
12 /*
13 outline: 2px solid var(--main-faded);
14 outline-offset: -2px;
15 outline-radius: 0;
16 */
17 content: ">";
18 color: var(--main-solid);
19 background-color: var(--main-faded);
20 line-height: 1.5em;
21 width: 1.1em;
22 height: 1.5em;
23 border-radius: 0.2em;
24 padding-left: 0.4em;
25 top: 1em;
26 left: 1em;
27 position: relative;
28 display: block;
29 }
30`);
31
32customElements.define("nothing-", class extends HTMLElement {});
33
34export async function main(target) {
35 const backdrop = $element("nothing-");
36 //const backdrop = $div("nothing");
37
38 backdrop.$ = {
39 focusable: true,
40 };
41
42 backdrop.tabIndex = 0;
43 backdrop.setAttribute("role", "button");
44 backdrop.setAttribute("aria-label", "Empty space. Press enter for a menu of modules to load.");
45
46 const load = (modName, args=[]) => {
47 return async () => {
48 const result = await $mod(modName, backdrop.parentNode, args);
49 if (result?.replace) {
50 backdrop.remove();
51 }
52 }
53 };
54
55 const noth = await $prepMod("layout/nothing");
56 const noth2 = {content: [noth, noth]};
57 const noth3 = {content: [noth, noth, noth]};
58
59 const menuItems = {
60 fractal: load("gpu/proj_shift"),
61 brot: load("gpu/brot"),
62 //prompt: load("prompt"),
63 row2: load("layout/split", [noth2]),
64 row3: load("layout/split", [noth3]),
65 col2: load("layout/split", [{...noth2, orientation: "col"}]),
66 col3: load("layout/split", [{...noth3, orientation: "col"}]),
67 blackboard: load("theme", ["blackboard"]),
68 whiteboard: load("theme", ["whiteboard"]),
69 spinner: load("spinner"),
70 highlight: load("code/highlight")
71 };
72
73 backdrop.$contextMenu = {
74 items: Object.entries(menuItems)
75 };
76
77 //const menu = await $mod("control/menu", backdrop, [menuItems]);
78
79 backdrop.addEventListener("keydown", (e) => {
80 if (e.key === "Enter" || e.key === "o") {
81 e.preventDefault();
82 e.stopPropagation();
83 const rect = backdrop.getBoundingClientRect();
84 const centerX = rect.left + rect.width / 2;
85 const centerY = rect.top + rect.height / 2;
86
87 document.$showMenu(backdrop);
88 }
89 });
90
91 target.appendChild(backdrop);
92
93 backdrop.focus();
94
95 return {
96 replace: true
97 };
98}
99