jcore-ui/bin/lib/components/Tooltip.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 JDom_1 = require("../core/JDom");
const isMobile_1 = __importDefault(require("../utils/isMobile"));
const isTouchDevice_1 = __importDefault(require("../utils/isTouchDevice"));
const selectors = {
    element: `.${config_1.default.prefix}-tooltip`,
    content: `.${config_1.default.prefix}-tooltip-content`,
    wrapper: `.${config_1.default.prefix}-tooltip-wrapper`,
    header: `.${config_1.default.prefix}-tooltip-header`
};
class Tooltip extends Component_1.default {
    constructor(props = {}) {
        super(Object.assign(Object.assign({}, props), { Component: Tooltip, selectors: Object.assign(selectors, props.selectors || {}) }));
        if (this.options && this.options.mount) {
            this.mount();
        }
    }
    mount() {
        if (!this.$element || this._mount || this.$element.get().hasAttribute('data-mount'))
            return;
        super.mount();
        this.options = Object.assign({}, this.options);
        this.handlers = {
            mouseOverHandler: this.mouseOverHandler.bind(this),
            mouseOutHandler: this.mouseOutHandler.bind(this),
            clickHandler: this.clickHandler.bind(this),
            documentHandler: this.documentHandler.bind(this),
        };
        this.addEvents();
        this.on.mount(this);
        this.emitter.emit('mount', this);
    }
    addEvents() {
        if (isMobile_1.default() || isTouchDevice_1.default()) {
            this.$element.get().addEventListener('click', this.handlers.clickHandler);
            if (!window.tooltipDocumentHandler) {
                window.tooltipDocumentHandler = true;
                document.addEventListener('click', this.handlers.documentHandler);
            }
        }
        else {
            this.$element.get().addEventListener('mouseover', this.handlers.mouseOverHandler);
            this.$element.get().addEventListener('mouseout', this.handlers.mouseOutHandler);
        }
    }
    mouseOverHandler() {
        this.$element.toggleAttribute('data-active');
        this.on.render(this);
        this.emitter.emit('render', this);
    }
    mouseOutHandler() {
        this.$element.get().removeAttribute('data-active');
        this.on.destroy(this);
        this.emitter.emit('destroy', this);
    }
    clickHandler() {
        this.$element.toggleAttribute('data-active');
        if (this.$element.get().hasAttribute('data-active')) {
            this.on.render(this);
            this.emitter.emit('render', this);
        }
        else {
            this.on.destroy(this);
            this.emitter.emit('destroy', this);
        }
    }
    documentHandler(e) {
        if (!e.target.closest(selectors.element)) {
            JDom_1.$(selectors.element).attr('data-active', null);
        }
    }
    unmount() {
        super.unmount();
        this.$element.get().removeEventListener('mouseover', this.handlers.mouseOverHandler);
        this.$element.get().removeEventListener('mouseout', this.handlers.mouseOutHandler);
        this.$element.get().removeEventListener('click', this.handlers.clickHandler);
        this.on.unmount(this);
        this.emitter.emit('unmount', this);
    }
}
exports.default = Tooltip;
//# sourceMappingURL=Tooltip.js.map