Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 1x 1x | import { Directive, ElementRef, inject, signal } from '@angular/core';
interface IStyleConfiguration {
width: string;
height: string;
position: string;
top: string;
bottom: string;
}
/** Full screen directive. */
@Directive({
selector: '[appFullScreen]',
exportAs: 'fullScreen',
standalone: false,
})
export class AppFullScreenDirective {
private readonly el = inject(ElementRef<HTMLElement>);
/** Original styles of the component. */
private readonly originalStyles = signal<IStyleConfiguration | null>(null);
/** Full screen state. */
public readonly enabled$ = signal<boolean>(false);
/**
* Create a copy of the original styles.
* @param el HTML element.
*/
private backUpStyles(el: HTMLElement) {
const styles: IStyleConfiguration = {
width: el.style.width,
height: el.style.height,
position: el.style.position,
top: el.style.top,
bottom: el.style.bottom,
};
this.originalStyles.set(styles);
}
/**
* Restore original styles from a copy.
* @param el HTML element.
*/
private restoreStyles(el: HTMLElement) {
const styles = this.originalStyles();
if (styles !== null) {
el.style.width = styles.width;
el.style.height = styles.height;
el.style.position = styles.position;
el.style.top = styles.top;
el.style.bottom = styles.bottom;
this.originalStyles.set(null);
}
}
/**
* Set element styles.
* @param el HTML element.
*/
private setStyles(el: HTMLElement) {
el.style.width = '100vw';
el.style.height = '100vw';
el.style.position = 'fixed';
el.style.top = '0';
el.style.bottom = '0';
}
/** Toggle full screen. */
public toggle(): void {
const fullScreen = this.originalStyles();
switch (fullScreen) {
case null:
this.maximize();
break;
default:
this.minimize();
break;
}
}
/** Enable full screen mode. */
public maximize(): void {
const el = this.el.nativeElement;
if (typeof el !== 'undefined') {
this.backUpStyles(el);
this.setStyles(el);
this.enabled$.set(true);
}
}
/** Disable full screen mode. */
public minimize(): void {
const el = this.el.nativeElement;
if (typeof el !== 'undefined') {
this.restoreStyles(el);
this.enabled$.set(false);
}
}
}
|