48 lines
1.6 KiB
Twig
48 lines
1.6 KiB
Twig
|
{#
|
||
|
|
/**
|
||
|
|
* @file
|
||
|
|
* Default theme implementation for webform wizard progress tracker.
|
||
|
|
*
|
||
|
|
* Available variables:
|
||
|
|
* - webform: A webform.
|
||
|
|
* - pages: Associatve array of wizard pages.
|
||
|
|
* - progress: Array of wizard progress containing page titles.
|
||
|
|
* - current_page: Current wizard page key.
|
||
|
|
* - current_index: The current wizard page index.
|
||
|
|
* - max_pages: Maximum number of pages that progress text should be displayed on.
|
||
|
|
*
|
||
|
|
* @see template_preprocess_webform_progress_bar()
|
||
|
|
* @see https://www.w3.org/WAI/tutorials/forms/multi-page/
|
||
|
|
*
|
||
|
|
* @ingroup themeable
|
||
|
|
*/
|
||
|
|
#}
|
||
|
|
{{ attach_library('webform/webform.progress.tracker') }}
|
||
|
|
|
||
|
|
<ul class="webform-progress-tracker progress-tracker progress-tracker--center">
|
||
|
|
{% for index, page in progress %}
|
||
|
|
{% set is_completed = index < current_index %}
|
||
|
|
{% set is_active = index == current_index %}
|
||
|
|
{%
|
||
|
|
set classes = [
|
||
|
|
'progress-step',
|
||
|
|
is_completed ? 'is-complete',
|
||
|
|
is_active ? 'is-active',
|
||
|
|
]
|
||
|
|
%}
|
||
|
|
<li{{ attributes.setAttribute('data-webform-page', page.name).setAttribute('title', page.title).setAttribute('class', '').addClass(classes) }}>
|
||
|
|
<span class="progress-marker">{{ index + 1 }}</span>
|
||
|
|
{% if progress|length < max_pages %}
|
||
|
|
<span class="progress-text">
|
||
|
|
<div class="progress-title">
|
||
|
|
{% if is_active or is_completed %}
|
||
|
|
<span class="visually-hidden">{{ is_active ? 'Current'|t : 'Completed'|t }}: </span>
|
||
|
|
{% endif %}
|
||
|
|
{{ page.title }}
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
{% endif %}
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|