fantasy/ui/editors/switchBox.js

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 = 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.75);

        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;