Button factory

import { constructors } from '../core/library.js';

import { doCreate, isa_fn, mergeOver, pushUnique, Ωempty } from '../helper/utilities.js';

import baseMix from '../mixin/base.js';

import { _keys, ANCHOR, AUTOFOCUS, BLUR, CLICK, DATA_TAB_ORDER, DISABLED, FOCUS, FORM, NAME, TARGET, TYPE, UNDEF, VALUE, ZERO_STR } from '../helper/shared-vars.js';

const _FORMACTION = 'formaction',
    _FORMENCTYPE = 'formenctype',
    _FORMMETHOD = 'formmethod',
    _FORMNOVALIDATE = 'formnovalidate',
    _POPOVERTARGET = 'popovertarget',
    _POPOVERTARGETACTION = 'popovertargetaction',
    BUTTON = 'button',
    T_BUTTON = 'Button';

const Button = function (items = Ωempty) {

    this.makeName(items.name);
    this.register();

    this.set(this.defs);

    this.host = items.host;
    this.controller = items.controller;
    this.hold = items.hold;

    this.clickAction = null;
    this.domElement = null;
    this.hasBeenRecentlyClicked = false;

    this.set(items);

    this.dirtyButton = true;

    return this;
};

const P = Button.prototype = doCreate();
P.type = T_BUTTON;
P.lib = ANCHOR;
P.isArtefact = false;
P.isAsset = false;

baseMix(P);

const defaultAttributes = {

    host: null,

    description: ZERO_STR,

    tabOrder: 0,

    autofocus: false,
    disabled: false,
    form: ZERO_STR,
    formAction: ZERO_STR,
    formEnctype: ZERO_STR,
    formMethod: ZERO_STR,
    formNoValidate: false,
    formTarget: ZERO_STR,
    popoverTarget: ZERO_STR,
    popoverTargetAction: ZERO_STR,
    elementType: BUTTON,
    elementValue: ZERO_STR,

    clickAction: null,

    focusAction: true,
    blurAction: true,
};
P.defs = mergeOver(P.defs, defaultAttributes);

P.packetExclusions = pushUnique(P.packetExclusions, ['domElement']);
P.packetObjects = pushUnique(P.packetObjects, ['host']);
P.packetFunctions = pushUnique(P.packetFunctions, ['clickAction']);

P.demolish = function () {

    const { host, controller, domElement, hold, clickAction, focusAction, blurAction } = this;

    if (domElement && clickAction) domElement.removeEventListener(CLICK, clickAction, false);
    if (host && domElement && focusAction) domElement.removeEventListener(FOCUS, () => host.onEnter(), false);
    if (host && domElement && blurAction) domElement.removeEventListener(BLUR, () => host.onLeave(), false);

    if (hold && domElement) hold.removeChild(domElement);

    if (controller) controller.dirtyNavigationTabOrder = true;

    if (host) host.button = null;

    this.deregister();
};

P.set = function (items = Ωempty) {

    let i, key, val, fn;

    const keys = _keys(items),
        keysLen = keys.length;

    if (keysLen) {

        const setters = this.setters,
            defs = this.defs;

        for (i = 0; i < keysLen; i++) {

            key = keys[i];
            val = items[key];

            if (key && key !== NAME && val != null) {

                fn = setters[key];

                if (fn) fn.call(this, val);
                else if (typeof defs[key] !== UNDEF) this[key] = val;
            }
        }
        this.dirtyButton = true;
    }
    return this;
};

P.build = function () {

    const { host } = this;

    if (host) {

        if (!this.controller) this.controller = host.getCanvasWrapper();
        if (!this.hold) this.hold = host.getCanvasNavElement();

        const { hold, controller } = this;

        if (hold && controller) {

            const { autofocus, blurAction, clickAction, description, disabled, elementType, elementValue, focusAction, form, formAction, formEnctype, formMethod, formNoValidate, formTarget, name, popoverTarget, popoverTargetAction, tabOrder } = this;

            let btn = this.domElement;

            if (btn && hold) {

                if (clickAction) btn.removeEventListener(CLICK, clickAction, false);
                if (focusAction) btn.removeEventListener(FOCUS, () => host.onEnter(), false);
                if (blurAction) btn.removeEventListener(BLUR, () => host.onLeave(), false);

                hold.removeChild(btn);
                this.domElement = null;
            }

            if (!disabled) {

                btn = document.createElement(BUTTON);

                btn.id = name;

                if (autofocus) btn.setAttribute(AUTOFOCUS, ZERO_STR);
                if (disabled) btn.setAttribute(DISABLED, ZERO_STR);
                if (form) btn.setAttribute(FORM, form);
                if (formAction) btn.setAttribute(_FORMACTION, formAction);
                if (formEnctype) btn.setAttribute(_FORMENCTYPE, formEnctype);
                if (formMethod) btn.setAttribute(_FORMMETHOD, formMethod);
                if (formNoValidate) btn.setAttribute(_FORMNOVALIDATE, ZERO_STR);
                if (formTarget) btn.setAttribute(TARGET, formTarget);
                if (popoverTarget) btn.setAttribute(_POPOVERTARGET, popoverTarget);
                if (popoverTargetAction) btn.setAttribute(_POPOVERTARGETACTION, popoverTargetAction);
                if (elementValue != null) btn.setAttribute(VALUE, elementValue);

                if (elementType) btn.setAttribute(TYPE, elementType);
                else btn.setAttribute(TYPE, BUTTON);

                btn.setAttribute(DATA_TAB_ORDER, tabOrder);

                if (clickAction && isa_fn(clickAction)) btn.addEventListener(CLICK, clickAction, false);

                if (description) btn.textContent = description;

                if (focusAction) btn.addEventListener(FOCUS, () => host.onEnter(), false);
                if (blurAction) btn.addEventListener(BLUR, () => host.onLeave(), false);

                this.domElement = btn;

                hold.appendChild(btn);
            }
            controller.dirtyNavigationTabOrder = true;
        }

    }
};

P.rebuild = function () {

    if (this.dirtyButton) {

        this.build();
        this.dirtyButton = false;
    }
}

P.click = function () {

    if (!this.hasBeenRecentlyClicked) {

        const e = new MouseEvent(CLICK, {
            view: window,
            bubbles: true,
            cancelable: true
        });

        this.hasBeenRecentlyClicked = true;

        const self = this;
        setTimeout(() => self.hasBeenRecentlyClicked = false, 200);

        return this.domElement.dispatchEvent(e);
    }
    else return false;
};

export const makeButton = function (items) {

    if (!items) return false;
    return new Button(items);
};

constructors.Button = Button;