Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/my-fullscreen.element.js.html

Created September 30, 2022 16:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/1e75b12ee1ddc609346f5606016ea1c7 to your computer and use it in GitHub Desktop.
Save nfreear/1e75b12ee1ddc609346f5606016ea1c7 to your computer and use it in GitHub Desktop.
Download ZIP
Fullscreen test JS
Raw
my-fullscreen.element.js.html
<!doctype html> <title> fullscreen test </title>
<style>
body {
margin: auto;
max-width: 35rem;
}
my-fullscreen {
border: 3px solid red;
display: block;
padding: 1rem;
}
my-fullscreen[ data-is-fullscreen = 'true' ] {
background: #f8fff8;
}
button {
font-size: inherit;
padding: .4rem 1rem;
}
</style>
<h1> fullscreen test </h1>
<my-fullscreen>
<button>Fullscreen</button>
<p> Hello world!
<p> ... </p>
</my-fullscreen>
<script>
const FS_ELEM = document.querySelector('my-fullscreen');
const FS_BTN = document.querySelector('my-fullscreen > button');
FS_BTN.addEventListener('click', ev => {
ev.preventDefault();
console.debug('Click:', ev);
if (!document.fullscreenElement) {
FS_ELEM.requestFullscreen().then(() => console.debug('Fullscreen OK', document.fullscreenElement));
FS_ELEM.dataset.isFullscreen = true;
} else {
document.exitFullscreen();
FS_ELEM.dataset.isFullscreen = false;
}
});
</script>
<pre>
NDF, 29-Sep-22.
* https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment