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) } public toString(){ return this.txt; } 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) { 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 * const tr = new Translation({en: "XYZ XYZ XYZ "}) * new Set(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(/]+>/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 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({"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({"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) => { if(lang === "_context"){ return template } return Utils.SubstituteKeys(template, text, lang); }, context) } }