@alauda-fe/common
Version:
Alauda frontend team common codes.
73 lines • 8.21 kB
JavaScript
import { TooltipDirective } from '@alauda/ui';
import { Directive, HostListener, Input, inject } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@alauda/ui";
const CLONE_ELEMENT_BASE_STYLES = {
position: 'absolute',
visibility: 'hidden',
zIndex: -999,
};
/**
* 使用场景：
* 文案需要单行显示，过长时截取的情况。
* 效果：
* 发生截取的文案会显示完整内容的 tooltip。未发生截取的文案不显示 tooltip。
* @example:
* <span class="tw-text-overflow" aclTextTooltip>TEXT...</span>
*
* tooltip 的一些设置（位置、类型）可以使用 aui 相同设置。未传 tooltip content 则取元素 text content
*/
export class TextTooltipDirective {
constructor() {
this.tooltipDirective = inject(TooltipDirective);
}
onMouseEnter(e) {
const el = e.target;
const displayWidth = el.offsetWidth;
const fullWidth = this.calcFullTextWidth(el);
this.tooltipDirective.content = this.content || el.textContent;
this.tooltipDirective.disabled = fullWidth <= displayWidth;
}
calcFullTextWidth(el) {
const computedStyle = window.getComputedStyle(el);
const contentContainer = document.createElement('div');
contentContainer.textContent = this.content || el.textContent;
Object.assign(contentContainer.style, {
...CLONE_ELEMENT_BASE_STYLES,
fontSize: computedStyle.fontSize,
fontWeight: computedStyle.fontWeight,
});
document.body.append(contentContainer);
const width = contentContainer.offsetWidth;
contentContainer.remove();
return width;
}
static { this.ɵfac = function TextTooltipDirective_Factory(t) { return new (t || TextTooltipDirective)(); }; }
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TextTooltipDirective, selectors: [["", "aclTextTooltip", ""]], hostBindings: function TextTooltipDirective_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("mouseenter", function TextTooltipDirective_mouseenter_HostBindingHandler($event) { return ctx.onMouseEnter($event); });
} }, inputs: { content: [0, "aclTextTooltip", "content"] }, standalone: true, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.TooltipDirective, inputs: ["auiTooltip", "aclTextTooltip", "auiTooltipPosition", "auiTooltipPosition", "auiTooltipType", "auiTooltipType"] }])] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextTooltipDirective, [{
type: Directive,
args: [{
selector: '[aclTextTooltip]',
hostDirectives: [
{
directive: TooltipDirective,
inputs: [
'auiTooltip:aclTextTooltip',
'auiTooltipPosition',
'auiTooltipType',
],
},
],
standalone: true,
}]
}], null, { content: [{
type: Input,
args: ['aclTextTooltip']
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter', ['$event']]
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL3dpZGdldC90ZXh0LXRvb2x0aXAvZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFFdkUsTUFBTSx5QkFBeUIsR0FBRztJQUNoQyxRQUFRLEVBQUUsVUFBVTtJQUNwQixVQUFVLEVBQUUsUUFBUTtJQUNwQixNQUFNLEVBQUUsQ0FBQyxHQUFHO0NBQ2IsQ0FBQztBQUVGOzs7Ozs7Ozs7R0FTRztBQWVILE1BQU0sT0FBTyxvQkFBb0I7SUFkakM7UUEyQkUscUJBQWdCLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7S0FnQjdDO0lBeEJDLFlBQVksQ0FBQyxDQUFhO1FBQ3hCLE1BQU0sRUFBRSxHQUFHLENBQUMsQ0FBQyxNQUFxQixDQUFDO1FBQ25DLE1BQU0sWUFBWSxHQUFHLEVBQUUsQ0FBQyxXQUFXLENBQUM7UUFDcEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDO1FBQy9ELElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLEdBQUcsU0FBUyxJQUFJLFlBQVksQ0FBQztJQUM3RCxDQUFDO0lBSU8saUJBQWlCLENBQUMsRUFBZTtRQUN2QyxNQUFNLGFBQWEsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDbEQsTUFBTSxnQkFBZ0IsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3ZELGdCQUFnQixDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxJQUFJLEVBQUUsQ0FBQyxXQUFXLENBQUM7UUFDOUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLEVBQUU7WUFDcEMsR0FBRyx5QkFBeUI7WUFDNUIsUUFBUSxFQUFFLGFBQWEsQ0FBQyxRQUFRO1lBQ2hDLFVBQVUsRUFBRSxhQUFhLENBQUMsVUFBVTtTQUNyQyxDQUFDLENBQUM7UUFDSCxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3ZDLE1BQU0sS0FBSyxHQUFHLGdCQUFnQixDQUFDLFdBQVcsQ0FBQztRQUMzQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUMxQixPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7cUZBNUJVLG9CQUFvQjtvRUFBcEIsb0JBQW9CO1lBQXBCLHlHQUFBLHdCQUFvQixJQUFBOzs7aUZBQXBCLG9CQUFvQjtjQWRoQyxTQUFTO2VBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsY0FBYyxFQUFFO29CQUNkO3dCQUNFLFNBQVMsRUFBRSxnQkFBZ0I7d0JBQzNCLE1BQU0sRUFBRTs0QkFDTiwyQkFBMkI7NEJBQzNCLG9CQUFvQjs0QkFDcEIsZ0JBQWdCO3lCQUNqQjtxQkFDRjtpQkFDRjtnQkFDRCxVQUFVLEVBQUUsSUFBSTthQUNqQjtnQkFHQyxPQUFPO2tCQUROLEtBQUs7bUJBQUMsZ0JBQWdCO1lBSXZCLFlBQVk7a0JBRFgsWUFBWTttQkFBQyxZQUFZLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUb29sdGlwRGlyZWN0aXZlIH0gZnJvbSAnQGFsYXVkYS91aSc7XG5pbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5jb25zdCBDTE9ORV9FTEVNRU5UX0JBU0VfU1RZTEVTID0ge1xuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgdmlzaWJpbGl0eTogJ2hpZGRlbicsXG4gIHpJbmRleDogLTk5OSxcbn07XG5cbi8qKlxuICog5L2/55So5Zy65pmv77yaXG4gKiDmlofmoYjpnIDopoHljZXooYzmmL7npLrvvIzov4fplb/ml7bmiKrlj5bnmoTmg4XlhrXjgIJcbiAqIOaViOaenO+8mlxuICog5Y+R55Sf5oiq5Y+W55qE5paH5qGI5Lya5pi+56S65a6M5pW05YaF5a6555qEIHRvb2x0aXDjgILmnKrlj5HnlJ/miKrlj5bnmoTmlofmoYjkuI3mmL7npLogdG9vbHRpcOOAglxuICogQGV4YW1wbGU6XG4gKiA8c3BhbiBjbGFzcz1cInR3LXRleHQtb3ZlcmZsb3dcIiBhY2xUZXh0VG9vbHRpcD5URVhULi4uPC9zcGFuPlxuICpcbiAqIHRvb2x0aXAg55qE5LiA5Lqb6K6+572u77yI5L2N572u44CB57G75Z6L77yJ5Y+v5Lul5L2/55SoIGF1aSDnm7jlkIzorr7nva7jgILmnKrkvKAgdG9vbHRpcCBjb250ZW50IOWImeWPluWFg+e0oCB0ZXh0IGNvbnRlbnRcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FjbFRleHRUb29sdGlwXScsXG4gIGhvc3REaXJlY3RpdmVzOiBbXG4gICAge1xuICAgICAgZGlyZWN0aXZlOiBUb29sdGlwRGlyZWN0aXZlLFxuICAgICAgaW5wdXRzOiBbXG4gICAgICAgICdhdWlUb29sdGlwOmFjbFRleHRUb29sdGlwJyxcbiAgICAgICAgJ2F1aVRvb2x0aXBQb3NpdGlvbicsXG4gICAgICAgICdhdWlUb29sdGlwVHlwZScsXG4gICAgICBdLFxuICAgIH0sXG4gIF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFRleHRUb29sdGlwRGlyZWN0aXZlIHtcbiAgQElucHV0KCdhY2xUZXh0VG9vbHRpcCcpXG4gIGNvbnRlbnQ6IHN0cmluZztcblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJywgWyckZXZlbnQnXSlcbiAgb25Nb3VzZUVudGVyKGU6IE1vdXNlRXZlbnQpIHtcbiAgICBjb25zdCBlbCA9IGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgIGNvbnN0IGRpc3BsYXlXaWR0aCA9IGVsLm9mZnNldFdpZHRoO1xuICAgIGNvbnN0IGZ1bGxXaWR0aCA9IHRoaXMuY2FsY0Z1bGxUZXh0V2lkdGgoZWwpO1xuICAgIHRoaXMudG9vbHRpcERpcmVjdGl2ZS5jb250ZW50ID0gdGhpcy5jb250ZW50IHx8IGVsLnRleHRDb250ZW50O1xuICAgIHRoaXMudG9vbHRpcERpcmVjdGl2ZS5kaXNhYmxlZCA9IGZ1bGxXaWR0aCA8PSBkaXNwbGF5V2lkdGg7XG4gIH1cblxuICB0b29sdGlwRGlyZWN0aXZlID0gaW5qZWN0KFRvb2x0aXBEaXJlY3RpdmUpO1xuXG4gIHByaXZhdGUgY2FsY0Z1bGxUZXh0V2lkdGgoZWw6IEhUTUxFbGVtZW50KSB7XG4gICAgY29uc3QgY29tcHV0ZWRTdHlsZSA9IHdpbmRvdy5nZXRDb21wdXRlZFN0eWxlKGVsKTtcbiAgICBjb25zdCBjb250ZW50Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG4gICAgY29udGVudENvbnRhaW5lci50ZXh0Q29udGVudCA9IHRoaXMuY29udGVudCB8fCBlbC50ZXh0Q29udGVudDtcbiAgICBPYmplY3QuYXNzaWduKGNvbnRlbnRDb250YWluZXIuc3R5bGUsIHtcbiAgICAgIC4uLkNMT05FX0VMRU1FTlRfQkFTRV9TVFlMRVMsXG4gICAgICBmb250U2l6ZTogY29tcHV0ZWRTdHlsZS5mb250U2l6ZSxcbiAgICAgIGZvbnRXZWlnaHQ6IGNvbXB1dGVkU3R5bGUuZm9udFdlaWdodCxcbiAgICB9KTtcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZChjb250ZW50Q29udGFpbmVyKTtcbiAgICBjb25zdCB3aWR0aCA9IGNvbnRlbnRDb250YWluZXIub2Zmc2V0V2lkdGg7XG4gICAgY29udGVudENvbnRhaW5lci5yZW1vdmUoKTtcbiAgICByZXR1cm4gd2lkdGg7XG4gIH1cbn1cbiJdfQ==