Add getStoredWidth to Sidebar

googlefonts · Sep 13, 2023 · fda815a · fda815a
1 parent db2d5c1
commit fda815a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -32,7 +32,6 @@ import {
   readFromClipboard,
   reversed,
   writeToClipboard,
-  clamp,
 } from "../core/utils.js";
 import { themeController } from "/core/theme-settings.js";
 import { showMenu, MenuItemDivider } from "/web-components/menu-panel.js";
@@ -55,7 +54,7 @@ import {
 import { staticGlyphToGLIF } from "../core/glyph-glif.js";
 import { pathToSVG } from "../core/glyph-svg.js";
 import { parseClipboard } from "../core/server-utils.js";
-import { Sidebar, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "./sidebar.js";
+import { Sidebar, MIN_SIDEBAR_WIDTH } from "./sidebar.js";
 
 import TextEntryPanel from "./panel-text-entry.js";
 import GlyphSearchPanel from "./panel-glyph-search.js";
@@ -378,19 +377,12 @@ export class EditorController {
       }
     }, 100);
 
-    function getStoredSidebarWidth(identifier) {
-      const sidebarWidth = localStorage.getItem(`fontra-sidebar-width-${identifier}`);
-      let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH);
-      if (isNaN(width)) {
-        width = MIN_SIDEBAR_WIDTH;
-      }
-      return width;
-    }
-
     const resizeObserver = new ResizeObserver(([element]) => {
-      const leftWidth = getStoredSidebarWidth("left");
-      const rightWidth = getStoredSidebarWidth("right");
-      if (element.contentRect.width < leftWidth + rightWidth + MIN_CANVAS_SPACE) {
+      const totalWidth = this.sidebars.reduce(
+        (total, sidebar) => total + sidebar.getStoredWidth(),
+        0
+      );
+      if (element.contentRect.width < totalWidth + MIN_CANVAS_SPACE) {
         for (const sidebar of this.sidebars) {
           sidebar.applyWidth(MIN_SIDEBAR_WIDTH, true);
         }

diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js
@@ -102,6 +102,17 @@ export class Sidebar {
     );
   }
 
+  getStoredWidth() {
+    const sidebarWidth = localStorage.getItem(
+      `fontra-sidebar-width-${this.identifier}`
+    );
+    let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH);
+    if (isNaN(width)) {
+      width = MIN_SIDEBAR_WIDTH;
+    }
+    return width;
+  }
+
   initResizeGutter() {
     let initialWidth;
     let initialPointerCoordinateX;
@@ -145,15 +156,9 @@ export class Sidebar {
       document.addEventListener("pointermove", onPointerMove);
       document.addEventListener("pointerup", onPointerUp, { once: true });
     });
-    const sidebarWidth = localStorage.getItem(
-      `fontra-sidebar-width-${this.identifier}`
-    );
+    const sidebarWidth = this.getStoredWidth();
     if (sidebarWidth) {
-      let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH);
-      if (isNaN(width)) {
-        width = MIN_SIDEBAR_WIDTH;
-      }
-      this.applyWidth(width);
+      this.applyWidth(sidebarWidth);
     }
   }
 }