92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
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();
|
|
}
|
|
get value() {
|
|
return this._value;
|
|
}
|
|
setSize(width, height) {
|
|
super.setSize(width, height);
|
|
|
|
if (this._initialized) {
|
|
this._setSize();
|
|
}
|
|
}
|
|
setValue(val) {
|
|
if (this._value !== val) {
|
|
this._value = val;
|
|
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;
|
|
dh = Math.min(dh, this._height);
|
|
let dw = dh * 2;
|
|
|
|
this._iWidth = dw;
|
|
this._iHeight = dh;
|
|
let circleDiameter = Math.round(dh * 0.70);
|
|
|
|
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; |