4b698b74-d781-4818-a9d1-9a5c17982acc

Committed 16 Nov 2023 07:19AM UTC coverage: 90.285% (+0.08%) from 90.201%

Build # 4b698b74-d781-4818-a9d1-9a5c17982acc

Build Type

Pull #2901

circleci

Committed by

Maple13

Commit Message

feat(anchor): support horizontal display #INFR-10451

Pull Request Pull Request #2901: feat(anchor): support horizontal display #INFR-10451

Run Details

5288 of 6516 branches covered (0.0%)

Branch coverage included in aggregate %.

18 of 18 new or added lines in 1 file covered. (100.0%)

5 existing lines in 1 file now uncovered.

13197 of 13958 relevant lines covered (94.55%)

977.13 hits per line

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

88.61

/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
} from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil, throttleTime } from 'rxjs/operators';

import { DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
import { ThyAffixComponent } from 'ngx-tethys/affix';
import { InputBoolean, InputNumber, ThyScrollService } from 'ngx-tethys/core';
import { getOffset } from 'ngx-tethys/util';
import { ThyAnchorLinkComponent } from './anchor-link.component';

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

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

/**
 * 锚点组件
 * @name thy-anchor
 */
@Component({
    selector: 'thy-anchor',
    exportAs: 'thyAnchor',
    preserveWhitespaces: false,
    template: `
        <thy-affix *ngIf="thyAffix; else content" [thyOffsetTop]="thyOffsetTop" [thyContainer]="container">
            <ng-template [ngTemplateOutlet]="content"></ng-template>
        </thy-affix>
        <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: [NgIf, ThyAffixComponent, NgTemplateOutlet, NgStyle, NgClass]
})
export class ThyAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
    @ViewChild('ink') private ink!: ElementRef;

    /**
     * 固定模式
     */
    @Input() @InputBoolean() thyAffix = true;

    /**
     * 锚点区域边界，单位：px
     */
    @Input()
    @InputNumber()
    thyBounds = 5;

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

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

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

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

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

    visible = false;

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

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

    container?: HTMLElement | Window;

    private links: ThyAnchorLinkComponent[] = [];

    private animating = false;

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

    private handleScrollTimeoutID = -1;

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

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

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

atinc / ngx-tethys / 4b698b74-d781-4818-a9d1-9a5c17982acc

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