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