First / Last to only appear when actually needed

[mbelic]

Hello, I have included extension in my project and got it working. I have limited my 11 page layout to 5 and included previous and next as outermost links. Also I have included first and last as [ ... ] links that appear notifying the user that there are more pages available in that direction.

Initial layout looks like this:

This works fine. However once I leave page nr.1 and go to nr.2 - first link activates and essentially I have double link to first page:

Once nr.4 is reached this again is valid because page nr.1 disappears from view:

As we are getting to the end - and last 4 pages are active similar issue appears on the right side - with nr.11 and last [...] page:

So my question is regarding this issue - is it possible to disable first and last links until they are really needed and first and last are actually out of the view? I have tried accessing (current)page in attempt to check if offset is reached, however page variable is not available to first and last - inside the pagination object.

Any solution for this? Thank you.

[jimf]

This should be doable. Assuming you are using the same pagination object mentioned in the README, you can add some additional metadata to your render context to cover the logic:

renderTemplate({
    pagination: {
        page: currentPage,
        pageCount: totalPages,
    },

    // Only show First/Last when the corresponding page numbers are
    // out of the layout window. Assumes a layout of 5.
    showFirst: currentPage > 3,
    showLast: currentPage <= totalPages - 3,
});

Then inside your template you can use a standard handlebars if to render conditionally:

{{#if showFirst}}
    {{#paginate pagination type="first"}}
        <li {{#if disabled}}class="disabled"{{/if}}><a href="?p={{n}}">First</a></li>
    {{/paginate}}
{{/if}}

[mbelic]

Thank you for the tip. Works great!