66 lines
1.2 KiB
JavaScript
66 lines
1.2 KiB
JavaScript
export class DisplayValue {
|
|
constructor(name, box) {
|
|
this.value = undefined;
|
|
this.name = name;
|
|
this.box = box;
|
|
this.nameBox = this.box.addBox(`${this.name}-name`).addClass('name');
|
|
this.valueBox = this.box.addBox(`${this.name}-value`).addClass('value');
|
|
this.nameBox.setInnerHTML(this.name);
|
|
}
|
|
|
|
render() {
|
|
this.valueBox.setInnerHTML(this.value);
|
|
}
|
|
|
|
set(value) {
|
|
this.value = value;
|
|
this.render();
|
|
}
|
|
|
|
get() {
|
|
return this.value;
|
|
}
|
|
}
|
|
|
|
export class Box {
|
|
constructor(name, parentEl) {
|
|
this.el = document.createElement('div');
|
|
this.el.classList.add('box');
|
|
this.el.setAttribute('box-name', name);
|
|
if (parentEl) {
|
|
parentEl.appendChild(this.el);
|
|
}
|
|
}
|
|
|
|
flex() {
|
|
this.el.classList.add('flex');
|
|
return this;
|
|
}
|
|
|
|
monospace() {
|
|
this.el.classList.add('monospace');
|
|
return this;
|
|
}
|
|
|
|
addClass(className) {
|
|
this.el.classList.add(className);
|
|
return this;
|
|
}
|
|
|
|
addBox(name) {
|
|
const box = new Box(name);
|
|
this.el.appendChild(box.el);
|
|
return box;
|
|
}
|
|
|
|
addDisplayValue(value) {
|
|
const box = this.addBox(value.name).flex();
|
|
return new DisplayValue(value, box);
|
|
}
|
|
|
|
setInnerHTML(html) {
|
|
this.el.innerHTML = html;
|
|
return this;
|
|
}
|
|
}
|