fantasy/ui/button.js

import UI from "./ui.js";

class Button extends UI {
    constructor(image, isRef) {
        isRef = isRef !== false;
        let element;
        if (isRef) {
            element = document.createElement("a");
            element.href = "#";
        } else {
            element = document.createElement("button");
        }
        super(element, Button.width, Button.height);

        this.element.classList.add("shadow");
        this.element.classList.add("button");
        this.element.style.backgroundImage = "url(images/" + image + ".svg)";
        this._boundClick = this._onClick.bind(this);
        this.element.addEventListener("click", this._boundClick, false);
        this._handlers = [];
    }
    destructor() {
        this.element.removeEventListener("click", this._boundClick);
        delete this._boundClick;
        delete this._handlers;

        super.destructor();
    }
    addHandler(handler) {
        this._handlers.push(handler);
    }
    setPosition(x, y) {
        this.element.style.position = "absolute";
        this.element.style.top = y + "px";
        this.element.style.left = x + "px";
    }
    _onClick(e) {
        for (let i = 0; i < this._handlers.length; ++i) {
            this._handlers[i](e);
        }
    }

    static get width() {
        return width;
    }
    static get height() {
        return height;
    }
}

const width = 50;
const height = 50;

export default Button;