Issue #3280182 by pdureau: Add pagination component

{#

/**

 * @file

 * Default theme implementation 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()

 *

 * @ingroup themeable

 */

#}

{% if items %}

  {{ pattern('pagination', {

  'items': items,

  'current': current

}) }}

{% endif %}

{#

/**

 * @file

 * Default theme implementation for a views mini-pager.

 *

 * Available variables:

 * - heading_id: Pagination heading ID.

 * - items: List of pager items.

 *   - previous: Item for the previous page; not present on the first page

 *     of results.

 *   - current: Item for the current page.

 *   - next: Item for the next page; not present on the last page of results.

 *

 * @see template_preprocess_views_mini_pager()

 *

 * @ingroup themeable

 */

#}

{% set items = items|merge({

  pages: {

    (items.current): items.current  

  }

}) %}

{{ pattern('pagination', {

  'items': items,

  'current': items.current

}) }}

pagination:

  label: Pagination

  description: Indicate a series of related content exists across multiple pages. https://getbootstrap.com/docs/4.0/components/pagination/

  variants:

    default:

      label: Default

    lg:

      label: Larger

    sm:

      label: Smaller

  fields:

    items:

      type: array

      label: Pagination items.

      description: "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. List of pages. Each item is an array containing 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."

      preview:

        first:

          href: "#"

          text: "« First"

        previous:

          href: "#"

          text: "‹ Previous"

        next:

          href: "#"

          text: "Next ›"

        last:

          href: "#"

          text: "Last »"

        pages:

          1:

            href: "#"

            text: "1"

          2:

            href: "#"

            text: "2"

          3:

            href: "#"

            text: "3"

    current:

      type: "integer"

      label: "Current page number"

      description: "The page number of the current page."

      preview: 2

{% if variant != '' and variant|lower != 'default' %}

  {% set attributes = attributes.addClass('pagination-' ~ variant|lower|replace({'_': '-'})) %}

{% endif %}

{% import _self as pagination %}

{% if items %}

<nav aria-label="{{ 'Pagination'|t }}">

  <ul{{ attributes.addClass('pagination') }}>

    {# Print first item if we are not on the first page. #}

    {% if items.first %}

      {{ pagination.item(items.first.text|default('« First'|t), items.first.href, items.first.attributes, 'First'|t) }}

    {% endif %}

    {# Print previous item if we are not on the first page. #}

    {% if items.previous %}

      {{ pagination.item(items.previous.text|default('‹ Previous'|t), items.previous.href, items.previous.attributes, 'Previous'|t) }}

    {% endif %}

    {# Current pages for other pagers. #}

    {% for key, item in items.pages %}

      {% if current == key %}

      <li class="page-item active"><span class="page-link">

          <span class="visually-hidden">

            {{ current == key ? 'Current page'|t : 'Page'|t }}

          </span>

          {{- key -}}

      </span></li>

      {% else %}

       {{ pagination.item(key, item.href, items.attributes) }}

      {% endif %}

    {% endfor %}

    {# Print next item if we are not on the last page. #}

    {% if items.next %}

      {{ pagination.item(items.next.text|default('Next ›'|t), items.next.href, items.next.attributes, 'Next'|t) }}

    {% endif %}

    {# Print last item if we are not on the last page. #}

    {% if items.last %}

      {{ pagination.item(items.last.text|default('Last »'|t), items.last.href, items.last.attributes, 'Last'|t) }}

    {% endif %}

  </ul>

</nav>

{% endif %}

{% macro item(text, href, attributes, aria_label = '') %}

<li class="page-item">

  {% set attributes =  attributes ?: create_attribute() %}

  {% set attributes =  aria_label ? attributes.setAttribute('aria-label', aria_label) : attributes %}

  <a {{ attributes.addClass('page-link').setAttribute('href', href) }}>

    {% if aria_label is not empty %}

    <span aria-hidden="true">{{ text }}</span>

    {% else %}

    {{ text }}

    {% endif %}

  </a>

</li>

{% endmacro %}

  }

  return FALSE;

}

/*

 * Implements hook_preprocess_HOOK() for 'pattern_pagination'.

 *

 * See also: https://getbootstrap.com/docs/4.5/components/pagination/.

 */

function ui_suite_bootstrap_preprocess_pattern_pagination(array &$variables): void {

  $variables['current'] = (int) (string) $variables['current'];

}