From cb48958514f65d986e28f154bf9c72b08e43032b 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. Slider not fully updated, to keep passing tests, more refactoring to come in that part (grep '#slider') 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 | 43 ++++++++++++------------ static/js/components/property/number.js | 29 ++++++++-------- static/js/components/property/slider.js | 20 +++++------ static/js/components/property/string.js | 24 ++++++------- static/js/components/property/switch.js | 28 +++++++-------- 11 files changed, 129 insertions(+), 129 deletions(-) diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js index 5cc352e62..02ab9bfb7 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 ce4b16d24..a730b57be 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 032c9fce3..f2f80df36 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 8b956648c..7a85eff0f 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 8c5009ece..8e525f49c 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 6eb9343d3..ecff04622 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 438b37e65..779232ae6 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._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 53cecb6c0..61c248547 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 2b024e3da..1cb0159e6 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._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 f1d3def24..2fd25dda2 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 40548d028..2acd3abe7 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);