50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
{%- comment -%}
|
|
Renders the language picker for the localization form
|
|
|
|
Accepts:
|
|
- localPosition: pass in the position in which the form is coming up to create specific IDs
|
|
{%- endcomment -%}
|
|
|
|
<div class="disclosure">
|
|
<button
|
|
type="button"
|
|
class="disclosure__button localization-form__select localization-selector link link--text caption-large"
|
|
aria-expanded="false"
|
|
aria-controls="{{ localPosition }}List"
|
|
aria-describedby="{{ localPosition }}Label"
|
|
>
|
|
<span>{{ localization.language.endonym_name | capitalize }}</span>
|
|
{% render 'icon-caret' %}
|
|
</button>
|
|
<div class="disclosure__list-wrapper" hidden>
|
|
<ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
|
|
{%- for language in localization.available_languages -%}
|
|
<li class="disclosure__item" tabindex="-1">
|
|
<a
|
|
class="link link--text disclosure__link caption-large focus-inset"
|
|
href="#"
|
|
hreflang="{{ language.iso_code }}"
|
|
lang="{{ language.iso_code }}"
|
|
{% if language.iso_code == localization.language.iso_code %}
|
|
aria-current="true"
|
|
{% endif %}
|
|
data-value="{{ language.iso_code }}"
|
|
>
|
|
<span
|
|
{% if language.iso_code != localization.language.iso_code %}
|
|
class="visibility-hidden"
|
|
{% endif %}
|
|
>
|
|
{%- render 'icon-checkmark' -%}
|
|
</span>
|
|
<span>
|
|
{{ language.endonym_name | capitalize }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
|