{# /** * @file * Theme override to display a pager. * * Available variables: * - heading_id: Pagination heading ID. * - items: List of pager items. * The list is keyed by the following elements: * - first: Item for the first page; not present on the first page of results. * - previous: Item for the previous page; not present on the first page * of results. * - next: Item for the next page; not present on the last page of results. * - last: Item for the last page; not present on the last page of results. * - pages: List of pages, keyed by page number. * Sub-sub elements: * items.first, items.previous, items.next, items.last, and each item inside * items.pages contain the following elements: * - href: URL with appropriate query parameters for the item. * - attributes: A keyed list of HTML attributes for the item. * - text: The visible text used for the item link, such as "‹ Previous" * or "Next ›". * - current: The page number of the current page. * - ellipses: If there are more pages than the quantity allows, then an * ellipsis before or after the listed pages may be present. * - previous: Present if the currently visible list of pages does not start * at the first page. * - next: Present if the visible list of pages ends before the last page. * * @see template_preprocess_pager() */ #} {% if items %} <nav class="pager layout--content-medium" role="navigation" aria-labelledby="{{ heading_id }}"> <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4> <ul class="pager__items js-pager__items"> {# Print first item if we are not on the first page. #} {% if items.first %} {% apply spaceless %} <li class="pager__item pager__item--control pager__item--first"> <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title').addClass('pager__link') }}> <span class="visually-hidden">{{ 'First page'|t }}</span> {% include "@olives/../images/pager-first.svg" %} </a> </li> {% endapply %} {% endif %} {# Print previous item if we are not on the first page. #} {% if items.previous %} {% apply spaceless %} <li class="pager__item pager__item--control pager__item--previous"> <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel').addClass('pager__link') }}> <span class="visually-hidden">{{ 'Previous page'|t }}</span> {% include "@olives/../images/pager-previous.svg" %} </a> </li> {% endapply %} {% endif %} {# Add an ellipsis if there are further previous pages. #} {% if ellipses.previous %} <li class="pager__item pager__item--ellipsis" role="presentation">…</li> {% endif %} {# Now generate the actual pager piece. #} {% for key, item in items.pages %} {% apply spaceless %} <li class="pager__item{{ current == key ? ' pager__item--active' : '' }} pager__item--number"> {% if current == key %} {% set title = 'Current page'|t %} {% else %} {% set title = 'Go to page @key'|t({'@key': key}) %} {% endif %} {% if current != key %} <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title').addClass('pager__link', current == key ? ' is-active') }}> {% endif %} <span class="visually-hidden"> {{ current == key ? 'Current page'|t : 'Page'|t }} </span> {{ key }} {% if current != key %} </a> {% endif %} </li> {% endapply %} {% endfor %} {# Add an ellipsis if there are further next pages. #} {% if ellipses.next %} <li class="pager__item pager__item--ellipsis" role="presentation">…</li> {% endif %} {# Print next item if we are not on the last page. #} {% if items.next %} {% apply spaceless %} <li class="pager__item pager__item--control pager__item--next"> <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel').addClass('pager__link') }}> <span class="visually-hidden">{{ 'Next page'|t }}</span> {% include "@olives/../images/pager-previous.svg" %} </a> </li> {% endapply %} {% endif %} {# Print last item if we are not on the last page. #} {% if items.last %} {% apply spaceless %} <li class="pager__item pager__item--control pager__item--last"> <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title').addClass('pager__link') }}> <span class="visually-hidden">{{ 'Last page'|t }}</span> {% include "@olives/../images/pager-first.svg" %} </a> </li> {% endapply %} {% endif %} </ul> </nav> {% endif %}