Merge pull request #822 from googlefonts/issue821

Keep sliders as properties of an object instead of using element ids
googlefonts · Sep 19, 2023 · 6ff3380 · 6ff3380
2 parents 9a7b2c1 + 00423f3
commit 6ff3380
Showing 1 changed file with 14 additions and 14 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(`#slider-${event.key}`);
+      const slider = this._sliders?.[event.key];
       if (slider) {
         slider.value = event.newValue;
       }
@@ -85,15 +85,15 @@ export class DesignspaceLocation extends UnlitElement {
     this._values = { ...values };
 
     for (const [axisName, value] of Object.entries(values)) {
-      const slider = this.shadowRoot.querySelector(`#slider-${axisName}`);
+      const slider = this._sliders?.[axisName];
       if (slider) {
         slider.value = value;
       }
     }
 
     for (const axis of this.axes || []) {
       if (!(axis.name in values)) {
-        const slider = this.shadowRoot.querySelector(`#slider-${axis.name}`);
+        const slider = this._sliders?.[axis.name];
         if (slider) {
           slider.value = axis.defaultValue;
         }
@@ -105,6 +105,7 @@ export class DesignspaceLocation extends UnlitElement {
     if (!this.axes) {
       return;
     }
+    this._sliders = [];
     const elements = [];
     for (const axis of this.axes) {
       if (axis.isDivider) {
@@ -129,17 +130,16 @@ export class DesignspaceLocation extends UnlitElement {
           [axis.name]
         )
       );
-      elements.push(
-        html.createDomElement("range-slider", {
-          id: `slider-${axis.name}`,
-          minValue: axis.minValue,
-          maxValue: axis.maxValue,
-          defaultValue: axis.defaultValue,
-          value: modelValue !== undefined ? modelValue : axis.defaultValue,
-          onChangeCallback: (event) =>
-            this._dispatchLocationChangedEvent(axis.name, event.value),
-        })
-      );
+      const slider = html.createDomElement("range-slider", {
+        minValue: axis.minValue,
+        maxValue: axis.maxValue,
+        defaultValue: axis.defaultValue,
+        value: modelValue !== undefined ? modelValue : axis.defaultValue,
+        onChangeCallback: (event) =>
+          this._dispatchLocationChangedEvent(axis.name, event.value),
+      });
+      this._sliders[axis.name] = slider;
+      elements.push(slider);
       elements.push(infoBox);
     }
     return elements;