Feat: Chapter ShortCuts: First, Continue and Last

master
masterhc 1 year ago
parent 8a857924b6
commit 5bdab02aea

@ -118,9 +118,21 @@ exports.manga = async (req, res)=>
{ {
for(let j = 0; j<chaptersRead.length; j++) 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) catch (error)
{ {

@ -444,7 +444,22 @@ button:hover
margin-left: 10%; margin-left: 10%;
gap:5px; 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: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
@ -458,7 +473,7 @@ button:hover
{ {
border-color: var(--border-hover); border-color: var(--border-hover);
} }
.list > .chapterButton > a .chapterButton > a
{ {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -473,8 +488,8 @@ button:hover
justify-content: center; justify-content: center;
height:100% height:100%
} }
.list > .chapterButton > a >.buttonWrapper > div > h4 , .chapterButton > a >.buttonWrapper > div > h4 ,
.list > .chapterButton > a >.buttonWrapper > div > h5 .chapterButton > a >.buttonWrapper > div > h5
{ {
margin: 0; margin: 0;
} }
@ -482,10 +497,14 @@ button:hover
{ {
height:auto; height:auto;
width:auto; width:auto;
color:var(--text); color: var(--purple-heart-400);
position: relative; position: relative;
left: 0.7em; left: 0.7em;
} }
.readMarkerComplete
{
color:var(--text);
}
.infoCard > .infoText > .tags .infoCard > .infoText > .tags
{ {
display:flex; display:flex;

@ -2,7 +2,7 @@
<a href="/chapter/<%=scanlator %>/<%=encodeURIComponent(chapter.link)%>/<%= title %>/<%= chapter.num %>" > <a href="/chapter/<%=scanlator %>/<%=encodeURIComponent(chapter.link)%>/<%= title %>/<%= chapter.num %>" >
<div class="buttonWrapper"> <div class="buttonWrapper">
<% if(chapter.Read){ %> <% if(chapter.Read){ %>
<span class="material-symbols-outlined readMarker"> <span class="material-symbols-outlined readMarker <%= chapter.completely?'readMarkerComplete fill':'' %> ">
beenhere beenhere
</span> </span>
<% } %> <% } %>

@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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> <title>Manga Reader</title>
<link rel="stylesheet" type="text/css" href="/css/home.css" id="pagesheet"/> <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" /> <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" />

@ -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>

@ -51,6 +51,7 @@
</div> </div>
<script> <script>
checkPreview(); checkPreview();
hasFinished()
document.getElementById('lastImageRecordedAsRead').addEventListener('htmx:load', (event) => document.getElementById('lastImageRecordedAsRead').addEventListener('htmx:load', (event) =>
{ {
let link = event.target.outerHTML.split('"')[1]; let link = event.target.outerHTML.split('"')[1];
@ -159,6 +160,7 @@
{ {
if (entries[0].isIntersecting) if (entries[0].isIntersecting)
{ {
console.log('On the last image')
lastImage.click(); lastImage.click();
} }
}); });

@ -19,8 +19,11 @@
</div> </div>
</div> </div>
<br> <br>
<%- include('chapterShortcutButtonRow.ejs', {...data}) %>
<div class="list"> <div class="list">
<% data.List.forEach(chapter=>{%> <% data.List.forEach(chapter=>{%>
<%- include('chapterButton.ejs', {chapter, scanlator:data.scanlator, title:data.title}) %> <%- include('chapterButton.ejs', {chapter, scanlator:data.scanlator, title:data.title}) %>
<% }) %> <% }) %>
</div> </div>

Loading…
Cancel
Save