mangaReader/views/display.ejs

<div class="chapterOverview" id="chapterOverview">
    <div class="flexBox" id="flexBox">
        <% for(var [index, img] of data.List.entries()){ %>
            <img class="overview" id="img<%= index %>" src=<%= img.replaceAll(' ','%20') %> onclick="_scrollTo('<%= '_img'+index%>')"  />    
        <% } %> 
    </div>
    <div class="expand" onclick="toggle()">
        <span class="material-symbols-outlined" id="expandChevron">chevron_right</span>
    </div>
</div>
<div class="wrapperReaderBox">
    <div class="spacer" id="spacer"></div>
    <div class="readerDisplay">

        <div class="chapterNav" 
            hx-get="/chapternavinfo/<%= data.scanlator %>/<%= encodeURIComponent(data.mangaLink)%>/<%= data.title %>/<%= data.chapterNum %>"
            hx-trigger="load"
            hx-target="this"
            hx-swap="outerHTML"
            hx-indicator=".progress"
            >
        </div>
        <button class="pullBackUp" onclick="pullUp()"> <span class="material-symbols-outlined chevronUp">expand_less</span></button>
        <div id="display">
            <% for(var [index, img] of data.List.entries()){ %>
                <img id="_img<%= index %>" src=<%= img.replaceAll(' ','%20') %>  alt="img<%= index %>"/> 
            <% } %> 
            <div id="last-image" 
            hx-post="/chapterRead/<%= data.scanlator %>/<%= encodeURIComponent(data.mangaLink)%>/<%= data.title %>/<%= data.chapterNum %>"
            hx-swap="none"
            ></div>
        </div>
        <div class="chapterNav " 
            hx-get="/chapternavinfo/<%= data.scanlator %>/<%= encodeURIComponent(data.mangaLink)%>/<%= data.title %>/<%= data.chapterNum %>"
            hx-trigger="load"
            hx-target="this"
            hx-swap="outerHTML"
            hx-indicator=".progress"
            >
        </div>
    </div>

</div>
<script>
    clearVariables();
    handleInView();
    function clearVariables()
    {
        [   'lastImage',
            'observer',
            'flexBox',
            'chapterOverview',
            'chevron',
            'spacer',
            'preview',
            'elements',
            'windowHeight',
            'bounding',
            'element',
            'elementId'
        ].forEach((variable) =>
            {
                if (window.hasOwnProperty(variable)) 
                {
                    delete window[variable];
                }
            });
    }


    function pullUp()
    {
        window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    function _scrollTo(elementId)
    {
        document.getElementById(elementId).scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }

    window.addEventListener('scroll', handleInView);
    function handleInView()
    {
        var elements = document.querySelectorAll('#display img'); // Replace '.your-element-class' with the class of the elements you want to check
        var windowHeight = window.innerHeight;
        elements.forEach((element)=>
        {
            var bounding = element.getBoundingClientRect();

            if (bounding.top<windowHeight && (bounding.top + bounding.height) > windowHeight) 
            {
                if(document.querySelector('.inView')) document.querySelector('.inView').classList.remove('inView');
                document.getElementById(element.alt).classList.add('inView');
            }
        });
    };
    function toggle()
    {
        let flexBox = document.getElementById('flexBox');
        if( flexBox.style.display!='none') return closePreview();
        return openPreview();

    }
    function openPreview()
    {
        let flexBox = document.getElementById('flexBox');
        let chapterOverview = document.getElementById('chapterOverview');
        let chevron = document.getElementById('expandChevron');
        let spacer = document.getElementById('spacer');
        flexBox.style.display='flex';
        chevron.innerText='chevron_left';
        chapterOverview.style.width = '25vw';
        spacer.style.width = '25%';
        setCookie("preview", "preview", 1)
    }

    function closePreview()
    {
        let flexBox = document.getElementById('flexBox');
        let chapterOverview = document.getElementById('chapterOverview');
        let chevron = document.getElementById('expandChevron');
        let spacer = document.getElementById('spacer');
        flexBox.style.display = 'none';
        chevron.innerText='chevron_right';
        chapterOverview.style.width = '1vw';
        spacer.style.width = '0%';
        setCookie("preview", "dontpreview", 1)
    }
    function setCookie(name, value, days) 
    {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }
    function getCookie(name)
    {
        if(!document.cookie) return '';
        return document.cookie.split(name+'=')[1].split(';')[0];
    }

    function hasFinished()
    {
        const lastImage = document.getElementById('last-image');
        
        const observer = new IntersectionObserver(entries => 
        {
            if (entries[0].isIntersecting) 
            {
                lastImage.click();
            }
        });
        observer.observe(lastImage);
    }
    function checkPreview()
    {
        let preview = getCookie('preview');
        if(preview=='preview') return openPreview();
        return closePreview();
    }
    try {
        hasFinished();
        checkPreview();
    } catch (error) {
        clearVariables();
        hasFinished();
        checkPreview();
    }
</script>