forked from MapComplete/MapComplete
Move imageAttributionSources around, improve fixTheme script
This commit is contained in:
parent
8bca83d708
commit
aaaf876257
15 changed files with 125 additions and 43 deletions
|
|
@ -1,29 +0,0 @@
|
|||
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,136 +0,0 @@
|
|||
// @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 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) {
|
||||
|
||||
if (blobs.length == offset) {
|
||||
allDone();
|
||||
return;
|
||||
}
|
||||
const blob = blobs.item(offset);
|
||||
const self = this;
|
||||
this.uploadImage(title, description, blob,
|
||||
(imageUrl) => {
|
||||
handleSuccessfullUpload(imageUrl);
|
||||
self.uploadMultiple(
|
||||
title, description, blobs,
|
||||
handleSuccessfullUpload,
|
||||
allDone,
|
||||
onFail,
|
||||
offset + 1);
|
||||
},
|
||||
onFail
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
static uploadImage(title: string, description: string, blob,
|
||||
handleSuccessfullUpload: ((imageURL: string) => void),
|
||||
onFail: (reason: string) => void) {
|
||||
|
||||
const apiUrl = 'https://api.imgur.com/3/image';
|
||||
const apiKey = '7070e7167f0a25a';
|
||||
|
||||
const settings = {
|
||||
async: true,
|
||||
crossDomain: true,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
url: apiUrl,
|
||||
headers: {
|
||||
Authorization: 'Client-ID ' + apiKey,
|
||||
Accept: 'application/json',
|
||||
},
|
||||
mimeType: 'multipart/form-data',
|
||||
};
|
||||
const formData = new FormData();
|
||||
formData.append('image', blob);
|
||||
formData.append("title", title);
|
||||
formData.append("description", description)
|
||||
// @ts-ignore
|
||||
settings.data = formData;
|
||||
|
||||
// Response contains stringified JSON
|
||||
// Image URL available at response.data.link
|
||||
// @ts-ignore
|
||||
$.ajax(settings).done(function (response) {
|
||||
response = JSON.parse(response);
|
||||
handleSuccessfullUpload(response.data.link);
|
||||
}).fail((reason) => {
|
||||
console.log("Uploading to IMGUR failed", reason);
|
||||
// @ts-ignore
|
||||
onFail(reason);
|
||||
});
|
||||
}
|
||||
|
||||
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,41 +0,0 @@
|
|||
import {UIEventSource} from "../UIEventSource";
|
||||
import {Imgur} from "./Imgur";
|
||||
|
||||
export default class ImgurUploader {
|
||||
|
||||
public readonly queue: UIEventSource<string[]> = new UIEventSource<string[]>([]);
|
||||
public readonly failed: UIEventSource<string[]> = new UIEventSource<string[]>([]);
|
||||
public readonly success: UIEventSource<string[]> = new UIEventSource<string[]>([]);
|
||||
private readonly _handleSuccessUrl: (string) => void;
|
||||
|
||||
constructor(handleSuccessUrl: (string) => void) {
|
||||
this._handleSuccessUrl = handleSuccessUrl;
|
||||
}
|
||||
|
||||
public uploadMany(title: string, description: string, files: FileList) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
this.queue.data.push(files.item(i).name)
|
||||
}
|
||||
this.queue.ping()
|
||||
|
||||
const self = this;
|
||||
this.queue.setData([...self.queue.data])
|
||||
Imgur.uploadMultiple(title,
|
||||
description,
|
||||
files,
|
||||
function (url) {
|
||||
console.log("File saved at", url);
|
||||
self.success.setData([...self.success.data, url]);
|
||||
self._handleSuccessUrl(url);
|
||||
},
|
||||
function () {
|
||||
console.log("All uploads completed");
|
||||
},
|
||||
|
||||
function (failReason) {
|
||||
console.log("Upload failed due to ", failReason)
|
||||
self.failed.setData([...self.failed.data, failReason])
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
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 extends ImageAttributionSource {
|
||||
|
||||
public static readonly singleton = new Mapillary();
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
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;
|
||||
source.setData(license);
|
||||
})
|
||||
|
||||
return source
|
||||
}
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
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 extends ImageAttributionSource {
|
||||
|
||||
|
||||
public static readonly singleton = new Wikimedia();
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
|
||||
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 GetCategoryFiles(categoryName: string, handleCategory: ((ImagesInCategory: ImagesInCategory) => void),
|
||||
alreadyLoaded = 0,
|
||||
continueParameter: { k: string, param: string } = undefined) {
|
||||
if (categoryName === undefined || categoryName === null || categoryName === "") {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
if (!categoryName.startsWith("Category:")) {
|
||||
categoryName = "Category:" + categoryName;
|
||||
}
|
||||
let url = "https://commons.wikimedia.org/w/api.php?" +
|
||||
"action=query&list=categorymembers&format=json&" +
|
||||
"&origin=*" +
|
||||
"&cmtitle=" + encodeURIComponent(categoryName);
|
||||
if (continueParameter !== undefined) {
|
||||
url = url + "&" + continueParameter.k + "=" + continueParameter.param;
|
||||
}
|
||||
const self = this;
|
||||
console.log("Loading a wikimedia category: ", url)
|
||||
$.getJSON(url, (response) => {
|
||||
let imageOverview = new ImagesInCategory();
|
||||
let members = response.query?.categorymembers;
|
||||
if (members === undefined) {
|
||||
members = [];
|
||||
}
|
||||
|
||||
for (const member of members) {
|
||||
imageOverview.images.push(member.title);
|
||||
}
|
||||
console.log("Got images! ", imageOverview)
|
||||
if (response.continue === undefined) {
|
||||
handleCategory(imageOverview);
|
||||
return;
|
||||
}
|
||||
|
||||
if (alreadyLoaded > 10) {
|
||||
console.log(`Recursive wikimedia category load stopped for ${categoryName} - got already enough images now (${alreadyLoaded})`)
|
||||
handleCategory(imageOverview)
|
||||
return;
|
||||
}
|
||||
|
||||
self.GetCategoryFiles(categoryName,
|
||||
(recursiveImages) => {
|
||||
recursiveImages.images.push(...imageOverview.images);
|
||||
handleCategory(recursiveImages);
|
||||
},
|
||||
alreadyLoaded + 10,
|
||||
{k: "cmcontinue", param: response.continue.cmcontinue})
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
static GetWikiData(id: number, handleWikidata: ((Wikidata) => void)) {
|
||||
const url = "https://www.wikidata.org/wiki/Special:EntityData/Q" + id + ".json";
|
||||
$.getJSON(url, (response) => {
|
||||
const entity = response.entities["Q" + id];
|
||||
const commons = entity.sitelinks.commonswiki;
|
||||
const wd = new Wikidata();
|
||||
wd.commonsWiki = commons?.title;
|
||||
|
||||
// P18 is the claim 'depicted in this image'
|
||||
const image = entity.claims.P18?.[0]?.mainsnak?.datavalue?.value;
|
||||
if (image) {
|
||||
wd.image = "File:" + image;
|
||||
}
|
||||
handleWikidata(wd);
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export class Wikidata {
|
||||
|
||||
commonsWiki: string;
|
||||
image: string;
|
||||
|
||||
}
|
||||
|
||||
export class ImagesInCategory {
|
||||
// Filenames of relevant images
|
||||
images: string[] = [];
|
||||
}
|
||||
|
||||
export class LicenseInfo {
|
||||
|
||||
|
||||
artist: string = "";
|
||||
license: string = "";
|
||||
licenseShortName: string = "";
|
||||
usageTerms: string = "";
|
||||
attributionRequired: boolean = false;
|
||||
copyrighted: boolean = false;
|
||||
credit: string = "";
|
||||
description: string = "";
|
||||
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue