atinc / ngx-tethys / #55

Committed 30 Jul 2025 07:08AM UTC coverage: 9.866% (-80.4%) from 90.297%

Build # #55

Build Type

push

Committed by

Commit Message

feat(empty): add setMessage for update display text #TINFR-2616

Run Details

92 of 6794 branches covered (1.35%)

Branch coverage included in aggregate %.

2014 of 14552 relevant lines covered (13.84%)

6.15 hits per line

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

12.5

/src/fullscreen/fullscreen.component.ts

import { Component, ElementRef, OnDestroy, OnInit, contentChild, effect, inject, input, output } from '@angular/core';
import { ThyFullscreen } from './fullscreen.service';
import { ThyFullscreenMode } from './fullscreen.config';
import { ThyFullscreenLaunchDirective } from './fullscreen-launch.directive';
import { EMPTY, fromEvent, Subject, switchMap, takeUntil } from 'rxjs';

/**
 * 全屏组件，将某一区域进行全屏展示，支持组件`thy-fullscreen`和`thyFullscreen`指令两种形式
 * @name thy-fullscreen,[thyFullscreen]
 * @order 10
 */
@Component({
    selector: 'thy-fullscreen, [thyFullscreen]',
    templateUrl: './fullscreen.component.html'
})
export class ThyFullscreenComponent implements OnInit, OnDestroy {
    private elementRef = inject(ElementRef);
    private service = inject(ThyFullscreen);

    /**
     * immersive 模式使用了浏览器提供的全屏，整个窗体都全屏，emulated 模式为仿真的，只会在 body 区域全屏
     * @type immersive | emulated
     */
    readonly thyMode = input<ThyFullscreenMode>(ThyFullscreenMode.immersive);

    /**
     * 打开全屏时需要添加的类名
     */
    readonly thyFullscreenClasses = input<string>();

    /**
     * 全屏之后的回调
     */
    readonly thyFullscreenChange = output<boolean>();

    readonly fullscreenLaunch = contentChild<ThyFullscreenLaunchDirective, ElementRef>(ThyFullscreenLaunchDirective, {
        read: ElementRef
    });

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

    private fullscreenLaunch$ = new Subject<ElementRef<HTMLButtonElement> | undefined>();

    constructor() {
        effect(() => {
            this.fullscreenLaunch$.next(this.fullscreenLaunch());
        });
    }

    ngOnInit(): void {
        this.fullscreenLaunch$
            .pipe(
                switchMap(fullscreenLaunch => (fullscreenLaunch ? fromEvent(fullscreenLaunch.nativeElement, 'click') : EMPTY)),
                takeUntil(this.ngUnsubscribe$)
            )
            .subscribe(this.handleFullscreen);
    }

    // Toggles full screen on or off.
    private handleFullscreen = () => {
        const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
        const containerElement = this.elementRef.nativeElement.querySelector('[fullscreen-container]');
        const fullscreen = targetElement.classList.contains('thy-fullscreen-active');

        if (fullscreen) {
            this.service.exit();
        } else {
            const fullscreenRef = this.service.launch({
                mode: this.thyMode(),
                target: targetElement,
                targetLaunchedClass: this.thyFullscreenClasses(),
                emulatedContainer: containerElement
            });

            this.thyFullscreenChange.emit(true);

            fullscreenRef.afterExited().subscribe(() => {
                this.thyFullscreenChange.emit(false);
            });
        }
    };

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import { Component, ElementRef, OnDestroy, OnInit, contentChild, effect, inject, input, output } from '@angular/core';
2	import { ThyFullscreen } from './fullscreen.service';
3	import { ThyFullscreenMode } from './fullscreen.config';
4	import { ThyFullscreenLaunchDirective } from './fullscreen-launch.directive';
5	import { EMPTY, fromEvent, Subject, switchMap, takeUntil } from 'rxjs';
6
7	/**
8	* 全屏组件，将某一区域进行全屏展示，支持组件`thy-fullscreen`和`thyFullscreen`指令两种形式
9	* @name thy-fullscreen,[thyFullscreen]
10	* @order 10
11	*/
12	@Component({
13	selector: 'thy-fullscreen, [thyFullscreen]',
14	templateUrl: './fullscreen.component.html'	1✔
15	})
16	export class ThyFullscreenComponent implements OnInit, OnDestroy {	×
17	private elementRef = inject(ElementRef);	×
18	private service = inject(ThyFullscreen);	×
19		×
20	/**	×
21	* immersive 模式使用了浏览器提供的全屏，整个窗体都全屏，emulated 模式为仿真的，只会在 body 区域全屏	×
22	* @type immersive \| emulated
23	*/
24	readonly thyMode = input<ThyFullscreenMode>(ThyFullscreenMode.immersive);	×
25		×
26	/**
27	* 打开全屏时需要添加的类名	×
28	*/	×
29	readonly thyFullscreenClasses = input<string>();	×
30		×
31	/**	×
32	* 全屏之后的回调	×
33	*/
34	readonly thyFullscreenChange = output<boolean>();
35		×
36	readonly fullscreenLaunch = contentChild<ThyFullscreenLaunchDirective, ElementRef>(ThyFullscreenLaunchDirective, {
37	read: ElementRef
38	});
39
40	private ngUnsubscribe$ = new Subject<void>();
41		×
42	private fullscreenLaunch$ = new Subject<ElementRef<HTMLButtonElement> \| undefined>();	×
43		×
44	constructor() {
45	effect(() => {
46	this.fullscreenLaunch$.next(this.fullscreenLaunch());
47	});	×
48	}	×
49
50	ngOnInit(): void {
51	this.fullscreenLaunch$
52	.pipe(	×
53	switchMap(fullscreenLaunch => (fullscreenLaunch ? fromEvent(fullscreenLaunch.nativeElement, 'click') : EMPTY)),	×
54	takeUntil(this.ngUnsubscribe$)
55	)
56	.subscribe(this.handleFullscreen);
57	}	×
58		×
59	// Toggles full screen on or off.
60	private handleFullscreen = () => {	1✔
61	const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');	1✔
62	const containerElement = this.elementRef.nativeElement.querySelector('[fullscreen-container]');
63	const fullscreen = targetElement.classList.contains('thy-fullscreen-active');
64
65	if (fullscreen) {
66	this.service.exit();
67	} else {
68	const fullscreenRef = this.service.launch({
69	mode: this.thyMode(),
70	target: targetElement,	1✔
71	targetLaunchedClass: this.thyFullscreenClasses(),
72	emulatedContainer: containerElement
73	});
74
75	this.thyFullscreenChange.emit(true);
76
77	fullscreenRef.afterExited().subscribe(() => {
78	this.thyFullscreenChange.emit(false);
79	});
80	}
81	};
82
83	ngOnDestroy() {
84	this.ngUnsubscribe$.next();
85	this.ngUnsubscribe$.complete();
86	}
87	}

atinc / ngx-tethys / #55

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