diff --git a/Logic/ImageSearcher.ts b/Logic/ImageSearcher.ts index 1a07957..3d47b67 100644 --- a/Logic/ImageSearcher.ts +++ b/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 { * @constructor */ static CreateImageElement(url: string): UIElement { - const urlSource = new UIEventSource(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(url)); } } diff --git a/Logic/Imgur.ts b/Logic/Imgur.ts index 71118e5..bfba380 100644 --- a/Logic/Imgur.ts +++ b/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, diff --git a/UI/Image/ImgurImage.ts b/UI/Image/ImgurImage.ts new file mode 100644 index 0000000..cf0e07d --- /dev/null +++ b/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; + 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(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 = ""; + + if(this._imageMeta.data === null){ + return image; + } + + const attribution = + "" + (this._imageMeta.data.artist ?? "") + "" + " " + (this._imageMeta.data.licenseShortName ?? "") + ""; + + return "
" + + image + + "
" + + attribution + + "
" + + "
"; + } + + +} \ No newline at end of file diff --git a/UI/Image/WikimediaImage.ts b/UI/Image/WikimediaImage.ts index 9b5c589..abdf132 100644 --- a/UI/Image/WikimediaImage.ts +++ b/UI/Image/WikimediaImage.ts @@ -18,14 +18,15 @@ export class WikimediaImage extends UIElement { } else { this._imageMeta = new UIEventSource(new LicenseInfo()); WikimediaImage.allLicenseInfos[source] = this._imageMeta; + const self = this; + Wikimedia.LicenseData(source, (info) => { + self._imageMeta.setData(info); + }) } this.ListenTo(this._imageMeta); - const self = this; - Wikimedia.LicenseData(source, (info) => { - self._imageMeta.setData(info); - }) + } protected InnerRender(): string { diff --git a/test.ts b/test.ts index f006400..cd6a746 100644 --- a/test.ts +++ b/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(true), - "Afbeelding verwijderen", - "Deze afbeelding verwijderen", - "Terug", - - () => { - console.log("Verwijderen"); - }, - () => { - console.log("terug") - }, - 'delete-image-confirm', - 'delete-image-cancel') - .AttachTo("maindiv") \ No newline at end of file +Imgur.getDescriptionOfImage("https://i.imgur.com/pJfQYsj.jpg", + (info) => { + console.log(info) + }) \ No newline at end of file