From 36c1a116dc6370cb572675c3a30a8dc8da2842d4 Mon Sep 17 00:00:00 2001
From: Redume <Danilivasenko09@gmail.com>
Date: Sat, 3 Dec 2022 17:48:11 +0300
Subject: [PATCH] Added blur and shimmer effect for image loading

---
 web/static/scripts/gallery.js | 30 +++++++++++++++++++++++++-----
 web/static/style/gallery.css  | 26 +++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js
index 2ad6bfa..d2f98b9 100644
--- a/web/static/scripts/gallery.js
+++ b/web/static/scripts/gallery.js
@@ -48,7 +48,7 @@ function wallpaper(data) {
             $(".header-row").append(`
                 <div class="card">
                     <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
-                        <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" id="${id}">
+                        <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top shimmer" id="${id}">
                     </a>
                 </div>
         `);
@@ -59,7 +59,7 @@ function wallpaper(data) {
                     <img src="http://localhost:3000/static/image/placeholder.png" 
                         data-src="https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg"
                         alt="${ids[id]['title']}" 
-                        class="card-img-top" 
+                        class="card-img-top shimmer" 
                         id="${id}"> 
                 </a>
             </div>
@@ -67,6 +67,11 @@ function wallpaper(data) {
         }
     }
 
+    //if all images are loaded delete class
+    $(".card-img-top").on("load", function() {
+        $(this).removeClass("shimmer");
+    });
+
 
     let button_modal = document.querySelector(".header-row");
     button_modal.addEventListener("click", function (event) {
@@ -93,16 +98,17 @@ function wallpaper(data) {
         }
 
         let setWallpaper = document.querySelector("#setWallpaper");
-
         ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
 
+        let explanation = ids[id]['explanation'].length > 200 ? ids[id]['explanation'].slice(0, 200) + "..." : ids[id]['explanation'];
         if (ids[id]['media_type'] === "image") {
             title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             img.innerHTML = `
                 <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
                 <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
                 <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
-                <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
+                <p><strong>Explanation:</strong> ${explanation}</p>
+                <button type="button" class="show-more btn btn-primary" id="show-more">Show more</button>
             `;
 
             setWallpaper.addEventListener("click", function () {
@@ -120,13 +126,27 @@ function wallpaper(data) {
                 
                 <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
                 <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
-                <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
+                <p><strong>Explanation:</strong> ${explanation}</p>
+                <button type="button" class="show-more btn btn-primary" id="show-more">Show more</button>
             `;
 
             setWallpaper.addEventListener("click", function () {
                 wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`);
             });
         }
+
+
+        let showMore = document.querySelector("#show-more");
+        showMore.addEventListener("click", function () {
+            let explanation = document.querySelector(".modal-body p:nth-child(4)");
+            if(showMore.innerHTML === "Show more") {
+                explanation.innerHTML = `<strong>Explanation:</strong> ${ids[id]['explanation']}`;
+                showMore.innerHTML = "Show less";
+            } else {
+                explanation.innerHTML = explanation.innerHTML.slice(0, 200) + "...";
+                showMore.innerHTML = "Show more";
+            }
+        });
     });
 
     $(window).scroll(function () {
diff --git a/web/static/style/gallery.css b/web/static/style/gallery.css
index 09d106d..7787ef0 100644
--- a/web/static/style/gallery.css
+++ b/web/static/style/gallery.css
@@ -29,13 +29,33 @@ lottie-player {
     margin: 0 auto;
 }
 
-.modal-body,
-.modal-footer,
-.modal-header {
+.modal-content {
     background-color: #212529;
     color: white;
 }
 
+.shimmer {
+    display: inline-block;
+    color: grey;
+    -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/370% 100%;
+    background-repeat: no-repeat;
+    animation: shimmer 2.5s infinite;
+    filter: blur(50px)
+}
+
+@keyframes shimmer {
+    100% {-webkit-mask-position: left}
+}
+
+#show-more {
+    background-color: #212529;
+    color: white;
+    border: none;
+    border-radius: 16px;
+    padding: 10px;
+    margin: 10px;
+}
+
 .modal-body p {
     font-family: 'Roboto', sans-serif;
     margin-top: 16px;