Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
@ -0,0 +1,27 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Theme override for a breadcrumb trail.
|
||||
*
|
||||
* Available variables:
|
||||
* - breadcrumb: Breadcrumb trail items.
|
||||
*/
|
||||
#}
|
||||
{% if breadcrumb %}
|
||||
<nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
|
||||
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
|
||||
<div class="breadcrumb__content">
|
||||
<ol class="breadcrumb__list">
|
||||
{% for item in breadcrumb %}
|
||||
<li class="breadcrumb__item">
|
||||
{% if item.url %}
|
||||
<a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
|
||||
{% else %}
|
||||
{{ item.text }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
@ -0,0 +1,60 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero's theme override for comment links.
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: Attributes for the UL containing the list of links.
|
||||
* - links: Links to be output.
|
||||
* Each link will have the following elements:
|
||||
* - title: The link text.
|
||||
* - href: The link URL. If omitted, the 'title' is shown as a plain text
|
||||
* item in the links list. If 'href' is supplied, the entire link is passed
|
||||
* to l() as its $options parameter.
|
||||
* - attributes: (optional) HTML attributes for the anchor, or for the <span>
|
||||
* tag if no 'href' is supplied.
|
||||
* - heading: (optional) A heading to precede the links.
|
||||
* - text: The heading text.
|
||||
* - level: The heading level (e.g. 'h2', 'h3').
|
||||
* - attributes: (optional) A keyed list of attributes for the heading.
|
||||
* If the heading is a string, it will be used as the text of the heading and
|
||||
* the level will default to 'h2'.
|
||||
*
|
||||
* Headings should be used on navigation menus and any list of links that
|
||||
* consistently appears on multiple pages. To make the heading invisible use
|
||||
* the 'visually-hidden' CSS class. Do not use 'display:none', which
|
||||
* removes it from screen readers and assistive technology. Headings allow
|
||||
* screen reader and keyboard only users to navigate to or skip the links.
|
||||
* See https://juicystudio.com/article/screen-readers-display-none.php and
|
||||
* https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
|
||||
*
|
||||
* @see \Drupal\Core\Theme\ThemePreprocess::preprocessLinks()
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set classes = [
|
||||
'comment__links',
|
||||
]
|
||||
%}
|
||||
{% if links -%}
|
||||
{%- if heading -%}
|
||||
{%- if heading.level -%}
|
||||
<{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
|
||||
{%- else -%}
|
||||
<h2{{ heading.attributes }}>{{ heading.text }}</h2>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<ul{{ attributes.addClass(classes) }}>
|
||||
{% for item in links %}
|
||||
<li{{ item.attributes.addClass('comment__links-item') }}>
|
||||
{%- if item.link -%}
|
||||
{{ item.link }}
|
||||
{%- elseif item.text_attributes -%}
|
||||
<span{{ item.text_attributes }}>{{ item.text }}</span>
|
||||
{%- else -%}
|
||||
{{ item.text }}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endif %}
|
||||
55
web/core/themes/olivero/templates/navigation/links.html.twig
Normal file
55
web/core/themes/olivero/templates/navigation/links.html.twig
Normal file
@ -0,0 +1,55 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero's theme override for a set of links.
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: Attributes for the UL containing the list of links.
|
||||
* - links: Links to be output.
|
||||
* Each link will have the following elements:
|
||||
* - title: The link text.
|
||||
* - href: The link URL. If omitted, the 'title' is shown as a plain text
|
||||
* item in the links list. If 'href' is supplied, the entire link is passed
|
||||
* to l() as its $options parameter.
|
||||
* - attributes: (optional) HTML attributes for the anchor, or for the <span>
|
||||
* tag if no 'href' is supplied.
|
||||
* - heading: (optional) A heading to precede the links.
|
||||
* - text: The heading text.
|
||||
* - level: The heading level (e.g. 'h2', 'h3').
|
||||
* - attributes: (optional) A keyed list of attributes for the heading.
|
||||
* If the heading is a string, it will be used as the text of the heading and
|
||||
* the level will default to 'h2'.
|
||||
*
|
||||
* Headings should be used on navigation menus and any list of links that
|
||||
* consistently appears on multiple pages. To make the heading invisible use
|
||||
* the 'visually-hidden' CSS class. Do not use 'display:none', which
|
||||
* removes it from screen readers and assistive technology. Headings allow
|
||||
* screen reader and keyboard only users to navigate to or skip the links.
|
||||
* See https://juicystudio.com/article/screen-readers-display-none.php and
|
||||
* https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
|
||||
*
|
||||
* @see \Drupal\Core\Theme\ThemePreprocess::preprocessLinks()
|
||||
*/
|
||||
#}
|
||||
{% if links -%}
|
||||
{%- if heading -%}
|
||||
{%- if heading.level -%}
|
||||
<{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
|
||||
{%- else -%}
|
||||
<h2{{ heading.attributes }}>{{ heading.text }}</h2>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<ul{{ attributes }}>
|
||||
{% for item in links %}
|
||||
<li{{ item.attributes }}>
|
||||
{%- if item.link -%}
|
||||
{{ item.link }}
|
||||
{%- elseif item.text_attributes -%}
|
||||
<span{{ item.text_attributes }}>{{ item.text }}</span>
|
||||
{%- else -%}
|
||||
{{ item.text }}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endif %}
|
||||
@ -0,0 +1,139 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero's theme implementation for the menus in the primary_menu region.
|
||||
*
|
||||
* Available variables:
|
||||
* - menu_name: The machine name of the menu.
|
||||
* - items: A nested list of menu items. Each menu item contains:
|
||||
* - attributes: HTML attributes for the menu item.
|
||||
* - below: The menu item child items.
|
||||
* - title: The menu link title.
|
||||
* - url: The menu link URL, instance of \Drupal\Core\Url
|
||||
* - localized_options: Menu link localized options.
|
||||
* - is_expanded: TRUE if the link has visible children within the current
|
||||
* menu tree.
|
||||
* - is_collapsed: TRUE if the link has children within the current menu tree
|
||||
* that are not currently visible.
|
||||
* - in_active_trail: TRUE if the link is in the active trail.
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{{ attach_library('olivero/navigation-primary') }}
|
||||
|
||||
{% import _self as menus %}
|
||||
|
||||
{#
|
||||
We call a macro which calls itself to render the full tree.
|
||||
@see https://twig.symfony.com/doc/3.x/tags/macro.html
|
||||
#}
|
||||
{% set attributes = attributes.addClass('menu') %}
|
||||
{{ menus.menu_links(items, attributes, 0, 'primary-menu-item-') }}
|
||||
|
||||
{% macro menu_links(items, attributes, menu_level, aria_id) %}
|
||||
{% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
|
||||
{% set drupal_selector_primary_nav_level = menu_level <= 1 ? 'primary-nav-menu--level-' ~ (menu_level + 1) : false %}
|
||||
{% set is_top_level_menu = menu_level == 0 %}
|
||||
{% import _self as menus %}
|
||||
{% if items %}
|
||||
|
||||
{#
|
||||
Place the menu arrow (caret) outside of the submenu because the submenu
|
||||
has the overflow:hidden CSS rule applied.
|
||||
#}
|
||||
{% if menu_level == 1 %}
|
||||
<span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
|
||||
{% endif %}
|
||||
|
||||
<ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
|
||||
{% set attributes = attributes.removeClass(primary_nav_level) %}
|
||||
{% for item in items %}
|
||||
|
||||
{% if item.url.isRouted and item.url.routeName == '<nolink>' %}
|
||||
{% set menu_item_type = 'nolink' %}
|
||||
{% elseif item.url.isRouted and item.url.routeName == '<button>' %}
|
||||
{% set menu_item_type = 'button' %}
|
||||
{% else %}
|
||||
{% set menu_item_type = 'link' %}
|
||||
{% endif %}
|
||||
|
||||
{% set item_classes = [
|
||||
'primary-nav__menu-item',
|
||||
'primary-nav__menu-item--' ~ menu_item_type,
|
||||
'primary-nav__menu-item--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'primary-nav__menu-item--active-trail',
|
||||
item.below ? 'primary-nav__menu-item--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
{% set link_classes = [
|
||||
'primary-nav__menu-link',
|
||||
'primary-nav__menu-link--' ~ menu_item_type,
|
||||
'primary-nav__menu-link--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'primary-nav__menu-link--active-trail',
|
||||
item.below ? 'primary-nav__menu-link--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
<li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', is_top_level_menu and item.below ? 'primary-nav-menu-item-has-children' : false) }}>
|
||||
{#
|
||||
A unique HTML ID should be used, but that isn't available through
|
||||
Twig yet, so the |clean_id filter is used for now.
|
||||
@see https://www.drupal.org/project/drupal/issues/3115445
|
||||
#}
|
||||
{% set aria_id = (aria_id ~ loop.index)|clean_id %}
|
||||
{% set link_title %}
|
||||
<span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-{{ menu_level + 1 }}">{{ item.title }}</span>
|
||||
{% endset %}
|
||||
|
||||
{% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
|
||||
{{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
|
||||
'class': link_classes,
|
||||
'data-drupal-selector': is_top_level_menu ? 'primary-nav-menu-link-has-children' : false,
|
||||
})
|
||||
}}
|
||||
|
||||
{% if item.below %}
|
||||
{#
|
||||
Aria-hidden and tabindex attributes are removed via JS. Button is non-functional,
|
||||
but still visible in non-JS environments so that chevron can indicate presence of
|
||||
drop menu).
|
||||
#}
|
||||
{% if is_top_level_menu %}
|
||||
{% set toggle_button_attributes = create_attribute({
|
||||
'class': 'primary-nav__button-toggle',
|
||||
'data-drupal-selector': 'primary-nav-submenu-toggle-button',
|
||||
'aria-controls': aria_id,
|
||||
'aria-expanded': 'false',
|
||||
'aria-hidden': 'true',
|
||||
'tabindex': '-1',
|
||||
}) %}
|
||||
|
||||
<button{{ toggle_button_attributes }}>
|
||||
<span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
|
||||
<span class="icon--menu-toggle"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% set attributes = attributes.setAttribute('id', aria_id) %}
|
||||
{{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
|
||||
{% endif %}
|
||||
|
||||
{% elseif menu_item_type == 'button' %}
|
||||
|
||||
{{ link(link_title, item.url, {
|
||||
'class': link_classes,
|
||||
'aria-controls': is_top_level_menu and item.below ? aria_id : false,
|
||||
'aria-expanded': is_top_level_menu and item.below ? 'false' : false,
|
||||
'data-drupal-selector': is_top_level_menu and item.below ? 'primary-nav-submenu-toggle-button' : false,
|
||||
}) }}
|
||||
|
||||
{% set attributes = attributes.setAttribute('id', aria_id) %}
|
||||
{{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
@ -0,0 +1,78 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero's theme implementation for the menus in the secondary_menu region.
|
||||
*
|
||||
* Available variables:
|
||||
* - menu_name: The machine name of the menu.
|
||||
* - items: A nested list of menu items. Each menu item contains:
|
||||
* - attributes: HTML attributes for the menu item.
|
||||
* - below: The menu item child items.
|
||||
* - title: The menu link title.
|
||||
* - url: The menu link URL, instance of \Drupal\Core\Url
|
||||
* - localized_options: Menu link localized options.
|
||||
* - is_expanded: TRUE if the link has visible children within the current
|
||||
* menu tree.
|
||||
* - is_collapsed: TRUE if the link has children within the current menu tree
|
||||
* that are not currently visible.
|
||||
* - in_active_trail: TRUE if the link is in the active trail.
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{{ attach_library('olivero/navigation-secondary') }}
|
||||
|
||||
{% import _self as menus %}
|
||||
|
||||
{#
|
||||
We call a macro which calls itself to render the full tree.
|
||||
@see https://twig.symfony.com/doc/3.x/tags/macro.html
|
||||
#}
|
||||
{% set attributes = attributes.addClass('menu') %}
|
||||
{{ menus.menu_links(items, attributes, 0) }}
|
||||
|
||||
{% macro menu_links(items, attributes, menu_level) %}
|
||||
{% set secondary_nav_level = 'secondary-nav__menu--level-' ~ (menu_level + 1) %}
|
||||
{% import _self as menus %}
|
||||
{% if items %}
|
||||
<ul{{ attributes.addClass('secondary-nav__menu', secondary_nav_level) }}>
|
||||
{% set attributes = attributes.removeClass(secondary_nav_level) %}
|
||||
{% for item in items %}
|
||||
|
||||
{% if item.url.isRouted and item.url.routeName == '<nolink>' %}
|
||||
{% set menu_item_type = 'nolink' %}
|
||||
{% elseif item.url.isRouted and item.url.routeName == '<button>' %}
|
||||
{% set menu_item_type = 'button' %}
|
||||
{% else %}
|
||||
{% set menu_item_type = 'link' %}
|
||||
{% endif %}
|
||||
|
||||
{% set item_classes = [
|
||||
'secondary-nav__menu-item',
|
||||
'secondary-nav__menu-item--' ~ menu_item_type,
|
||||
'secondary-nav__menu-item--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
|
||||
item.below ? 'secondary-nav__menu-item--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
{% set link_classes = [
|
||||
'secondary-nav__menu-link',
|
||||
'secondary-nav__menu-link--' ~ menu_item_type,
|
||||
'secondary-nav__menu-link--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
|
||||
item.below ? 'secondary-nav__menu-link--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
<li{{ item.attributes.addClass(item_classes) }}>
|
||||
{{ link(item.title, item.url, {'class': link_classes}) }}
|
||||
|
||||
{% if item.below %}
|
||||
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
@ -0,0 +1,29 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Theme override for a local task link.
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: HTML attributes for the wrapper element.
|
||||
* - is_active: Whether the task item is an active tab.
|
||||
* - link: A rendered link element.
|
||||
* - level: The menu level where the tab is rendered.
|
||||
*
|
||||
* Note: This template renders the content for each task item in
|
||||
* menu-local-tasks.html.twig.
|
||||
*
|
||||
* @see template_preprocess_menu_local_task()
|
||||
*/
|
||||
#}
|
||||
<li{{ attributes.addClass('tabs__tab', is_active ? 'is-active') }}>
|
||||
{{ link }}
|
||||
{% if is_active and level == 'primary' %}
|
||||
<button class="tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" aria-expanded="false">
|
||||
<span class="tabs__trigger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</li>
|
||||
@ -0,0 +1,30 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero theme implementation to display primary and secondary local tasks.
|
||||
*
|
||||
* Available variables:
|
||||
* - primary: HTML list items representing primary tasks.
|
||||
* - secondary: HTML list items representing secondary tasks.
|
||||
*
|
||||
* Each item in these variables (primary and secondary) can be individually
|
||||
* themed in menu-local-task.html.twig.
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
|
||||
{{ attach_library('olivero/tabs') }}
|
||||
|
||||
{% if primary %}
|
||||
<h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
|
||||
<nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-primary-tabs>
|
||||
<ul class="tabs tabs--primary">{{ primary }}</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% if secondary %}
|
||||
<h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
|
||||
<nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title">
|
||||
<ul class="tabs tabs--secondary">{{ secondary }}</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
84
web/core/themes/olivero/templates/navigation/menu.html.twig
Normal file
84
web/core/themes/olivero/templates/navigation/menu.html.twig
Normal file
@ -0,0 +1,84 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Olivero's theme implementation for the main menu.
|
||||
*
|
||||
* Available variables:
|
||||
* - menu_name: The machine name of the menu.
|
||||
* - items: A nested list of menu items. Each menu item contains:
|
||||
* - attributes: HTML attributes for the menu item.
|
||||
* - below: The menu item child items.
|
||||
* - title: The menu link title.
|
||||
* - url: The menu link URL, instance of \Drupal\Core\Url
|
||||
* - localized_options: Menu link localized options.
|
||||
* - is_expanded: TRUE if the link has visible children within the current
|
||||
* menu tree.
|
||||
* - is_collapsed: TRUE if the link has children within the current menu tree
|
||||
* that are not currently visible.
|
||||
* - in_active_trail: TRUE if the link is in the active trail.
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{% import _self as menus %}
|
||||
|
||||
{#
|
||||
We call a macro which calls itself to render the full tree.
|
||||
@see https://twig.symfony.com/doc/3.x/tags/macro.html
|
||||
#}
|
||||
{% set attributes = attributes.addClass('menu') %}
|
||||
{{ menus.menu_links(items, attributes, 0) }}
|
||||
|
||||
{% macro menu_links(items, attributes, menu_level) %}
|
||||
{% set primary_nav_level = 'menu--level-' ~ (menu_level + 1) %}
|
||||
{% import _self as menus %}
|
||||
{% if items %}
|
||||
<ul {{ attributes.addClass('menu', primary_nav_level) }}>
|
||||
{% set attributes = attributes.removeClass(primary_nav_level) %}
|
||||
{% for item in items %}
|
||||
|
||||
{% if item.url.isRouted and item.url.routeName == '<nolink>' %}
|
||||
{% set menu_item_type = 'nolink' %}
|
||||
{% elseif item.url.isRouted and item.url.routeName == '<button>' %}
|
||||
{% set menu_item_type = 'button' %}
|
||||
{% else %}
|
||||
{% set menu_item_type = 'link' %}
|
||||
{% endif %}
|
||||
|
||||
{% set item_classes = [
|
||||
'menu__item',
|
||||
'menu__item--' ~ menu_item_type,
|
||||
'menu__item--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'menu__item--active-trail',
|
||||
item.below ? 'menu__item--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
{% set link_classes = [
|
||||
'menu__link',
|
||||
'menu__link--' ~ menu_item_type,
|
||||
'menu__link--level-' ~ (menu_level + 1),
|
||||
item.in_active_trail ? 'menu__link--active-trail',
|
||||
item.below ? 'menu__link--has-children',
|
||||
]
|
||||
%}
|
||||
|
||||
<li{{ item.attributes.addClass(item_classes) }}>
|
||||
{#
|
||||
A unique HTML ID should be used, but that isn't available through
|
||||
Twig yet, so the |clean_id filter is used for now.
|
||||
@see https://www.drupal.org/project/drupal/issues/3115445
|
||||
#}
|
||||
{% set aria_id = (item.title ~ '-submenu-' ~ loop.index)|clean_id %}
|
||||
|
||||
{{ link(item.title, item.url, {'class': link_classes}) }}
|
||||
|
||||
{% if item.below %}
|
||||
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
110
web/core/themes/olivero/templates/navigation/pager.html.twig
Normal file
110
web/core/themes/olivero/templates/navigation/pager.html.twig
Normal file
@ -0,0 +1,110 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Theme override to display a pager.
|
||||
*
|
||||
* Available variables:
|
||||
* - heading_id: Pagination heading ID.
|
||||
* - pagination_heading_level: The heading level to use for the pager.
|
||||
* - 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" role="navigation" aria-labelledby="{{ heading_id }}">
|
||||
<{{ pagination_heading_level }} id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</{{ pagination_heading_level }}>
|
||||
<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--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 "@olivero/../images/pager-first.svg" -%}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{# Print previous item if we are not on the first page. #}
|
||||
{% if items.previous %}
|
||||
<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 "@olivero/../images/pager-previous.svg" -%}
|
||||
</a>
|
||||
</li>
|
||||
{% 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 %}
|
||||
<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">
|
||||
{{ 'Page'|t }}
|
||||
</span>
|
||||
{{ key }}
|
||||
{% if current != key %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% 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 %}
|
||||
<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 "@olivero/../images/pager-previous.svg" -%}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{# Print last item if we are not on the last page. #}
|
||||
{% if items.last %}
|
||||
<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 "@olivero/../images/pager-first.svg" -%}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user