Detect when exiting fullscreen is triggered by ESC key press
matcho opened this issue · 6 comments
Hello,
When binding a function to "change" event, through .on()
method, how is it possible to detect either :
- whether this change event was triggered by pressing ESC key
- whether the browser is entering or exiting fullscreen mode
I couldn't find such information in the event
object.
What I'm trying to achieve is to detect when the browser is exiting fullscreen mode because ESC key was pressed.
Thanks for any help, screenfull is great,
Mathias
whether this change event was triggered by pressing ESC key
I don't think browsers expose this information at all.
whether the browser is entering or exiting fullscreen mode
This could possibly be added.
perhaps you can test for the ESC key
(window.addEventListener( "onkeyup", ... )
there is also https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen
any workarounds ?
// you can use it like this,
const escFunction = useCallback((event) => { if (event.keyCode === 27) { console.log("----logic----") } }, []); useEffect(() => { document.addEventListener("keydown", escFunction); }, []);
// And don't forget to import useCallback from react, hope this helps ;)
whether the browser is entering or exiting fullscreen mode
const isFullscreen = !!document.fullscreenElement;
You could use this inside your change handler.
You could check for ESC key within your change handler
class FullScreenExitHandler {
static ESCKeyPressed = false;
onFullScreenChange = () => {
/** Full Screen Change Logic */
if (FullScreenExitHandler.ESCKeyPressed) {
/** ESC Key Pressed was used to exit fullscreen */
}
/** Setting ESC key staus to default */
FullScreenExitHandler.ESCKeyPressed = false;
};
}
/** Checks for keypresses on the dom */
window.addEventListener("keydown", function (event) {
if (event.keyCode === 27) {
FullScreenExitHandler.ESCKeyPressed = true;
}
});