Add MapComplete

UI/Image/ImageCarousel.ts

@@ -0,0 +1,51 @@
+import {UIElement} from "../UIElement";
+import {ImageSearcher} from "../../Logic/ImageSearcher";
+import {UIEventSource} from "../UIEventSource";
+import {SlideShow} from "../SlideShow";
+import {FixedUiElement} from "../FixedUiElement";
+
+export class ImageCarousel extends UIElement {
+    /**
+     * There are multiple way to fetch images for an object
+     * 1) There is an image tag
+     * 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
+     * 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
+     * 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
+     * 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
+     * 6) There is a wikipedia article, from which we can deduct the wikidata item
+     *
+     * For some images, author and license should be shown
+     */
+    private readonly searcher: ImageSearcher;
+
+    private readonly slideshow: SlideShow;
+
+    constructor(tags: UIEventSource<any>) {
+        super(tags);
+
+        this.searcher = new ImageSearcher(tags);
+
+        let uiElements = this.searcher.map((imageURLS: string[]) => {
+            const uiElements: UIElement[] = [];
+            for (const url of imageURLS) {
+                uiElements.push(ImageSearcher.CreateImageElement(url));
+            }
+            return uiElements;
+        });
+        this.slideshow = new SlideShow(
+            new FixedUiElement("<b>Afbeeldingen</b>"),
+            uiElements,
+            new FixedUiElement("<i>Geen afbeeldingen gevonden</i>"));
+    }
+
+    InnerRender(): string {
+        return this.slideshow.Render();
+    }
+
+
+    Activate() {
+        super.Activate();
+        this.searcher.Activate();
+    }
+
+}

UI/Image/SimpleImageElement.ts

@@ -0,0 +1,15 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+
+
+export class SimpleImageElement extends UIElement {
+
+    constructor(source: UIEventSource<string>) {
+        super(source);
+    }
+
+    protected InnerRender(): string {
+        return "<img src='" + this._source.data + "' alt='img'>";
+    }
+
+}

UI/Image/WikimediaImage.ts

@@ -0,0 +1,38 @@
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {SimpleImageElement} from "./SimpleImageElement";
+import {LicenseInfo, Wikimedia} from "../../Logic/Wikimedia";
+
+
+export class WikimediaImage extends UIElement {
+
+    private _imageMeta: UIEventSource<LicenseInfo>;
+
+
+    constructor(source: UIEventSource<string>) {
+        super(source)
+        const meta = new UIEventSource<LicenseInfo>(new LicenseInfo());
+        this.ListenTo(meta);
+        this._imageMeta = meta;
+        this._source.addCallback(() => {
+            Wikimedia.LicenseData(source.data, (info) => {
+                meta.setData(info);
+            })
+        });
+        this._source.ping();
+    }
+
+    protected InnerRender(): string {
+        let url = Wikimedia.ImageNameToUrl(this._source.data);
+        url = url.replace(/'/g, '%27');
+        return "<div class='imgWithAttr'><img class='attributedImage' src='" + url + "' " +
+            "alt='" + this._imageMeta.data.description + "' >" +
+            "<br /><span class='attribution'>" +
+            "<a href='https://commons.wikimedia.org/wiki/"+this._source.data+"' target='_blank'><b>" + (this._source.data) + "</b></a> <br />" +
+            (this._imageMeta.data.artist ?? "Unknown artist") + " " + (this._imageMeta.data.licenseShortName ?? "") +
+            "</span>" +
+            "</div>";
+    }
+
+
+}