-
-
-
+
`;
-
-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
index 168b4713a..ad8815751 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(
+ '.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
index 615504d13..e784dcec0 100644
--- a/static/js/components/property/numeric-label.js
+++ b/static/js/components/property/numeric-label.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class NumericLabelProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
-
+
-
+
`;
-
-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
index 98b83bff1..75376899c 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 = `
-
-
-