Website-Redesign/layouts/partials/paginator.html

{{ if .Site.Params.infiniteScrolling }}
<script>
    var nextPage = '/index.json';
    function renderTags(tags) {
        if (tags.length <= 0) return '';
        let res = '| <span title="tags"> </span>';
        for (let tag of tags) {
            res += `<a href="/tags/${tag}">#${tag}</a>
            `;
        }
        return res;
    }
    function renderImage(image) {
        if (!image) return '';
        return `<img src="${image}" />`
    }
    function renderSingleArticle(article) {
        if (article.ignore) return '';
        return `
        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
            <div>
                <h2>
                <a href="${article.link}">${article.title}</a>
                </h2>
                <p class="date">
                <span title="Date"> </span>
                ${article.date}
                ${renderTags(article.tags)}
                </p>
                {{ if .Site.Params.imageInArticlePreview }}
                    ${renderImage(article.image)}
                {{end}}
                <div class="articlePreview">
                    <p>${article.summary}</p>
                    <p><a href="${article.link}">Continue reading </a></p>
                </div>
            </div>
            <hr />
        </article>
        `;
    }
    function renderArticles(articles) {
        let rendered = articles.map(a => renderSingleArticle(a)).join('\n');
        document.getElementById('postlist').innerHTML += rendered;
    }
    function getNext(first=false) {
        if (!nextPage) return;
        fetch(nextPage).then(res => res.json())
        .then(res => {
            nextPage = res['next'];
            if (first) {
                document.getElementById('getNextBtnContainer').innerHTML += `
                    <div style="text-align: center; font-size: 1.7em;">
                        <a style="cursor: pointer" onclick="getNext();">
                            Load more articles
                        </a>
                    </div>
                `;
                return;
            }
            if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = '';
            renderArticles(res['articles']);
        });
    }
    getNext(true);
</script>
{{ end }}
{{ if .Site.Params.infiniteScrolling }}<noscript>{{ end }}
{{ if gt .Paginator.TotalPages 1 }}
    {{ $navtype := .Site.Params.Navtype }}
    <div id="pageNavigation" class='
            {{ if eq $navtype "circles" }}
                nav-circles
            {{ end }}
    '>
        {{ if .Paginator.HasPrev }}
            <a href="{{ .Paginator.Prev.URL }}" title="Previous page">
                {{ if eq $navtype "circles" }}
                    ←
                {{ else }}
                    &lt;&lt;&lt;
                {{ end }}
            </a>
        {{ end }}
        {{ $currentPage := .Paginator.PageNumber }}
        {{ range .Paginator.Pagers }}
            {{ if ne .PageNumber $currentPage }}
                <a href="{{ .URL }}">{{ .PageNumber }}</a>
            {{ else }}
            <span>
                {{ if eq $navtype "circles" }}{{ .PageNumber }}
                {{ else }}[{{ .PageNumber }}]{{ end }}
            </span>
            {{ end }}
        {{ end }}
        {{ if .Paginator.HasNext }}
            <a href="{{ .Paginator.Next.URL }}" title="Next page">
                {{ if eq $navtype "circles" }}
                    →
                {{ else }}
                    &gt;&gt;&gt;
                {{ end }}
            </a>
        {{ end }}
    </div>
{{ end }}
{{ if .Site.Params.infiniteScrolling }}</noscript>{{ end }}