Merge pull request #757 from googlefonts/sidebar-refactor

Sidebar refactor continuation
googlefonts · Aug 31, 2023 · 1712645 · 1712645
2 parents 3c7984f + 069bcf6
commit 1712645
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 124 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -23,7 +23,6 @@ import { VarPackedPath, joinPaths } from "../core/var-path.js";
 import {
   commandKeyProperty,
   enumerate,
-  fetchJSON,
   getCharFromUnicode,
   hyphenatedToCamelCase,
   isActiveElementTypeable,
@@ -229,7 +228,7 @@ export class EditorController {
       rootSubscriptionPattern[rootKey] = null;
     }
     await this.fontController.subscribeChanges(rootSubscriptionPattern, false);
-    await this.initGlyphsSearch();
+    this.initGlyphsSearch();
     this.initTools();
     await this.initSidebarDesignspace();
 
@@ -242,7 +241,7 @@ export class EditorController {
     setTimeout(() => this.setupFromWindowLocation(), 20);
   }
 
-  async initGlyphsSearch() {
+  initGlyphsSearch() {
     this.glyphsSearch =
       this.getSidebarPanel("glyph-search").contentElement.querySelector(
         "#glyphs-search"
@@ -253,100 +252,6 @@ export class EditorController {
     );
   }
 
-  async initUserSettings() {
-    const userSettings =
-      this.getSidebarPanel("user-settings").contentElement.querySelector(
-        "#user-settings"
-      );
-    const items = [];
-
-    // Visualization layer settings
-    const layers = this.visualizationLayers.definitions.filter(
-      (layer) => layer.userSwitchable
-    );
-    const layerItems = layers.map((layer) => {
-      return { key: layer.identifier, displayName: layer.name, ui: "checkbox" };
-    });
-    items.push({
-      displayName: "Glyph editor appearance",
-      controller: this.visualizationLayersSettings,
-      descriptions: layerItems,
-    });
-
-    // Clipboard settings
-    items.push({
-      displayName: "Clipboard export format",
-      controller: this.clipboardFormatController,
-      descriptions: [
-        {
-          key: "format",
-          ui: "radio",
-          options: [
-            { key: "glif", displayName: "GLIF (RoboFont)" },
-            { key: "svg", displayName: "SVG" },
-            { key: "fontra-json", displayName: "JSON (Fontra)" },
-          ],
-        },
-      ],
-    });
-
-    // Experimental feature settings
-    items.push({
-      displayName: "Experimental features",
-      controller: this.experimentalFeaturesController,
-      descriptions: [
-        {
-          key: "scalingEditBehavior",
-          displayName: "Scaling edit tool behavior",
-          ui: "checkbox",
-        },
-        {
-          key: "quadPenTool",
-          displayName: "Pen tool draws quadratics",
-          ui: "checkbox",
-        },
-      ],
-    });
-
-    // Theme settings
-    items.push({
-      displayName: "Theme settings",
-      controller: themeController,
-      descriptions: [
-        {
-          key: "theme",
-          ui: "radio",
-          options: [
-            { key: "automatic", displayName: "Automatic (use OS setting)" },
-            { key: "light", displayName: "Light" },
-            { key: "dark", displayName: "Dark" },
-          ],
-        },
-      ],
-    });
-
-    // Server info
-    const serverInfo = await fetchJSON("/serverinfo");
-    items.push({
-      displayName: "Server info",
-      controller: null,
-      descriptions: Object.entries(serverInfo).flatMap((entry) => {
-        return [
-          {
-            displayName: entry[0] + ":",
-            ui: "header",
-          },
-          {
-            displayName: entry[1],
-            ui: "plain",
-          },
-        ];
-      }),
-    });
-
-    userSettings.items = items;
-  }
-
   async showDialogGlyphEditLocationNotAtSource() {
     const glyphName = this.sceneSettings.selectedGlyphName;
     const result = await dialog(
@@ -502,8 +407,7 @@ export class EditorController {
       `fontra-selected-sidebar-${sidebar.identifier}`,
       onOff ? panelName : ""
     );
-    const methodName = hyphenatedToCamelCase("toggle-" + panelName);
-    setTimeout(() => this[methodName]?.call(this, onOff, doFocus), 10);
+    this.getSidebarPanel(panelName).toggle(onOff, doFocus);
     return onOff;
   }
 
@@ -1499,31 +1403,6 @@ export class EditorController {
     }
   }
 
-  toggleGlyphSearch(onOff, doFocus) {
-    if (onOff && doFocus) {
-      this.glyphsSearch.focusSearchField();
-    }
-  }
-
-  toggleTextEntry(onOff, doFocus) {
-    if (onOff && doFocus) {
-      this.getSidebarPanel("text-entry").focusTextEntry();
-    }
-  }
-
-  toggleSelectionInfo(onOff) {
-    if (onOff) {
-      this.getSidebarPanel("selection-info").update();
-    }
-  }
-
-  async toggleUserSettings(onOff) {
-    if (onOff && !this._didInitUserSettings) {
-      this._didInitUserSettings = true;
-      await loaderSpinner(this.initUserSettings());
-    }
-  }
-
   async editListenerCallback(editMethodName, senderID, ...args) {
     if (editMethodName === "editFinal") {
       this.sceneController.updateHoverState();

diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js
@@ -29,6 +29,12 @@ export default class GlyphSearchPanel extends Panel {
       ]
     );
   }
+
+  async toggle(on, focus) {
+    if (on && focus) {
+      this.editorController.glyphsSearch.focusSearchField();
+    }
+  }
 }
 
 customElements.define("panel-glyph-search", GlyphSearchPanel);
diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js
@@ -36,6 +36,12 @@ export default class SelectionInfoPanel extends Panel {
     );
   }
 
+  async toggle(on, focus) {
+    if (on) {
+      this.update();
+    }
+  }
+
   attach() {
     this.infoForm = new Form();
     this.contentElement.appendChild(this.infoForm);

diff --git a/src/fontra/views/editor/panel-text-entry.js b/src/fontra/views/editor/panel-text-entry.js
@@ -197,6 +197,10 @@ export default class TextEntryPanel extends Panel {
     this.setupTextAlignElement();
     this.setupIntersectionObserver();
   }
+
+  async toggle(on, focus) {
+    this.focusTextEntry();
+  }
 }
 
 customElements.define("panel-text-entry", TextEntryPanel);
diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js
@@ -1,5 +1,8 @@
 import * as html from "/core/unlit.js";
+import { themeController } from "/core/theme-settings.js";
+import { fetchJSON } from "/core/utils.js";
 import { css } from "../third-party/lit.js";
+import { loaderSpinner } from "../core/loader-spinner.js";
 import Panel from "./panel.js";
 
 export default class UserSettingsPanel extends Panel {
@@ -26,6 +29,98 @@ export default class UserSettingsPanel extends Panel {
       }),
     ]);
   }
+
+  async toggle(on) {
+    if (on && !this.editorController._didInitUserSettings) {
+      this.editorController._didInitUserSettings = true;
+      await loaderSpinner(this.setup());
+    }
+  }
+
+  async setup() {
+    const userSettings = this.contentElement.querySelector("#user-settings");
+    const items = [];
+    const layers = this.editorController.visualizationLayers.definitions.filter(
+      (layer) => layer.userSwitchable
+    );
+    const layerItems = layers.map((layer) => {
+      return { key: layer.identifier, displayName: layer.name, ui: "checkbox" };
+    });
+    items.push({
+      displayName: "Glyph editor appearance",
+      controller: this.editorController.visualizationLayersSettings,
+      descriptions: layerItems,
+    });
+
+    items.push({
+      displayName: "Clipboard export format",
+      controller: this.editorController.clipboardFormatController,
+      descriptions: [
+        {
+          key: "format",
+          ui: "radio",
+          options: [
+            { key: "glif", displayName: "GLIF (RoboFont)" },
+            { key: "svg", displayName: "SVG" },
+            { key: "fontra-json", displayName: "JSON (Fontra)" },
+          ],
+        },
+      ],
+    });
+
+    items.push({
+      displayName: "Experimental features",
+      controller: this.editorController.experimentalFeaturesController,
+      descriptions: [
+        {
+          key: "scalingEditBehavior",
+          displayName: "Scaling edit tool behavior",
+          ui: "checkbox",
+        },
+        {
+          key: "quadPenTool",
+          displayName: "Pen tool draws quadratics",
+          ui: "checkbox",
+        },
+      ],
+    });
+
+    items.push({
+      displayName: "Theme settings",
+      controller: themeController,
+      descriptions: [
+        {
+          key: "theme",
+          ui: "radio",
+          options: [
+            { key: "automatic", displayName: "Automatic (use OS setting)" },
+            { key: "light", displayName: "Light" },
+            { key: "dark", displayName: "Dark" },
+          ],
+        },
+      ],
+    });
+
+    const serverInfo = await fetchJSON("/serverinfo");
+    items.push({
+      displayName: "Server info",
+      controller: null,
+      descriptions: Object.entries(serverInfo).flatMap((entry) => {
+        return [
+          {
+            displayName: entry[0] + ":",
+            ui: "header",
+          },
+          {
+            displayName: entry[1],
+            ui: "plain",
+          },
+        ];
+      }),
+    });
+
+    userSettings.items = items;
+  }
 }
 
 customElements.define("panel-user-settings", UserSettingsPanel);
diff --git a/src/fontra/views/editor/panel.js b/src/fontra/views/editor/panel.js
@@ -11,6 +11,8 @@ export default class Panel extends SimpleElement {
   getContentElement() {}
 
   attach() {}
+
+  async toggle(on, focus) {}
 }
 
 customElements.define("fontra-panel", Panel);