Merge pull request #1951 from googlefonts/issue-1948-font-overview-ad…

…d-location-sliders Add location sliders to font overview
googlefonts · Jan 16, 2025 · 8f9c8ef · 8f9c8ef
2 parents 04ea946 + 2e8719b
commit 8f9c8ef
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 20 deletions.
diff --git a/src/fontra/views/fontoverview/fontoverview.css b/src/fontra/views/fontoverview/fontoverview.css
@@ -18,6 +18,7 @@ body {
   padding: 1em 1em 1em 1em;
   background-color: var(--ui-element-background-color);
   height: calc(100vh - var(--top-bar-height));
+  overflow: auto;
 }
 
 .font-overview-sidebar-shadow-box {

diff --git a/src/fontra/views/fontoverview/fontoverview.html b/src/fontra/views/fontoverview/fontoverview.html
@@ -8,7 +8,6 @@
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Font Overview</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
-    <script type="module" src="/web-components/glyph-search-field.js"></script>
     <script type="module" src="/core/theme-settings.js"></script>
   </head>
   <body>

diff --git a/src/fontra/views/fontoverview/fontoverview.js b/src/fontra/views/fontoverview/fontoverview.js
@@ -278,25 +278,21 @@ export class FontOverviewController extends ViewController {
       "fontLocationSource",
       (event) => {
         if (!event.senderInfo?.fromFontLocationUser) {
-          this.fontOverviewSettingsController.withSenderInfo(
-            { fromFontLocationSource: true },
-            () => {
-              this.fontOverviewSettingsController.model.fontLocationUser =
-                this.fontController.mapSourceLocationToUserLocation(event.newValue);
-            }
+          this.fontOverviewSettingsController.setItem(
+            "fontLocationUser",
+            this.fontController.mapSourceLocationToUserLocation(event.newValue),
+            { fromFontLocationSource: true }
           );
         }
       }
     );
 
     this.fontOverviewSettingsController.addKeyListener("fontLocationUser", (event) => {
       if (!event.senderInfo?.fromFontLocationSource) {
-        this.fontOverviewSettingsController.withSenderInfo(
-          { fromFontLocationUser: true },
-          () => {
-            this.fontOverviewSettingsController.model.fontLocationSource =
-              this.fontController.mapUserLocationToSourceLocation(event.newValue);
-          }
+        this.fontOverviewSettingsController.setItem(
+          "fontLocationSource",
+          this.fontController.mapUserLocationToSourceLocation(event.newValue),
+          { fromFontLocationUser: true }
         );
       }
     });

diff --git a/src/fontra/views/fontoverview/panel-navigation.js b/src/fontra/views/fontoverview/panel-navigation.js
@@ -10,6 +10,8 @@ import {
   labeledTextInput,
   popupSelect,
 } from "/core/ui-utils.js";
+import { scheduleCalls } from "/core/utils.js";
+import { DesignspaceLocation } from "/web-components/designspace-location.js";
 import { GlyphSearchField } from "/web-components/glyph-search-field.js";
 import { IconButton } from "/web-components/icon-button.js"; // required for the icon buttons
 import { showMenu } from "/web-components/menu-panel.js";
@@ -78,6 +80,11 @@ export class FontOverviewNavigation extends HTMLElement {
         opacity: 1;
       }
 
+      .font-source-location-container {
+        display: grid;
+        gap: 0.5em;
+      }
+
     `);
 
     accordion.onItemOpenClose = (item, openClose) => {
@@ -126,7 +133,10 @@ export class FontOverviewNavigation extends HTMLElement {
       {
         label: translate("sources.labels.location"),
         id: "location",
-        content: await this._makeFontSourcePopup(),
+        content: html.div({ class: "font-source-location-container" }, [
+          await this._makeFontSourcePopup(),
+          this._makeFontSourceSliders(),
+        ]),
       },
       {
         label: "Group by", // TODO: translate
@@ -190,7 +200,9 @@ export class FontOverviewNavigation extends HTMLElement {
       "fontLocationSource",
       (event) => {
         if (!event.senderInfo?.sentFromInput) {
-          controller.model.value = selectedSourceIdentifier();
+          controller.setItem("value", selectedSourceIdentifier(), {
+            sentFromSourceLocationListener: true,
+          });
         }
       }
     );
@@ -200,16 +212,43 @@ export class FontOverviewNavigation extends HTMLElement {
       const sourceLocation = {
         ...fontSources[fontSourceIdentifier]?.location,
       }; // A font may not have any font sources, therefore the ?-check
-      this.fontOverviewSettingsController.setItem(
-        "fontLocationSource",
-        sourceLocation,
-        { sentFromInput: true }
-      );
+      if (!event.senderInfo?.sentFromSourceLocationListener) {
+        this.fontOverviewSettingsController.setItem(
+          "fontLocationSource",
+          sourceLocation,
+          { sentFromInput: true }
+        );
+      }
     });
 
     return popupSelect(controller, "value", options);
   }
 
+  _makeFontSourceSliders() {
+    const locationElement = new DesignspaceLocation();
+    locationElement.axes = this.fontController.axes.axes;
+    locationElement.values = { ...this.fontOverviewSettings.fontLocationUser };
+
+    this.fontOverviewSettingsController.addKeyListener("fontLocationUser", (event) => {
+      if (!event.senderInfo?.sentFromSliders) {
+        locationElement.values = { ...event.newValue };
+      }
+    });
+
+    locationElement.addEventListener(
+      "locationChanged",
+      scheduleCalls((event) => {
+        this.fontOverviewSettingsController.setItem(
+          "fontLocationUser",
+          { ...locationElement.values },
+          { sentFromSliders: true }
+        );
+      })
+    );
+
+    return locationElement;
+  }
+
   _makeGroupByUI() {
     return this._makeCheckboxUI("groupByKeys", groupByProperties);
   }