voussoir/voussoir.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Instead of fullscreen api, just hide the other elements.

Browse source 
Anyway it was good practice! But this just works better and can
be initialized on pageload with a url param.
This commit is contained in:
voussoir 2022-01-14 22:23:53 -08:00
parent 437c02820b
commit fa9960e2f4
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
1 changed files with 39 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
voussoir.net/index.html
View file

@ -23,6 +23,7 @@
html
{
height: 100vh;
box-sizing: border-box;
}
@ -30,12 +31,18 @@ html
body
{
min-height: 100%;
background-color: #0e0e0d;
margin: 0;
display: grid;
grid-auto-rows: max-content;
grid-row-gap: 8px;
}
body.justthesplash
{
grid-auto-rows: initial;
align-items: center;
}
h2
{
@ -962,55 +969,38 @@ function cycle_splash()
fade_out();
}
function fullscreen_on()
{
const elements = Array.from(document.body.children);
for (const element of elements)
{
if (element.id !== "headline")
{
element.classList.add("hidden");
}
}
document.body.classList.add("justthesplash");
}
function fullscreen_off()
{
const elements = Array.from(document.body.children);
for (const element of elements)
{
element.classList.remove("hidden");
}
document.body.classList.remove("justthesplash");
}
function fullscreen_toggle()
{
const headline = document.getElementById("headline");
if (document.fullscreenElement)
if (document.body.classList.contains("justthesplash"))
{
document.exitFullscreen();
fullscreen_showmouse();
fullscreen_off();
}
else
{
headline.requestFullscreen();
fullscreen_showmouse();
console.log("Let's hide the mouse");
HIDE_MOUSE_TIMEOUT = setTimeout(fullscreen_hidemouse, 2000);
}
}
let HIDE_MOUSE_TIMEOUT = null;
function fullscreen_mousehandler()
{
fullscreen_showmouse();
HIDE_MOUSE_TIMEOUT = setTimeout(fullscreen_hidemouse, 2000);
}
function fullscreen_showmouse()
{
document.getElementById("headline").style.cursor = "";
document.getElementById("headline_fullscreen_button").classList.remove("hidden_opacity");
clearTimeout(HIDE_MOUSE_TIMEOUT);
}
function fullscreen_hidemouse()
{
if (document.fullscreenElement)
{
document.getElementById("headline").style.cursor = "none";
document.getElementById("headline_fullscreen_button").classList.add("hidden_opacity");
}
}
function fullscreenchange_handler()
{
/*
When the user exits fullscreen via F11 or escape, this will catch it.
If they exit by clicking the button it'll be fullscreen_toggle.
*/
const button = document.getElementById("headline_fullscreen_button");
if (! document.fullscreenElement)
{
fullscreen_showmouse();
fullscreen_on();
}
}
@ -1019,8 +1009,12 @@ function on_pageload()
shuffle_splashes();
setTimeout(cycle_splash, 0);
const headline = document.getElementById("headline");
headline.addEventListener("mousemove", fullscreen_mousehandler);
document.addEventListener("fullscreenchange", fullscreenchange_handler);
const url_params = new URLSearchParams(window.location.search);
if (url_params.get("justthesplash") !== null)
{
fullscreen_on();
}
}
document.addEventListener("DOMContentLoaded", on_pageload);
</script>