diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4991e82fb..3ae4c20ee 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -14,6 +14,7 @@ //= require make-plural/cardinals //= require matomo //= require richtext +//= require language_selector { const application_data = $("head").data(); @@ -100,7 +101,8 @@ $(function () { $collapsedSecondaryMenu = $("#compact-secondary-nav > ul"), secondaryMenuItems = [], breakpointWidth = 768; - let moreItemWidth = 0; + let moreItemWidth = 0, + notCollapsibleItemsWidth = 0; OSM.csrf = {}; OSM.csrf[($("meta[name=csrf-param]").attr("content"))] = $("meta[name=csrf-token]").attr("content"); @@ -117,7 +119,7 @@ $(function () { secondaryMenuItems.forEach(function (item) { $(item[0]).remove(); }); - let runningWidth = 0, + let runningWidth = notCollapsibleItemsWidth, i = 0, requiredWidth; for (; i < secondaryMenuItems.length; i++) { @@ -176,10 +178,14 @@ $(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(); diff --git a/app/assets/javascripts/language_selector.js b/app/assets/javascripts/language_selector.js new file mode 100644 index 000000000..eac58e403 --- /dev/null +++ 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(); +}); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 3ba484cd5..adb08b47a 100644 --- 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) { diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 25de71f20..b286cd444 100644 --- 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 diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index c6e2298ab..427147121 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -205,7 +205,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 diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 69e323a99..d82858997 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -66,6 +66,15 @@ +
  • + <% 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 %> +
    • <% if current_user && current_user.id %>
    diff --git a/app/views/shared/_language_selector.html.erb b/app/views/shared/_language_selector.html.erb new file mode 100644 index 000000000..7da52a4d5 --- /dev/null +++ b/app/views/shared/_language_selector.html.erb @@ -0,0 +1,15 @@ + diff --git a/config/locales/en.yml b/config/locales/en.yml index bc2f3b1b3..29322fe57 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2030,6 +2030,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" diff --git a/test/system/site_test.rb b/test/system/site_test.rb index d7b9f279e..89ec19992 100644 --- 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