Feat: Chapter ShortCuts: First, Continue and Last

12 months ago · 5bdab02aea
parent 8a857924b6
commit 5bdab02aea
7 changed files with 62 additions and 9 deletions
--- a/controllers/api.js
+++ b/controllers/api.js
@ -118,9 +118,21 @@ exports.manga = async (req, res)=>
        {
            for(let j = 0; j<chaptersRead.length; j++)
            {
-                if(manga.List[i].num==chaptersRead[j].chapterNum) manga.List[i]['Read'] = true;
+                if(manga.List[i].num==chaptersRead[j].chapterNum)
+                {
+                    manga.List[i]['completely'] = chaptersRead[j].completely
+                    manga.List[i]['Read'] = true;
+                }
            }
        }
+        const filteredArray = chaptersRead.filter(item => item.completely == true);
+        filteredArray.sort((a, b) => a.chapterNum - b.chapterNum);
+        const lastCompletelyRead = filteredArray.pop();
+        const sortedChapters = chaptersRead.sort((a, b) => a.chapterNum - b.chapterNum);
+        const sortedAndFilteredChapters = sortedChapters.filter(item=> item.lastImageRead && !item.completely);
+        const lastChapterWithReadImages=sortedAndFilteredChapters.shift();
+        const chapterNumToContinue = lastCompletelyRead?(lastCompletelyRead.chapterNum < lastChapterWithReadImages.chapterNum ? lastChapterWithReadImages.chapterNum:lastCompletelyRead.chapterNum):lastChapterWithReadImages.chapterNum;
+        manga.List[chapterNumToContinue-1]['continue'] = true;
    }
    catch (error) 
    {
--- a/public/css/home.css
+++ b/public/css/home.css
@ -444,7 +444,22 @@ button:hover
  margin-left: 10%;
  gap:5px;
 }
-.list > .chapterButton
+.shortcutWrapper
+{
+  width: 80%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  border: 3px solid var(--border);
+  background-color: var(--bg);
+  border-radius: 15px;
+  margin-left: 10%;
+  gap: 5px;
+  margin-bottom: 1em;
+  text-align: center;
+}
+.chapterButton
 {
  border: 2px solid var(--border);
  border-radius: 15px;
@ -458,7 +473,7 @@ button:hover
 {
  border-color: var(--border-hover);  
 }
-.list > .chapterButton > a
+.chapterButton > a
 {
  text-align: center;
  text-decoration: none;
@ -473,8 +488,8 @@ button:hover
  justify-content: center;
  height:100%
 }
-.list > .chapterButton  > a >.buttonWrapper > div >  h4 , 
-.list > .chapterButton > a >.buttonWrapper > div > h5
+.chapterButton  > a >.buttonWrapper > div >  h4 , 
+.chapterButton > a >.buttonWrapper > div > h5
 {
  margin: 0;  
 }
@ -482,10 +497,14 @@ button:hover
 {
  height:auto;
  width:auto;
-  color:var(--text);
+  color: var(--purple-heart-400);
  position: relative;
  left: 0.7em;
 }
+.readMarkerComplete
+{
+  color:var(--text);
+}
 .infoCard > .infoText > .tags
 {
  display:flex;
--- a/views/chapterButton.ejs
+++ b/views/chapterButton.ejs
@ -2,7 +2,7 @@
    <a href="/chapter/<%=scanlator %>/<%=encodeURIComponent(chapter.link)%>/<%= title %>/<%= chapter.num %>" >
        <div class="buttonWrapper">
            <% if(chapter.Read){ %>
-                <span class="material-symbols-outlined readMarker">
+                <span class="material-symbols-outlined readMarker <%= chapter.completely?'readMarkerComplete fill':'' %> ">
                beenhere
                </span>
            <%  } %> 
--- a/views/chapterPage.ejs
+++ b/views/chapterPage.ejs
@ -3,7 +3,7 @@
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <link rel="icon" type="image/ico" href="images/favicon.ico"/>
+  <link rel="icon" type="image/ico" href="/images/favicon.ico"/>
  <title>Manga Reader</title>
  <link rel="stylesheet" type="text/css" href="/css/home.css" id="pagesheet"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
--- a/views/chapterShortcutButtonRow.ejs
+++ b/views/chapterShortcutButtonRow.ejs
@ -0,0 +1,17 @@
+<div class="shortcutWrapper">
+    <div>
+        <p> First:</p>
+        <%- include('chapterButton.ejs', {chapter:List[0], scanlator, title})  %> 
+    </div>
+
+    <%for(let i = 0; i<List.length; i++){if(List[i].continue) { %>
+        <div>
+            <p> Continue:</p>
+            <%- include('chapterButton.ejs', {chapter:List[i], scanlator, title}) %> 
+        </div>
+    <%}}%> 
+    <div>
+        <p>Last:</p>
+        <%- include('chapterButton.ejs', {chapter:List[List.length-1],}) %> 
+    </div>
+</div>
--- a/views/display.ejs
+++ b/views/display.ejs
@ -51,6 +51,7 @@
 </div>
 <script>
    checkPreview();
+    hasFinished()
    document.getElementById('lastImageRecordedAsRead').addEventListener('htmx:load', (event) =>
    {
        let link = event.target.outerHTML.split('"')[1];
@ -159,6 +160,7 @@
        {
            if (entries[0].isIntersecting) 
            {
+                console.log('On the last image')
                lastImage.click();
            }
        });
--- a/views/mangaPage.ejs
+++ b/views/mangaPage.ejs
@ -19,8 +19,11 @@
    </div>
 </div>
 <br>
+
+<%- include('chapterShortcutButtonRow.ejs', {...data}) %> 
 <div class="list">
    <% data.List.forEach(chapter=>{%>
        <%- include('chapterButton.ejs', {chapter, scanlator:data.scanlator, title:data.title}) %> 
    <% }) %> 
-</div>
+</div>
+