Clyde/frontend/src/i18n.js

/**
 * Usage:
 * import i18n from './i18n.js'
 *
 * console.log( i18n('parentcontext.childcontext.key', {user: username}) );
 *
 * language is loaded from cookie: lang=XX
 * translations are loaded from /public/i18n/XX.txt
 *
 */

import { getCookie, setCookie } from './utils.js';
import { reactive } from 'vue';

const default_lang = "EN";
const langs = reactive({});


/**
 * Fetch the translation from a key using the current language.
 * could also replace certain value of the form `$variable` by providing an object
 * with { variable: "value" }
 * @param key :string translation key (can be null)
 * @param options: Object element to replace in the translation
 *
 * @return :string The translated text
 */
export default function i18n(key, options) {
	let ret = langs[key];
	if(options != null){
		for (let option in options) {
			ret = ret.replaceAll("$" + option, options[option]);
		}
	}
	return ret;
}

/**
 * Function that load the file with translation from the specified lang and return a dictionnary
 * @param select the language to load. could be null to fetch the cookies for an answer
 * if nothing is found. default to EN.txt
 */
export async function loadLangs(lang){
	lang = lang != null ? lang : getCookie("lang");
	lang = lang != "" ? lang : default_lang;

	const filename = "/i18n/" + lang.toUpperCase() + ".txt";
	const content = await (await fetch(filename)).text();
	const lines = content.split("\n");

	for (let line of lines) {
		if(!line.trim().startsWith("#") && line.trim() != ""){
			let split = line.indexOf("=")
			langs[line.substr(0, split)] = line.substr(split+1, line.length);
		};
	}
}
await loadLangs();

export async function setLang(lang){
	setCookie("lang", lang);
	await loadLangs();
}