d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Directive,
    ElementRef,
    NgZone,
    OnDestroy,
    Input,
    TemplateRef,
    OnInit,
    ViewContainerRef,
    HostBinding,
    ChangeDetectorRef
} from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { OverlayRef } from '@angular/cdk/overlay';
import { FocusMonitor } from '@angular/cdk/a11y';
import { InputBoolean, InputNumber, ThyOverlayDirectiveBase, ThyOverlayTrigger, ThyPlacement } from 'ngx-tethys/core';
import { ThyPopover } from './popover.service';
import { ComponentType } from '@angular/cdk/portal';
import { ThyPopoverRef } from './popover-ref';
import { ThyPopoverConfig } from './popover.config';

/**
 * 弹出悬浮层指令
 * @name thyPopover
 * @order 50
 */
@Directive({
    selector: '[thyPopover]',
    standalone: true
})
export class ThyPopoverDirective extends ThyOverlayDirectiveBase implements OnInit, OnDestroy {
    @HostBinding(`class.thy-popover-opened`) popoverOpened = false;

    /**
     * 悬浮组件或者模板
     */
    @Input('thyPopover') content: ComponentType<any> | TemplateRef<any>;

    /**
     * 弹出悬浮层的触发方式
     */
    @Input() set thyTrigger(trigger: ThyOverlayTrigger) {
        this.trigger = trigger;
    }

    /**
     * 弹出悬浮层的位置
     * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right |  rightTop | rightBottom
     */
    @Input() thyPlacement: ThyPlacement = 'bottom';

    /**
     * 弹出悬浮层的偏移量
     */
    @Input() @InputNumber() thyOffset: number = 0;

    /**
     * 弹出悬浮层的配置
     */
    @Input() thyConfig: ThyPopoverConfig;

    /**
     * 显示延迟时间
     */
    @Input('thyShowDelay')
    @InputNumber()
    set thyShowDelay(value: number) {
        this.showDelay = value;
    }

    /**
     * 隐藏延迟时间
     */
    @Input('thyHideDelay')
    @InputNumber()
    set thyHideDelay(value: number) {
        this.hideDelay = value;
    }

    /**
     * 自动适配内容变化重新计算位置
     */
    @Input() @InputBoolean() thyAutoAdaptive = false;

    /**
     * 是否禁用打开悬浮层
     * @default false
     */
    @Input() @InputBoolean() set thyDisabled(value: boolean) {
        this.disabled = value;
    }

    private popoverRef: ThyPopoverRef<any>;

    constructor(
        public elementRef: ElementRef,
        platform: Platform,
        focusMonitor: FocusMonitor,
        ngZone: NgZone,
        private popover: ThyPopover,
        private viewContainerRef: ViewContainerRef,
        private cdr: ChangeDetectorRef
    ) {
        super(elementRef, platform, focusMonitor, ngZone, true);
    }

    ngOnInit(): void {
        this.initialize();
    }

    createOverlay(): OverlayRef {
        const config = Object.assign(
            {
                origin: this.elementRef.nativeElement,
                hasBackdrop: this.trigger === 'click' || this.trigger === 'focus',
                viewContainerRef: this.viewContainerRef,
                placement: this.thyPlacement,
                offset: this.thyOffset,
                autoAdaptive: this.thyAutoAdaptive
            },
            this.thyConfig
        );
        this.popoverRef = this.popover.open(this.content, config);

        this.popoverRef.afterClosed().subscribe(() => {
            this.popoverOpened = false;
        });

        return this.popoverRef.getOverlayRef();
    }

    show(delay: number = this.showDelay) {
        if (this.hideTimeoutId) {
            clearTimeout(this.hideTimeoutId);
            this.hideTimeoutId = null;
        }

        if (this.disabled || (this.overlayRef && this.overlayRef.hasAttached())) {
            return;
        }
        if (this.trigger !== 'hover') {
            delay = 0;
        }

        this.showTimeoutId = setTimeout(() => {
            if (!this.disabled) {
                const overlayRef = this.createOverlay();
                this.overlayRef = overlayRef;
                this.popoverOpened = true;
                this.cdr.markForCheck();
            }
            this.showTimeoutId = null;
        }, delay);
    }

    hide(delay: number = this.hideDelay) {
        if (this.showTimeoutId) {
            clearTimeout(this.showTimeoutId);
            this.showTimeoutId = null;
        }

        this.hideTimeoutId = setTimeout(() => {
            if (this.popoverRef) {
                this.popoverRef.close();
                this.cdr.markForCheck();
            }
            this.hideTimeoutId = null;
        }, delay);
    }

    ngOnDestroy() {
        this.dispose();
    }
}

1	import {
2	Directive,
3	ElementRef,
4	NgZone,
5	OnDestroy,
6	Input,
7	TemplateRef,
8	OnInit,
9	ViewContainerRef,
10	HostBinding,
11	ChangeDetectorRef
12	} from '@angular/core';
13	import { Platform } from '@angular/cdk/platform';	1✔
14	import { OverlayRef } from '@angular/cdk/overlay';
15	import { FocusMonitor } from '@angular/cdk/a11y';	×
16	import { InputBoolean, InputNumber, ThyOverlayDirectiveBase, ThyOverlayTrigger, ThyPlacement } from 'ngx-tethys/core';
17	import { ThyPopover } from './popover.service';
18	import { ComponentType } from '@angular/cdk/portal';	×
19	import { ThyPopoverRef } from './popover-ref';
20	import { ThyPopoverConfig } from './popover.config';
21		×
22	/**
23	* 弹出悬浮层指令
24	* @name thyPopover	×
25	* @order 50
26	*/
27	@Directive({	×
28	selector: '[thyPopover]',	×
29	standalone: true	×
30	})	×
31	export class ThyPopoverDirective extends ThyOverlayDirectiveBase implements OnInit, OnDestroy {	×
32	@HostBinding(`class.thy-popover-opened`) popoverOpened = false;	×
33		×
34	/**	×
35	* 悬浮组件或者模板	×
36	*/
37	@Input('thyPopover') content: ComponentType<any> \| TemplateRef<any>;
38		×
39	/**
40	* 弹出悬浮层的触发方式
41	*/	×
42	@Input() set thyTrigger(trigger: ThyOverlayTrigger) {
43	this.trigger = trigger;	×
44	}
45
46	/**
47	* 弹出悬浮层的位置
48	* @type top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight \| left \| leftTop \| leftBottom \| right \| rightTop \| rightBottom
49	*/	×
50	@Input() thyPlacement: ThyPlacement = 'bottom';	×
51		×
52	/**
53	* 弹出悬浮层的偏移量	×
54	*/
55	@Input() @InputNumber() thyOffset: number = 0;	×
56		×
57	/**	×
58	* 弹出悬浮层的配置	×
59	*/
60	@Input() thyConfig: ThyPopoverConfig;	×
61		×
62	/**
63	* 显示延迟时间	×
64	*/	×
65	@Input('thyShowDelay')
66	@InputNumber()	×
67	set thyShowDelay(value: number) {	×
68	this.showDelay = value;	×
69	}	×
70		×
71	/**	×
72	* 隐藏延迟时间
73	*/	×
74	@Input('thyHideDelay')
75	@InputNumber()
76	set thyHideDelay(value: number) {	×
77	this.hideDelay = value;	×
78	}	×
79		×
80	/**
81	* 自动适配内容变化重新计算位置	×
82	*/	×
83	@Input() @InputBoolean() thyAutoAdaptive = false;	×
84		×
85	/**
86	* 是否禁用打开悬浮层	×
87	* @default false
88	*/
89	@Input() @InputBoolean() set thyDisabled(value: boolean) {
90	this.disabled = value;	×
91	}
92		1✔
93	private popoverRef: ThyPopoverRef<any>;
94
95	constructor(
96	public elementRef: ElementRef,
97	platform: Platform,
98	focusMonitor: FocusMonitor,
99	ngZone: NgZone,
100	private popover: ThyPopover,
101	private viewContainerRef: ViewContainerRef,	1✔
102	private cdr: ChangeDetectorRef
103	) {
104	super(elementRef, platform, focusMonitor, ngZone, true);
105	}
106
107	ngOnInit(): void {
108	this.initialize();
109	}
110
111	createOverlay(): OverlayRef {
112	const config = Object.assign(
113	{
114	origin: this.elementRef.nativeElement,	1✔
115	hasBackdrop: this.trigger === 'click' \|\| this.trigger === 'focus',
116	viewContainerRef: this.viewContainerRef,
117	placement: this.thyPlacement,
118	offset: this.thyOffset,	1✔
119	autoAdaptive: this.thyAutoAdaptive
120	},
121	this.thyConfig
122	);
123	this.popoverRef = this.popover.open(this.content, config);	1✔
124
125	this.popoverRef.afterClosed().subscribe(() => {
126	this.popoverOpened = false;
127	});
128		1✔
129	return this.popoverRef.getOverlayRef();
130	}
131
132	show(delay: number = this.showDelay) {	1✔
133	if (this.hideTimeoutId) {
134	clearTimeout(this.hideTimeoutId);
135	this.hideTimeoutId = null;
136	}
137		1✔
138	if (this.disabled \|\| (this.overlayRef && this.overlayRef.hasAttached())) {
139	return;
140	}
141	if (this.trigger !== 'hover') {
142	delay = 0;
143	}
144
145	this.showTimeoutId = setTimeout(() => {
146	if (!this.disabled) {
147	const overlayRef = this.createOverlay();
148	this.overlayRef = overlayRef;
149	this.popoverOpened = true;
150	this.cdr.markForCheck();
151	}
152	this.showTimeoutId = null;
153	}, delay);
154	}
155
156	hide(delay: number = this.hideDelay) {
157	if (this.showTimeoutId) {
158	clearTimeout(this.showTimeoutId);
159	this.showTimeoutId = null;
160	}
161
162	this.hideTimeoutId = setTimeout(() => {
163	if (this.popoverRef) {
164	this.popoverRef.close();
165	this.cdr.markForCheck();
166	}
167	this.hideTimeoutId = null;
168	}, delay);
169	}
170
171	ngOnDestroy() {
172	this.dispose();
173	}
174	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous