From 96bcd73a0ef4dcb657be6db7e7c515ea58ea2ddb Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 6 Sep 2024 14:39:21 +0200
Subject: [PATCH] add image fade in

---
 assets/css/src/generic.css | 14 ++++++++++++++
 assets/js/functions.js     | 16 +++++++++++++++-
 assets/js/script.js        | 13 ++++++++++++-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index 0a29d5c..57ab558 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -187,3 +187,17 @@
 .event-card:hover .image-cover {
   opacity: 0;
 }
+
+img,
+picture svg.hide {
+  opacity: 0;
+}
+picture.hide {
+  background-color: transparent;
+}
+img {
+  transition: var(--transition-image-opacity);
+}
+img.show {
+  opacity: 1;
+}
diff --git a/assets/js/functions.js b/assets/js/functions.js
index 6af70c6..550437c 100644
--- a/assets/js/functions.js
+++ b/assets/js/functions.js
@@ -21,4 +21,18 @@ function closeNav(nodes) {
   nodes.main.removeEventListener("click", handleClick);
 }
 
-export { expandNav, closeNav };
+function show(image) {
+  image.classList.add("show");
+  let svg;
+  try {
+    if ((svg = image.nextElementSibling)) {
+      svg.classList.add("hide");
+      image.parentNode.classList.add("hide");
+    }
+  } catch (error) {
+    console.log(error);
+    console.log(image);
+  }
+}
+
+export { expandNav, closeNav, show };
diff --git a/assets/js/script.js b/assets/js/script.js
index 8b3e64d..c607b9d 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,4 +1,4 @@
-import { expandNav, closeNav } from "./functions.js";
+import { expandNav, closeNav, show } from "./functions.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   // Variables
@@ -10,6 +10,7 @@ document.addEventListener("DOMContentLoaded", () => {
     footer: document.querySelector(".main-footer"),
     nav: document.querySelector(".main-nav"),
     jsLinks: document.querySelectorAll(".js-link"),
+    images: document.querySelectorAll("img"),
   };
 
   // Listeners
@@ -20,6 +21,16 @@ document.addEventListener("DOMContentLoaded", () => {
     jsLink.addEventListener("click", () => (location.href = to));
   });
 
+  nodes.images.forEach((image) => {
+    if (image.complete) {
+      show(image);
+    } else {
+      image.addEventListener("load", () => {
+        show(image);
+      });
+    }
+  });
+
   // Key shortcuts
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {