blue/fantasy
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

ui elements to create form for settings, clear button

Browse source
This commit is contained in:
Blue 2018-11-20 14:42:02 +03:00
parent ab27e48160
commit 007ed34ed7
8 changed files with 366 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

89
ui/editors/switchBox.js Normal file
View file

@ -0,0 +1,89 @@
import UI from "../ui.js";
class SwitchBox extends UI {
constructor(value, width, height) {
super(document.createElement("div"), width, height);
this._initialized = true;
this._boundClick = this._onClick.bind(this);
this.element.addEventListener("click", this._boundClick, false);
this._createInput();
this._setSize();
this.setValue(value);
}
destructor() {
this.element.removeEventListener("click", this._boundClick);
delete this._boundClick;
delete this._input;
delete this._movable;
delete this._circle;
super.destructor();
}
setSize(width, height) {
super.setSize(width, height);
if (this._initialized) {
this._setSize();
}
}
setValue(val) {
if (this._value !== val) {
this._value = value;
if (this._value) {
this._input.style.backgroundColor = "#00b6ff";
this._movable.style.right = 0 + "px";
} else {
this._input.style.backgroundColor = "#b8b8b8";
this._movable.style.right = (this._iWidth - this._iHeight) + "px";
}
}
}
_createInput() {
this._input = document.createElement("div");
this._input.classList.add("switchBox");
this._movable = document.createElement("div");
this._movable.classList.add("mover");
this._circle = document.createElement("div");
this._circle.classList.add("circle");
this._movable.appendChild(this._circle);
this._input.appendChild(this._movable);
this.element.appendChild(this._input);
}
_onClick() {
this.setValue(!this._value);
}
_setSize() {
let dh = this._width / 2.5;
dh = Math.min(dh, this._height);
let dw = dh * 2.5;
this._iWidth = dw;
this._iHeight = dh;
let circleDiameter = Math.round(dh * 0.80);
this._input.style.width = dw + "px";
this._input.style.height = dh + "px";
this._input.style.borderRadius = dh + "px";
let shift = (this._height - dh) / 2;
this.element.style.paddingTop = shift + "px";
this.element.style.paddingBottom = shift + "px";
this._movable.style.right = (dw - dh) + "px";
shift = (dh - circleDiameter) / 2;
this._circle.style.width = circleDiameter + "px";
this._circle.style.height = circleDiameter + "px";
this._circle.style.right = shift + "px";
this._circle.style.top = shift + "px";
}
}
export default SwitchBox;