pvbemu/web/toolkit/Button.js

let register = Toolkit => Toolkit.Button =

// Push button
class Button extends Toolkit.Component {

    ///////////////////////// Initialization Methods //////////////////////////

    constructor(app, options = {}) {
        super(app, options = Object.assign({
            class   : "tk button",
            role    : "button",
            tabIndex: "0"
        }, options));

        // Configure options
        if ("disabled" in options)
            this.disabled = options.disabled;
        this.doNotFocus = !("doNotFocus" in options) || options.doNotFocus;

        // Display text
        this.content = new Toolkit.Label(app);
        this.add(this.content);

        // Event handlers
        this.addEventListener("keydown"    , e=>this.onKeyDown    (e));
        this.addEventListener("pointerdown", e=>this.onPointerDown(e));
        this.addEventListener("pointermove", e=>this.onPointerMove(e));
        this.addEventListener("pointerup"  , e=>this.onPointerUp  (e));
    }



    ///////////////////////////// Event Handlers //////////////////////////////

    // Key press
    onKeyDown(e) {
        if (
            !(e.altKey || e.ctrlKey || e.shiftKey || this.disabled) &&
            (e.key == " " || e.key == "Enter")
        ) this.activate();
    }

    // Pointer down
    onPointerDown(e) {

        // Gain focus
        if (
            !this.doNotFocus   &&
            this.isFocusable() &&
            this.element != document.activeElement
        ) this.element.focus();
        else e.preventDefault();

        // Do not drag
        if (
            e.button != 0 ||
            this.disabled ||
            this.element.hasPointerCapture(e.pointerId)
        ) return;

        // Begin dragging
        this.element.setPointerCapture(e.pointerId);
        this.element.classList.add("pushed");
        Toolkit.handle(e);
    }

    // Pointer move
    onPointerMove(e) {

        // Do not drag
        if (!this.element.hasPointerCapture(e.pointerId))
            return;

        // Process dragging
        this.element.classList[this.isWithin(e) ? "add" : "remove"]("pushed");
        Toolkit.handle(e);
    }

    // Pointer up
    onPointerUp(e) {

        // Do not activate
        if (e.button != 0 || !this.element.hasPointerCapture(e.pointerId))
            return;

        // End dragging
        this.element.releasePointerCapture(e.pointerId);
        this.element.classList.remove("pushed");
        Toolkit.handle(e);

        // Activate the button if applicable
        if (this.isWithin(e))
            this.activate();
    }



    ///////////////////////////// Public Methods //////////////////////////////

    // Simulate a click on the button
    activate() {
        if (!this.disabled)
            this.element.dispatchEvent(new Event("action"));
    }



    ///////////////////////////// Package Methods /////////////////////////////

    // Update localization strings
    localize() {
        this.localizeText(this.content);
        this.localizeLabel();
        this.localizeTitle();
    }

}

export { register };