Merge pull request #805 from googlefonts/range-slider-name

Range slider updates
googlefonts · Sep 14, 2023 · 536db19 · 536db19
2 parents f1b4c75 + 1bbf742
commit 536db19
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 26 deletions.
diff --git a/src/fontra/client/web-components/designspace-location.js b/src/fontra/client/web-components/designspace-location.js
@@ -65,7 +65,7 @@ export class DesignspaceLocation extends UnlitElement {
         // Event was triggered by us -- ignore
         return;
       }
-      const slider = this.shadowRoot.querySelector(`range-slider[name="${event.key}"]`);
+      const slider = this.shadowRoot.querySelector(`#slider-${event.key}`);
       if (slider) {
         slider.value = event.newValue;
       }
@@ -85,17 +85,15 @@ export class DesignspaceLocation extends UnlitElement {
     this._values = { ...values };
 
     for (const [axisName, value] of Object.entries(values)) {
-      const slider = this.shadowRoot.querySelector(`range-slider[name="${axisName}"]`);
+      const slider = this.shadowRoot.querySelector(`#slider-${axisName}`);
       if (slider) {
         slider.value = value;
       }
     }
 
     for (const axis of this.axes || []) {
       if (!(axis.name in values)) {
-        const slider = this.shadowRoot.querySelector(
-          `range-slider[name="${axis.name}"]`
-        );
+        const slider = this.shadowRoot.querySelector(`#slider-${axis.name}`);
         if (slider) {
           slider.value = axis.defaultValue;
         }
@@ -133,12 +131,13 @@ export class DesignspaceLocation extends UnlitElement {
       );
       elements.push(
         html.createDomElement("range-slider", {
-          name: axis.name,
+          id: `slider-${axis.name}`,
           minValue: axis.minValue,
           maxValue: axis.maxValue,
           defaultValue: axis.defaultValue,
           value: modelValue !== undefined ? modelValue : axis.defaultValue,
-          onChangeCallback: (event) => this._dispatchLocationChangedEvent(event),
+          onChangeCallback: (event) =>
+            this._dispatchLocationChangedEvent(axis.name, event.value),
         })
       );
       elements.push(infoBox);
@@ -157,11 +156,11 @@ export class DesignspaceLocation extends UnlitElement {
     }
   }
 
-  _dispatchLocationChangedEvent(slider) {
+  _dispatchLocationChangedEvent(name, value) {
     if (this.controller) {
-      this.controller.setItem(slider.name, slider.value, this);
+      this.controller.setItem(name, value, this);
     } else {
-      this.values[slider.name] = slider.value;
+      this.values[name] = value;
       const event = new CustomEvent("locationChanged", {
         bubbles: false,
         detail: this,

diff --git a/src/fontra/client/web-components/range-slider.js b/src/fontra/client/web-components/range-slider.js
@@ -26,17 +26,6 @@ export class RangeSlider extends LitElement {
       font-feature-settings: "tnum" 1;
     }
 
-    .slider-name {
-      min-width: 7ch;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: right;
-    }
-
-    .slider-name:hover {
-      cursor: pointer;
-    }
-
     .range-container {
       position: relative;
       flex-grow: 1;
@@ -157,7 +146,6 @@ export class RangeSlider extends LitElement {
   `;
 
   static properties = {
-    name: { type: String, reflect: true },
     minValue: { type: Number },
     maxValue: { type: Number },
     defaultValue: { type: Number },
@@ -170,13 +158,13 @@ export class RangeSlider extends LitElement {
   constructor() {
     super();
     // Fallbacks for attributes that are not defined when calling the component
-    this.name = "Slider";
     this.minValue = 0;
     this.maxValue = 100;
     this.defaultValue = this.minValue;
     this.value = this.defaultValue;
     this.tickmarksPositions = [];
     this.step = "any";
+    this.sawMouseDown = false;
     this.onChangeCallback = () => {};
   }
 
@@ -247,10 +235,11 @@ export class RangeSlider extends LitElement {
     event.preventDefault();
     this.value = clamp(newValue, this.minValue, this.maxValue);
     this.updateIsAtDefault();
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   handleMouseDown(event) {
+    this.sawMouseDown = true;
     const activeElement = document.activeElement;
     this._savedCanvasElement =
       activeElement?.id === "edit-canvas" ? activeElement : undefined;
@@ -262,6 +251,8 @@ export class RangeSlider extends LitElement {
 
   handleMouseUp(event) {
     this._savedCanvasElement?.focus();
+    this.sawMouseDown = false;
+    this.onChangeCallback({ value: this.value, dragEnd: true });
   }
 
   changeValue(event) {
@@ -282,7 +273,13 @@ export class RangeSlider extends LitElement {
       }
     }
     this.updateIsAtDefault();
-    this.onChangeCallback(this);
+
+    const callbackEvent = { value: this.value };
+    if (this.sawMouseDown) {
+      callbackEvent.dragBegin = true;
+    }
+    this.sawMouseDown = false;
+    this.onChangeCallback(callbackEvent);
   }
 
   updateIsAtDefault() {
@@ -304,7 +301,7 @@ export class RangeSlider extends LitElement {
 
   reset(event) {
     this.value = this.defaultValue;
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   buildTickmarks() {