mangaReader/views/chaptersToContinue.ejs

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