d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ContentChild, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { EMPTY, fromEvent, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

import { ThyFullscreen } from './fullscreen.service';
import { ThyFullscreenMode } from './fullscreen.config';
import { ThyFullscreenLaunchDirective } from './fullscreen-launch.directive';

/**
 * 全屏组件，将某一区域进行全屏展示，支持组件`thy-fullscreen`和`thyFullscreen`指令两种形式
 * @name thy-fullscreen,[thyFullscreen]
 * @order 10
 */
@Component({
    selector: 'thy-fullscreen, [thyFullscreen]',
    templateUrl: './fullscreen.component.html',
    standalone: true
})
export class ThyFullscreenComponent implements OnInit, OnDestroy {
    /**
     * immersive 模式使用了浏览器提供的全屏，整个窗体都全屏，emulated 模式为仿真的，只会在 body 区域全屏
     * @type immersive | emulated
     * @default immersive
     */
    @Input() thyMode: ThyFullscreenMode = ThyFullscreenMode.immersive;

    /**
     * 打开全屏时需要添加的类名
     */
    @Input() thyFullscreenClasses: string;

    /**
     * 全屏之后的回调
     */
    @Output() thyFullscreenChange: EventEmitter<boolean> = new EventEmitter<boolean>();

    @ContentChild(ThyFullscreenLaunchDirective, { read: ElementRef, static: false })
    set fullscreenLaunch(fullscreenLaunch: ElementRef<HTMLButtonElement> | undefined) {
        this.fullscreenLaunch$.next(fullscreenLaunch);
    }

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

    constructor(private elementRef: ElementRef, private service: ThyFullscreen) {}

    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();
    }
}

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

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