From f5c8825dcb01a2d3c1264c86f60f91c51ecc96df Mon Sep 17 00:00:00 2001 From: James Cole Date: Wed, 23 Sep 2026 08:33:44 +0200 Subject: [PATCH] Improve load of language versus locale. --- resources/assets/v3/js/boot/bootstrap.js | 191 +++++++++--------- resources/assets/v3/js/shared/draw-chart.js | 9 +- .../assets/v3/js/support/get-viewrange.js | 50 ++--- .../assets/v3/js/support/load-translations.js | 32 +-- resources/views/layout/v3/session.blade.php | 2 +- 5 files changed, 145 insertions(+), 139 deletions(-) diff --git a/resources/assets/v3/js/boot/bootstrap.js b/resources/assets/v3/js/boot/bootstrap.js index e40e20198f..1533b07199 100644 --- a/resources/assets/v3/js/boot/bootstrap.js +++ b/resources/assets/v3/js/boot/bootstrap.js @@ -28,10 +28,10 @@ import store from "../store/store.js"; import axios from "axios"; import Shepherd from "shepherd.js"; import "cally"; -import { getFreshVariable } from "../store/get-fresh-variable.js"; -import { getVariables } from "../store/get-variables.js"; -import { getViewRange } from "../support/get-viewrange.js"; -import { loadTranslations } from "../support/load-translations.js"; +import {getFreshVariable} from "../store/get-fresh-variable.js"; +import {getVariables} from "../store/get-variables.js"; +import {getViewRange} from "../support/get-viewrange.js"; +import {loadTranslations} from "../support/load-translations.js"; import i18next from "i18next"; window.bootstrapped = false; @@ -72,101 +72,100 @@ getFreshVariable("lastActivity") if ("equal" === values.locale) { values.locale = values.language; } + const replacedLocale = values.locale.replace("_", "-"); + const replacedLanguage = values.language.replace("_", "-"); // save local in window.__ something - window.__localeId__ = values.locale; - store.set("language", values.language); - store.set("locale", values.locale); - // console.log( - // "Language is " + - // values.language + - // ", locale is " + - // values.locale, - // ); - loadTranslations(values.locale).then(() => { - const event = new Event("firefly-iii-bootstrapped"); - document.dispatchEvent(event); - window.bootstrapped = true; - // console.log('Bootstrapped!'); + window.__localeId__ = replacedLocale; + store.set("language", replacedLanguage); + store.set("locale", replacedLocale); + console.log('Ready with bootstrap for this page.'); + loadTranslations(replacedLanguage, replacedLocale) + .then(function (t) { + console.log('T is', t); + window.i18next = i18next; + document.getElementById('test-box').innerText = i18next.t("config.html_language", {lng: 'nl-NL'}); + console.log('is init here A', i18next.isInitialized,i18next.languages); + const event = new Event("firefly-iii-bootstrapped"); + document.dispatchEvent(event); + window.bootstrapped = true; + // console.log('Bootstrapped!'); - // page may have an introduction necessary to be played. - if (!window.showTour) { - return; - } - const url = "/"; - let site = axios.create({ - baseURL: url, - withCredentials: true, - }); - axios.defaults.withCredentials = true; - axios.defaults.baseURL = url; - - site.get(window.routeStepsUrl).then(function (data) { - let hints = data.data; - - const tour = new Shepherd.Tour({ - useModalOverlay: true, - defaultStepOptions: { - // classes: 'shadow-md bg-purple-dark', - scrollTo: true, - cancelIcon: { - enabled: true, - }, - }, - }); - // cancel or complete - tour.on("cancel", () => { - site.post(window.routeForFinishedTour); - }); - tour.on("complete", () => { - site.post(window.routeForFinishedTour); - }); - - for (let i = 0; i < hints.length; i++) { - if (Object.hasOwn(hints, i)) { - let hint = hints[i]; - - let buttons = []; - if (i > 0) { - buttons.push({ - text: i18next.t("firefly.intro_prev_label"), - action: tour.back, - }); - } - if (i < hints.length - 1) { - buttons.push({ - text: i18next.t("firefly.intro_next_label"), - action: tour.next, - }); - } - if (i === hints.length - 1) { - // console.log("Add complete"); - buttons.push({ - text: i18next.t("firefly.intro_done_label"), - action: tour.complete, - }); - } - - let step = { - // id: 'example-step', - text: hint.text, - buttons: buttons, - }; - if (Object.hasOwn(hint, "element")) { - step.attachTo = { - element: hint.element, - on: hint.position, - }; - } - tour.addStep(step); - } + // page may have an introduction necessary to be played. + if (!window.showTour) { + return; } - tour.start(); + const url = "/"; + let site = axios.create({ + baseURL: url, + withCredentials: true, + }); + axios.defaults.withCredentials = true; + axios.defaults.baseURL = url; + + site.get(window.routeStepsUrl).then(function (data) { + let hints = data.data; + + const tour = new Shepherd.Tour({ + useModalOverlay: true, + defaultStepOptions: { + // classes: 'shadow-md bg-purple-dark', + scrollTo: true, + cancelIcon: { + enabled: true, + }, + }, + }); + // cancel or complete + tour.on("cancel", () => { + site.post(window.routeForFinishedTour); + }); + tour.on("complete", () => { + site.post(window.routeForFinishedTour); + }); + + for (let i = 0; i < hints.length; i++) { + if (Object.hasOwn(hints, i)) { + let hint = hints[i]; + + let buttons = []; + if (i > 0) { + buttons.push({ + text: i18next.t("firefly.intro_prev_label"), + action: tour.back, + }); + } + if (i < hints.length - 1) { + buttons.push({ + text: i18next.t("firefly.intro_next_label"), + action: tour.next, + }); + } + if (i === hints.length - 1) { + // console.log("Add complete"); + buttons.push({ + text: i18next.t("firefly.intro_done_label"), + action: tour.complete, + }); + } + + let step = { + // id: 'example-step', + text: hint.text, + buttons: buttons, + }; + if (Object.hasOwn(hint, "element")) { + step.attachTo = { + element: hint.element, + on: hint.position, + }; + } + tour.addStep(step); + } + } + tour.start(); + }); }); - }); - }, - ); - }) - .catch((error) => { - console.error("Error while bootstrapping: " + error); + }); }); + diff --git a/resources/assets/v3/js/shared/draw-chart.js b/resources/assets/v3/js/shared/draw-chart.js index 99df517f52..7a65eb53e3 100644 --- a/resources/assets/v3/js/shared/draw-chart.js +++ b/resources/assets/v3/js/shared/draw-chart.js @@ -352,7 +352,7 @@ function drawMultiCurrencyLineChart(url, holder, anonymous, drawTodayMarker, col drawTodayIndex = labelCount; } // add the label to the array - data.labels.push(format(date, i18next.t("config.month_and_day_fns"))); + data.labels.push(format(date, window.i18next.t("config.month_and_day_fns", {lng: window.store.get('locale')}))); } } } @@ -431,8 +431,11 @@ function drawMultiCurrencyLineChart(url, holder, anonymous, drawTodayMarker, col // add a marker to the chart if defined. if (drawTodayMarker && "" !== drawTodayLabel) { - let markDate = format(new Date(drawTodayLabel), i18next.t("config.month_and_day_fns")); - let today = i18next.t("firefly.today"); + let locale = window.store.get('locale'); + let language = window.store.get('language'); + console.log('is init here B', window.i18next.isInitialized,window.i18next.languages); + let markDate = format(new Date(drawTodayLabel), window.i18next.t("config.month_and_day_fns", {lng: locale}), locale); + let today = window.i18next.t("firefly.today", {lng: language}); let xAdjust = 0; if (drawTodayIndex < 3) { xAdjust = today.length * 4; diff --git a/resources/assets/v3/js/support/get-viewrange.js b/resources/assets/v3/js/support/get-viewrange.js index 0388f7ba8e..aa56ff83b1 100644 --- a/resources/assets/v3/js/support/get-viewrange.js +++ b/resources/assets/v3/js/support/get-viewrange.js @@ -130,17 +130,17 @@ function getViewRange(viewRange, today) { end = endOfDay(end); break; } - console.log( - 'getViewRange("' + - viewRange + - '", "' + - format(today, "yyyy-MM-dd HH:mm:ss") + - '") = "' + - format(start, "yyyy-MM-dd HH:mm:ss") + - '" to "' + - format(end, "yyyy-MM-dd HH:mm:ss") + - '".', - ); + // console.log( + // 'getViewRange("' + + // viewRange + + // '", "' + + // format(today, "yyyy-MM-dd HH:mm:ss") + + // '") = "' + + // format(start, "yyyy-MM-dd HH:mm:ss") + + // '" to "' + + // format(end, "yyyy-MM-dd HH:mm:ss") + + // '".', + // ); return { start: start, end: end }; } @@ -236,13 +236,13 @@ function addPeriod(date, viewRange) { nextPeriodStart = endOfDay(nextPeriodStart); break; } - console.log("addPeriod (" + viewRange + "): " + format(date, "yyyy-MM-dd HH:mm:ss")); - console.log( - "To: ", - format(nextPeriodStart, "yyyy-MM-dd HH:mm:ss"), - " - ", - format(nextPeriodEnd, "yyyy-MM-dd HH:mm:ss"), - ); + // console.log("addPeriod (" + viewRange + "): " + format(date, "yyyy-MM-dd HH:mm:ss")); + // console.log( + // "To: ", + // format(nextPeriodStart, "yyyy-MM-dd HH:mm:ss"), + // " - ", + // format(nextPeriodEnd, "yyyy-MM-dd HH:mm:ss"), + // ); return { start: nextPeriodStart, end: nextPeriodEnd, @@ -343,13 +343,13 @@ function subtractPeriod(date, viewRange) { prevPeriodStart = endOfDay(prevPeriodStart); break; } - console.log("subtractPeriod (" + viewRange + "): " + format(date, "yyyy-MM-dd HH:mm:ss")); - console.log( - "To: ", - format(prevPeriodStart, "yyyy-MM-dd HH:mm:ss"), - " - ", - format(prevPeriodEnd, "yyyy-MM-dd HH:mm:ss"), - ); + // console.log("subtractPeriod (" + viewRange + "): " + format(date, "yyyy-MM-dd HH:mm:ss")); + // console.log( + // "To: ", + // format(prevPeriodStart, "yyyy-MM-dd HH:mm:ss"), + // " - ", + // format(prevPeriodEnd, "yyyy-MM-dd HH:mm:ss"), + // ); return { start: prevPeriodStart, end: prevPeriodEnd, diff --git a/resources/assets/v3/js/support/load-translations.js b/resources/assets/v3/js/support/load-translations.js index 50787a0310..12a08a3176 100644 --- a/resources/assets/v3/js/support/load-translations.js +++ b/resources/assets/v3/js/support/load-translations.js @@ -25,34 +25,38 @@ import LocalStorageBackend from "i18next-localstorage-backend"; let loaded = false; -function loadTranslations(locale) { - // console.log('loadTranslations(' + locale + ')'); +function loadTranslations(language, locale) { if (false === loaded) { - // console.log("Not yet loaded"); - const replacedLocale = locale.replace("-", "_"); + console.log('Will load languages', language, locale); + let devMode = true; loaded = true; - const expireTime = import.meta.env.MODE === "development" ? 1 : 7 * 24 * 60 * 60 * 1000; - // console.log('Will load language "'+replacedLocale+'"'); - return i18next.use(ChainedBackend).init({ - load: "languageOnly", - fallbackLng: "en", - lng: replacedLocale, - debug: import.meta.env.MODE === "development", + const expireTime = devMode ? 1 : 7 * 24 * 60 * 60 * 1000; + let unique = [...new Set([language, locale, "en-US"])]; + console.log('Set of languages', unique); + let options = { + supportedLngs: unique, + load: "all", + preload: unique, + fallbackLng: ["en-US"], + lng: language, + debug: devMode, backend: { backends: [LocalStorageBackend, HttpBackend], backendOptions: [ { - load: "languageOnly", expirationTime: expireTime, + loadPath: "./v3/i18n/{{lng}}.json", }, { loadPath: "./v3/i18n/{{lng}}.json", }, ], }, - }); + }; + console.log(options); + + return i18next.use(ChainedBackend).init(options); } - console.warn("Loading translations skipped."); return Promise.resolve(); } diff --git a/resources/views/layout/v3/session.blade.php b/resources/views/layout/v3/session.blade.php index 348fab74a7..c04e7bed85 100644 --- a/resources/views/layout/v3/session.blade.php +++ b/resources/views/layout/v3/session.blade.php @@ -277,7 +277,7 @@ {{ $pageTitle ?? $title ?? '(no title)' }} @if($subTitle ?? false) - @if(isset($subTitleIcon)) + @if(isset($subTitleIcon)) @endif{{$subTitle}} @endif