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.startsWith('.')?img.replace('.','').replaceAll(' ', '%20'):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 
                    class="_<%= img.split('.')[img.split('.').length-2].split('/')[img.split('.')[img.split('.').length-2].split('/').length-1]%>" 
                    id="_img<%= index %>" 
                    src=<%=img.startsWith('.')?img.replace('.','').replaceAll(' ', '%20'):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
        id="lastImageRecordedAsRead"
        hx-get=  "/chapterReadLastImage/<%=data.scanlator %>/<%=encodeURIComponent(data.mangaLink)%>/<%=data.title%>/<%=data.chapterNum%>""
        hx-trigger="load" 
        hx-indicator=".progress"
    >   
    </div>

</div>
<script>
    checkPreview();
    document.getElementById('lastImageRecordedAsRead').addEventListener('htmx:load', (event) =>
    {
        if(hasFinished()) return
        let link = event.target.outerHTML.split('"')[1];
        let aux = link.split('.')[link.split('.').length-2].split('/');
        let id = '_'+aux[aux.length-1];
        const elements = document.getElementsByClassName(id);
        for(let i = 0; i<elements.length; i++)
        {
            elements[i].scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });    
        }
    });
    handleInView();
    function pullUp()
    {
        window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    function _scrollTo(elementId, where='start')
    {
        document.getElementById(elementId).scrollIntoView({
            behavior: 'smooth',
            block: where
        });
    }

    window.addEventListener('scroll', handleInView);
    function handleInView()
    {
        var elements = document.querySelectorAll('#display img'); 
        var windowHeight = window.innerHeight;
        for(let i = 0; i<elements.length; i++)
        {
            var bounding = elements[i].getBoundingClientRect();
            if (bounding.top<windowHeight && (bounding.top + bounding.height) > windowHeight) 
            {
                if(document.querySelector('.inView'))
                {
                    if(document.querySelector('.inView').id != elements[i].id.split('_')[1])
                    {
                        fetch(window.location.origin+`/chapterRead/<%= data.scanlator %>/<%= encodeURIComponent(data.mangaLink)%>/<%= data.title %>/<%= data.chapterNum %>/${elements[i].classList[0].split('_')[1]}`, {method:'post', cache:"no-cache"})
                        .then(res=>console.log('Lastread Update'))
                        .catch(err=>console.log('Lastread Update Failed'));
                    }
                    document.querySelector('.inView').classList.remove('inView');
                }
                document.getElementById(elements[i].alt).classList.add('inView');
                _scrollTo(elements[i].alt, 'end');
            }
        }
    };
    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) 
            {
                console.log('On the last image')
                lastImage.click();
            }
        });
        console.log(observer)
        observer.observe(lastImage);
    }
    function checkPreview()
    {
        let preview = getCookie('preview');
        if(preview=='preview') return openPreview();
        return closePreview();
    }
   
</script>