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; display: none;
} }
#nav:hover #change-language:hover + .locale-panel, #nav:hover .change-language:hover + .locale-panel,
#nav-mobile:hover #change-language:hover + .locale-panel{ #nav-mobile:hover .change-language:hover + .locale-panel,
.change-language.clicked + .locale-panel{
display: block; display: block;
} }

51
libretranslate/templates/index.html
View File

@ -69,9 +69,9 @@
{% if api_keys %} {% 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> <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 %} {% 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>
<li class="locale-panel" id="locale-panel"> <li class="locale-panel">
<select id="locales" onchange="changeLocale(this)"> <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 %} {% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'] }}</option>{% endfor %}
</select> </select>
@ -80,22 +80,43 @@
{% endset %} {% endset %}
{{ menulinks }} {{ menulinks }}
</ul> </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"> <ul id="nav-mobile" class="sidenav">
{{ menulinks }} {{ menulinks }}
</ul> </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> </div>
</nav> </nav>
</header> </header>