parent
0f05b96feb
commit
2f57b3d353
@ -0,0 +1,153 @@
|
||||
<% if(data){ %>
|
||||
<h1 class="continueTitle"> Continue</h1>
|
||||
<div class="chapterContainer">
|
||||
<div class="hideOverflow">
|
||||
<div class="boundry">
|
||||
<% for(let chapter of data){%>
|
||||
<div class="chapterCardWrapper" id="chapterCard_<%= chapter._id %>">
|
||||
<%if(chapter._id){ %>
|
||||
<span
|
||||
class="material-symbols-outlined removeChapter"
|
||||
hx-get="/removeChapter/<%= chapter._id %>"
|
||||
hx-trigger="click"
|
||||
hx-target="#chapterCard_<%= chapter._id %>"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
<%} else {%>
|
||||
<span
|
||||
class="material-symbols-outlined removeChapter accentColor"
|
||||
hx-get="/manga/<%= chapter.scanlator%>/<%=chapter.mangaLink %>/<%=chapter.title %>"
|
||||
hx-trigger="click"
|
||||
hx-target="#container"
|
||||
>
|
||||
arrow_outward
|
||||
</span>
|
||||
<%} %>
|
||||
<div
|
||||
class="card__overlay chapterCardOverlay"
|
||||
hx-get="/chapter/<%= chapter.scanlator %>/<%=chapter.link?encodeURIComponent(chapter.link):'nolink'%>/<%= chapter.title %>/<%= chapter.chapterNum %> "
|
||||
hx-target="#container"
|
||||
hx-indicator=".progress"
|
||||
hx-trigger="click"
|
||||
>
|
||||
<div class="chapterCard" id="chapterCard_<%= chapter._id %> ">
|
||||
<div class="imgContainer">
|
||||
<img class="chapterImage" src="<%= chapter.lastImageRead %>"/>
|
||||
</div>
|
||||
<div class="chapterInfo">
|
||||
|
||||
<h3 class="title"><%= chapter.title %> </h3>
|
||||
<h4 class="chapter"> Chapter • <%= chapter.chapterNum %> </h4>
|
||||
<h5 class="at"> Read • <%= chapter.imgReadOutOfTotal %> </h5>
|
||||
<div class="mangaImageContainer">
|
||||
<img class="mangaCoverImg" src="<%= chapter.mangaCoverImg %> "/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonContainer" id="buttonContainerchapters">
|
||||
<button class="prev-btn" onclick="handlePrev_chapters()"><span class="material-symbols-outlined chevron">
|
||||
chevron_left
|
||||
</span></button>
|
||||
<button class="next-btn" onclick="handleNext_chapters()"><span class="material-symbols-outlined chevron">
|
||||
chevron_right
|
||||
</span></button>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<script>
|
||||
clearVariables_chapters();
|
||||
|
||||
function clearVariables_chapters()
|
||||
{
|
||||
['cardsContainer_chapters',
|
||||
'cardsAmount_chapters',
|
||||
'cardWidth_chapters',
|
||||
'currentPosition_chapters',
|
||||
'maxPosition_chapters',
|
||||
'imageAmount_chapters',
|
||||
'imageOffSetWith_chapters',
|
||||
'carouselWidth_chapters',
|
||||
'gap_chapters',
|
||||
'cards_chapters',
|
||||
'lastCard_chapters',
|
||||
'lastCardBoundingRect_chapters',
|
||||
'nextButtonBoudingRect_chapters'].forEach((variable) =>
|
||||
{
|
||||
if (window.hasOwnProperty(variable))
|
||||
{
|
||||
delete window[variable];
|
||||
}
|
||||
});
|
||||
}
|
||||
try {
|
||||
var cardAmount_chapters = document.querySelectorAll('.chapterCard').length - 3;
|
||||
var cardWidth_chapters = document.querySelector('.chapterCard').offsetWidth;
|
||||
var currentPosition_chapters = 0;
|
||||
var maxPosition_chapters = - cardAmount_chapters;
|
||||
|
||||
|
||||
} catch (error) {
|
||||
clearVariables_chapters();
|
||||
var cardAmount_chapters = document.querySelectorAll('.chapterCard').length - 3;
|
||||
var cardWidth_chapters = document.querySelector('.chapterCard').offsetWidth;
|
||||
var currentPosition_chapters = 0;
|
||||
var maxPosition_chapters = - cardAmount_chapters;
|
||||
|
||||
}
|
||||
function needsChevrons_chapters()
|
||||
{
|
||||
let cardsContainer_chapters = document.querySelectorAll('.boundry')[0]
|
||||
let gap_chapters = parseFloat(window.getComputedStyle(cardsContainer_chapters).gap);
|
||||
let imageAmount_chapters = document.querySelectorAll('.chapterImage').length;
|
||||
let imageOffSetWith_chapters = document.querySelectorAll('.chapterImage')[0].offsetWidth+gap_chapters
|
||||
let carouselWidth_chapters = document.getElementById('buttonContainerchapters').offsetWidth;
|
||||
// console.log('Chevron check', carouselWidth_chapters,(imageAmount_chapters * imageOffSetWith_chapters),(imageAmount_chapters * imageOffSetWith_chapters) < carouselWidth_chapters)
|
||||
if ((imageAmount_chapters * imageOffSetWith_chapters) < carouselWidth_chapters)
|
||||
{
|
||||
return document.getElementById('buttonContainerchapters').classList.add('hidden');
|
||||
}
|
||||
document.getElementById('buttonContainerchapters').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Hiding button container if all cards fit in view
|
||||
window.addEventListener('resize', (event) =>
|
||||
{
|
||||
needsChevrons_chapters();
|
||||
});
|
||||
|
||||
|
||||
// Function to handle previous button click
|
||||
function handlePrev_chapters()
|
||||
{
|
||||
let cardsContainer_chapters = document.querySelector('.boundry');
|
||||
if (currentPosition_chapters == 0) return;
|
||||
currentPosition_chapters++;
|
||||
cardsContainer_chapters.style.transform = `translateX(${currentPosition_chapters*cardWidth_chapters}px)`;
|
||||
}
|
||||
|
||||
// Function to handle next button click
|
||||
function handleNext_chapters()
|
||||
{
|
||||
let cardsContainer_chapters = document.querySelector('.boundry');
|
||||
let cards_chapters = document.querySelectorAll('.chapterCard')
|
||||
let lastCard_chapters = cards_chapters[cards_chapters.length-1];
|
||||
let lastCardBoundingRect_chapters = lastCard_chapters.getBoundingClientRect();
|
||||
let nextButtonBoudingRect_chapters = document.querySelector('#buttonContainerchapters .next-btn').getBoundingClientRect();
|
||||
if((lastCardBoundingRect_chapters.x+lastCardBoundingRect_chapters.width)<nextButtonBoudingRect_chapters.x) return;
|
||||
if (currentPosition_chapters == maxPosition_chapters) return;
|
||||
currentPosition_chapters--;
|
||||
cardsContainer_chapters.style.transform = `translateX(${currentPosition_chapters*cardWidth_chapters}px)`;
|
||||
cards_chapters = document.querySelectorAll('.chapterCard')
|
||||
lastCard_chapters = cards_chapters[cards_chapters.length-1];
|
||||
lastCardBoundingRect_chapters = lastCard_chapters.getBoundingClientRect();
|
||||
nextButtonBoudingRect_chapters = document.querySelector('#buttonContainerchapters .next-btn').getBoundingClientRect();
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in new issue