From dd37b60c2b879fc47d32b0e261a21563262ac1bc Mon Sep 17 00:00:00 2001 From: Philippe Coval Date: Thu, 2 Aug 2018 10:38:07 +0200 Subject: [PATCH] ui: Allow multiple same type properties in thing Previously UI item's ids were duplicated, the observed consequence is that any click on widgets is catched by 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: https://github.com/mozilla-iot/gateway/issues/1148 Forwarded: https://github.com/mozilla-iot/gateway/pull/1249 Origin: https://github.com/tizenteam/gateway Signed-off-by: Philippe Coval --- static/js/components/base-component.js | 2 ++ static/js/components/property/action.js | 20 +++++------ static/js/components/property/boolean.js | 24 ++++++------- static/js/components/property/color.js | 20 +++++------ static/js/components/property/enum.js | 24 ++++++------- static/js/components/property/label.js | 24 ++++++------- static/js/components/property/level.js | 45 ++++++++++++------------ static/js/components/property/number.js | 29 ++++++++------- static/js/components/property/slider.js | 22 ++++++------ static/js/components/property/string.js | 24 ++++++------- static/js/components/property/switch.js | 28 +++++++-------- 11 files changed, 131 insertions(+), 131 deletions(-) diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js index 5cc352e62a..02ab9bfb7d 100644 --- 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 index ce4b16d248..a730b57bef 100644 --- 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 = ` -
-
- +
+
+
-
+
`; -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 index 032c9fce38..f2f80df36c 100644 --- 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 = ` -
-
-
- +
+ + -
-
+
`; -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 index 8b956648c6..7a85eff0f0 100644 --- 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 = ` -
-
- +
+
+
-
+
`; -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 index 8c5009ecef..8e525f49c0 100644 --- 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 = ` -
-
- -
+
+
+ +
-
+
`; -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 index 6eb9343d38..ecff04622a 100644 --- 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 = ` -
-
- - +
+
+ +
-
+
`; -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 index 438b37e652..b73525976e 100644 --- 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 = ` -
-
- -
+
+ + -
- - + + +
-
+
-
+
`; - -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 index 53cecb6c01..61c2485472 100644 --- 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 = ` -
-
-
- +
+ + -
+
-
+
`; - -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 index 2b024e3da7..254d4d5fba 100644 --- 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 = ` -
-
-
- +
+
+ +
-
+
`; -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); } diff --git a/static/js/components/property/string.js b/static/js/components/property/string.js index f1d3def246..2fd25dda2b 100644 --- a/static/js/components/property/string.js +++ b/static/js/components/property/string.js @@ -11,8 +11,10 @@ const BaseComponent = require('../base-component'); -const template = document.createElement('template'); -template.innerHTML = ` +class StringProperty extends BaseComponent { + constructor() { + const template = document.createElement('template'); + template.innerHTML = ` -
-
-
- +
+
+ +
-
+
`; -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(`#form${this.idSuffix}`); + this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`); + this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`); this._onSubmit = this.__onSubmit.bind(this); this._onBlur = this.__onBlur.bind(this); diff --git a/static/js/components/property/switch.js b/static/js/components/property/switch.js index 40548d0286..2acd3abe7a 100644 --- a/static/js/components/property/switch.js +++ b/static/js/components/property/switch.js @@ -11,8 +11,10 @@ const BaseComponent = require('../base-component'); -const template = document.createElement('template'); -template.innerHTML = ` +class SwitchProperty extends BaseComponent { + constructor() { + const template = document.createElement('template'); + template.innerHTML = ` -
-
+
+
- -
-
+
`; -class SwitchProperty extends BaseComponent { - constructor() { super(template); - this._input = this.shadowRoot.querySelector('#switch'); - this._name = this.shadowRoot.querySelector('#name'); - this._label = this.shadowRoot.querySelector('#label'); + this._input = this.shadowRoot.querySelector(`#switch${this.idSuffix}`); + this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`); + this._label = this.shadowRoot.querySelector(`#label${this.idSuffix}`); this._onClick = this.__onClick.bind(this); this._onKeyUp = this.__onKeyUp.bind(this);