From 0b28ab1eef2c49d27202fbe64ea74fc198923bf9 Mon Sep 17 00:00:00 2001 From: WuerfelDev Date: Sun, 4 Oct 2020 15:48:00 +0200 Subject: [PATCH 1/2] fullscreen --- snippets/fullscreen.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 snippets/fullscreen.md diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md new file mode 100644 index 000000000..967061918 --- /dev/null +++ b/snippets/fullscreen.md @@ -0,0 +1,24 @@ +--- +title: fullscreen +tags: browser,beginner +--- + +This snippet lets you start and stop the fullscreen mode + +- Uses `document.documentElement.requestFullscreen()` and `document.exitFullscreen()` functions to change the browsers state. +- If no parameter is given, it will default to enable the fullscreen mode. +- Usage is limited to user interaction or a device orientation change; otherwise it will fail. + +```js +const fullscreen = (mode=true) => { + if (mode) { + document.documentElement.requestFullscreen(); + } else { + document.exitFullscreen(); + }}; +``` + +```js +fullscreen(); // Browser in fullscreen mode +fullscreen(false); // Browser no longer in fullscreen mode +``` From 0be7365f1046a6e8a914b28c83aac739a03ef6b2 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 4 Oct 2020 20:38:26 +0300 Subject: [PATCH 2/2] Update fullscreen.md --- snippets/fullscreen.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md index 967061918..d394ec91d 100644 --- a/snippets/fullscreen.md +++ b/snippets/fullscreen.md @@ -1,24 +1,23 @@ --- title: fullscreen -tags: browser,beginner +tags: browser,intermediate --- -This snippet lets you start and stop the fullscreen mode +Opens or closes an element in fullscreen mode. -- Uses `document.documentElement.requestFullscreen()` and `document.exitFullscreen()` functions to change the browsers state. -- If no parameter is given, it will default to enable the fullscreen mode. -- Usage is limited to user interaction or a device orientation change; otherwise it will fail. +- Use `document.querySelector()` and `Element.prototype.requestFullscreen()` to open the given element in fullscreen. +- Use `document.exitFullscreen()` to exit fullscreen mode. +- Omit the second argument, `el`, to use `body` as the default element. +- Omit the first element, `mode`, to open the element in fullscreen mode by default. ```js -const fullscreen = (mode=true) => { - if (mode) { - document.documentElement.requestFullscreen(); - } else { - document.exitFullscreen(); - }}; +const fullscreen = (mode = true, el = 'body') => + mode + ? document.querySelector(el).requestFullscreen() + : document.exitFullscreen(); ``` ```js -fullscreen(); // Browser in fullscreen mode -fullscreen(false); // Browser no longer in fullscreen mode +fullscreen(); // Opens `body` in fullscreen mode +fullscreen(false); // Exits fullscreen mode ```