40b6707f-865c-4666-8c10-b2fd361f0b80

Committed 14 Sep 2024 09:11AM UTC coverage: 90.435% (+0.004%) from 90.431%

Build # 40b6707f-865c-4666-8c10-b2fd361f0b80

Build Type

Pull #3207

circleci

Committed by

minlovehua

Commit Message

refactor(layout): control flow

Pull Request Pull Request #3207: test branch

Run Details

5511 of 6738 branches covered (81.79%)

Branch coverage included in aggregate %.

89 of 95 new or added lines in 45 files covered. (93.68%)

97 existing lines in 14 files now uncovered.

13257 of 14015 relevant lines covered (94.59%)

994.7 hits per line

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

88.89

/src/anchor/anchor.component.ts

import { Platform } from '@angular/cdk/platform';
import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    Inject,
    Input,
    NgZone,
    OnChanges,
    OnDestroy,
    Output,
    Renderer2,
    SimpleChanges,
    ViewChild,
    ViewEncapsulation,
    numberAttribute
} from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil, throttleTime } from 'rxjs/operators';

import { DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { ThyAffix } from 'ngx-tethys/affix';
import { ThyScrollService } from 'ngx-tethys/core';
import { coerceBooleanProperty, getOffset } from 'ngx-tethys/util';
import { ThyAnchorLink } from './anchor-link.component';

interface Section {
    linkComponent: ThyAnchorLink;
    top: number;
}

const sharpMatcherRegx = /#([^#]+)$/;

/**
 * 锚点组件
 * @name thy-anchor
 */
@Component({
    selector: 'thy-anchor',
    exportAs: 'thyAnchor',
    preserveWhitespaces: false,
    template: `
        @if (thyAffix) {
            <thy-affix [thyOffsetTop]="thyOffsetTop" [thyContainer]="container">
                <ng-template [ngTemplateOutlet]="content"></ng-template>
            </thy-affix>
        } @else {
            <div
                class="thy-anchor-wrapper"
                [ngClass]="{ 'thy-anchor-wrapper-horizontal': thyDirection === 'horizontal' }"
                [ngStyle]="wrapperStyle">
                <div class="thy-anchor">
                    <div class="thy-anchor-ink">
                        <div class="thy-anchor-ink-full" #ink></div>
                    </div>
                    <ng-content></ng-content>
                </div>
            </div>
        }
        <ng-template #content>
            <div
                class="thy-anchor-wrapper"
                [ngClass]="{ 'thy-anchor-wrapper-horizontal': thyDirection === 'horizontal' }"
                [ngStyle]="wrapperStyle">
                <div class="thy-anchor">
                    <div class="thy-anchor-ink">
                        <div class="thy-anchor-ink-full" #ink></div>
                    </div>
                    <ng-content></ng-content>
                </div>
            </div>
        </ng-template>
    `,
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [ThyAffix, NgTemplateOutlet, NgStyle, NgClass]
})
export class ThyAnchor implements OnDestroy, AfterViewInit, OnChanges {
    @ViewChild('ink') private ink!: ElementRef;

    /**
     * 固定模式
     */
    @Input({ transform: coerceBooleanProperty }) thyAffix = true;

    /**
     * 锚点区域边界，单位：px
     */
    @Input({ transform: numberAttribute })
    thyBounds = 5;

    /**
     * 缓冲的偏移量阈值
     */
    @Input({ transform: numberAttribute })
    thyOffsetTop?: number = undefined;

    /**
     * 指定滚动的容器
     * @type string | HTMLElement
     */
    @Input() thyContainer?: string | HTMLElement;

    /**
     * 设置导航方向
     * @type 'vertical' | 'horizontal'
     */
    @Input() thyDirection: 'vertical' | 'horizontal' = 'vertical';

    /**
     * 点击项触发
     */
    @Output() readonly thyClick = new EventEmitter<ThyAnchorLink>();

    /**
     * 滚动到某锚点时触发
     */
    @Output() readonly thyScroll = new EventEmitter<ThyAnchorLink>();

    visible = false;

    wrapperStyle = { 'max-height': '100vh' };

    container?: HTMLElement | Window;

    private links: ThyAnchorLink[] = [];

    private animating = false;

    private destroy$ = new Subject<void>();

    private handleScrollTimeoutID: any = -1;

    constructor(
        @Inject(DOCUMENT) private document: any,
        private cdr: ChangeDetectorRef,
        private platform: Platform,
        private zone: NgZone,
        private renderer: Renderer2,
        private scrollService: ThyScrollService
    ) {}

    registerLink(link: ThyAnchorLink): void {
        this.links.push(link);
    }

    unregisterLink(link: ThyAnchorLink): void {
        this.links.splice(this.links.indexOf(link), 1);
    }

    private getContainer(): HTMLElement | Window {
        return this.container || window;
    }

    ngAfterViewInit(): void {
        this.warningPrompt();
        this.registerScrollEvent();
    }

    ngOnDestroy(): void {
        clearTimeout(this.handleScrollTimeoutID);
        this.destroy$.next();
        this.destroy$.complete();
    }

    private warningPrompt() {
        if (this.thyDirection === 'horizontal') {
            const hasChildren = this.links.some(link =>
                Array.from(link?.elementRef?.nativeElement?.childNodes)?.some((item: HTMLElement) => item?.nodeName === 'THY-ANCHOR-LINK')
            );
            if (hasChildren) {
                console.warn("Anchor link nesting is not supported when 'Anchor' direction is horizontal.");
            }
        }
    }

    private registerScrollEvent(): void {
        if (!this.platform.isBrowser) {
            return;
        }
        this.destroy$.next();
        this.zone.runOutsideAngular(() => {
            fromEvent(this.getContainer(), 'scroll', { passive: true })
                .pipe(throttleTime(50), takeUntil(this.destroy$))
                .subscribe(() => this.handleScroll());
        });
        // Browser would maintain the scrolling position when refreshing.
        // So we have to delay calculation in avoid of getting a incorrect result.
        this.handleScrollTimeoutID = setTimeout(() => this.handleScroll());
    }

    handleScroll(): void {
        if (typeof document === 'undefined' || this.animating) {
            return;
        }
        const container: HTMLElement = this.container instanceof HTMLElement ? this.container : this.document;

        const sections: Section[] = [];
        const scope = (this.thyOffsetTop || 0) + this.thyBounds;
        this.links.forEach(linkComponent => {
            const sharpLinkMatch = sharpMatcherRegx.exec(linkComponent.thyHref.toString());
            if (!sharpLinkMatch) {
                return;
            }
            const target = container.querySelector(`#${sharpLinkMatch[1]}`) as HTMLElement;
            if (target) {
                const top = getOffset(target, this.getContainer()).top;
                if (top < scope) {
                    sections.push({
                        top,
                        linkComponent
                    });
                }
            }
        });

        this.visible = !!sections.length;
        if (!this.visible) {
            this.clearActive();
            this.cdr.detectChanges();
        } else {
            const maxSection = sections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
            this.handleActive(maxSection.linkComponent);
        }
        this.setVisible();
    }

    private clearActive(): void {
        this.links.forEach(i => {
            i.unsetActive();
        });
    }

    private handleActive(linkComponent: ThyAnchorLink): void {
        this.clearActive();
        linkComponent.setActive();
        const linkNode = linkComponent.getLinkTitleElement();
        const horizontalAnchor = this.thyDirection === 'horizontal';

        this.ink.nativeElement.style.top = horizontalAnchor ? '' : `${linkNode.offsetTop}px`;
        this.ink.nativeElement.style.height = horizontalAnchor ? '' : `${linkNode.clientHeight}px`;
        this.ink.nativeElement.style.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : '';
        this.ink.nativeElement.style.width = horizontalAnchor ? `${linkNode.clientWidth}px` : '';
        this.visible = true;
        this.setVisible();
        this.thyScroll.emit(linkComponent);
    }

    private setVisible(): void {
        const visible = this.visible;
        const visibleClassname = 'visible';
        if (this.ink) {
            if (visible) {
                this.renderer.addClass(this.ink.nativeElement, visibleClassname);
            } else {
                this.renderer.removeClass(this.ink.nativeElement, visibleClassname);
            }
        }
    }

    handleScrollTo(linkComponent: ThyAnchorLink): void {
        const container: HTMLElement = this.container instanceof HTMLElement ? this.container : this.document;
        const linkElement: HTMLElement = container.querySelector(linkComponent.thyHref);
        if (!linkElement) {
            return;
        }

        this.animating = true;
        const containerScrollTop = this.scrollService.getScroll(this.getContainer());
        const elementOffsetTop = getOffset(linkElement, this.getContainer()).top;
        const targetScrollTop = containerScrollTop + elementOffsetTop - (this.thyOffsetTop || 0);
        this.scrollService.scrollTo(this.getContainer(), targetScrollTop, undefined, () => {
            this.animating = false;
        });
        this.handleActive(linkComponent);
        this.thyClick.emit(linkComponent);
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thyOffsetTop, thyContainer } = changes;
        if (thyOffsetTop) {
            this.wrapperStyle = {
                'max-height': `calc(100vh - ${this.thyOffsetTop}px)`
            };
        }
        if (thyContainer && this.thyContainer) {
            const container = this.thyContainer;
            this.container = typeof container === 'string' ? this.document.querySelector(container) : container;
            this.registerScrollEvent();
        }
    }
}

1	import { Platform } from '@angular/cdk/platform';
2	import {
3	AfterViewInit,
4	ChangeDetectionStrategy,
5	ChangeDetectorRef,
6	Component,
7	ElementRef,
8	EventEmitter,
9	Inject,
10	Input,	1✔
11	NgZone,
12	OnChanges,
13	OnDestroy,
14	Output,
15	Renderer2,	1✔
16	SimpleChanges,
17	ViewChild,	11✔
18	ViewEncapsulation,	11✔
19	numberAttribute	11✔
20	} from '@angular/core';	11✔
21	import { Subject, fromEvent } from 'rxjs';	11✔
22	import { takeUntil, throttleTime } from 'rxjs/operators';	11✔
23		11✔
24	import { DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';	11✔
25	import { ThyAffix } from 'ngx-tethys/affix';	11✔
26	import { ThyScrollService } from 'ngx-tethys/core';	11✔
27	import { coerceBooleanProperty, getOffset } from 'ngx-tethys/util';	11✔
28	import { ThyAnchorLink } from './anchor-link.component';	11✔
29		11✔
30	interface Section {	11✔
31	linkComponent: ThyAnchorLink;	11✔
32	top: number;	11✔
33	}	11✔
34		11✔
35	const sharpMatcherRegx = /#([^#]+)$/;
36
37	/**	48✔
38	* 锚点组件
39	* @name thy-anchor
40	*/	48✔
41	@Component({
42	selector: 'thy-anchor',
43	exportAs: 'thyAnchor',	33✔
44	preserveWhitespaces: false,
45	template: `
46	@if (thyAffix) {	11✔
47	<thy-affix [thyOffsetTop]="thyOffsetTop" [thyContainer]="container">	11✔
48	<ng-template [ngTemplateOutlet]="content"></ng-template>
49	</thy-affix>
50	} @else {	11✔
51	<div	11✔
52	class="thy-anchor-wrapper"	11✔
53	[ngClass]="{ 'thy-anchor-wrapper-horizontal': thyDirection === 'horizontal' }"
54	[ngStyle]="wrapperStyle">
55	<div class="thy-anchor">	11✔
56	<div class="thy-anchor-ink">	25✔
57	<div class="thy-anchor-ink-full" #ink></div>	5✔
58	</div>	1✔
59	<ng-content></ng-content>
60	</div>
61	</div>
62	}
63	<ng-template #content>	12!
UNCOV 64	<div	×
65	class="thy-anchor-wrapper"
66	[ngClass]="{ 'thy-anchor-wrapper-horizontal': thyDirection === 'horizontal' }"	12✔
67	[ngStyle]="wrapperStyle">	12✔
68	<div class="thy-anchor">	12✔
69	<div class="thy-anchor-ink">
70	<div class="thy-anchor-ink-full" #ink></div>	1✔
71	</div>
72	<ng-content></ng-content>
73	</div>
74	</div>	12✔
75	</ng-template>
76	`,
77	encapsulation: ViewEncapsulation.None,	6✔
78	changeDetection: ChangeDetectionStrategy.OnPush,	1✔
79	standalone: true,
80	imports: [ThyAffix, NgTemplateOutlet, NgStyle, NgClass]	5✔
81	})	5✔
82	export class ThyAnchor implements OnDestroy, AfterViewInit, OnChanges {	5!
83	@ViewChild('ink') private ink!: ElementRef;	5✔
84		18✔
85	/**	18!
UNCOV 86	* 固定模式	×
87	*/
88	@Input({ transform: coerceBooleanProperty }) thyAffix = true;	18✔
89		18✔
90	/**	15✔
91	* 锚点区域边界，单位：px	15✔
92	*/	5✔
93	@Input({ transform: numberAttribute })
94	thyBounds = 5;
95
96	/**
97	* 缓冲的偏移量阈值
98	*/
99	@Input({ transform: numberAttribute })	5✔
100	thyOffsetTop?: number = undefined;	5!
UNCOV 101		×
UNCOV 102	/**	×
103	* 指定滚动的容器
104	* @type string \| HTMLElement
105	*/	5!
106	@Input() thyContainer?: string \| HTMLElement;	5✔
107
108	/**	5✔
109	* 设置导航方向
110	* @type 'vertical' \| 'horizontal'
111	*/	7✔
112	@Input() thyDirection: 'vertical' \| 'horizontal' = 'vertical';	28✔
113
114	/**
115	* 点击项触发
116	*/	7✔
117	@Output() readonly thyClick = new EventEmitter<ThyAnchorLink>();	7✔
118		7✔
119	/**	7✔
120	* 滚动到某锚点时触发	7✔
121	*/	7✔
122	@Output() readonly thyScroll = new EventEmitter<ThyAnchorLink>();	7✔
123		7✔
124	visible = false;	7✔
125		7✔
126	wrapperStyle = { 'max-height': '100vh' };	7✔
127
128	container?: HTMLElement \| Window;
129		12✔
130	private links: ThyAnchorLink[] = [];	12✔
131		12!
132	private animating = false;	12!
133		12✔
134	private destroy$ = new Subject<void>();
135
UNCOV 136	private handleScrollTimeoutID: any = -1;	×
137
138	constructor(
139	@Inject(DOCUMENT) private document: any,
140	private cdr: ChangeDetectorRef,
141	private platform: Platform,	3!
142	private zone: NgZone,	3✔
143	private renderer: Renderer2,	3✔
144	private scrollService: ThyScrollService	1✔
145	) {}
146		2✔
147	registerLink(link: ThyAnchorLink): void {	2✔
148	this.links.push(link);	2✔
149	}	2!
150		2✔
151	unregisterLink(link: ThyAnchorLink): void {	2✔
152	this.links.splice(this.links.indexOf(link), 1);
153	}	2✔
154		2✔
155	private getContainer(): HTMLElement \| Window {
156	return this.container \|\| window;
157	}	11✔
158		11!
159	ngAfterViewInit(): void {	11✔
160	this.warningPrompt();
161	this.registerScrollEvent();
162	}
163		11✔
164	ngOnDestroy(): void {	1✔
165	clearTimeout(this.handleScrollTimeoutID);	1!
166	this.destroy$.next();	1✔
167	this.destroy$.complete();
168	}
169		1✔
170	private warningPrompt() {
171	if (this.thyDirection === 'horizontal') {
172	const hasChildren = this.links.some(link =>
173	Array.from(link?.elementRef?.nativeElement?.childNodes)?.some((item: HTMLElement) => item?.nodeName === 'THY-ANCHOR-LINK')
174	);
175	if (hasChildren) {
176	console.warn("Anchor link nesting is not supported when 'Anchor' direction is horizontal.");
177	}	1✔
178	}
179	}
180
181	private registerScrollEvent(): void {
182	if (!this.platform.isBrowser) {
183	return;
184	}
185	this.destroy$.next();
186	this.zone.runOutsideAngular(() => {
187	fromEvent(this.getContainer(), 'scroll', { passive: true })
188	.pipe(throttleTime(50), takeUntil(this.destroy$))	1✔
189	.subscribe(() => this.handleScroll());
190	});
191	// Browser would maintain the scrolling position when refreshing.
192	// So we have to delay calculation in avoid of getting a incorrect result.
193	this.handleScrollTimeoutID = setTimeout(() => this.handleScroll());
194	}
195
196	handleScroll(): void {
197	if (typeof document === 'undefined' \|\| this.animating) {
198	return;
199	}
200	const container: HTMLElement = this.container instanceof HTMLElement ? this.container : this.document;
201
202	const sections: Section[] = [];
203	const scope = (this.thyOffsetTop \|\| 0) + this.thyBounds;
204	this.links.forEach(linkComponent => {
205	const sharpLinkMatch = sharpMatcherRegx.exec(linkComponent.thyHref.toString());
206	if (!sharpLinkMatch) {
207	return;
208	}
209	const target = container.querySelector(`#${sharpLinkMatch[1]}`) as HTMLElement;
210	if (target) {
211	const top = getOffset(target, this.getContainer()).top;
212	if (top < scope) {
213	sections.push({
214	top,
215	linkComponent
216	});
217	}
218	}
219	});
220
221	this.visible = !!sections.length;
222	if (!this.visible) {
223	this.clearActive();
224	this.cdr.detectChanges();
225	} else {
226	const maxSection = sections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
227	this.handleActive(maxSection.linkComponent);
228	}
229	this.setVisible();
230	}
231
232	private clearActive(): void {
233	this.links.forEach(i => {
234	i.unsetActive();
235	});
236	}
237
238	private handleActive(linkComponent: ThyAnchorLink): void {
239	this.clearActive();
240	linkComponent.setActive();
241	const linkNode = linkComponent.getLinkTitleElement();
242	const horizontalAnchor = this.thyDirection === 'horizontal';
243
244	this.ink.nativeElement.style.top = horizontalAnchor ? '' : `${linkNode.offsetTop}px`;
245	this.ink.nativeElement.style.height = horizontalAnchor ? '' : `${linkNode.clientHeight}px`;
246	this.ink.nativeElement.style.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : '';
247	this.ink.nativeElement.style.width = horizontalAnchor ? `${linkNode.clientWidth}px` : '';
248	this.visible = true;
249	this.setVisible();
250	this.thyScroll.emit(linkComponent);
251	}
252
253	private setVisible(): void {
254	const visible = this.visible;
255	const visibleClassname = 'visible';
256	if (this.ink) {
257	if (visible) {
258	this.renderer.addClass(this.ink.nativeElement, visibleClassname);
259	} else {
260	this.renderer.removeClass(this.ink.nativeElement, visibleClassname);
261	}
262	}
263	}
264
265	handleScrollTo(linkComponent: ThyAnchorLink): void {
266	const container: HTMLElement = this.container instanceof HTMLElement ? this.container : this.document;
267	const linkElement: HTMLElement = container.querySelector(linkComponent.thyHref);
268	if (!linkElement) {
269	return;
270	}
271
272	this.animating = true;
273	const containerScrollTop = this.scrollService.getScroll(this.getContainer());
274	const elementOffsetTop = getOffset(linkElement, this.getContainer()).top;
275	const targetScrollTop = containerScrollTop + elementOffsetTop - (this.thyOffsetTop \|\| 0);
276	this.scrollService.scrollTo(this.getContainer(), targetScrollTop, undefined, () => {
277	this.animating = false;
278	});
279	this.handleActive(linkComponent);
280	this.thyClick.emit(linkComponent);
281	}
282
283	ngOnChanges(changes: SimpleChanges): void {
284	const { thyOffsetTop, thyContainer } = changes;
285	if (thyOffsetTop) {
286	this.wrapperStyle = {
287	'max-height': `calc(100vh - ${this.thyOffsetTop}px)`
288	};
289	}
290	if (thyContainer && this.thyContainer) {
291	const container = this.thyContainer;
292	this.container = typeof container === 'string' ? this.document.querySelector(container) : container;
293	this.registerScrollEvent();
294	}
295	}
296	}

atinc / ngx-tethys / 40b6707f-865c-4666-8c10-b2fd361f0b80

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