eleven-8.x-1.0-beta5/eleven/templates/component/navigation/pager/pager.html.twig

{{ attach_library('eleven/nav.pager') }}

{% if items %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" 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 %}
      <li class="pager__item pager__item--first">
        <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>
          <span class="visually-hidden">{{ 'First page'|t }}</span>
          <span aria-hidden="true">{{ items.first.text|default('« First'|t) }}</span>
        </a>
      </li>
    {% endif %}
    {# Print previous item if we are not on the first page. #}
    {% if items.previous %}
      <li class="pager__item pager__item--previous">
        <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
          <span class="visually-hidden">{{ 'Previous page'|t }}</span>
          <span aria-hidden="true">{{ items.previous.text|default('‹ Previous'|t) }}</span>
        </a>
      </li>
    {% endif %}
    {# Add an ellipsis if there are further previous pages. #}
    {% if ellipses.previous %}
      <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
    {% endif %}
    {# Now generate the actual pager piece. #}
    {% for key, item in items.pages %}
      <li class="pager__item{{ current == key ? ' is-active' : '' }}">
        {% if current == key %}
          {% set title = 'Current page'|t %}
        {% else %}
          {% set title = 'Go to page @key'|t({'@key': key}) %}
        {% endif %}
        <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
          <span class="visually-hidden">
            {{ current == key ? 'Current page'|t : 'Page'|t }}
          </span>
          {{- key -}}
        </a>
      </li>
    {% endfor %}
    {# Add an ellipsis if there are further next pages. #}
    {% if ellipses.next %}
      <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
    {% endif %}
    {# Print next item if we are not on the last page. #}
    {% if items.next %}
      <li class="pager__item pager__item--next">
        <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
          <span class="visually-hidden">{{ 'Next page'|t }}</span>
          <span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
        </a>
      </li>
    {% endif %}
    {# Print last item if we are not on the last page. #}
    {% if items.last %}
      <li class="pager__item pager__item--last">
        <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
          <span class="visually-hidden">{{ 'Last page'|t }}</span>
          <span aria-hidden="true">{{ items.last.text|default('Last »'|t) }}</span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>
{% endif %}