range-slider does not need a name; pass event obj to callback instead…

… of slider object
googlefonts · Sep 14, 2023 · ce084a7 · ce084a7
1 parent f1b4c75
commit ce084a7
Show file tree

Hide file tree

Showing 2 changed files with 12 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,7 +158,6 @@ 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;
@@ -247,7 +234,7 @@ 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) {
@@ -282,7 +269,7 @@ export class RangeSlider extends LitElement {
       }
     }
     this.updateIsAtDefault();
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   updateIsAtDefault() {
@@ -304,7 +291,7 @@ export class RangeSlider extends LitElement {
 
   reset(event) {
     this.value = this.defaultValue;
-    this.onChangeCallback(this);
+    this.onChangeCallback({ value: this.value });
   }
 
   buildTickmarks() {