46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
export class FullScreenHandler {
|
|
private readonly abortController = new AbortController();
|
|
|
|
public constructor(
|
|
private readonly toggleButton: HTMLElement,
|
|
target: HTMLElement
|
|
) {
|
|
if (!document.fullscreenEnabled || typeof target.requestFullscreen !== 'function') {
|
|
toggleButton.hidden = true;
|
|
return;
|
|
}
|
|
|
|
this.updateButtons();
|
|
|
|
const { signal } = this.abortController;
|
|
addEventListener('fullscreenchange', this.updateButtons, { signal });
|
|
toggleButton.addEventListener(
|
|
'click',
|
|
() => {
|
|
if (FullScreenHandler.isInFullScreenMode()) {
|
|
void document.exitFullscreen();
|
|
return;
|
|
}
|
|
|
|
void target.requestFullscreen().catch(() => undefined);
|
|
},
|
|
{ signal }
|
|
);
|
|
}
|
|
|
|
public static isInFullScreenMode(): boolean {
|
|
return document.fullscreenElement !== null;
|
|
}
|
|
|
|
public destroy(): void {
|
|
this.abortController.abort();
|
|
}
|
|
|
|
private readonly updateButtons = (): void => {
|
|
const isInFullScreenMode = FullScreenHandler.isInFullScreenMode();
|
|
const label = isInFullScreenMode ? 'Exit fullscreen' : 'Enter fullscreen';
|
|
this.toggleButton.classList.toggle('active', isInFullScreenMode);
|
|
this.toggleButton.setAttribute('aria-label', label);
|
|
this.toggleButton.title = label;
|
|
};
|
|
}
|