civil-compute/frame.js at main · tagmein/civil-compute · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
registerComponent(
  "396b163bb03a485db2b4d9fe42ac8f44",
  async function frame(doc, load) {
    const menuComponent = await load(
      doc,
      "/menu.js",
      "cc604d65619f4a6f840316f33fc7a3fc"
    );
    const selectComponent = await load(
      doc,
      "/select.js",
      "ade53932bf8f4855ac7d1860f7381f42"
    );
    const stackComponent = await load(
      doc,
      "/stack.js",
      "a7873bef93844efba4322d201c9d6648"
    );
    return function (components) {
      components.menu = menuComponent({
        ...components,
      });
      components.select = selectComponent({
        ...components,
      });
      components.stack = stackComponent({
        ...components,
      });
      let updateInternal;
      const menu = components.menu();
      const connection = components.select({
        textContent: "Connection",
        options: [
          {
            textContent: "Disk",
            value: "disk",
          },
          {
            textContent: "Local Storage",
            value: "localStorage",
          },
          {
            textContent: "Session Storage",
            value: "sessionStorage",
          },
        ],
        storageKey: "connection",
        async action(selectedConnection) {
          activeConnection = globalThis[selectedConnection];
          console.log(
            `connected to ${selectedConnection}: ${typeof activeConnection} activeConnection ${activeConnection}`
          );
          await updateInternal?.();
        },
      });
      const contentElement = doc.createElement("div");
      contentElement.classList.add("content");
      const container = components.stack(
        connection.element,
        menu.element,
        contentElement
      );
      const element = document.createElement("div");
      element.classList.add("frame");
      element.appendChild(container.element);
      async function home() {
        const appManager = components.app(components);
        const exploreApp = await appManager.load("explore");
        updateInternal = async function () {
          contentElement.textContent = "";
          const exploreAppInstance = await exploreApp(activeConnection);
          contentElement.appendChild(exploreAppInstance.element);
        };
        await updateInternal();
      }
      menu.insert(0, {
        title: "Go",
        items: [
          {
            title: "Explore",
            action: home,
          },
        ],
      });
      menu.insert(0, {
        title: "Frame",
        items: [
          {
            title: "Clear",
            async action() {
              contentElement.textContent = "";
            },
          },
          {
            title: "Fullscreen",
            async action() {
              contentElement.requestFullscreen();
            },
          },
        ],
      });
      const f = {
        get activeConnection() {
          return activeConnection;
        },
        contentElement,
        element,
        home,
        menu,
        get update() {
          return updateInternal;
        },
        set update(value) {
          updateInternal = value;
        },
      };
      return f;
    };
  }
);