You are here

Home » API reference » Pagerer 8

pagerer-base.html.twig in Pagerer 8

Same filename and directory in other branches
  1. 8.2 templates/pagerer-base.html.twig

Default theme implementation to display a pagerer style.

Available variables:

  • style: The pagerer style being rendered.
  • id: The id attribute (used to link with the widget state in drupalSettings).
  • embedded: Flag to indicate if the pager is embedded (used by the scrollpane style).
  • items: List of pager items. The list is keyed by the following elements:

    • first: Item for the first page.
    • previous: Item for the previous page.
    • prefix: Text to be presented before the first page of results.
    • pages: List of pages, separators, breakers, and pagerer widgets.
    • suffix: Text to be presented after the last page of results.
    • next: Item for the next page.
    • last: Item for the last page.

    Sub-sub elements: items.first, items.previous, items.next, items.last, and each item inside items.pages can 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 ›".
    • title: The text for the title attribute, used to present help text to user when hovering with the mouse on the element.
    • reader_text: The text used for the item link by automated readers.
    • is_current: Flag to indicate if the page displayed is the current in the pager.
    • is_separator: Flag to indicate if the item displayed is a separator.
    • is_breaker: Flag to indicate if the item displayed is a breaker.
    • widget: An item to be rendered as a widget.
3 theme calls to pagerer-base.html.twig
Multipane::preprocess in src/Plugin/pagerer/Multipane.php
Prepares to render the pager.
PagererExampleController::examplePage in pagerer_example/src/Controller/PagererExampleController.php
Build the pagerer example page.
Scrollpane::buildPagerItems in src/Plugin/pagerer/Scrollpane.php
Return the pager render array.

File

templates/pagerer-base.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation to display a pagerer style.

  5.  *

  6.  * Available variables:

  7.  * - style: The pagerer style being rendered.

  8.  * - id: The id attribute (used to link with the widget state in

  9.  *   drupalSettings).

  10.  * - embedded: Flag to indicate if the pager is embedded (used by the

  11.  *   scrollpane style).

  12.  * - items: List of pager items.

  13.  *   The list is keyed by the following elements:

  14.  *   - first: Item for the first page.

  15.  *   - previous: Item for the previous page.

  16.  *   - prefix: Text to be presented before the first page of results.

  17.  *   - pages: List of pages, separators, breakers, and pagerer widgets.

  18.  *   - suffix: Text to be presented after the last page of results.

  19.  *   - next: Item for the next page.

  20.  *   - last: Item for the last page.

  21.  *   Sub-sub elements:

  22.  *   items.first, items.previous, items.next, items.last, and each item inside

  23.  *   items.pages can contain the following elements:

  24.  *   - href: URL with appropriate query parameters for the item.

  25.  *   - attributes: A keyed list of HTML attributes for the item.

  26.  *   - text: The visible text used for the item link, such as "‹ Previous"

  27.  *     or "Next ›".

  28.  *   - title: The text for the title attribute, used to present help text to

  29.  *     user when hovering with the mouse on the element.

  30.  *   - reader_text: The text used for the item link by automated readers.

  31.  *   - is_current: Flag to indicate if the page displayed is the current in

  32.  *     the pager.

  33.  *   - is_separator: Flag to indicate if the item displayed is a separator.

  34.  *   - is_breaker: Flag to indicate if the item displayed is a breaker.

  35.  *   - widget: An item to be rendered as a widget.

  36.  *

  37.  * @ingroup themeable

  38.  */

  39. #}

  40. {%

  41.   set classes = [

  42.     'pager',

  43.     'pagerer-pager-' ~ style,

  44.     embedded ? 'pagerer-scrollpane-embedded',

  45.   ]

  46. %}

  47. {{ attach_library('pagerer/base.css') }}

  48. {% if items %}

  49.     <nav {{ attributes.addClass(classes) }} role="navigation" aria-labelledby="pagination-heading"

  50. {%- if id %}

  51.  id="{{ id }}"

  52. {% endif -%}>

  53.       <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>

  54.       {% if embedded %}

  55.         {{ attach_library('pagerer/scrollpane') }}

  56.         <div class="pagerer-viewport">

  57.       {% endif %}

  58.           <ul class="pager__items js-pager__items">

  59.             {# Print first item. #}

  60.             {% if items.first %}

  61.               {% if items.first.href is defined %}

  62.                 <li class="pager__item pager__item--first">

  63.                   <a href="{{ items.first.href }}" title="{{- items.first.title -}}"{{ items.first.attributes|without('href', 'title') }}>

  64.                     <span class="visually-hidden">{{- items.first.reader_text -}}</span>

  65.                     <span aria-hidden="true">{{- items.first.text -}}</span>

  66.                   </a>

  67.                 </li>

  68.               {% else %}

  69.                 <li class="pager__item pager__item--first">

  70.                   <span aria-hidden="true" role="presentation">{{- items.first.text -}}</span>

  71.                 </li>

  72.               {% endif %}

  73.             {% endif %}

  74.             {# Print previous item. #}

  75.             {% if items.previous %}

  76.               {% if items.previous.href is defined %}

  77.                 <li class="pager__item pager__item--previous">

  78.                   <a href="{{ items.previous.href }}" title="{{- items.previous.title -}}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>

  79.                     <span class="visually-hidden">{{- items.previous.reader_text -}}</span>

  80.                     <span aria-hidden="true">{{- items.previous.text -}}</span>

  81.                   </a>

  82.                 </li>

  83.               {% else %}

  84.                 <li class="pager__item pager__item--previous">

  85.                   <span aria-hidden="true" role="presentation">{{- items.previous.text -}}</span>

  86.                 </li>

  87.               {% endif %}

  88.             {% endif %}

  89.             {# Print prefix item. #}

  90.             {% if items.prefix %}

  91.               <li class="pager__item pagerer-prefix">

  92.                 <span aria-hidden="true" role="presentation">{{- items.prefix.text -}}</span>

  93.               </li>

  94.             {% endif %}

  95.             {# Now generate the actual pager piece. #}

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

  97.               {% if item.is_breaker %}

  98.                 <li class="pager__item pager__item--ellipsis pagerer-breaker" role="presentation">{{- item.text -}}</li>

  99.               {% elseif item.is_separator %}

  100.                 <li class="pager__item pager__item--ellipsis pagerer-separator" role="presentation">{{- item.text -}}</li>

  101.               {% elseif item.widget %}

  102.                 <li class="pager__item pagerer-widget">

  103.                   {{ item.widget }}

  104.                 </li>

  105.               {% elseif item.href is defined %}

  106.                 <li class="pager__item{{ item.is_current ? ' is-active' : '' }}">

  107.                   <a href="{{ item.href }}" title="{{ item.title }}"{{ item.attributes|without('href', 'title') }}>

  108.                     <span class="visually-hidden">{{- item.reader_text -}}</span>

  109.                     {{- item.text -}}

  110.                   </a>

  111.                 </li>

  112.               {% else %}

  113.                 <li class="pager__item pager__item--ellipsis pagerer-no-link" role="presentation">{{- item.text -}}</li>

  114.               {% endif %}

  115.             {% endfor %}

  116.             {# Print suffix item. #}

  117.             {% if items.suffix %}

  118.               <li class="pager__item pagerer-suffix">

  119.                 <span aria-hidden="true" role="presentation">{{- items.suffix.text -}}</span>

  120.               </li>

  121.             {% endif %}

  122.             {# Print next item. #}

  123.             {% if items.next %}

  124.               {% if items.next.href is defined %}

  125.                 <li class="pager__item pager__item--next">

  126.                   <a href="{{ items.next.href }}" title="{{- items.next.title -}}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>

  127.                     <span class="visually-hidden">{{- items.next.reader_text -}}</span>

  128.                     <span aria-hidden="true">{{- items.next.text -}}</span>

  129.                   </a>

  130.                 </li>

  131.               {% else %}

  132.                 <li class="pager__item pager__item--next">

  133.                   <span aria-hidden="true" role="presentation">{{- items.next.text -}}</span>

  134.                 </li>

  135.               {% endif %}

  136.             {% endif %}

  137.             {# Print last item. #}

  138.             {% if items.last %}

  139.               {% if items.last.href is defined %}

  140.                 <li class="pager__item pager__item--last">

  141.                   <a href="{{ items.last.href }}" title="{{- items.last.title -}}"{{ items.last.attributes|without('href', 'title') }}>

  142.                     <span class="visually-hidden">{{- items.last.reader_text -}}</span>

  143.                     <span aria-hidden="true">{{- items.last.text -}}</span>

  144.                   </a>

  145.                 </li>

  146.               {% else %}

  147.                 <li class="pager__item pager__item--last">

  148.                   <span aria-hidden="true" role="presentation">{{- items.last.text -}}</span>

  149.                 </li>

  150.               {% endif %}

  151.             {% endif %}

  152.           </ul>

  153.       {% if scrollpane %}

  154.         </div>

  155.       {% endif %}

  156.   </nav>

  157. {% endif %}