<!-- Like button -->
<script>
    $(".fa-heart").click(function(){
        if ($(this).attr("red") == 'true'){
            $(this).animate({color:"#808080"});
            $(this).attr("red", false);
        } else {
            $(this).animate({color:"#ff0000"});
            $(this).attr("red", true);
        }
    });
</script>

<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<!-- videojs -->
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>

{{/* a pangu support */}}
{{ if .Site.Params.features.pangu }}
<!-- pangu.js -->
<script>
    pangu.spacingElementByClassName('moment-note');
    pangu.spacingElementByClassName('context');

    document.addEventListener('DOMContentLoaded', () => {
        // listen to any DOM change and automatically perform spacing via MutationObserver()
        pangu.autoSpacingPage();
    });
</script>
{{ end }}


{{/*  back-top- button */}}
<button id="back-top-button"><i class="fas fa-chevron-up"></i></button>
<script>
    window.onscroll = function() {scrollFunction()};
    function scrollFunction() {
        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
            $("#back-top-button").fadeIn();
        } else {
            $("#back-top-button").fadeOut();
        }
    }


    $( "#back-top-button" ).click(function() {
        $("html, body").animate({scrollTop: 0}, 500);
    });
</script>


{{ if .Site.Params.infiniteScroll }}
<script>
    var throttle_pause = false;
    var fetching = false;
    var page_number = {{ $.Paginator.PageNumber }};
    const total_pages = {{ $.Paginator.TotalPages }};

    const throttle = (func, timeout) => {
        if (throttle_pause || fetching) return;
        throttle_pause = true;
        setTimeout(() => {
            func();
            throttle_pause = false;
        }, timeout);
    };

    const loading_wrapper = document.querySelector(".loading-wrapper");

    document.addEventListener("scroll", () => {
        throttle(() => {
            const last_moment = document.querySelector(".page > .container .moment-row:last-child");
            const page_end = window.innerHeight + window.pageYOffset + 100 + last_moment.offsetHeight >= document.body.offsetHeight;
            if (page_end && page_number < total_pages) {
                fetching = true;
                loading_wrapper.style.display = "flex";
                fetch(`/${++page_number}`).then((response) => {
                    return response.text();
                }).then((html_string) => {
                    const parser = new DOMParser();
                    const next_page = parser.parseFromString(html_string, "text/html");
                    {{ if .Site.Params.features.heti }}
                    const heti = new Heti(next_page);
                    heti.autoSpacing();
                    {{ end }}
                    const rows = next_page.querySelectorAll(".moment-row");
                    const container = document.querySelector(".page > .container");
                    rows.forEach((r) => {
                        container.appendChild(r);
                    });
                }).catch((err) => {
                    console.log(err);
                }).then(() => {
                    fetching = false;
                loading_wrapper.style.display = "none";
                });
            }
        }, 250);
    })
</script>
{{ end }}


{{ if .Site.Params.features.heti }}
<script>
    const heti = new Heti(document);
    heti.autoSpacing();
</script>
{{ end }}
