Refactoring: move all code files into a src directory

src/UI/Base/Img.ts

@@ -0,0 +1,78 @@
+import { Utils } from "../../Utils"
+import BaseUIElement from "../BaseUIElement"
+
+export default class Img extends BaseUIElement {
+    private readonly _src: string
+    private readonly _rawSvg: boolean
+    private readonly _options: { readonly fallbackImage?: string }
+
+    constructor(
+        src: string,
+        rawSvg = false,
+        options?: {
+            fallbackImage?: string
+        }
+    ) {
+        super()
+        if (src === undefined || src === "undefined") {
+            throw "Undefined src for image"
+        }
+        this._src = src
+        this._rawSvg = rawSvg
+        this._options = options
+    }
+
+    static AsData(source: string) {
+        if (Utils.runningFromConsole) {
+            return source
+        }
+        try {
+            return `data:image/svg+xml;base64,${btoa(source)}`
+        } catch (e) {
+            console.error("Cannot create an image for", source.slice(0, 100))
+            console.trace("Cannot create an image for the given source string due to ", e)
+            return ""
+        }
+    }
+
+    static AsImageElement(source: string, css_class: string = "", style = ""): string {
+        return `<img class="${css_class}" style="${style}" alt="" src="${Img.AsData(source)}">`
+    }
+
+    AsMarkdown(): string {
+        if (this._rawSvg === true) {
+            console.warn("Converting raw svgs to markdown is not supported")
+            return undefined
+        }
+        let src = this._src
+        if (this._src.startsWith("./")) {
+            src = "https://mapcomplete.osm.be/" + src
+        }
+        return "![](" + src + ")"
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+        const self = this
+        if (this._rawSvg) {
+            const e = document.createElement("div")
+            e.innerHTML = this._src
+            return e
+        }
+
+        const el = document.createElement("img")
+        el.src = this._src
+        el.onload = () => {
+            el.style.opacity = "1"
+        }
+        el.onerror = () => {
+            if (self._options?.fallbackImage) {
+                if (el.src === self._options.fallbackImage) {
+                    // Sigh... nothing to be done anymore
+                    return
+                }
+                el.src = self._options.fallbackImage
+            }
+        }
+        return el
+    }
+}