Add a locale selector

.rubocop_todo.yml

@@ -60,7 +60,7 @@ Metrics/BlockNesting:
 # Offense count: 25
 # Configuration parameters: CountComments, CountAsOne.
 Metrics/ClassLength:
-  Max: 313
+  Max: 315
 
 # Offense count: 58
 # Configuration parameters: IgnoredMethods.
@@ -80,7 +80,7 @@ Metrics/ParameterLists:
 # Offense count: 59
 # Configuration parameters: IgnoredMethods.
 Metrics/PerceivedComplexity:
-  Max: 26
+  Max: 27
 
 # Offense count: 550
 Minitest/MultipleAssertions:

Vendorfile

@@ -45,4 +45,12 @@ folder 'vendor/assets' do
   folder 'polyfill' do
     file 'es6.js', 'https://polyfill.io/v3/polyfill.js?features=es6&flags=gated,always'
   end
+
+  folder 'jquery.uls' do
+    from 'https://github.com/wikimedia/jquery.uls.git' do
+      folder 'css'
+      folder 'src'
+      folder 'images'
+    end
+  end
 end

app/assets/javascripts/application.js

@@ -18,6 +18,7 @@
 //= require qs/dist/qs
 //= require bs-custom-file-input
 //= require bs-custom-file-input-init
+//= require uls
 
 /*
  * Called as the user scrolls/zooms around to manipulate hrefs of the

app/assets/javascripts/osm.js.erb

@@ -18,6 +18,7 @@ OSM = {
   GRAPHHOPPER_URL:         <%= Settings.graphhopper_url.to_json %>,
   FOSSGIS_OSRM_URL:        <%= Settings.fossgis_osrm_url.to_json %>,
   DEFAULT_LOCALE:          <%= I18n.default_locale.to_json %>,
+  AVAILABLE_LOCALES:       <%= I18n.available_locales.map(&:to_s).to_json %>,
 
 <% if Settings.key?(:thunderforest_key) %>
   THUNDERFOREST_KEY:       <%= Settings.thunderforest_key.to_json %>,

app/assets/javascripts/uls.js

@@ -0,0 +1,30 @@
+//= require src/jquery.uls.data
+//= require src/jquery.uls.data.utils
+//= require src/jquery.uls.lcd
+//= require src/jquery.uls.languagefilter
+//= require src/jquery.uls.core
+
+$(document).ready(function () {
+  function updateLanguage(language) {
+    Cookies.set("_osm_locale", language, { secure: true, path: "/", samesite: "lax" });
+
+    document.location.reload();
+  }
+
+  var languages = $.uls.data.getAutonyms();
+
+  for (var code in languages) {
+    if (!OSM.AVAILABLE_LOCALES.includes(code)) {
+      delete languages[code];
+    }
+  }
+
+  $(".uls-trigger").uls({
+    onSelect: updateLanguage,
+    languages: languages
+  });
+
+  var application_data = $("head").data();
+
+  $(".uls-trigger").text(Cookies.get("_osm_locale") || application_data.locale);
+});

app/assets/stylesheets/screen-ltr.css

@@ -1,4 +1,5 @@
 /*
  *= require ltr/common
+ *= require uls
  *= require ltr/small
  */

app/assets/stylesheets/screen-rtl.css

@@ -1,4 +1,5 @@
 /*
  *= require rtl/common
+ *= require uls
  *= require rtl/small
  */

app/assets/stylesheets/uls.scss

@@ -0,0 +1,42 @@
+/*
+ *= require css/jquery.uls
+ *= require css/jquery.uls.grid
+ *= require css/jquery.uls.lcd
+ */
+
+.uls-menu {
+  z-index: 100000;
+
+  h1 {
+    margin: 16px 0px;
+  }
+
+  .row {
+    display: block;
+
+    * {
+      width: auto;
+      max-width: none;
+    }
+
+    li {
+      width: max-content;
+    }
+  }
+}
+
+.uls-trigger {
+  cursor: pointer;
+  background-image: image-url('images/language.png');
+  background-image: linear-gradient(transparent, transparent), image-url('images/language.svg');
+}
+
+.uls-icon-close {
+  background-image: image-url('images/close.png');
+  background-image: linear-gradient(transparent, transparent), image-url('images/close.svg');
+}
+
+.uls-menu .uls-search-label {
+  background-image: image-rl('images/search.png');
+  background-image: linear-gradient(transparent, transparent), image-url('images/search.svg');
+}

app/controllers/application_controller.rb

@@ -175,6 +175,8 @@ def report_error(message, status = :bad_request)
   def preferred_languages
     @preferred_languages ||= if params[:locale]
                                Locale.list(params[:locale])
+                             elsif request.cookies["_osm_locale"]
+                               Locale.list(request.cookies["_osm_locale"])
                              elsif current_user
                                current_user.preferred_languages
                              else

app/controllers/users_controller.rb

@@ -72,7 +72,11 @@ def save
         current_user.data_public = true
         current_user.description = "" if current_user.description.nil?
         current_user.creation_ip = request.remote_ip
-        current_user.languages = http_accept_language.user_preferred_languages
+        current_user.languages = if request.cookies["_osm_locale"]
+                                   Locale.list(request.cookies["_osm_locale"])
+                                 else
+                                   http_accept_language.user_preferred_languages
+                                 end
         current_user.terms_agreed = Time.now.utc
         current_user.tou_agreed = Time.now.utc
         current_user.terms_seen = true

app/views/layouts/_header.html.erb

@@ -44,6 +44,7 @@
           <% end -%>
         </li>
       <% end %>
+      <li class="compact-hide uls-trigger"></li>
       <li class="compact-hide nav-item <%= current_page_class(traces_path) %>">
         <%= link_to t("layouts.gps_traces"), traces_path, :class => "nav-link" %>
       </li>
@@ -70,6 +71,7 @@
               <% end -%>
             </li>
           <% end %>
+          <li class="uls-trigger"></li>
           <li class="<%= current_page_class(traces_path) %>"><%= link_to t("layouts.gps_traces"), traces_path, :class => "dropdown-item" %></li>
           <li class="<%= current_page_class(diary_entries_path) %>"><%= link_to t("layouts.user_diaries"), diary_entries_path, :class => "dropdown-item" %></li>
           <li class="<%= current_page_class(copyright_path) %>"><%= link_to t("layouts.copyright"), copyright_path, :class => "dropdown-item" %></li>

vendor/assets/jquery.uls/css/jquery.uls.css

@@ -0,0 +1,119 @@
+.uls-trigger {
+	background: url( ../images/language.svg ) no-repeat left center;
+	padding-left: 24px;
+}
+
+.uls-menu {
+	position: absolute;
+	z-index: 1000;
+	display: none;
+	margin-top: 1px;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border-color: rgba( 0, 0, 0, 0.2 );
+	-webkit-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
+	-moz-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
+	box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
+	-webkit-background-clip: padding-box;
+	-moz-background-clip: padding;
+	background-clip: padding-box;
+}
+
+.uls-wide {
+	min-width: 715px;
+}
+
+.uls-medium {
+	min-width: 360px;
+}
+
+/* Override the grid */
+.uls-medium.grid .row {
+	min-width: 300px;
+}
+
+.uls-narrow {
+	min-width: 180px;
+}
+
+/* Override the grid */
+.uls-narrow.grid .row {
+	min-width: 150px;
+}
+
+.uls-search {
+	background-color: #fff;
+	padding: 5px 16px;
+	border-bottom: 1px solid #ddd;
+}
+
+.grid .uls-search {
+	padding-left: 0;
+}
+
+/* Make space for magnifying class on the front */
+.uls-search-wrapper {
+	position: relative;
+	padding-left: 44px;
+	margin-right: 5px;
+	height: 32px;
+}
+
+.uls-search-label {
+	background: url( ../images/search.svg ) no-repeat center center;
+	background-size: 20px;
+	height: 32px;
+	width: 44px;
+	display: block;
+	position: absolute;
+	left: 0;
+	opacity: 0.5;
+}
+
+.uls-search-input-wrapper {
+	position: relative;
+}
+
+/* There are two input boxes. This class applies to both of them */
+.uls-filterinput {
+	font-size: 1.143em;
+	height: 32px;
+	width: 100%;
+	/* For the custom clear (X) icon */
+	padding: 6px 25px 6px 0;
+	outline: 0;
+	border: 0;
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* This is the actual input */
+.uls-languagefilter {
+	background-color: transparent;
+	border: 0;
+	color: #222;
+}
+
+/* This is the shadow input box showing completion suggestions */
+.uls-filtersuggestion {
+	background-color: #fff;
+	color: #777;
+}
+
+.uls-languagefilter-clear {
+	background: url( ../images/close.svg ) no-repeat left center;
+	background-size: 15px;
+	cursor: pointer;
+	height: 15px;
+	width: 15px;
+	opacity: 0.7;
+
+	/* Vertical margins: (32 - 15) / 2 */
+	margin: 8.5px 5px;
+	position: absolute;
+	right: 0;
+	/* Make it appear above the input boxes */
+	z-index: 1;
+}