-
Notifications
You must be signed in to change notification settings - Fork 0
/
languageSelector.html
62 lines (61 loc) · 2.8 KB
/
languageSelector.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- Based on https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html -->
<div th:fragment="languageSelector"
id="language-selector"
class="language-selector"
th:with="
lang=${#locale.toString()},
appPropsLanguages=${#strings.replace(@environment.getProperty('form-flow.languages'), ' ', '')},
supportedLanguages=${appPropsLanguages != null ? appPropsLanguages.split(',') : 'en'},
useLinksForDesktopView=${#arrays.length(supportedLanguages) <= 3},
buttonLabel=${
#messages.msgOrNull('language-preferences.preview.first') != '' &&
#messages.msgOrNull('language-preferences.preview.second') != ''
? #messages.msgOrNull('language-preferences.button') + ', ' + #messages.msgOrNull('language-preferences.preview.first') + ', ' + #messages.msgOrNull('language-preferences.preview.second')
: #messages.msgOrNull('language-preferences.button') + ', ' + #messages.msgOrNull('language-preferences.preview.first')
}
">
<button type="button"
id="language-menu"
class="button button--small translate-button"
th:classappend="${useLinksForDesktopView ? 'use-links-for-desktop' : ''}"
aria-haspopup="true"
aria-controls="language-menu-dropdown"
th:aria-label="${buttonLabel}">
<i class="icon icon-translate" aria-hidden="true"></i>
<span>
<span class="large-text" th:text="#{language-preferences.button}"></span>
<span class="small-text"
th:text="${#messages.msgOrNull('language-preferences.preview.second') == ''}
? #{language-preferences.preview.first}
: #{language-preferences.preview.first} + ', ' + #{language-preferences.preview.second}"></span>
</span>
</button>
<ul id="language-menu-dropdown"
role="menu"
aria-labelledby="language-menu">
<li th:each="language : ${supportedLanguages}" role="none">
<a th:text="${#messages.msg('language-preferences.link-text.' + language)}"
th:lang="${language}"
th:href="|?lang=${language}|"
class="text--small language-option-track-click" role="menuitem"></a>
</li>
</ul>
<nav th:aria-label="#{language-preferences.button}" class="translate-links"
th:classappend="${useLinksForDesktopView ? 'use-links-for-desktop' : ''}">
<a th:each="language : ${supportedLanguages}"
th:lang="${language}"
th:text="${#messages.msg('language-preferences.link-text.' + language)}"
th:href="|?lang=${language}|"></a>
</nav>
<noscript>
<!-- When JavaScript is disabled, hide translate button and show translate links -->
<style>
.translate-button {
display: none !important;
}
.translate-links {
display: block !important;
}
</style>
</noscript>
</div>