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: Record public readonly context?: string constructor(translations: string | Record, context?: string) { super() if (translations === undefined) { console.error("Translation without content at " + context) throw `Translation without content (${context})` } this.context = translations["_context"] ?? context if (typeof translations === "string") { translations = { "*": translations } } let count = 0 for (const translationsKey in translations) { if (!translations.hasOwnProperty(translationsKey)) { continue } if ( translationsKey === "_context" || translationsKey === "_meta" || translationsKey === "special" ) { continue } count++ if (typeof translations[translationsKey] != "string") { console.error( "Non-string object at", context, `for language`, translationsKey, `in translation: `, translations[translationsKey], "\n current translations are: ", translations ) 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) { const translations = {} let hasTranslation = false transl?.forEach((value, key) => { translations[key] = value hasTranslation = true }) if (!hasTranslation) { return undefined } return new Translation(translations) } public toString() { return this.txt } 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 el.innerHTML = self.txt if (self.translations["*"] !== undefined) { return el } Locale.language.addCallback((_) => { if (self.isDestroyed) { return true } el.innerHTML = self.txt }) if (self.context === undefined || self.context?.indexOf(":") < 0) { return el } const wrapper = document.createElement("span") wrapper.appendChild(el) Locale.showLinkToWeblate.addCallbackAndRun((doShow) => { if (!doShow) { return } const linkToWeblate = new LinkToWeblate(self.context, self.translations) 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]) } /** * Constructs a new Translation where every contained string has been modified */ 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: Record, 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) } PartialSubs( text: Partial & Record ): TypedTranslation> { const newTranslations: Record = {} for (const lang in this.translations) { const template = this.translations[lang] if (lang === "_context") { newTranslations[lang] = template continue } newTranslations[lang] = Utils.SubstituteKeys(template, text, lang) } return new TypedTranslation>(newTranslations, this.context) } }