andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Fix fullscreen - f11

Browse source
This commit is contained in:
schmelczerandras 2020-10-28 14:39:24 +01:00
parent db2c4579b6
commit 7162dc69b9
1 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/scripts/handle-full-screen.ts
View file

@ -1,3 +1,5 @@
import { SoundHandler, Sounds } from './sound-handler';
export const handleFullScreen = (
minimizeButton: HTMLElement,
maximizeButton: HTMLElement,
@ -8,20 +10,43 @@ export const handleFullScreen = (
return;
}
let isInFullScreen = document.fullscreenElement !== null;
let isInFullScreen = (): boolean => document.fullscreenElement !== null;
const showButtons = () => {
minimizeButton.style.visibility = isInFullScreen ? 'visible' : 'hidden';
maximizeButton.style.visibility = isInFullScreen ? 'hidden' : 'visible';
minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
};
showButtons();
maximizeButton.addEventListener('click', () => document.body.requestFullscreen());
minimizeButton.addEventListener('click', () => document.exitFullscreen());
let currentWindowHeight = innerHeight;
document.addEventListener('fullscreenchange', () => {
isInFullScreen = !isInFullScreen;
const followToggle = () => {
SoundHandler.play(Sounds.click);
showButtons();
currentWindowHeight = innerHeight;
};
const triggerToggle = async () => {
await (isInFullScreen()
? document.exitFullscreen()
: document.body.requestFullscreen());
followToggle();
};
addEventListener('keydown', (e) => {
if (e.key === 'F11') {
triggerToggle();
e.preventDefault();
}
});
addEventListener('resize', () => {
if (isInFullScreen && currentWindowHeight > innerHeight) {
followToggle();
}
});
maximizeButton.addEventListener('click', triggerToggle);
minimizeButton.addEventListener('click', triggerToggle);
};