ui: Allow multiple same properties type in single thing

Previously item ids were duplicated, the observed consequence is that any click on widgets is seen as click on 1st declared element. For example, a thing with 2 switches is displayed correctly, and click events are also triggered but event will be "redirected" to 1st switch only, this is not desired. It was tested for boolean, number related components. Change-Id: I27ef75a95889c37224aa7da6b0fbf8e2ad57ba65 Bug: WebThingsIO#1148 Forwarded: WebThingsIO#1249 Origin: https://github.com/tizenteam/gateway Signed-off-by: Philippe Coval <p.coval@samsung.com>
TizenTeam · Aug 3, 2018 · cb9fa76 · cb9fa76
1 parent 287d1ed
commit cb9fa76
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 131 deletions.
diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js
@@ -12,6 +12,7 @@
 class BaseComponent extends HTMLElement {
   constructor(template) {
     super();
+    this.idSuffix = `-${BaseComponent.count++}`;
     this.attachShadow({mode: 'open'});
     const templateClone = template.content.cloneNode(true);
     // Detect whether ShadowRoot has been polyfilled on this browser
@@ -44,4 +45,5 @@ class BaseComponent extends HTMLElement {
   }
 }
 
+BaseComponent.count = 0;
 module.exports = BaseComponent;
diff --git a/static/js/components/property/action.js b/static/js/components/property/action.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class Action extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -77,20 +79,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-action-container">
-    <div id="contents" class="webthing-action-contents">
-      <button id="button" type="button" class="webthing-action-button"></button>
+  <div id="container-${BaseComponent.count}" class="webthing-action-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-action-contents">
+      <button id="button-${BaseComponent.count}" type="button" class="webthing-action-button"></button>
     </div>
   </div>
-  <div id="name" class="webthing-action-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-action-name"></div>
 `;
 
-class Action extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._button = this.shadowRoot.querySelector('#button');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._button = this.shadowRoot.querySelector(`#button${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
     this._href = null;
 
     this._onClick = this.__onClick.bind(this);

diff --git a/static/js/components/property/boolean.js b/static/js/components/property/boolean.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class BooleanProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -70,26 +72,24 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-boolean-property-container">
-    <div id="contents" class="webthing-boolean-property-contents">
-      <form id="form" class="webthing-boolean-property-form">
-        <input type="checkbox" id="checkbox"
+  <div id="container-${BaseComponent.count}" class="webthing-boolean-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-boolean-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-boolean-property-form">
+        <input type="checkbox" id="checkbox-${BaseComponent.count}"
           class="webthing-boolean-property-checkbox">
-        <label id="label" for="checkbox"
+        <label id="label" for="checkbox-${BaseComponent.count}"
           class="webthing-boolean-property-label">
         </label>
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-boolean-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-boolean-property-name"></div>
 `;
 
-class BooleanProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#checkbox');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#checkbox${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);

diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class ColorProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -46,20 +48,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-color-property-container">
-    <div id="contents" class="webthing-color-property-contents">
-      <input type="color" id="color" class="webthing-color-property-color">
+  <div id="container-${BaseComponent.count}" class="webthing-color-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-color-property-contents">
+      <input type="color" id="color-${BaseComponent.count}" class="webthing-color-property-color">
     </div>
   </div>
-  <div id="name" class="webthing-color-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-color-property-name"></div>
 `;
 
-class ColorProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#color');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#color${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }

diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class EnumProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -64,22 +66,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-enum-property-container">
-    <div id="contents" class="webthing-enum-property-contents">
-      <select id="select" class="webthing-enum-property-select"></select>
-      <div id="unit" class="webthing-enum-property-unit"></div>
+  <div id="container-${BaseComponent.count}" class="webthing-enum-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-enum-property-contents">
+      <select id="select-${BaseComponent.count}" class="webthing-enum-property-select"></select>
+      <div id="unit-${BaseComponent.count}" class="webthing-enum-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-enum-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-enum-property-name"></div>
 `;
 
-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(`#select${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._type = 'string';
 

diff --git a/static/js/components/property/label.js b/static/js/components/property/label.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LabelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -51,22 +53,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-label-property-container">
-    <div id="contents" class="webthing-label-property-contents">
-      <span id="value" class="webthing-label-property-value">
-      </span><span id="unit" class="webthing-label-property-unit"></span>
+  <div id="container-${BaseComponent.count}" class="webthing-label-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-label-property-contents">
+      <span id="value-${BaseComponent.count}" class="webthing-label-property-value">
+      </span><span id="unit-${BaseComponent.count}" class="webthing-label-property-unit"></span>
     </div>
   </div>
-  <div id="name" class="webthing-label-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-label-property-name"></div>
 `;
 
-class LabelProperty 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(`#name${this.idSuffix}`);
+    this._value = this.shadowRoot.querySelector(`#value${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
     this._precision = 0;
   }
 

diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LevelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -93,35 +95,32 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-level-property-container">
-    <div id="contents" class="webthing-level-property-contents">
-      <div id="text" class="webthing-level-property-text hidden"></div>
-      <div id="bar-container"
+  <div id="container-${BaseComponent.count}" class="webthing-level-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-level-property-contents">
+      <div id="text-${BaseComponent.count}" class="webthing-level-property-text hidden"></div>
+      <div id="bar-container-${BaseComponent.count}"
         class="webthing-level-property-bar-container hidden">
-        <span id="bar" class="webthing-level-property-bar"></span>
+        <span id="bar-${BaseComponent.count}" class="webthing-level-property-bar"></span>
       </div>
-      <form id="form" class="webthing-level-property-form">
-        <input type="number" id="number" class="webthing-level-property-number">
-        <input type="range" id="slider" class="webthing-level-property-slider">
+      <form id="form-${BaseComponent.count}" class="webthing-level-property-form-${BaseComponent.count}">
+        <input type="number" id="number-${BaseComponent.count}" class="webthing-level-property-number">
+        <input type="range" id="slider-${BaseComponent.count}" class="webthing-level-property-slider">
       </form>
-      <div id="unit" class="webthing-level-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-level-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-level-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-level-property-name"></div>
 `;
-
-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(`#text${this.idSuffix}`);
+    this._barContainer = this.shadowRoot.querySelector(`#bar-container${this.idSuffix}`);
+    this._bar = this.shadowRoot.querySelector(`#bar${this.idSuffix}`);
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._number = this.shadowRoot.querySelector(`#number${this.idSuffix}`);
+    this._slider = this.shadowRoot.querySelector(`#slider${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     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
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class NumberProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -72,26 +74,23 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-number-property-container">
-    <div id="contents" class="webthing-number-property-contents">
-      <form id="form" class="webthing-number-property-form">
-        <input type="number" id="input"
+  <div id="container-${BaseComponent.count}" class="webthing-number-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-number-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-number-property-form">
+        <input type="number" id="input-${BaseComponent.count}"
           class="webthing-number-property-input hide-spinner">
       </form>
-      <div id="unit" class="webthing-number-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-number-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-number-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-number-property-name"></div>
 `;
-
-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(`#form${this.idSuffix}`);
+    this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);

diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SliderProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -57,22 +59,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-slider-property-container">
-    <div id="contents" class="webthing-slider-property-contents">
-      <form id="form" class="webthing-slider-property-form">
-        <input type="range" id="slider" class="webthing-slider-property-slider">
+  <div id="container-${BaseComponent.count}" class="webthing-slider-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-slider-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-slider-property-form">
+        <input type="range" id="slider-${BaseComponent.count}" class="webthing-slider-property-slider">
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-slider-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-slider-property-name"></div>
 `;
 
-class SliderProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#slider');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#slider${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }