rework client-side language handling to improve availability

Author: cconard96

lib/bundles/base.js

@@ -97,6 +97,9 @@ window._ = require('lodash');
 // add translation function into global scope
 // signature is almost the same as for PHP functions, but accept extra arguments for string variables
 window.i18n = require('gettext.js/lib/gettext').default({domain: 'glpi'});
+if (window.loadLocales !== undefined) {
+    await window.loadLocales();
+}
 
 const escape_msgid = function (msgid) {
     return msgid.replace(/%(\d+)\$/g, '%%$1\$');

src/Glpi/Application/View/Extension/FrontEndAssetsExtension.php

@@ -242,36 +242,32 @@ public function localesJs(): string
             $locales_domains[$plugin] = Plugin::getPluginFilesVersion($plugin);
         }
 
-        $script = "
-            $(function() {
-                i18n.setLocale('" . \jsescape($_SESSION['glpilanguage']) . "');
-            });
-
-            $.fn.select2.defaults.set(
-                'language',
-                '" . \jsescape($CFG_GLPI['languages'][$_SESSION['glpilanguage']][2]) . "',
-            );
-        ";
-
-        foreach ($locales_domains as $locale_domain => $locale_version) {
-            $locales_path = Html::getPrefixedUrl(
+        $locales_json = json_encode(array_combine(array_keys($locales_domains), array_map(static function ($domain, $version) {
+            return Html::getPrefixedUrl(
                 '/front/locale.php'
-                . '?domain=' . $locale_domain
+                . '?domain=' . $domain
                 . '&lang=' . $_SESSION['glpilanguage']
-                . '&v=' . FrontEnd::getVersionCacheKey($locale_version)
+                . '&v=' . FrontEnd::getVersionCacheKey($version)
             );
-            $script .= "
-                $(function() {
-                    $.ajax({
-                        type: 'GET',
-                        url: '" . \jsescape($locales_path) . "',
-                        success: function(json) {
-                            i18n.loadJSON(json, '" . \jsescape($locale_domain) . "');
+        }, array_keys($locales_domains), $locales_domains)));
+
+        $script = <<<JS
+            // Fetch locale JSON without jQuery to allow fetching before jQuery is loaded
+            async function loadLocales() {
+                const locales = $locales_json;
+                const promises = [];
+                for (const [domain, url] of Object.entries(locales)) {
+                    promises.push(window.fetch(url).then(response => {
+                        if (response.ok) {
+                            return response.json().then(data => {
+                                i18n.loadJSON(data, domain);
+                            });
                         }
-                    });
-                });
-            ";
-        }
+                    }));
+                }
+                await Promise.all(promises);
+            }
+JS;
 
         return Html::scriptBlock($script);
     }

src/Html.php

@@ -1050,9 +1050,11 @@ public static function includeHeader(
 
         $theme = ThemeManager::getInstance()->getCurrentTheme();
         $lang = $_SESSION['glpilanguage'] ?? Session::getPreferredLanguage();
+        // Force lang to be BCP 47 compliant
+        $lang = str_replace('_', '-', $lang);
 
         $tpl_vars = [
-            'lang'               => $CFG_GLPI["languages"][$lang][3],
+            'lang'               => $lang,
             'title'              => $title,
             'theme'              => $theme,
             'is_anonymous_page'  => false,

templates/layout/parts/head.html.twig

@@ -79,13 +79,13 @@
 
    {{ config_js() }}
 
+    {{ locales_js() }}
+
    {% for js_file in js_files %}
       <script type="text/javascript" src="{{ js_path(js_file.path, js_file.options ?? []) }}"></script>
    {% endfor %}
 
    {% for js_file in js_modules %}
       <script type="module" src="{{ js_path(js_file.path, js_file.options ?? []) }}"></script>
    {% endfor %}
-
-   {{ locales_js() }}
 </head>