dsfr4drupal-1.x-dev/components/pagination/pagination.twig

{% if items.pages %}
  {% set aria_label = aria_label|default('Pagination'|t) %}
  {% set attributes = attributes|default(create_attribute()) %}
  {% set first_label = first_label|default('First page'|t) %}
  {% set last_label = last_label|default('Last page'|t) %}
  {% set next_label = next_label|default('Next page'|t) %}
  {% set previous_label = previous_label|default('Previous page'|t) %}
  {% set previous_next_has_lg_label = previous_next_has_lg_label ?? true %}
  {# There is a conflict between DSFR structure and Drupal behavior on the <a> tag. #}
  {# If there are no href on <a> tag, javascript will crash when ajax is enabled. #}
  {# DSFR doesn't expect href on disabled <a> are replaces with <span> to prevent error. #}
  {% set first_tag = items.first ? 'a' : 'span' %}
  {% set last_tag = items.last ? 'a' : 'span' %}
  {% set next_tag = items.next ? 'a' : 'span' %}
  {% set previous_tag = items.previous ? 'a' : 'span' %}
  <nav{{ attributes.removeClass('js-pager__items').addClass('fr-pagination').setAttribute('role', 'navigation').setAttribute('aria-label', aria_label) }}>
    <ul class="fr-pagination__list pager__items js-pager__items">
      {% if not items.first %}
        {% set first = {'attributes': create_attribute()} %}
      {% else %}
        {% set first = items.first %}
      {% endif %}
      <li>
        {% set first_attributes = first.attributes %}
        {% if first_last_displayed_lg %}
          {% set first_attributes = first_attributes.addClass('fr-hidden', 'fr-unhidden-lg') %}
        {% endif %}
        <{{ first_tag }}{{ first_attributes.addClass('fr-pagination__link', 'fr-pagination__link--first').setAttribute('href', first.href).setAttribute('aria-disabled', not items.first ? 'true' : 'false') }}>
          {{ first_label }}
        </{{ first_tag }}>
      </li>
      {% if not items.previous %}
        {% set previous = {
          attributes: create_attribute()
        } %}
      {% else %}
        {% set previous = items.previous %}
      {% endif %}
      <li>
        {% set previous_attributes = previous.attributes %}
        {% if previous_next_displayed_lg %}
          {% set previous_attributes = previous_attributes.addClass('fr-hidden', 'fr-unhidden-lg') %}
        {% endif %}
        {% if previous_next_has_lg_label %}
          {% set previous_attributes = previous_attributes.addClass('fr-pagination__link--lg-label') %}
        {% endif %}
        <{{ previous_tag }}{{ previous_attributes.addClass('fr-pagination__link', 'fr-pagination__link--prev').setAttribute('href', previous.href) }} >
          {{ previous_label }}
        </{{ previous_tag }}>
      </li>
      {% if ellipses.previous %}
        <li><span class="fr-pagination__link fr-hidden fr-unhidden-lg">...</span></li>
      {% endif %}
      {% for key, item in items.pages %}
        <li>
          {% if current == key %}
            <span{{ item.attributes.addClass('fr-pagination__link').setAttribute('aria-current', 'page').setAttribute('title', 'Page @key'|t({'@key': key})) }}>
              {{ key }}
            </span>
          {% elseif key - current > 1 or key - current < -1 %}
            <a{{ item.attributes.addClass('fr-pagination__link', 'fr-hidden', 'fr-unhidden-lg').setAttribute('href', item.href).setAttribute('title', 'Page @key'|t({'@key': key})) }}>
              {{ key }}
            </a>
          {% else %}
            <a{{ item.attributes.addClass('fr-pagination__link').setAttribute('href', item.href).setAttribute('title', 'Page @key'|t({'@key': key})) }}>
              {{ key }}
            </a>
          {% endif %}
        </li>
      {% endfor %}
      {% if ellipses.next %}
        <li><span class="fr-pagination__link fr-hidden fr-unhidden-lg">...</span></li>
      {% endif %}
      {% if not items.next %}
        {% set next = {
          attributes: create_attribute()
        } %}
      {% else %}
        {% set next = items.next %}
      {% endif %}
      <li>
        {% set next_attributes = next.attributes %}
        {% if previous_next_displayed_lg %}
          {% set next_attributes = next_attributes.addClass('fr-hidden', 'fr-unhidden-lg') %}
        {% endif %}
        {% if previous_next_has_lg_label %}
          {% set next_attributes = next_attributes.addClass('fr-pagination__link--lg-label') %}
        {% endif %}
        <{{ next_tag }}{{ next_attributes.addClass('fr-pagination__link', 'fr-pagination__link--next').setAttribute('href', next.href) }}>
          {{ next_label }}
        </{{ next_tag }}>
      </li>
      {% if not items.last %}
        {% set last = {
          attributes: create_attribute()
        } %}
      {% else %}
        {% set last = items.last %}
      {% endif %}
      <li>
        {% set last_attributes = last.attributes %}
        {% if first_last_displayed_lg %}
          {% set last_attributes = last_attributes.addClass('fr-hidden', 'fr-unhidden-lg') %}
        {% endif %}
        <{{ last_tag }}{{ last_attributes.addClass('fr-pagination__link', 'fr-pagination__link--last').setAttribute('href', last.href).setAttribute('aria-disabled', not items.last ? 'true' : 'false') }}>
          {{ last_label }}
        </{{ last_tag }}>
      </li>
    </ul>
  </nav>
{% endif %}