mapcomplete/UI/i18n/Translation.ts

284 lines
No EOL
9.9 KiB
TypeScript

import Locale from "./Locale";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
import LinkToWeblate from "../Base/LinkToWeblate";
export class Translation extends BaseUIElement {
public static forcedLanguage = undefined;
public readonly translations: object
context?: string;
constructor(translations: object, context?: string) {
super()
if (translations === undefined) {
console.error("Translation without content at "+context)
throw `Translation without content (${context})`
}
this.context = translations["_context"] ?? context;
if(translations["_context"] !== undefined){
translations = {...translations}
delete translations["_context"]
}
if (typeof translations === "string") {
translations = {"*": translations};
}
let count = 0;
for (const translationsKey in translations) {
if (!translations.hasOwnProperty(translationsKey)) {
continue
}
if(translationsKey === "_context"){
continue
}
count++;
if (typeof (translations[translationsKey]) != "string") {
console.error("Non-string object in translation: ", translations[translationsKey])
throw "Error in an object depicting a translation: a non-string object was found. (" + context + ")\n You probably put some other section accidentally in the translation"
}
}
this.translations = translations;
if (count === 0) {
console.error("Constructing a translation, but the object containing translations is empty "+context)
throw `Constructing a translation, but the object containing translations is empty (${context})`
}
}
get txt(): string {
return this.textFor(Translation.forcedLanguage ?? Locale.language.data)
}
static ExtractAllTranslationsFrom(object: any, context = ""): { context: string, tr: Translation }[] {
const allTranslations: { context: string, tr: Translation }[] = []
for (const key in object) {
const v = object[key]
if (v === undefined || v === null) {
continue
}
if (v instanceof Translation) {
allTranslations.push({context: context + "." + key, tr: v})
continue
}
if (typeof v === "object") {
allTranslations.push(...Translation.ExtractAllTranslationsFrom(v, context + "." + key))
}
}
return allTranslations
}
static fromMap(transl: Map<string, string>) {
const translations = {}
let hasTranslation = false;
transl?.forEach((value, key) => {
translations[key] = value
hasTranslation = true
})
if (!hasTranslation) {
return undefined
}
return new Translation(translations);
}
Destroy() {
super.Destroy();
this.isDestroyed = true;
}
public textFor(language: string): string {
if (this.translations["*"]) {
return this.translations["*"];
}
const txt = this.translations[language];
if (txt !== undefined) {
return txt;
}
const en = this.translations["en"];
if (en !== undefined) {
return en;
}
for (const i in this.translations) {
if (!this.translations.hasOwnProperty(i)) {
continue;
}
return this.translations[i]; // Return a random language
}
console.error("Missing language ", Locale.language.data, "for", this.translations)
return "";
}
InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
const self = this
Locale.language.addCallbackAndRun(_ => {
if (self.isDestroyed) {
return true
}
el.innerHTML = this.txt
})
if (self.translations["*"] !== undefined || self.context === undefined || self.context?.indexOf(":") < 0) {
return el;
}
const linkToWeblate = new LinkToWeblate(self.context, self.translations)
const wrapper = document.createElement("span")
wrapper.appendChild(el)
Locale.showLinkToWeblate.addCallbackAndRun(doShow => {
if (!doShow) {
return;
}
wrapper.appendChild(linkToWeblate.ConstructElement())
return true;
})
return wrapper ;
}
public SupportedLanguages(): string[] {
const langs = []
for (const translationsKey in this.translations) {
if (!this.translations.hasOwnProperty(translationsKey)) {
continue;
}
if (translationsKey === "#") {
continue;
}
if (!this.translations.hasOwnProperty(translationsKey)) {
continue
}
langs.push(translationsKey)
}
return langs;
}
public AllValues(): string[] {
return this.SupportedLanguages().map(lng => this.translations[lng]);
}
public OnEveryLanguage(f: (s: string, language: string) => string, context?: string): Translation {
const newTranslations = {};
for (const lang in this.translations) {
if (!this.translations.hasOwnProperty(lang)) {
continue;
}
newTranslations[lang] = f(this.translations[lang], lang);
}
return new Translation(newTranslations, context ?? this.context);
}
/**
* Replaces the given string with the given text in the language.
* Other substitutions are left in place
*
* const tr = new Translation(
* {"nl": "Een voorbeeldtekst met {key} en {key1}, en nogmaals {key}",
* "en": "Just a single {key}"})
* const r = tr.replace("{key}", "value")
* r.textFor("nl") // => "Een voorbeeldtekst met value en {key1}, en nogmaals value"
* r.textFor("en") // => "Just a single value"
*/
public replace(a: string, b: string) {
return this.OnEveryLanguage(str => str.replace(new RegExp(a, "g"), b))
}
public Clone() {
return new Translation(this.translations, this.context)
}
FirstSentence() {
const tr = {};
for (const lng in this.translations) {
if (!this.translations.hasOwnProperty(lng)) {
continue
}
let txt = this.translations[lng];
txt = txt.replace(/\..*/, "");
txt = Utils.EllipsesAfter(txt, 255);
tr[lng] = txt;
}
return new Translation(tr);
}
/**
* Extracts all images (including HTML-images) from all the embedded translations
*
* // should detect sources of <img>
* const tr = new Translation({en: "XYZ <img src='a.svg'/> XYZ <img src=\"some image.svg\"></img> XYZ <img src=b.svg/>"})
* new Set<string>(tr.ExtractImages(false)) // new Set(["a.svg", "b.svg", "some image.svg"])
*/
public ExtractImages(isIcon = false): string[] {
const allIcons: string[] = []
for (const key in this.translations) {
if (!this.translations.hasOwnProperty(key)) {
continue;
}
const render = this.translations[key]
if (isIcon) {
const icons = render.split(";").filter(part => part.match(/(\.svg|\.png|\.jpg)$/) != null)
allIcons.push(...icons)
} else if (!Utils.runningFromConsole) {
// This might be a tagrendering containing some img as html
const htmlElement = document.createElement("div")
htmlElement.innerHTML = render
const images = Array.from(htmlElement.getElementsByTagName("img")).map(img => img.src)
allIcons.push(...images)
} else {
// We are running this in ts-node (~= nodejs), and can not access document
// So, we fallback to simple regex
try {
const matches = render.match(/<img[^>]+>/g)
if (matches != null) {
const sources = matches.map(img => img.match(/src=("[^"]+"|'[^']+'|[^/ ]+)/))
.filter(match => match != null)
.map(match => match[1].trim().replace(/^['"]/, '').replace(/['"]$/, ''));
allIcons.push(...sources)
}
} catch (e) {
console.error("Could not search for images: ", render, this.txt)
throw e
}
}
}
return allIcons.filter(icon => icon != undefined)
}
AsMarkdown(): string {
return this.txt
}
}
export class TypedTranslation<T> extends Translation {
constructor(translations: object, context?: string) {
super(translations, context);
}
/**
* Substitutes text in a translation.
* If a translation is passed, it'll be fused
*
* // Should replace simple keys
* new TypedTranslation<object>({"en": "Some text {key}"}).Subs({key: "xyz"}).textFor("en") // => "Some text xyz"
*
* // Should fuse translations
* const subpart = new Translation({"en": "subpart","nl":"onderdeel"})
* const tr = new TypedTranslation<object>({"en": "Full sentence with {part}", nl: "Volledige zin met {part}"})
* const subbed = tr.Subs({part: subpart})
* subbed.textFor("en") // => "Full sentence with subpart"
* subbed.textFor("nl") // => "Volledige zin met onderdeel"
*/
Subs(text: T, context?: string): Translation {
return this.OnEveryLanguage((template, lang) => Utils.SubstituteKeys(template, text, lang), context)
}
}