forked from MapComplete/MapComplete
		
	
		
			
				
	
	
		
			335 lines
		
	
	
	
		
			11 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			335 lines
		
	
	
	
		
			11 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: Record<string, string>
 | 
						|
    public readonly context?: string
 | 
						|
 | 
						|
    constructor(translations: string | Record<string, string>, 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") {
 | 
						|
                continue
 | 
						|
            }
 | 
						|
            count++
 | 
						|
            if (typeof translations[translationsKey] != "string") {
 | 
						|
                console.error(
 | 
						|
                    "Non-string object at",
 | 
						|
                    context,
 | 
						|
                    "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<string, string>) {
 | 
						|
        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 <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 Record<string, any>> extends Translation {
 | 
						|
    constructor(translations: Record<string, string>, 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) => {
 | 
						|
            if (lang === "_context") {
 | 
						|
                return template
 | 
						|
            }
 | 
						|
            return Utils.SubstituteKeys(template, text, lang)
 | 
						|
        }, context)
 | 
						|
    }
 | 
						|
 | 
						|
    PartialSubs<X extends string>(
 | 
						|
        text: Partial<T> & Record<X, string>
 | 
						|
    ): TypedTranslation<Omit<T, X>> {
 | 
						|
        const newTranslations: Record<string, string> = {}
 | 
						|
        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<Omit<T, X>>(newTranslations, this.context)
 | 
						|
    }
 | 
						|
}
 |