jcore-ui/bin/lib/components/Dropdown.js

jcore-ui - components for building an interface

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const config_1 = __importDefault(require("../../config"));
const Component_1 = __importDefault(require("../core/Component"));
const selectors = {
    element: `.${config_1.default.prefix}-dropdown`,
    content: `.${config_1.default.prefix}-dropdown-content`,
    wrapper: `.${config_1.default.prefix}-dropdown-wrapper`,
    header: `.${config_1.default.prefix}-dropdown-header`,
};
let index = 0;
class Dropdown extends Component_1.default {
    constructor(props = {}) {
        super(Object.assign(Object.assign({}, props), { Component: Dropdown, selectors: Object.assign(selectors, props.selectors || {}) }));
        this.id = String(index++);
        if (this.options && this.options.mount) {
            this.mount();
        }
    }
    mount() {
        if (!this.$element || this._mount || this.$element.attr("data-mount")) {
            return;
        }
        super.mount();
        this.options = Object.assign({}, this.options);
        this.handlers = {
            documentClickHandler: this.documentClickHandler.bind(this),
            clickHandler: this.clickHandler.bind(this),
        };
        this.addEvents();
        this.$element.attr("data-id", this.id);
        this.on.mount(this);
        this.emitter.emit("mount", this);
    }
    addEvents() {
        this.$element.on("click", this.handlers.clickHandler);
        document.addEventListener("click", this.handlers.documentClickHandler);
    }
    documentClickHandler(e) {
        const target = e.target.closest(this.selectors.element);
        const id = target ? target.getAttribute("data-id") == this.id : null;
        if ((!target && this.$element.attr("data-active") !== null) ||
            (target && !id)) {
            this.$element.attr("data-active", null);
            this.on.destroy(this);
            this.emitter.emit("destroy", this);
        }
    }
    clickHandler() {
        if (this.$element.attr("data-active") === null) {
            this.$element.attr("data-active", "");
            this.on.render(this);
            this.emitter.emit("render", this);
        }
        else {
            this.$element.attr("data-active", null);
            this.on.destroy(this);
            this.emitter.emit("destroy", this);
        }
    }
    unmount() {
        super.unmount();
        document.removeEventListener("click", this.handlers.documentClickHandler);
        this.$element.off("click", this.handlers.clickHandler, null);
        this.on.unmount(this);
        this.emitter.emit("unmount", this);
    }
}
exports.default = Dropdown;
//# sourceMappingURL=Dropdown.js.map