Add imgur attribution

Logic/ImageSearcher.ts

@@ -4,6 +4,7 @@ import {WikimediaImage} from "../UI/Image/WikimediaImage";
 import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
 import {UIElement} from "../UI/UIElement";
 import {Changes} from "./Changes";
+import {ImgurImage} from "../UI/Image/ImgurImage";
 
 /**
  * There are multiple way to fetch images for an object
@@ -170,12 +171,13 @@ export class ImageSearcher extends UIEventSource<string[]> {
      * @constructor
      */
     static CreateImageElement(url: string): UIElement {
-        const urlSource = new UIEventSource<string>(url);
         // @ts-ignore
         if (url.startsWith("File:")) {
-            return new WikimediaImage(urlSource.data);
+            return new WikimediaImage(url);
+        }else if(url.startsWith("https://i.imgur.com/")){
+            return new ImgurImage(url);
         } else {
-            return new SimpleImageElement(urlSource);
+            return new SimpleImageElement(new UIEventSource<string>(url));
         }
     }
 

Logic/Imgur.ts

@@ -1,4 +1,5 @@
 import $ from "jquery"
+import {LicenseInfo} from "./Wikimedia";
 
 export class Imgur {
 
@@ -27,6 +28,50 @@ export class Imgur {
         );
 
 
+    }
+    static getDescriptionOfImage(url: string,
+                       handleDescription: ((license: LicenseInfo) => void)) {
+
+        const hash = url.substr("https://i.imgur.com/".length).split(".jpg")[0];
+        
+        const apiUrl = 'https://api.imgur.com/3/image/'+hash;
+        const apiKey = '7070e7167f0a25a';
+
+        var settings = {
+            async: true,
+            crossDomain: true,
+            processData: false,
+            contentType: false,
+            type: 'GET',
+            url: apiUrl,
+            headers: {
+                Authorization: 'Client-ID ' + apiKey,
+                Accept: 'application/json',
+            },
+        };
+        $.ajax(settings).done(function (response) {
+            const descr  : string= response.data.description;
+            const data : any = {};
+            for (const tag of descr.split("\n")) {
+                const kv = tag.split(":");
+                const k = kv[0];
+                const v = kv[1].replace("\r", "");
+                data[k] = v;
+            }
+
+            
+            console.log(data);
+            const licenseInfo = new LicenseInfo();
+            
+            licenseInfo.licenseShortName = data.license;
+            licenseInfo.artist = data.author;
+            
+            handleDescription(licenseInfo);
+            
+        }).fail((reason) => {
+            console.log("Getting metadata from to IMGUR failed", reason)
+        });
+    
     }
 
     static uploadImage(title: string, description: string, blob,

UI/Image/ImgurImage.ts

@@ -0,0 +1,54 @@
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {LicenseInfo} from "../../Logic/Wikimedia";
+import {Imgur} from "../../Logic/Imgur";
+
+
+export class ImgurImage extends UIElement {
+
+
+    /***
+     * Dictionary from url to alreayd known license info
+     */
+    static allLicenseInfos: any = {};
+    private _imageMeta: UIEventSource<LicenseInfo>;
+    private _imageLocation: string;
+
+    constructor(source: string) {
+        super(undefined)
+        this._imageLocation = source;
+        if (ImgurImage.allLicenseInfos[source] !== undefined) {
+            this._imageMeta = ImgurImage.allLicenseInfos[source];
+        } else {
+            this._imageMeta = new UIEventSource<LicenseInfo>(null);
+            ImgurImage.allLicenseInfos[source] = this._imageMeta;
+            const self = this;
+            Imgur.getDescriptionOfImage(source, (license) => {
+                self._imageMeta.setData(license)
+            })
+        }
+        
+        this.ListenTo(this._imageMeta);
+      
+    }
+
+    protected InnerRender(): string {
+        const image = "<img src='" + this._imageLocation + "' " + "alt='' >";
+        
+        if(this._imageMeta.data === null){
+            return image;
+        }
+
+        const attribution =
+            "<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
+
+        return "<div class='imgWithAttr'>" +
+            image +
+            "<div class='attribution'>" +
+            attribution +
+            "</div>" +
+            "</div>";
+    }
+
+
+}

UI/Image/WikimediaImage.ts

@@ -18,16 +18,17 @@ export class WikimediaImage extends UIElement {
         } else {
             this._imageMeta = new UIEventSource<LicenseInfo>(new LicenseInfo());
             WikimediaImage.allLicenseInfos[source] = this._imageMeta;
-        }
-
-        this.ListenTo(this._imageMeta);
-
             const self = this;
             Wikimedia.LicenseData(source, (info) => {
                 self._imageMeta.setData(info);
             })
         }
 
+        this.ListenTo(this._imageMeta);
+
+      
+    }
+
     protected InnerRender(): string {
         let url = Wikimedia.ImageNameToUrl(this._imageLocation, 500, 400);
         url = url.replace(/'/g, '%27');

test.ts

@@ -5,19 +5,11 @@ import {ElementStorage} from "./Logic/ElementStorage";
 import {WikipediaLink} from "./Customizations/Questions/WikipediaLink";
 import {OsmLink} from "./Customizations/Questions/OsmLink";
 import {ConfirmDialog} from "./UI/ConfirmDialog";
+import {Imgur} from "./Logic/Imgur";
 
+console.log("Hello world")
 
-new ConfirmDialog(new UIEventSource<boolean>(true),
-    "<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
-    "Deze afbeelding verwijderen",
-    "Terug",
-
-    () => {
-        console.log("Verwijderen");
-    },
-    () => {
-        console.log("terug")
-    },
-    'delete-image-confirm',
-    'delete-image-cancel')
-    .AttachTo("maindiv")
+Imgur.getDescriptionOfImage("https://i.imgur.com/pJfQYsj.jpg",
+    (info) => {
+        console.log(info)
+    })