Add locale selector

2025-03-12 22:02:07 +04:00 · 2025-03-12 22:02:07 +04:00 · a0478eab94
commit a0478eab94
parent b32e23b412
9 changed files with 179 additions and 4 deletions
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -13,6 +13,7 @@
 //= require i18n
 //= require matomo
 //= require richtext
+//= require language_selector

 {
  const application_data = $("head").data();
@ -93,7 +94,8 @@ $(document).ready(function () {
        $collapsedSecondaryMenu = $("#compact-secondary-nav > ul"),
        secondaryMenuItems = [],
        breakpointWidth = 768;
-  let moreItemWidth = 0;
+  let moreItemWidth = 0,
+      notCollapsibleItemsWidth = 0;

  function updateHeader() {
    const windowWidth = $(window).width();
@ -107,7 +109,7 @@ $(document).ready(function () {
      secondaryMenuItems.forEach(function (item) {
        $(item[0]).remove();
      });
-      let runningWidth = 0,
+      let runningWidth = notCollapsibleItemsWidth,
          i = 0,
          requiredWidth;
      for (; i < secondaryMenuItems.length; i++) {
@ -166,10 +168,14 @@ $(document).ready(function () {
   * to defer the measurement slightly as a workaround.
   */
  setTimeout(function () {
-    $expandedSecondaryMenu.find("li:not(#compact-secondary-nav)").each(function () {
+    $expandedSecondaryMenu.find("li:not(#compact-secondary-nav):not(.not-collapsible)").each(function () {
      secondaryMenuItems.push([this, $(this).width()]);
    });
    moreItemWidth = $("#compact-secondary-nav").width();
+    notCollapsibleItemsWidth = $expandedSecondaryMenu
+      .find("li.not-collapsible")
+      .toArray()
+      .reduce((accWidth, item) => accWidth + $(item).outerWidth(), 0);

    updateHeader();

--- a/app/assets/javascripts/language_selector.js
+++ b/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();
+});
--- a/app/assets/stylesheets/common.scss
+++ b/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) {
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -194,6 +194,8 @@ class ApplicationController < ActionController::Base
                               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
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@ -187,7 +187,11 @@ class UsersController < ApplicationController
    current_user.data_public = true
    current_user.description = "" if current_user.description.nil?
    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
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@ -66,6 +66,15 @@
        <ul class="dropdown-menu">
        </ul>
      </li>
+      <li class="nav-item ps-1 not-collapsible">
+        <% 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'>
--- a/app/views/shared/_language_selector.html.erb
+++ b/app/views/shared/_language_selector.html.erb
@ -0,0 +1,15 @@
+<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
+               .select { |locale| I18n.exists? "shared.language_selector.#{locale}" }
+               .sort_by { |locale| t(".#{locale}") }
+               .each do |locale| %>
+        <option class="form-select" value="<%= locale.to_s %>" <%= "selected" if I18n.locale.to_s == locale.to_s %>><%= t(".#{locale}") %></option>
+      <% end %>
+    </select>
+  <% end %>
+</label>
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -1984,6 +1984,114 @@ en:
      users:
        older: Older Users
        newer: Newer Users
+    language_selector:
+      af: Afrikaans
+      aln: Albanian (Gheg)
+      ar: Arabic
+      arz: Arabic (Egyptian)	
+      ast: Asturian
+      az: Azerbaijani
+      ba: Bashkir
+      be-Tarask: Belarusian (Taraškievica)
+      be: Belarusian
+      bg: Bulgarian
+      bn: Bengali
+      br: Breton
+      bs: Bosnian
+      ca: Catalan, Valencian
+      ce: Chechen
+      cs: Czech
+      cy: Welsh
+      da: Danish
+      de: German
+      diq: Dimli (individual language)
+      dsb: Lower Sorbian
+      el: Greek
+      en-GB: English (United Kingdom)
+      en: English
+      eo: Esperanto
+      es: Spanish, Castilian
+      et: Estonian
+      eu: Basque
+      fa: Persian
+      fi: Finnish
+      fit: Finnish (Tornedalen)
+      fr: French
+      fur: Friulian
+      fy: Western Frisian
+      ga: Irish
+      gcf: Guadeloupean Creole French
+      gd: Gaelic, Scottish Gaelic
+      gl: Galician
+      gsw: Alemannic (specifically Swiss German, Alsatian)
+      gu: Gujarati
+      he: Hebrew
+      hi: Hindi
+      hr: Croatian
+      hsb: Sorbian, Upper
+      hu: Hungarian
+      ia: Interlingua
+      id: Indonesian
+      is: Icelandic
+      it: Italian
+      ja: Japanese
+      ka: Georgian
+      kab: Kabyle
+      kk-cyrl: Kazakh (Cyrillic)
+      km: Central Khmer
+      kn: Kannada
+      ko: Korean
+      ksh: Colognian
+      ku-Latn: Kurdish (Latin)
+      lb: Luxembourgish, Letzeburgesch
+      lt: Lithuanian
+      lv: Latvian
+      mk: Macedonian
+      mo: Macao
+      mr: Marathi
+      ms: Malay
+      my: Burmese
+      nb: Norwegian Bokmål
+      nds: Low German, Low Saxon
+      ne: Nepali
+      nl: Dutch, Flemish
+      nn: Norwegian Nynorsk
+      nqo: NKo (N'Ko)
+      oc: Occitan
+      pa: Punjabi, Panjabi
+      pl: Polish
+      pnb: Panjabi, Western
+      ps: Pashto, Pushto
+      pt-PT: Portuguese (Portugal)
+      pt: Portuguese
+      ro: Romanian, Moldavian, Moldovan
+      ru: Russian
+      sat: Santali
+      sc: Sardinian
+      scn: Sicilian
+      sco: Scots
+      sh: Serbo-Croatian
+      sk: Slovak
+      skr-arab: Saraiki (Arabic)
+      sl: Slovenian
+      sq: Albanian
+      sr-Latn: Serbian (Latin)
+      sr: Serbian
+      sv: Swedish
+      ta: Tamil
+      te: Telugu
+      th: Thai
+      tl: Tagalog
+      tr: Turkish
+      tt: Tatar
+      uk: Ukrainian
+      vi: Vietnamese
+      xmf: Mingrelian
+      yi: Yiddish
+      yo: Yoruba
+      zh-CN: Chinese (Simplified)
+      zh-HK: Chinese (Hong Kong)
+      zh-TW: Chinese (Taiwan)
  site:
    about:
      heading_html: "%{copyright}OpenStreetMap %{br} contributors"
--- a/test/system/site_test.rb
+++ b/test/system/site_test.rb
@ -93,4 +93,24 @@ class SiteTest < ApplicationSystemTestCase
    li.hover
    assert_selector ".tooltip", :text => "Zoom in"
  end
+
+  test "language selector should exist when logged out" do
+    visit "/"
+    assert_selector ".language-change-trigger", :visible => "all"
+    Locale.available
+          .each do |locale|
+      if I18n.exists? "shared.language_selector.#{locale}"
+        assert_selector "option[value='#{locale}']", :visible => "all"
+      else
+        assert_no_selector "option[value='#{locale}']", :visible => "all"
+      end
+    end
+  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