First basic skeleton for font overview

googlefonts · Dec 11, 2024 · 4577b5f · 4577b5f
1 parent 855804f
commit 4577b5f
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 0 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -57,6 +57,7 @@ fontra-workflow = "fontra.workflow.command:main"
 
 [project.entry-points."fontra.views"]
 editor = "fontra.views.editor"
+fontoverview = "fontra.views.fontoverview"
 fontinfo = "fontra.views.fontinfo"
 applicationsettings = "fontra.views.applicationsettings"
 

diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -871,6 +871,23 @@ export class EditorController {
           { actionIdentifier: "action.glyph.add-background-image" },
         ],
       },
+      {
+        title: translate("menubar.window"),
+        enabled: () => true,
+        getItems: () => {
+          return [
+            {
+              title: translate("font-overview.title"),
+              enabled: () => true,
+              callback: () => {
+                const url = new URL(window.location);
+                url.pathname = url.pathname.replace("/editor/", "/fontoverview/");
+                window.open(url.toString());
+              },
+            },
+          ];
+        },
+      },
       {
         title: translate("menubar.help"),
         enabled: () => true,

diff --git a/src/fontra/views/fontoverview/fontoverview.css b/src/fontra/views/fontoverview/fontoverview.css
@@ -0,0 +1,35 @@
+body {
+  overflow: scroll;
+}
+
+.main-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0em;
+  box-sizing: border-box;
+  gap: 0em;
+  width: 100vw;
+  height: 100vh;
+}
+
+#sidebar-container {
+  display: grid;
+  align-content: start;
+  gap: 1em;
+  padding: 2em 1em 2em 2em;
+  background-color: var(--ui-element-background-color);
+}
+
+.sidebar-shadow-box {
+  box-shadow: 0px 0px 8px #0006;
+}
+
+.font-overview-panel {
+  display: grid;
+  padding: 2em 2em 2em 1em;
+  outline: none;
+}
+
+#panel-container {
+  overflow: auto;
+}
diff --git a/src/fontra/views/fontoverview/fontoverview.html b/src/fontra/views/fontoverview/fontoverview.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link href="/css/core.css" rel="stylesheet" />
+    <link href="/fontoverview/fontoverview.css" rel="stylesheet" />
+    <link href="/css/tooltip.css" rel="stylesheet" />
+    <title>Fontra Font Info</title>
+    <script type="module" src="/web-components/modal-dialog.js"></script>
+    <script type="module" src="/core/theme-settings.js"></script>
+  </head>
+  <body>
+    <modal-dialog></modal-dialog>
+    <div class="main-container">
+      <div id="sidebar-container" class="sidebar-shadow-box"></div>
+      <div id="panel-container"></div>
+    </div>
+  </body>
+  <script type="module">
+    import { FontOverviewController } from "/fontoverview/fontoverview.js";
+
+    async function startApp() {
+      window.fontOverviewController = await FontOverviewController.fromWebSocket();
+    }
+
+    startApp();
+  </script>
+</html>
diff --git a/src/fontra/views/fontoverview/fontoverview.js b/src/fontra/views/fontoverview/fontoverview.js
@@ -0,0 +1,56 @@
+import { FontController } from "../core/font-controller.js";
+import * as html from "../core/html-utils.js";
+import { getRemoteProxy } from "../core/remote.js";
+import { makeDisplayPath } from "../core/view-utils.js";
+import { translate } from "/core/localization.js";
+import { message } from "/web-components/modal-dialog.js";
+
+export class FontOverviewController {
+  static async fromWebSocket() {
+    const pathItems = window.location.pathname.split("/").slice(3);
+    const displayPath = makeDisplayPath(pathItems);
+    document.title = `Fontra Font Overview — ${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 fontOverviewController = new FontOverviewController(remoteFontEngine);
+    remoteFontEngine.receiver = fontOverviewController;
+    remoteFontEngine.onclose = (event) =>
+      fontOverviewController.handleRemoteClose(event);
+    remoteFontEngine.onerror = (event) =>
+      fontOverviewController.handleRemoteError(event);
+    await fontOverviewController.start();
+    return fontOverviewController;
+  }
+
+  constructor(font) {
+    this.fontController = new FontController(font);
+  }
+
+  async start() {
+    await this.fontController.initialize();
+
+    const sidebarContainer = document.querySelector("#sidebar-container");
+    const panelContainer = document.querySelector("#panel-container");
+
+    const sidebarElement = html.div({}, [translate("Font Overview sidebar")]);
+    sidebarContainer.appendChild(sidebarElement);
+
+    const panelElement = html.div(
+      {
+        class: "font-overview-panel",
+        id: "font-overview-panel",
+      },
+      [translate("Font Overview container")]
+    );
+
+    panelContainer.appendChild(panelElement);
+  }
+
+  async messageFromServer(headline, msg) {
+    // don't await the dialog result, the server doesn't need an answer
+    message(headline, msg);
+  }
+}