mangaReader/views/display.ejs

<div class="chapterOverview" id="chapterOverview">
    <div class="flexBox" id="flexBox">
        <% for(var img of data.List){ %>
            <img class="overview" src=<%= img.replaceAll(' ','%20') %>  />    
        <% } %> 
    </div>
    <div class="expand" onclick="toggle()">
        <span class="material-symbols-outlined" id="expandChevron">chevron_left</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 img of data.List){ %>
                <img src=<%= img.replaceAll(' ','%20') %>  /> 
            <% } %> 
            <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();
    function pullUp()
    {
        window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    window.addEventListener('scroll', function() {
        var elements = document.querySelectorAll('.your-element-class'); // Replace '.your-element-class' with the class of the elements you want to check
        var windowHeight = window.innerHeight;

        elements.forEach(function(element) {
            var bounding = element.getBoundingClientRect();

            if (
                bounding.top >= 0 &&
                bounding.bottom <= windowHeight
            ) {
                // Element is in view
                console.log(element.textContent + ' is in view.');
            } else {
                // Element is not in view
                console.log(element.textContent + ' is not in view.');
            }
        });
    });
    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 clearVariables()
    {
        [   'lastImage',
            'observer',
            'flexBox',
            'chapterOverview',
            'chevron',
            'spacer',
            'preview',
        ].forEach((variable) =>
            {
                if (window.hasOwnProperty(variable)) 
                {
                    delete window[variable];
                }
            });
    }
    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');
        console.log(preview, preview == 'preview')
        if(preview=='preview') return openPreview();
        return closePreview();
    }
    function imageInView()
    {

    }

    try {
        hasFinished();
        imageInView();
        checkPreview();
    } catch (error) {
        clearVariables();
        hasFinished();
        imageInView();
        checkPreview();
    }
</script>