From 3bceb5a859f633985349ccb430682ae471c770e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Jask=C3=B3lski?= <oskarrro90@gmail.com>
Date: Fri, 23 Dec 2022 12:47:40 +0100
Subject: [PATCH] )) |'ve added a fullscreen option via double-click anywhere
 on the page. )) Now the feather info icon is fading out after 3s, and it
 appears every time the user hovers it with the mouse. )) I've changed a
 little bit formatting of the code

---
 fullscreen.js | 30 ++++++++++++++++++++++++++++++
 index.html    |  4 +++-
 modal.js      | 19 ++++++++++++-------
 style.css     | 12 ++++++++++++
 4 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 fullscreen.js

diff --git a/fullscreen.js b/fullscreen.js
new file mode 100644
index 0000000..ed87415
--- /dev/null
+++ b/fullscreen.js
@@ -0,0 +1,30 @@
+function toggleFullScreen() {
+  const doc = window.document;
+  const docEl = doc.documentElement;
+
+  var requestFullScreen =
+    docEl.requestFullscreen ||
+    docEl.mozRequestFullScreen ||
+    docEl.webkitRequestFullScreen ||
+    docEl.msRequestFullscreen;
+  var cancelFullScreen =
+    doc.exitFullscreen ||
+    doc.mozCancelFullScreen ||
+    doc.webkitExitFullscreen ||
+    doc.msExitFullscreen;
+
+  if (
+    !doc.fullscreenElement &&
+    !doc.mozFullScreenElement &&
+    !doc.webkitFullscreenElement &&
+    !doc.msFullscreenElement
+  ) {
+    requestFullScreen.call(docEl);
+  } else {
+    cancelFullScreen.call(doc);
+  }
+}
+
+document.addEventListener("dblclick", () => {
+  toggleFullScreen();
+});
diff --git a/index.html b/index.html
index 19a055d..7d22da3 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,7 @@
       <h2>Just a black web page</h2>
       <p>Created by <a href="https://kevinpy.com" target="_blank">Kevin Py</a> for <a href="https://pyxel.dev" target="_blank">Pyxel</a>.</p>
       <p>Find the repository on <a href="https://gitlab.com/pyxeldev/blackscreen" target="_blank">Gitlab</a>.</p>
+      <p>You can double-click anywhere on the page to cover your entire screen with black!</p>
       <p><a href="https://youtu.be/8H7mnObTScg" target="_blank">A 10 hours black screen video</a></p>
       <button class="modal-close modal-exit" autofocus>
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
@@ -48,8 +49,9 @@
     </div>
   </div>
   <div class="info" data-modal="modal-info">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info feather-info-hover"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
   </div>
   <script src="./modal.js" async defer></script>
+  <script src="./fullscreen.js" async defer></script>
 </body>
 </html>
diff --git a/modal.js b/modal.js
index fad4c50..691d2fb 100644
--- a/modal.js
+++ b/modal.js
@@ -1,15 +1,20 @@
-var modal = document.querySelector('[data-modal]');
+const modal = document.querySelector("[data-modal]");
 
-modal.addEventListener('click', function (event) {
+modal.addEventListener("click", function (event) {
   event.preventDefault();
-  var modalId = document.getElementById(modal.dataset.modal);
-  modalId.classList.add('open');
+  const modalId = document.getElementById(modal.dataset.modal);
+  modalId.classList.add("open");
 
-  var exits = modalId.querySelectorAll('.modal-exit');
+  var exits = modalId.querySelectorAll(".modal-exit");
   exits.forEach(function (exit) {
-    exit.addEventListener('click', function (event) {
+    exit.addEventListener("click", function (event) {
       event.preventDefault();
-      modalId.classList.remove('open');
+      modalId.classList.remove("open");
     });
   });
 });
+
+setTimeout(() => {
+  const featherInfo = document.getElementsByClassName("feather-info")[0];
+  featherInfo.classList.toggle("feather-info-hover");
+}, 3000);
diff --git a/style.css b/style.css
index 513e10c..e1575d0 100644
--- a/style.css
+++ b/style.css
@@ -73,3 +73,15 @@ html {
 .modal-container a {
   color: #fff;
 }
+
+.feather-info {
+  opacity: 0;
+  transition: opacity .5s ease-out;
+  -moz-transition: opacity .5s ease-out;
+  -webkit-transition: opacity .5s ease-out;
+  -o-transition: opacity .5s ease-out;
+}
+
+.feather-info-hover, .feather-info:hover {
+  opacity: 1;
+}
\ No newline at end of file