jcore-ui/bin/lib/components/Modal.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 Component_1 = __importDefault(require("../core/Component"));
const config_1 = __importDefault(require("../../config"));
const event_1 = __importDefault(require("../utils/event"));
const JDom_1 = require("../core/JDom");
const selectors = {
    element: `.${config_1.default.prefix}-modal`,
    overlay: `.${config_1.default.prefix}-modal-overlay`,
    content: `.${config_1.default.prefix}-modal-content`,
    close: `.${config_1.default.prefix}-modal-close`,
    btnTarget: `data-modal-target`,
};
class Modal extends Component_1.default {
    constructor(props = {}) {
        super(Object.assign(Object.assign({}, props), { Component: Modal, selectors: Object.assign(selectors, props.selectors || {}) }));
        this.props = props;
        if (this.options && this.options.mount) {
            this.mount();
        }
    }
    mount() {
        var _a, _b;
        if (!this.$element || this._mount || this.$element.attr('data-mount')) {
            return;
        }
        super.mount();
        this.options = Object.assign({
            adaptive: this.$element.dataset.adaptive || true,
        }, this.options);
        this.handlers = {
        // change: this.change.bind(this)
        };
        this.isRender = false;
        this.$overlay = JDom_1.$(`<div class="${this.selectors.overlay.replace('.', '')}"></div>`);
        this.$close = this.$element.find(this.selectors.close);
        this.$btnTarget = ((_a = this.props.elements) === null || _a === void 0 ? void 0 : _a.$btnTarget) || JDom_1.$(`[${this.selectors.btnTarget}="${this.options.name}"]`);
        this.$container = JDom_1.$(((_b = this.props.elements) === null || _b === void 0 ? void 0 : _b.$container) || JDom_1.$(`body`));
        this.addEvents();
        this.on.mount(this);
        this.emitter.emit('mount', this);
    }
    addEvents() {
        if (this.options.adaptive) {
            this.$element.attr('data-adaptive', '');
        }
        if (this.$btnTarget) {
            this.$btnTarget.on('click', e => this.render());
        }
        this.$overlay.on('click', this.destroy.bind(this));
        this.$close.on('click', this.destroy.bind(this));
    }
    unmount() {
        super.unmount();
        this.on.unmount(this);
        this.emitter.emit('unmount', this);
    }
    render() {
        JDom_1.$('body').style.setProperty('overflow', 'hidden');
        this.$container.append(this.$overlay.get());
        this.$container.append(this.$element.get());
        this.isRender = true;
        this.on.render(this);
        this.emitter.emit('render', this);
        setTimeout(() => {
            this.$overlay.attr('data-active', '');
            this.$element.attr('data-active', '');
        }, 10);
    }
    destroy() {
        if (!this.isRender) {
            return;
        }
        this.$overlay.on(event_1.default.transitionEnd(), () => {
            this.$overlay.attr('data-closing', null);
            this.$element.attr('data-closing', null);
            this.$overlay.attr('data-active', null);
            this.$element.attr('data-active', null);
            this.$overlay.remove();
            this.$element.remove();
        }, { once: true });
        this.$overlay.attr('data-closing', '');
        this.$element.attr('data-closing', '');
        this.isRender = false;
        this.on.destroy(this);
        this.emitter.emit('destroy', this);
        document.querySelector('body').style.removeProperty('overflow');
    }
}
exports.default = Modal;
//# sourceMappingURL=Modal.js.map