Commit b2944792 authored by Peter Serwylo's avatar Peter Serwylo

Add language chooser to sidebar.

Use a dropdown instead of rendering each flag. Although it doesn't look
as nice when there are only two or three options to choose from, it:
 * Works well with lots of translations.
 * Falls back gracefully when the relevant icon is not found.

It redirects the browser via JS as soon as a new language is chosen.

When JS is disabled, it falls back to showing a "Change" button, which
in concert with a `.htaccess` `mod_rewrite` rule, takes incoming
`lang=fr` query parameters and rewrites them to `/fr/...`

Icons are from the
https://github.com/googlei18n/region-flags/blob/gh-pages/COPYING
project, which subsequently took them from Wikipedia and confirmed they
are in the public domain.
parent a9932abc
......@@ -118,3 +118,28 @@ RewriteRule ^(.*)$ /packages/category/%1/? [L,R=301]
#
RewriteRule ^repository/browse.*$ /packages/ [L,R=301]
##
## LANGUAGE CHOOSER
##
## NOTE: This will only work for websites with a `baseurl` of `/`. This is because the .htaccess file has
## no insight into what the `baseurl` actually is, so we presume `/` as it will be for https://f-droid.org.
##
## The lanugage chooser sends GET requests to, for example, `...?lang=fr`.
## However, the users need to end up on `/fr/...`. Given we need the site to work without JavaScript,
## the only real way to do this is by rewriting the URL on the server.
## Given this is a static site, we don't expect much usage of query parameters for anything other
## than legacy redirects, and so this doesn't make a huge effort to maintain query parameters when rewriting.
##
#
# Rewrites:
# /any/path?lang=fr -> /fr/any/path
# /any/path?lang=fr_CA -> /fr_CA/any/path
# /any/path?trailing_param=blah&lang=fr&trailing_param=blah -> /fr/any/path
#
RewriteCond %{QUERY_STRING} ^.*lang=en.*$
RewriteRule ^(.*)$ /$1? [L,R=302]
RewriteCond %{QUERY_STRING} ^.*lang=(([a-z][a-z](_[A-Z][A-Z])?)?).*$
RewriteRule ^(.*)$ /%1/$1? [L,R=302]
{% comment %}
The language chooser is a drop down list which displays the relevant flag to the left.
If JavaScript is enabled, then it will automatically redirect to the relevant translation when changed.
If the user has JavaScript disabled, then it will show a submit button, and the .htaccess file will rewrite
the incoming "?lang=..." query parameter to the correct translated path.
{% endcomment %}
<form action="{{site.baseurl}}{{ page.url }}" method="get">
<img class="lang-flag" alt="{{ lang }}" src="{{site.baseurl}}/assets/lang/{{ site.active_lang }}.png" />
<select id="language-chooser-select" name="lang">
{% for lang in site.languages %}
<option value="{{ lang }}" {% if lang == site.active_lang %}selected="selected"{% endif %}>
{{ lang|upcase }}
</option>
{% endfor %}
</select>
<script>
(function() {
document.getElementById('language-chooser-select').onchange = function() {
var lang = this.value;
var isDefault = lang == 'en';
var prefix = isDefault ? '' : '/' + lang;
document.location = '{{site.baseurl}}' + prefix + '{{page.url}}';
}
})();
</script>
<noscript>
<input id="language-chooser-submit" type="submit" value="Change" />
</noscript>
</form>
......@@ -16,7 +16,11 @@
</div>
<div class="sidebar">
<div class="sidebar-widget">
<div class="sidebar-widget language">
{% include sidebar-lang.html %}
</div>
<div class="sidebar-widget">
{% capture donate %}{% include sidebar-donate.md %}{% endcapture %}
{{ donate | markdownify }}
</div>
......
......@@ -168,6 +168,19 @@ body {
}
}
/**
* Language chooser
*/
.sidebar-widget.language {
padding-bottom: 0.5em;
text-align: right;
.lang-flag {
margin: 0 0.1em;
vertical-align: middle;
}
}
/**
* Footer
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment