self-hosted/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-12-18 08:27:03 +02:00
Code Issues Releases Activity

Persistent change language dialog on click

Browse Source
This commit is contained in:
Piero Toffanin 2023-01-06 13:37:34 -05:00
parent 54c67ba2d7
commit a67db35d61
2 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
libretranslate/static/css/main.css
View File

@ -56,8 +56,9 @@ h3.header {
display: none;
}
#nav:hover #change-language:hover + .locale-panel,
#nav-mobile:hover #change-language:hover + .locale-panel{
#nav:hover .change-language:hover + .locale-panel,
#nav-mobile:hover .change-language:hover + .locale-panel,
.change-language.clicked + .locale-panel{
display: block;
}

51
libretranslate/templates/index.html
View File

@ -69,9 +69,9 @@
{% if api_keys %}
<li><a class="noline" href="javascript:setApiKey()" title="{{ _h('Set API Key') }}" aria-label="{{ _h('Set API Key') }}"><i class="material-icons">vpn_key</i></a></li>
{% endif %}
<li id="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
<li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
</li>
<li class="locale-panel" id="locale-panel">
<li class="locale-panel">
<select id="locales" onchange="changeLocale(this)">
{% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'] }}</option>{% endfor %}
</select>
@ -80,22 +80,43 @@
{% endset %}
{{ menulinks }}
</ul>
<script>
var localeLinks = {
{% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %}
{% endfor %}
};
function changeLocale(slt){
var lang = slt.value;
if (localeLinks[lang]) location.href = localeLinks[lang];
else location.href = '?lang=' + slt.value;
}
</script>
<ul id="nav-mobile" class="sidenav">
{{ menulinks }}
</ul>
<script>
var localeLinks = {
{% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %}
{% endfor %}
};
function changeLocale(slt){
var lang = slt.value;
if (localeLinks[lang]) location.href = localeLinks[lang];
else location.href = '?lang=' + slt.value;
}
var btnChangeLangs = document.getElementsByClassName("change-language");
var localePanels = document.getElementsByClassName("locale-panel");
console.log(btnChangeLangs);
for (var i = 0; i < btnChangeLangs.length; i++){
(function(btn){
btn.addEventListener('click', function(e){
e.stopPropagation();
btn.classList.toggle('clicked');
});
})(btnChangeLangs[i]);
}
for (var i = 0; i < localePanels.length; i++){
localePanels[i].addEventListener('click', function(e){
e.stopPropagation();
});
}
document.addEventListener('click', function(){
for (var i = 0; i < btnChangeLangs.length; i++){
btnChangeLangs[i].classList.remove('clicked');
}
});
</script>
</div>
</nav>
</header>