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 = ( export const handleFullScreen = (
minimizeButton: HTMLElement, minimizeButton: HTMLElement,
maximizeButton: HTMLElement, maximizeButton: HTMLElement,
@ -8,20 +10,43 @@ export const handleFullScreen = (
return; return;
} }
let isInFullScreen = document.fullscreenElement !== null; let isInFullScreen = (): boolean => document.fullscreenElement !== null;
const showButtons = () => { const showButtons = () => {
minimizeButton.style.visibility = isInFullScreen ? 'visible' : 'hidden'; minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
maximizeButton.style.visibility = isInFullScreen ? 'hidden' : 'visible'; maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
}; };
showButtons(); showButtons();
maximizeButton.addEventListener('click', () => document.body.requestFullscreen()); let currentWindowHeight = innerHeight;
minimizeButton.addEventListener('click', () => document.exitFullscreen());
document.addEventListener('fullscreenchange', () => { const followToggle = () => {
isInFullScreen = !isInFullScreen; SoundHandler.play(Sounds.click);
showButtons(); 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);
}; };