Display preview

lib.js

@@ -407,7 +407,17 @@ exports.isValidID = (id) =>
 {
     return mongoose.Types.ObjectId.isValid(id);
 }
-
+/**
+ * 
+ * @param {String} cookie 
+ * @param {String} name 
+ * @returns 
+ */
+exports.cookieParser = (cookie, name)=>
+{
+    if(!cookie.includes(name)) return null
+    return cookie.split(name+'=')[1].split(';')[0];
+}
 /**
  * @argument {Response} res - Response: express response object.
  * @argument {String} name - Name of the cookie.
@@ -466,13 +476,3 @@ exports.Crypto = class Crypto
         return Math.floor(Math.random() * (max - min)) + min;
     }
 }
-/**
- * 
- * @param {String} cookie 
- * @param {String} name 
- * @returns 
- */
-exports.cookieParser = (cookie, name)=>
-{
-    return cookie.split(name+'=')[1].split(';')[0];
-}

public/css/home.css

@@ -438,7 +438,7 @@ button:hover
 }
 .chapterNavButton
 {
-  background-color: var(--purple-heart-400-50);
+  background-color: var(--purple-heart-500-25);
   width: 100px;
   height: 30px;
   border: 2px solid var(--accent);
@@ -840,7 +840,7 @@ button:hover
 }
 .spacer
 {
-  width: 25%;
+  width: 0%;
 }
 .chapterOverview
 {
@@ -896,4 +896,10 @@ button:hover
   height: auto;
   border: 0 solid transparent;
   border-radius: 5px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.flexBox > .inView
+{
+  border: 3px solid var(--accent);
 }

views/display.ejs

@@ -1,12 +1,12 @@
 
 <div class="chapterOverview" id="chapterOverview">
     <div class="flexBox" id="flexBox">
-        <% for(var img of data.List){ %>
-            <img class="overview" src=<%= img.replaceAll(' ','%20') %>  />    
+        <% for(var [index, img] of data.List.entries()){ %>
+            <img class="overview" id="img<%= index %>" src=<%= img.replaceAll(' ','%20') %> onclick="_scrollTo('<%= '_img'+index%>')"  />    
         <% } %> 
     </div>
     <div class="expand" onclick="toggle()">
-        <span class="material-symbols-outlined" id="expandChevron">chevron_left</span>
+        <span class="material-symbols-outlined" id="expandChevron">chevron_right</span>
     </div>
 </div>
 <div class="wrapperReaderBox">
@@ -23,8 +23,8 @@
         </div>
         <button class="pullBackUp" onclick="pullUp()"> <span class="material-symbols-outlined chevronUp">expand_less</span></button>
         <div id="display">
-            <% for(var img of data.List){ %>
-                <img src=<%= img.replaceAll(' ','%20') %>  /> 
+            <% for(var [index, img] of data.List.entries()){ %>
+                <img id="_img<%= index %>" src=<%= img.replaceAll(' ','%20') %>  alt="img<%= index %>"/> 
             <% } %> 
             <div id="last-image" 
             hx-post="/chapterRead/<%= data.scanlator %>/<%= encodeURIComponent(data.mangaLink)%>/<%= data.title %>/<%= data.chapterNum %>"
@@ -44,29 +44,59 @@
 </div>
 <script>
     clearVariables();
+    handleInView();
+    function clearVariables()
+    {
+        [   'lastImage',
+            'observer',
+            'flexBox',
+            'chapterOverview',
+            'chevron',
+            'spacer',
+            'preview',
+            'elements',
+            'windowHeight',
+            'bounding',
+            'element',
+            'elementId'
+        ].forEach((variable) =>
+            {
+                if (window.hasOwnProperty(variable)) 
+                {
+                    delete window[variable];
+                }
+            });
+    }
+
+
     function pullUp()
     {
         window.scrollTo({ top: 0, behavior: 'smooth' })
     }
-    window.addEventListener('scroll', function() {
-        var elements = document.querySelectorAll('.your-element-class'); // Replace '.your-element-class' with the class of the elements you want to check
-        var windowHeight = window.innerHeight;
+    function _scrollTo(elementId)
+    {
+        document.getElementById(elementId).scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+        });
+    }
 
-        elements.forEach(function(element) {
+    window.addEventListener('scroll', handleInView);
+    function handleInView()
+    {
+        var elements = document.querySelectorAll('#display img'); // Replace '.your-element-class' with the class of the elements you want to check
+        var windowHeight = window.innerHeight;
+        elements.forEach((element)=>
+        {
             var bounding = element.getBoundingClientRect();
 
-            if (
-                bounding.top >= 0 &&
-                bounding.bottom <= windowHeight
-            ) {
-                // Element is in view
-                console.log(element.textContent + ' is in view.');
-            } else {
-                // Element is not in view
-                console.log(element.textContent + ' is not in view.');
+            if (bounding.top<windowHeight && (bounding.top + bounding.height) > windowHeight) 
+            {
+                if(document.querySelector('.inView')) document.querySelector('.inView').classList.remove('inView');
+                document.getElementById(element.alt).classList.add('inView');
             }
         });
-    });
+    };
     function toggle()
     {
         let flexBox = document.getElementById('flexBox');
@@ -114,23 +144,7 @@
         if(!document.cookie) return '';
         return document.cookie.split(name+'=')[1].split(';')[0];
     }
-    function clearVariables()
-    {
-        [   'lastImage',
-            'observer',
-            'flexBox',
-            'chapterOverview',
-            'chevron',
-            'spacer',
-            'preview',
-        ].forEach((variable) =>
-            {
-                if (window.hasOwnProperty(variable)) 
-                {
-                    delete window[variable];
-                }
-            });
-    }
+
     function hasFinished()
     {
         const lastImage = document.getElementById('last-image');
@@ -147,23 +161,15 @@
     function checkPreview()
     {
         let preview = getCookie('preview');
-        console.log(preview, preview == 'preview')
         if(preview=='preview') return openPreview();
         return closePreview();
     }
-    function imageInView()
-    {
-
-    }
-
     try {
         hasFinished();
-        imageInView();
         checkPreview();
     } catch (error) {
         clearVariables();
         hasFinished();
-        imageInView();
         checkPreview();
     }
 </script>