tCMS/www/templates/html/components/paginator.tx

:if ( $pages && !$embed ) {
<div id="paginator">
: } else {
<div id="paginator" class="disabled">
: }
: if ( $paginate_offset ) {
    <div style="float:left; margin-top:.5rem;">Page <: $page :> of <: $pages_total :></div>
    <div style="float:right;">
        : if ( $page > 1 ) {
        <a rel="prev" href="?page=<: $page - 1 :>&limit=<: $limit :><: if( $like ) { "&like=" ~ $like } :>">Prev</a>
        : }
        : if ( $page < $pages_total ) {
        <a rel="next" href="?page=<: $page + 1 :>&limit=<: $limit :><: if( $like ) { "&like=" ~ $like } :>">Next</a>
        : }
        Size:
        <form style="display:inline;">
            : if ( $like ) {
            <input type="hidden" name="like" value="<: $like :>" />
            : }
            <!-- Back to the first page: a page number means nothing once the pages are a different size. -->
            <input type="hidden" name="page" value="1" />
            <select name="limit" class="coolbutton">
                : for $sizes -> $size {
                <option value="<: $size :>"><: $size :></option>
                : }
            </select>
        </form>
    </div>
</div>
: } else {
    : if ( $older || $newer ) {
    <div style="float:left; margin-top:.5rem;"> <: $limit :> most recent posts older than <span id="paginatorTime"><: $older :></span></div>
    : }
    <div style="float:right;">
        <a rel="prev" href="?older=<: $older :>&limit=<: $limit :><: if( $like ) { "&like=" ~ $like } :>">Prev</a>
        <a rel="next" href="?newer=<: $newer :>&limit=<: $limit :><: if( $like ) { "&like=" ~ $like } :>">Next</a>
        Size:
        <form style="display:inline;">
            : if ( $older ) {
            <input type="hidden" name="older" value="<: $older :>" />
            : }
            : if ( $like ) {
            <input type="hidden" name="like" value="<: $like :>" />
            : }
            <select name="limit" class="coolbutton">
                : for $sizes -> $size {
                <option value="<: $size :>"><: $size :></option>
                : }
            </select>
        </form>
        Jump to:
        <form style="display:inline;" id="paginator-jump">
            <select name="year" class="coolbutton">
                : for $years -> $year {
                <option value="<: $year :>"><: $year :></option>
                : }
            </select>
            <select name="month" class="coolbutton">
                : for $months -> $month {
                <option value="<: $month :>"><: $month :></option>
                : }
            </select>
            <input type="hidden" name="older" value="" />
            <input type="submit" class="coolbutton" value="Go" />
        </form>
    </div>
</div>
: }
<script type="text/javascript">
    function updateOlder () {
        var year  = document.querySelector("#paginator-jump select[name='year']");
        var month = document.querySelector("#paginator-jump select[name='month']");
        var older = document.querySelector("#paginator-jump input[name='older']");
        if (older) {
            var d = new Date(0);
            d.setYear(year.value);
            d.setMonth(month.value);
            d.setDate(0);
            older.value = d.getTime() / 1000;
        }
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        updateOlder();
        var months = document.querySelectorAll("#paginator-jump select[name='month'] option");
        var d = new Date();
        for (var month of months) {
            d.setMonth(month.value);
            month.innerHTML = d.toLocaleString('default', { month: 'long' });
        }

        //Ensure the 'older' value updates
        var m = document.querySelector("#paginator-jump select[name='month']");
        if (m) {
            m.onchange = function (evt) {
                updateOlder();
            };
        }

        var y  = document.querySelector("#paginator-jump select[name='year']");
        if (y) {
            y.onchange = function (evt) {
                updateOlder();
            };
        }
    });
</script>