Improve load of language versus locale.

This commit is contained in:
James Cole committed 2026-09-23 08:33:44 +02:00
1 parent 60921355ce
commit f5c8825dcb
5 files changed
+145 -139

No files matched your search

+95 -96
View File
@@ -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);
});
});
+6 -3
View File
@@ -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;
+25 -25
View File
@@ -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,
@@ -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();
}
+1 -1
View File
@@ -277,7 +277,7 @@
{{ $pageTitle ?? $title ?? '(no title)' }}
@if($subTitle ?? false)
<small class="text-xs text-muted">@if(isset($subTitleIcon))
<small id="test-box" class="text-xs text-muted">@if(isset($subTitleIcon))
<em class="bi {{ $subTitleIcon }}"></em>
@endif{{$subTitle}}</small>
@endif