ui: Select by class instead of (multiple) id

In case of multiple property of same types, UI events were forwarded to 1st instance of widget. This change is a follow up of the switch change: Bug: WebThingsIO#1148 Relate-to: WebThingsIO#1249 Change-Id: I2018092168af14eb8f6f1e9e230e04a432490045 Signed-off-by: Philippe Coval <p.coval@samsung.com>
TizenTeam · Sep 24, 2018 · 5a9ceda · 5a9ceda
1 parent d45a05f
commit 5a9ceda
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 37 deletions.
diff --git a/static/js/components/capability/label.js b/static/js/components/capability/label.js
@@ -54,8 +54,10 @@ class LabelCapability extends BaseComponent {
   constructor() {
     super(template);
 
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-label-capability-value');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-label-capability-unit');
     this._precision = 0;
     this._level = 0;
   }

diff --git a/static/js/components/capability/multi-level-switch.js b/static/js/components/capability/multi-level-switch.js
@@ -79,10 +79,12 @@ const ON_BLANK = 'white';
 class MultiLevelSwitchCapability extends BaseComponent {
   constructor() {
     super(template);
-
-    this._container = this.shadowRoot.querySelector('#container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._label = this.shadowRoot.querySelector('#label');
+    this._container = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-bar');
+    this._label = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-label');
     this._on = false;
     this._level = 0;
     this._onClick = this.__onClick.bind(this);

diff --git a/static/js/components/property/action.js b/static/js/components/property/action.js
@@ -89,8 +89,10 @@ class Action extends BaseComponent {
   constructor() {
     super(template);
 
-    this._button = this.shadowRoot.querySelector('#button');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._button = this.shadowRoot.querySelector(
+      '.webthing-action-button');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-action-name');
     this._href = null;
 
     this._onClick = this.__onClick.bind(this);

diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
@@ -58,8 +58,10 @@ class ColorProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#color');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-color-property-color');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-color-property-name');
 
     this._onChange = this.__onChange.bind(this);
   }

diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
@@ -77,9 +77,12 @@ class EnumProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._select = this.shadowRoot.querySelector('#select');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._select = this.shadowRoot.querySelector(
+      '.webthing-enum-property-select');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-enum-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-enum-property-name');
 
     this._type = 'string';
 

diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
@@ -114,14 +114,22 @@ class LevelProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._text = this.shadowRoot.querySelector('#text');
-    this._barContainer = this.shadowRoot.querySelector('#bar-container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._form = this.shadowRoot.querySelector('#form');
-    this._number = this.shadowRoot.querySelector('#number');
-    this._slider = this.shadowRoot.querySelector('#slider');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._text = this.shadowRoot.querySelector(
+      '.webthing-level-property-text');
+    this._barContainer = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar');
+    this._form = this.shadowRoot.querySelector(
+      '.webthing-level-property-form');
+    this._number = this.shadowRoot.querySelector(
+      '.webthing-level-property-number');
+    this._slider = this.shadowRoot.querySelector(
+      '.webthing-level-property-slider');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-level-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-level-property-name');
 
     this._onChange = this.__onChange.bind(this);
     this._onClick = this.__onClick.bind(this);

diff --git a/static/js/components/property/number.js b/static/js/components/property/number.js
@@ -87,11 +87,14 @@ template.innerHTML = `
 class NumberProperty extends BaseComponent {
   constructor() {
     super(template);
-
-    this._form = this.shadowRoot.querySelector('#form');
-    this._input = this.shadowRoot.querySelector('#input');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._form = this.shadowRoot.querySelector(
+      '.webthing-number-property-form');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-number-property-input');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-number-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-number-property-name');
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);

diff --git a/static/js/components/property/numeric-label.js b/static/js/components/property/numeric-label.js
@@ -64,9 +64,12 @@ class NumericLabelProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._name = this.shadowRoot.querySelector('#name');
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-numeric-label-property-name');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-numeric-label-property-value');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-numeric-label-property-unit');
     this._precision = 0;
   }
 

diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
@@ -71,8 +71,10 @@ class SliderProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#slider');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-slider-property-slider');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-slider-property-name');
 
     this._onChange = this.__onChange.bind(this);
   }

diff --git a/static/js/components/property/string-label.js b/static/js/components/property/string-label.js
@@ -64,9 +64,12 @@ class StringLabelProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._name = this.shadowRoot.querySelector('#name');
-    this._container = this.shadowRoot.querySelector('#container');
-    this._value = this.shadowRoot.querySelector('#value');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-container');
+    this._container = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-value');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-value');
     this._inverted = false;
   }
 

diff --git a/static/js/components/property/string.js b/static/js/components/property/string.js
@@ -73,9 +73,12 @@ class StringProperty extends BaseComponent {
   constructor() {
     super(template);
 
-    this._form = this.shadowRoot.querySelector('#form');
-    this._input = this.shadowRoot.querySelector('#input');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._form = this.shadowRoot.querySelector(
+      '.webthing-string-property-form');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-string-property-input');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-string-property-name');
 
     this._onSubmit = this.__onSubmit.bind(this);
     this._onBlur = this.__onBlur.bind(this);