forked from MapComplete/MapComplete
Refactoring of Attribute Images, fix more or less decent slideshow. Turns out a few lines of css can get us there!
This commit is contained in:
parent
6ba4cb18c6
commit
1609c63f3b
20 changed files with 363 additions and 361 deletions
29
Logic/Web/ImageAttributionSource.ts
Normal file
29
Logic/Web/ImageAttributionSource.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import {UIEventSource} from "../UIEventSource";
|
||||
import {LicenseInfo} from "./Wikimedia";
|
||||
import BaseUIElement from "../../UI/BaseUIElement";
|
||||
|
||||
|
||||
export default abstract class ImageAttributionSource {
|
||||
|
||||
|
||||
private _cache = new Map<string, UIEventSource<LicenseInfo>>()
|
||||
|
||||
GetAttributionFor(url: string): UIEventSource<LicenseInfo> {
|
||||
const cached = this._cache.get(url);
|
||||
if (cached !== undefined) {
|
||||
return cached;
|
||||
}
|
||||
const src = this.DownloadAttribution(url)
|
||||
this._cache.set(url, src)
|
||||
return src;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public abstract SourceIcon(backlinkSource?: string) : BaseUIElement;
|
||||
protected abstract DownloadAttribution(url: string): UIEventSource<LicenseInfo>;
|
||||
public PrepareUrl(value: string): string{
|
||||
return value;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +1,24 @@
|
|||
// @ts-ignore
|
||||
import $ from "jquery"
|
||||
import {LicenseInfo} from "./Wikimedia";
|
||||
import ImageAttributionSource from "./ImageAttributionSource";
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
import BaseUIElement from "../../UI/BaseUIElement";
|
||||
|
||||
export class Imgur {
|
||||
export class Imgur extends ImageAttributionSource {
|
||||
|
||||
public static readonly singleton = new Imgur();
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
static uploadMultiple(
|
||||
title: string, description: string, blobs: FileList,
|
||||
handleSuccessfullUpload: ((imageURL: string) => void),
|
||||
allDone: (() => void),
|
||||
onFail: ((reason: string) => void),
|
||||
offset:number = 0) {
|
||||
offset: number = 0) {
|
||||
|
||||
if (blobs.length == offset) {
|
||||
allDone();
|
||||
|
|
@ -32,56 +40,11 @@ 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';
|
||||
|
||||
const settings = {
|
||||
async: true,
|
||||
crossDomain: true,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'GET',
|
||||
url: apiUrl,
|
||||
headers: {
|
||||
Authorization: 'Client-ID ' + apiKey,
|
||||
Accept: 'application/json',
|
||||
},
|
||||
};
|
||||
// @ts-ignore
|
||||
$.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;
|
||||
}
|
||||
|
||||
|
||||
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,
|
||||
handleSuccessfullUpload: ((imageURL: string) => void),
|
||||
onFail: (reason:string) => void) {
|
||||
onFail: (reason: string) => void) {
|
||||
|
||||
const apiUrl = 'https://api.imgur.com/3/image';
|
||||
const apiKey = '7070e7167f0a25a';
|
||||
|
|
@ -119,4 +82,55 @@ export class Imgur {
|
|||
});
|
||||
}
|
||||
|
||||
SourceIcon(): BaseUIElement {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
protected DownloadAttribution(url: string): UIEventSource<LicenseInfo> {
|
||||
const src = new UIEventSource<LicenseInfo>(undefined)
|
||||
|
||||
|
||||
const hash = url.substr("https://i.imgur.com/".length).split(".jpg")[0];
|
||||
|
||||
const apiUrl = 'https://api.imgur.com/3/image/' + hash;
|
||||
const apiKey = '7070e7167f0a25a';
|
||||
|
||||
const settings = {
|
||||
async: true,
|
||||
crossDomain: true,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'GET',
|
||||
url: apiUrl,
|
||||
headers: {
|
||||
Authorization: 'Client-ID ' + apiKey,
|
||||
Accept: 'application/json',
|
||||
},
|
||||
};
|
||||
// @ts-ignore
|
||||
$.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];
|
||||
data[k] = kv[1].replace("\r", "");
|
||||
}
|
||||
|
||||
|
||||
const licenseInfo = new LicenseInfo();
|
||||
|
||||
licenseInfo.licenseShortName = data.license;
|
||||
licenseInfo.artist = data.author;
|
||||
|
||||
src.setData(licenseInfo)
|
||||
|
||||
}).fail((reason) => {
|
||||
console.log("Getting metadata from to IMGUR failed", reason)
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,26 +1,57 @@
|
|||
import $ from "jquery"
|
||||
import {LicenseInfo} from "./Wikimedia";
|
||||
import ImageAttributionSource from "./ImageAttributionSource";
|
||||
import BaseUIElement from "../../UI/BaseUIElement";
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
import Svg from "../../Svg";
|
||||
|
||||
export class Mapillary {
|
||||
export class Mapillary extends ImageAttributionSource {
|
||||
|
||||
public static readonly singleton = new Mapillary();
|
||||
|
||||
static getDescriptionOfImage(key: string,
|
||||
handleDescription: ((license: LicenseInfo) => void)) {
|
||||
const url = `https://a.mapillary.com/v3/images/${key}?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
const settings = {
|
||||
async: true,
|
||||
type: 'GET',
|
||||
url: url
|
||||
};
|
||||
$.getJSON(url, function(data) {
|
||||
private static ExtractKeyFromURL(value: string) {
|
||||
if (value.startsWith("https://a.mapillary.com")) {
|
||||
return value.substring(0, value.lastIndexOf("?")).substring(value.lastIndexOf("/") + 1);
|
||||
}
|
||||
const matchApi = value.match(/https?:\/\/images.mapillary.com\/([^/]*)/)
|
||||
if (matchApi !== null) {
|
||||
return matchApi[1];
|
||||
}
|
||||
|
||||
if (value.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
|
||||
// Extract the key of the image
|
||||
value = value.substring("https://www.mapillary.com/map/im/".length);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
SourceIcon(backlinkSource?: string): BaseUIElement {
|
||||
return Svg.mapillary_svg();
|
||||
}
|
||||
|
||||
PrepareUrl(value: string): string {
|
||||
const key = Mapillary.ExtractKeyFromURL(value)
|
||||
return `https://images.mapillary.com/${key}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`
|
||||
}
|
||||
|
||||
protected DownloadAttribution(url: string): UIEventSource<LicenseInfo> {
|
||||
|
||||
const key = Mapillary.ExtractKeyFromURL(url)
|
||||
const metadataURL = `https://a.mapillary.com/v3/images/${key}?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`
|
||||
const source = new UIEventSource<LicenseInfo>(undefined)
|
||||
$.getJSON(metadataURL, function (data) {
|
||||
const license = new LicenseInfo();
|
||||
license.artist = data.properties?.username;
|
||||
license.licenseShortName = "CC BY-SA 4.0";
|
||||
license.license = "Creative Commons Attribution-ShareAlike 4.0 International License";
|
||||
license.attributionRequired = true;
|
||||
handleDescription(license);
|
||||
source.setData(license);
|
||||
})
|
||||
|
||||
return source
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +1,28 @@
|
|||
import * as $ from "jquery"
|
||||
import ImageAttributionSource from "./ImageAttributionSource";
|
||||
import BaseUIElement from "../../UI/BaseUIElement";
|
||||
import Svg from "../../Svg";
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
import Link from "../../UI/Base/Link";
|
||||
|
||||
/**
|
||||
* This module provides endpoints for wikipedia/wikimedia and others
|
||||
*/
|
||||
export class Wikimedia {
|
||||
export class Wikimedia extends ImageAttributionSource {
|
||||
|
||||
|
||||
public static readonly singleton = new Wikimedia();
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
private static knownLicenses = {};
|
||||
|
||||
static ImageNameToUrl(filename: string, width: number = 500, height: number = 200): string {
|
||||
filename = encodeURIComponent(filename);
|
||||
return "https://commons.wikimedia.org/wiki/Special:FilePath/" + filename + "?width=" + width + "&height=" + height;
|
||||
}
|
||||
|
||||
static LicenseData(filename: string, handle: ((LicenseInfo) => void)): void {
|
||||
if (filename in this.knownLicenses) {
|
||||
return this.knownLicenses[filename];
|
||||
}
|
||||
if (filename === "") {
|
||||
return;
|
||||
}
|
||||
const url = "https://en.wikipedia.org/w/" +
|
||||
"api.php?action=query&prop=imageinfo&iiprop=extmetadata&" +
|
||||
"titles=" + filename +
|
||||
"&format=json&origin=*";
|
||||
$.getJSON(url, function (data) {
|
||||
const licenseInfo = new LicenseInfo();
|
||||
const license = data.query.pages[-1].imageinfo[0].extmetadata;
|
||||
|
||||
licenseInfo.artist = license.Artist?.value;
|
||||
licenseInfo.license = license.License?.value;
|
||||
licenseInfo.copyrighted = license.Copyrighted?.value;
|
||||
licenseInfo.attributionRequired = license.AttributionRequired?.value;
|
||||
licenseInfo.usageTerms = license.UsageTerms?.value;
|
||||
licenseInfo.licenseShortName = license.LicenseShortName?.value;
|
||||
licenseInfo.credit = license.Credit?.value;
|
||||
licenseInfo.description = license.ImageDescription?.value;
|
||||
|
||||
Wikimedia.knownLicenses[filename] = licenseInfo;
|
||||
handle(licenseInfo);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
static GetCategoryFiles(categoryName: string, handleCategory: ((ImagesInCategory: ImagesInCategory) => void),
|
||||
alreadyLoaded = 0,
|
||||
continueParameter: { k: string, param: string } = undefined) {
|
||||
|
|
@ -111,6 +92,71 @@ export class Wikimedia {
|
|||
});
|
||||
}
|
||||
|
||||
private static ExtractFileName(url: string) {
|
||||
if (!url.startsWith("http")) {
|
||||
return url;
|
||||
}
|
||||
const path = new URL(url).pathname
|
||||
return path.substring(path.lastIndexOf("/") + 1);
|
||||
|
||||
}
|
||||
|
||||
SourceIcon(backlink: string): BaseUIElement {
|
||||
const img = Svg.wikimedia_commons_white_svg()
|
||||
.SetStyle("width:2em;height: 2em");
|
||||
if (backlink === undefined) {
|
||||
return img
|
||||
}
|
||||
|
||||
|
||||
return new Link(Svg.wikimedia_commons_white_img,
|
||||
`https://commons.wikimedia.org/wiki/${backlink}`, true)
|
||||
|
||||
|
||||
}
|
||||
|
||||
PrepareUrl(value: string): string {
|
||||
|
||||
if (value.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
|
||||
return value;
|
||||
}
|
||||
return Wikimedia.ImageNameToUrl(value, 500, 400)
|
||||
.replace(/'/g, '%27');
|
||||
}
|
||||
|
||||
protected DownloadAttribution(filename: string): UIEventSource<LicenseInfo> {
|
||||
|
||||
const source = new UIEventSource<LicenseInfo>(undefined);
|
||||
|
||||
filename = Wikimedia.ExtractFileName(filename)
|
||||
|
||||
if (filename === "") {
|
||||
return source;
|
||||
}
|
||||
|
||||
const url = "https://en.wikipedia.org/w/" +
|
||||
"api.php?action=query&prop=imageinfo&iiprop=extmetadata&" +
|
||||
"titles=" + filename +
|
||||
"&format=json&origin=*";
|
||||
console.log("Getting attribution at ", url)
|
||||
$.getJSON(url, function (data) {
|
||||
const licenseInfo = new LicenseInfo();
|
||||
const license = data.query.pages[-1].imageinfo[0].extmetadata;
|
||||
|
||||
licenseInfo.artist = license.Artist?.value;
|
||||
licenseInfo.license = license.License?.value;
|
||||
licenseInfo.copyrighted = license.Copyrighted?.value;
|
||||
licenseInfo.attributionRequired = license.AttributionRequired?.value;
|
||||
licenseInfo.usageTerms = license.UsageTerms?.value;
|
||||
licenseInfo.licenseShortName = license.LicenseShortName?.value;
|
||||
licenseInfo.credit = license.Credit?.value;
|
||||
licenseInfo.description = license.ImageDescription?.value;
|
||||
source.setData(licenseInfo);
|
||||
});
|
||||
return source;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue