ngx-pluto/esm2015/lib/shared/directives/tooltip.directive.js

ngx-pluto组件库

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Directive, ElementRef, Input, HostListener, ViewContainerRef } from '@angular/core';
/**
 * @ignore
 */
export class TooltipDirective {
    /**
     * @param {?} element
     * @param {?} hostView
     */
    constructor(element, hostView) {
        this.element = element;
        this.hostView = hostView;
        this.npTooltip = '';
        this.direction = 'right';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.tooltipDom = document.createElement('div');
        this.tooltipDom.id = 'tooltip-container';
        /** @type {?} */
        let width = this.npTooltip.length + 'em';
        if (this.npTooltip.length > 20) {
            width = '20em';
        }
        this.tooltipDom.innerHTML = `
    <span  style="width:${width}"  class="tooltip tooltip-right">
    ${this.npTooltip}</span>
    `;
    }
    /**
     * @return {?}
     */
    onMouseEnter() {
        /** @type {?} */
        const eleWidth = this.element.nativeElement.clientWidth;
        /** @type {?} */
        const eleheight = this.element.nativeElement.clientHeight;
        //#TODO: 上下左方向没写
        /** @type {?} */
        let tooltipTop;
        /** @type {?} */
        let tooltipLeft;
        switch (this.direction) {
            case 'right':
                tooltipLeft = eleWidth + 'px';
                this.tooltipDom.style.left = tooltipLeft;
                break;
            // case 'left':
            //   // 175是tooltip内容的宽度,10是修正宽度
            //   tooltipLeft = (-175 - 10) + 'px';
            //   this.tooltipDom.style.left = tooltipLeft;
            //   break;
            default:
                break;
        }
        this.element.nativeElement.parentNode.insertBefore(this.tooltipDom, this.element.nativeElement);
    }
    /**
     * @return {?}
     */
    onMouseLeave() {
        this.element.nativeElement.parentNode.removeChild(this.tooltipDom);
    }
}
TooltipDirective.decorators = [
    { type: Directive, args: [{
                selector: '[npTooltipDeprecated]',
            },] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: ViewContainerRef }
];
TooltipDirective.propDecorators = {
    npTooltip: [{ type: Input }],
    direction: [{ type: Input }],
    enterDelay: [{ type: Input }],
    leaveDelay: [{ type: Input }],
    onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
    onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
if (false) {
    /** @type {?} */
    TooltipDirective.prototype.npTooltip;
    /** @type {?} */
    TooltipDirective.prototype.direction;
    /** @type {?} */
    TooltipDirective.prototype.enterDelay;
    /** @type {?} */
    TooltipDirective.prototype.leaveDelay;
    /** @type {?} */
    TooltipDirective.prototype.tooltipDom;
    /**
     * @type {?}
     * @private
     */
    TooltipDirective.prototype.element;
    /** @type {?} */
    TooltipDirective.prototype.hostView;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtcGx1dG8vIiwic291cmNlcyI6WyJsaWIvc2hhcmVkL2RpcmVjdGl2ZXMvdG9vbHRpcC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFVLEtBQUssRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRckcsTUFBTSxPQUFPLGdCQUFnQjs7Ozs7SUFXM0IsWUFDVSxPQUFxQyxFQUN0QyxRQUEwQjtRQUR6QixZQUFPLEdBQVAsT0FBTyxDQUE4QjtRQUN0QyxhQUFRLEdBQVIsUUFBUSxDQUFrQjtRQVZuQyxjQUFTLEdBQVcsRUFBRSxDQUFDO1FBRXZCLGNBQVMsR0FBYyxPQUFPLENBQUM7SUFVM0IsQ0FBQzs7OztJQUNMLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEdBQUcsbUJBQW1CLENBQUM7O1lBQ3JDLEtBQUssR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxJQUFJO1FBQ3hDLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsRUFBRSxFQUFFO1lBQzlCLEtBQUssR0FBRyxNQUFNLENBQUM7U0FDaEI7UUFDRCxJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsR0FBRzswQkFDTixLQUFLO01BQ3pCLElBQUksQ0FBQyxTQUFTO0tBQ2YsQ0FBQztJQUNKLENBQUM7Ozs7SUFFRCxZQUFZOztjQUNKLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXOztjQUNqRCxTQUFTLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsWUFBWTs7O1lBRXJELFVBQVU7O1lBQUUsV0FBVztRQUMzQixRQUFRLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDdEIsS0FBSyxPQUFPO2dCQUNWLFdBQVcsR0FBRyxRQUFRLEdBQUcsSUFBSSxDQUFDO2dCQUM5QixJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsV0FBVyxDQUFDO2dCQUN6QyxNQUFNO1lBQ1IsZUFBZTtZQUNmLGdDQUFnQztZQUNoQyxzQ0FBc0M7WUFDdEMsOENBQThDO1lBQzlDLFdBQVc7WUFDWDtnQkFDRSxNQUFNO1NBQ1Q7UUFDRCxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNsRyxDQUFDOzs7O0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3JFLENBQUM7OztZQXZERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHVCQUF1QjthQUNsQzs7OztZQVBtQixVQUFVO1lBQStCLGdCQUFnQjs7O3dCQVUxRSxLQUFLO3dCQUVMLEtBQUs7eUJBRUwsS0FBSzt5QkFFTCxLQUFLOzJCQW9CTCxZQUFZLFNBQUMsWUFBWTsyQkFxQnpCLFlBQVksU0FBQyxZQUFZOzs7O0lBL0MxQixxQ0FDdUI7O0lBQ3ZCLHFDQUMrQjs7SUFDL0Isc0NBQ21COztJQUNuQixzQ0FDbUI7O0lBQ25CLHNDQUEyQjs7Ozs7SUFFekIsbUNBQTZDOztJQUM3QyxvQ0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIE9uSW5pdCwgSW5wdXQsIEhvc3RMaXN0ZW5lciwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25wVG9vbHRpcERlcHJlY2F0ZWRdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvb2x0aXBEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKVxyXG4gIG5wVG9vbHRpcDogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KClcclxuICBkaXJlY3Rpb246IGRpcmVjdGlvbiA9ICdyaWdodCc7XHJcbiAgQElucHV0KClcclxuICBlbnRlckRlbGF5OiBudW1iZXI7XHJcbiAgQElucHV0KClcclxuICBsZWF2ZURlbGF5OiBudW1iZXI7XHJcbiAgdG9vbHRpcERvbTogSFRNTERpdkVsZW1lbnQ7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTEltYWdlRWxlbWVudD4sXHJcbiAgICBwdWJsaWMgaG9zdFZpZXc6IFZpZXdDb250YWluZXJSZWYsXHJcblxyXG4gICkgeyB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLnRvb2x0aXBEb20gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuICAgIHRoaXMudG9vbHRpcERvbS5pZCA9ICd0b29sdGlwLWNvbnRhaW5lcic7XHJcbiAgICBsZXQgd2lkdGggPSB0aGlzLm5wVG9vbHRpcC5sZW5ndGggKyAnZW0nXHJcbiAgICBpZiAodGhpcy5ucFRvb2x0aXAubGVuZ3RoID4gMjApIHtcclxuICAgICAgd2lkdGggPSAnMjBlbSc7XHJcbiAgICB9XHJcbiAgICB0aGlzLnRvb2x0aXBEb20uaW5uZXJIVE1MID0gYFxyXG4gICAgPHNwYW4gIHN0eWxlPVwid2lkdGg6JHt3aWR0aH1cIiAgY2xhc3M9XCJ0b29sdGlwIHRvb2x0aXAtcmlnaHRcIj5cclxuICAgICR7dGhpcy5ucFRvb2x0aXB9PC9zcGFuPlxyXG4gICAgYDtcclxuICB9XHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXHJcbiAgb25Nb3VzZUVudGVyKCkge1xyXG4gICAgY29uc3QgZWxlV2lkdGggPSB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aDtcclxuICAgIGNvbnN0IGVsZWhlaWdodCA9IHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50LmNsaWVudEhlaWdodDtcclxuICAgIC8vI1RPRE86IOS4iuS4i+W3puaWueWQkeayoeWGmVxyXG4gICAgbGV0IHRvb2x0aXBUb3AsIHRvb2x0aXBMZWZ0O1xyXG4gICAgc3dpdGNoICh0aGlzLmRpcmVjdGlvbikge1xyXG4gICAgICBjYXNlICdyaWdodCc6XHJcbiAgICAgICAgdG9vbHRpcExlZnQgPSBlbGVXaWR0aCArICdweCc7XHJcbiAgICAgICAgdGhpcy50b29sdGlwRG9tLnN0eWxlLmxlZnQgPSB0b29sdGlwTGVmdDtcclxuICAgICAgICBicmVhaztcclxuICAgICAgLy8gY2FzZSAnbGVmdCc6XHJcbiAgICAgIC8vICAgLy8gMTc15pivdG9vbHRpcOWGheWuueeahOWuveW6piwxMOaYr+S/ruato+WuveW6plxyXG4gICAgICAvLyAgIHRvb2x0aXBMZWZ0ID0gKC0xNzUgLSAxMCkgKyAncHgnO1xyXG4gICAgICAvLyAgIHRoaXMudG9vbHRpcERvbS5zdHlsZS5sZWZ0ID0gdG9vbHRpcExlZnQ7XHJcbiAgICAgIC8vICAgYnJlYWs7XHJcbiAgICAgIGRlZmF1bHQ6XHJcbiAgICAgICAgYnJlYWs7XHJcbiAgICB9XHJcbiAgICB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5wYXJlbnROb2RlLmluc2VydEJlZm9yZSh0aGlzLnRvb2x0aXBEb20sIHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50KTtcclxuICB9XHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXHJcbiAgb25Nb3VzZUxlYXZlKCkge1xyXG4gICAgdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQucGFyZW50Tm9kZS5yZW1vdmVDaGlsZCh0aGlzLnRvb2x0aXBEb20pO1xyXG4gIH1cclxufVxyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbmV4cG9ydCB0eXBlIGRpcmVjdGlvbiA9ICd1cCcgfCAnYm90dG9tJyB8ICdsZWZ0JyB8ICdyaWdodCc7XHJcbiJdfQ==