mangaReader/views/searchCarousel.ejs

<div class="carousel">
    <% let scanlatorID = scan.scanlator.replace('-', '') %> 
    <div class="cards-container cards-container_<%=scanlatorID%>">
        <% scan.Results.forEach(result=>{%>
            <%- include('searchCards.ejs', {result, scanlator:scan.scanlator}) %>
        <% }) %> 
    </div>
    <div class="buttonContainer" id="buttonContainer<%= scanlatorID %>">
        <button class="prev-btn" onclick="handlePrev_<%= scanlatorID %>()"><span class="material-symbols-outlined chevron">
            chevron_left
            </span></button>
        <button class="next-btn" onclick="handleNext_<%= scanlatorID %>()"><span class="material-symbols-outlined chevron">
            chevron_right
            </span></button>
    </div>
</div>

<script>

    clearVariables_<%= scanlatorID %>();
    needsChevrons_<%= scanlatorID %>();  
    
    function clearVariables_<%= scanlatorID %>() 
    {
        ['cardsContainer_<%= scanlatorID %>',
        'cardsAmount_<%= scanlatorID %>',
        'cardWidth_<%= scanlatorID %>', 
        'currentPosition_<%= scanlatorID %>', 
        'maxPosition_<%= scanlatorID %>',
        'imageAmount_<%= scanlatorID %>',
        'imageOffSetWith_<%= scanlatorID %>',
        'carouselWidth_<%= scanlatorID %>',
        'gap_<%= scanlatorID %>',
        'cards_<%= scanlatorID %>',
        'lastCard_<%= scanlatorID %>',
        'lastCardBoundingRect_<%= scanlatorID %>',
        'nextButtonBoudingRect_<%= scanlatorID %>'].forEach((variable) =>
        {
            if (window.hasOwnProperty(variable)) 
            {
                delete window[variable];
            }
        });

   
    }
    // Initializing variables
    try {
        var cardAmount_<%= scanlatorID %> = document.querySelectorAll('.cards-container_<%=scanlatorID %> .card').length - 3;
        var cardWidth_<%= scanlatorID %> = document.querySelector('.cards-container_<%=scanlatorID %> .card').offsetWidth;
        var currentPosition_<%= scanlatorID %> = 0;
        var maxPosition_<%= scanlatorID %> = - cardAmount_<%= scanlatorID %>;
 
        
    } catch (error) {
        clearVariables_<%= scanlatorID %>();
        var cardAmount_<%= scanlatorID %> = document.querySelectorAll('.cards-container_<%=scanlatorID %> .card').length - 3;
        var cardWidth_<%= scanlatorID %> = document.querySelector('.cards-container_<%=scanlatorID %> .card').offsetWidth;
        var currentPosition_<%= scanlatorID %> = 0;
        var maxPosition_<%= scanlatorID %> = - cardAmount_<%= scanlatorID %>;
       
    }
    function needsChevrons_<%= scanlatorID %>()
    {
        let cardsContainer_<%= scanlatorID %> = document.querySelectorAll('.cards-container_<%= scanlatorID %>')[0]
        let gap_<%= scanlatorID %> = parseFloat(window.getComputedStyle(cardsContainer_<%= scanlatorID %>).gap);
        let imageAmount_<%= scanlatorID %> = document.querySelectorAll('.img_<%= scanlatorID %>').length;
        let imageOffSetWith_<%= scanlatorID %> = document.querySelectorAll('.img_<%= scanlatorID %>')[0].offsetWidth+gap_<%= scanlatorID %>
        let carouselWidth_<%= scanlatorID %> = document.getElementById('buttonContainer<%= scanlatorID %>').offsetWidth;
        // console.log('Chevron check', carouselWidth_<%= scanlatorID %>,(imageAmount_<%= scanlatorID %> * imageOffSetWith_<%= scanlatorID %>),(imageAmount_<%= scanlatorID %> * imageOffSetWith_<%= scanlatorID %>) < carouselWidth_<%= scanlatorID %>)
        if ((imageAmount_<%= scanlatorID %> * imageOffSetWith_<%= scanlatorID %>) < carouselWidth_<%= scanlatorID %>) 
        {
            return document.getElementById('buttonContainer<%= scanlatorID %>').classList.add('hidden');
        }
        document.getElementById('buttonContainer<%= scanlatorID %>').classList.remove('hidden');
    }
    
    // Hiding button container if all cards fit in view        
    window.addEventListener('resize', (event) =>
    {
        needsChevrons_<%= scanlatorID %>();
    });
    

        // Function to handle previous button click
    function handlePrev_<%= scanlatorID %>() 
    {
        let cardsContainer_<%= scanlatorID %> = document.querySelector('.cards-container_<%=scanlatorID %>');
        if (currentPosition_<%= scanlatorID %> == 0) return;
        currentPosition_<%= scanlatorID %>++;
        cardsContainer_<%= scanlatorID %>.style.transform = `translateX(${currentPosition_<%= scanlatorID %>*cardWidth_<%= scanlatorID %>}px)`;
    }

        // Function to handle next button click
    function handleNext_<%= scanlatorID %>() 
    {
        let cardsContainer_<%= scanlatorID %> = document.querySelector('.cards-container_<%= scanlatorID %>');
        let cards_<%= scanlatorID %> = document.querySelectorAll('.cards-container_<%= scanlatorID %>  .card')
        let lastCard_<%= scanlatorID %> = cards_<%= scanlatorID %>[cards_<%= scanlatorID %>.length-1];
        let lastCardBoundingRect_<%= scanlatorID %> = lastCard_<%= scanlatorID %>.getBoundingClientRect();
        let nextButtonBoudingRect_<%= scanlatorID %> = document.querySelector('#buttonContainer<%= scanlatorID %>  .next-btn').getBoundingClientRect();
        if((lastCardBoundingRect_<%= scanlatorID %>.x+lastCardBoundingRect_<%= scanlatorID %>.width)<nextButtonBoudingRect_<%= scanlatorID %>.x) return;
        if (currentPosition_<%= scanlatorID %> == maxPosition_<%= scanlatorID %>) return;
        currentPosition_<%= scanlatorID %>--;
        cardsContainer_<%= scanlatorID %>.style.transform = `translateX(${currentPosition_<%= scanlatorID %>*cardWidth_<%= scanlatorID %>}px)`;
        cards_<%= scanlatorID %> = document.querySelectorAll('.cards-container_<%= scanlatorID %>  .card')
        lastCard_<%= scanlatorID %> = cards_<%= scanlatorID %>[cards_<%= scanlatorID %>.length-1];
        lastCardBoundingRect_<%= scanlatorID %> = lastCard_<%= scanlatorID %>.getBoundingClientRect();
        nextButtonBoudingRect_<%= scanlatorID %> = document.querySelector('#buttonContainer<%= scanlatorID %>  .next-btn').getBoundingClientRect();
    }
    
</script>