Add locale selector

app/assets/javascripts/application.js

@@ -16,6 +16,7 @@
 //= require matomo
 //= require richtext
 //= require qs/dist/qs
+//= require language_selector
 
 /*
  * Called as the user scrolls/zooms around to manipulate hrefs of the

app/assets/javascripts/language_selector.js

@@ -0,0 +1,4 @@
+$(document).on("change", ".language-change-trigger", function () {
+  Cookies.set("_osm_locale", this.value, { secure: true, path: "/", samesite: "lax" });
+  document.location.reload();
+});

app/assets/stylesheets/common.scss

@@ -52,6 +52,13 @@ time[title] {
   color: $blue;
 }
 
+/* Utility for transparent color */
+
+.text-transparent{
+  color: transparent !important;
+  user-select: none;
+}
+
 /* Bootstrap contextual table classes overrides in dark mode */
 
 @include color-mode(dark) {

app/controllers/application_controller.rb

@@ -194,6 +194,8 @@ def preferred_languages
                                Locale.list(params[:locale])
                              elsif current_user
                                current_user.preferred_languages
+                             elsif request.cookies["_osm_locale"]
+                               Locale.list(request.cookies["_osm_locale"])
                              else
                                Locale.list(http_accept_language.user_preferred_languages)
                              end

app/controllers/users_controller.rb

@@ -270,7 +270,11 @@ def save_new_user(email_hmac, referer = nil)
     current_user.description = "" if current_user.description.nil?
     current_user.creation_ip = request.remote_ip
     current_user.creation_address = 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

@@ -78,6 +78,15 @@
           <li><%= link_to t("layouts.about"), about_path, :class => "dropdown-item" %></li>
         </ul>
       </li>
+      <li class="nav-item ms-1">
+        <% if current_user && current_user.id %>
+          <%= link_to(preferences_path, :class => "nav-link text-secondary") do %>
+            <%= render "shared/language_selector", :classes => "", :disabled => true %>
+          <% end %>
+        <% else %>
+          <%= render "shared/language_selector", :classes => "nav-link text-secondary", :disabled => false %>
+        <% end %>
+      </li>
     </ul>
     <% if current_user && current_user.id %>
       <div class='d-inline-flex dropdown user-menu logged-in'>

app/views/shared/_language_selector.html.erb

@@ -0,0 +1,16 @@
+<label class="position-relative d-flex <%= classes %>" role="button">
+  <svg width="20" height="20" fill="currentColor">
+    <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z" />
+  </svg>
+  <% unless disabled %>
+    <select role="button" class="p-0 position-absolute top-0 start-0 w-100 h-100 language-change-trigger text-transparent bg-transparent <%= classes %>">
+      <% Locale.available
+               .map { |locale| Language.find_by(:code => locale.to_s) }
+               .select { |n| n }
+               .sort_by { |n| n[:english_name] }
+               .each do |language| %>
+        <option class="form-select" value="<%= language.code %>" <%= "selected" if I18n.locale.to_s == language.code %>><%= language.name %></option>
+      <% end %>
+    </select>
+  <% end %>
+</label>

test/system/site_test.rb

@@ -93,4 +93,23 @@ class SiteTest < ApplicationSystemTestCase
     li.hover
     assert_selector ".tooltip", :text => "Zoom in"
   end
+
+  test "language selector should exist when logged out" do
+    create(:language, :code => "a")
+    create(:language, :code => "en")
+    create(:language, :code => "en-GB")
+
+    visit "/"
+    assert_selector ".language-change-trigger", :visible => "all"
+    assert_selector "option[value='en']", :visible => "all"
+    assert_selector "option[value='en-GB']", :visible => "all"
+    assert_no_selector "option[value='a']", :visible => "all"
+  end
+
+  test "language selector should not exist when logged in" do
+    sign_in_as(create(:user))
+
+    visit "/"
+    assert_no_selector ".language-change-trigger", :visible => "all"
+  end
 end