Andras Schmelczer
ed5a4379db
All checks were successful
Check & deploy / build (pull_request) Successful in 1m51s
35 lines
1 KiB
TypeScript
35 lines
1 KiB
TypeScript
export class FullScreenHandler {
|
|
public constructor(
|
|
private readonly toggleButton: HTMLElement,
|
|
target: HTMLElement
|
|
) {
|
|
if (!document.fullscreenEnabled || typeof target.requestFullscreen !== 'function') {
|
|
toggleButton.hidden = true;
|
|
return;
|
|
}
|
|
|
|
this.updateButtons();
|
|
|
|
addEventListener('fullscreenchange', this.updateButtons.bind(this));
|
|
toggleButton.addEventListener('click', () => {
|
|
if (FullScreenHandler.isInFullScreenMode()) {
|
|
void document.exitFullscreen();
|
|
return;
|
|
}
|
|
|
|
void target.requestFullscreen().catch(() => undefined);
|
|
});
|
|
}
|
|
|
|
public static isInFullScreenMode(): boolean {
|
|
return document.fullscreenElement !== null;
|
|
}
|
|
|
|
private 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;
|
|
}
|
|
}
|