Add skeleton for font info view

googlefonts · Jan 22, 2024 · 38a92d4 · 38a92d4
1 parent 6047574
commit 38a92d4
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -51,6 +51,7 @@ fontra-copy = "fontra.backends.copy:main"
 
 [project.entry-points."fontra.views"]
 editor = "fontra.views.editor"
+fontinfo = "fontra.views.fontinfo"
 plugins = "fontra.views.plugins"
 
 

diff --git a/src/fontra/views/fontinfo/fontinfo.html b/src/fontra/views/fontinfo/fontinfo.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link href="/css/core.css" rel="stylesheet" />
+    <title>Fontra Font Info</title>
+    <style>
+      body {
+        display: grid;
+        grid-template-columns: 25% auto;
+        margin: 2em;
+      }
+
+      .header {
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div class="header" for="names-content">Names</div>
+      <div class="header" for="axes-content">Axes</div>
+      <div class="header" for="sources-content">Sources</div>
+    </div>
+    <div>
+      <div class="content" id="names-content" hidden>Names Content</div>
+      <div class="content" id="axes-content" hidden>Axes Content</div>
+      <div class="content" id="sources-content" hidden>Sources Content</div>
+    </div>
+  </body>
+  <script type="module">
+    import { FontInfoController } from "/fontinfo/fontinfo.js";
+
+    async function startApp() {
+      window.fontInfoController = await FontInfoController.fromWebSocket();
+    }
+
+    function headerClick(event) {
+      const showID = event.target.getAttribute("for");
+      for (const el of document.querySelectorAll(".content")) {
+        el.hidden = el.id != showID;
+      }
+    }
+
+    for (const el of document.querySelectorAll(".header")) {
+      el.onclick = headerClick;
+    }
+
+    startApp();
+  </script>
+</html>
diff --git a/src/fontra/views/fontinfo/fontinfo.js b/src/fontra/views/fontinfo/fontinfo.js
@@ -0,0 +1,37 @@
+import { getRemoteProxy } from "../core/remote.js";
+import { makeDisplayPath } from "../core/view-tools.js";
+
+export class FontInfoController {
+  static async fromWebSocket() {
+    const pathItems = window.location.pathname.split("/").slice(3);
+    const displayPath = makeDisplayPath(pathItems);
+    document.title = `Fontra Font Info — ${decodeURI(displayPath)}`;
+    const projectPath = pathItems.join("/");
+    const protocol = window.location.protocol === "http:" ? "ws" : "wss";
+    const wsURL = `${protocol}://${window.location.host}/websocket/${projectPath}`;
+
+    const remoteFontEngine = await getRemoteProxy(wsURL);
+    const fontInfoController = new FontInfoController(remoteFontEngine);
+    remoteFontEngine.receiver = fontInfoController;
+    remoteFontEngine.onclose = (event) => fontInfoController.handleRemoteClose(event);
+    remoteFontEngine.onerror = (event) => fontInfoController.handleRemoteError(event);
+    await fontInfoController.start();
+    return fontInfoController;
+  }
+
+  constructor(font) {
+    this.font = font;
+  }
+
+  async start() {
+    this.axes = await this.font.getGlobalAxes();
+  }
+
+  handleRemoteClose(event) {
+    //
+  }
+
+  handleRemoteError(event) {
+    //
+  }
+}