Fix attribution style of wikimedia images

This commit is contained in:
pietervdvn 2021-03-17 14:33:22 +01:00
parent 6a03410f56
commit 6d355cd90c
2 changed files with 25 additions and 24 deletions

View file

@ -11,7 +11,7 @@ import Attribution from "./Attribution";
export class MapillaryImage extends UIElement { export class MapillaryImage extends UIElement {
/*** /***
* Dictionary from url to alreayd known license info * Dictionary from url to already known license info
*/ */
private static allLicenseInfos: any = {}; private static allLicenseInfos: any = {};
private readonly _imageMeta: UIEventSource<LicenseInfo>; private readonly _imageMeta: UIEventSource<LicenseInfo>;
@ -19,11 +19,11 @@ export class MapillaryImage extends UIElement {
constructor(source: string) { constructor(source: string) {
super() super()
if(source.toLowerCase().startsWith("https://www.mapillary.com/map/im/")){ if (source.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
source = source.substring("https://www.mapillary.com/map/im/".length); source = source.substring("https://www.mapillary.com/map/im/".length);
} }
this._imageLocation = source; this._imageLocation = source;
if (MapillaryImage.allLicenseInfos[source] !== undefined) { if (MapillaryImage.allLicenseInfos[source] !== undefined) {
this._imageMeta = MapillaryImage.allLicenseInfos[source]; this._imageMeta = MapillaryImage.allLicenseInfos[source];
@ -42,20 +42,18 @@ export class MapillaryImage extends UIElement {
InnerRender(): string { InnerRender(): string {
const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`; const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
const image =new SimpleImageElement(new UIEventSource<string>(url)) const image = new SimpleImageElement(new UIEventSource<string>(url))
if (!this._imageMeta?.data ) { const meta = this._imageMeta?.data;
if (!meta) {
return image.Render(); return image.Render();
} }
const meta = this._imageMeta.data;
return new Combine([ return new Combine([
image, image,
new Attribution(meta.artist, meta.license, Svg.mapillary_svg()) new Attribution(meta.artist, meta.license, Svg.mapillary_svg())
]).SetClass("relative block").Render(); ]).SetClass("relative block").Render();
} }

View file

@ -3,8 +3,9 @@ import {LicenseInfo, Wikimedia} from "../../Logic/Web/Wikimedia";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import Svg from "../../Svg"; import Svg from "../../Svg";
import Link from "../Base/Link"; import Link from "../Base/Link";
import {FixedUiElement} from "../Base/FixedUiElement";
import Combine from "../Base/Combine"; import Combine from "../Base/Combine";
import {SimpleImageElement} from "./SimpleImageElement";
import Attribution from "./Attribution";
export class WikimediaImage extends UIElement { export class WikimediaImage extends UIElement {
@ -30,25 +31,27 @@ export class WikimediaImage extends UIElement {
this.ListenTo(this._imageMeta); this.ListenTo(this._imageMeta);
} }
InnerRender(): string { InnerRender(): string {
let url = Wikimedia.ImageNameToUrl(this._imageLocation, 500, 400); const url = Wikimedia.ImageNameToUrl(this._imageLocation, 500, 400)
url = url.replace(/'/g, '%27'); .replace(/'/g, '%27');
const image = new SimpleImageElement(new UIEventSource<string>(url))
const meta = this._imageMeta?.data;
const wikimediaLink = new Link(Svg.wikimedia_commons_white_img, if (!meta) {
return image.Render();
}
new Link(Svg.wikimedia_commons_white_img,
`https://commons.wikimedia.org/wiki/${this._imageLocation}`, true) `https://commons.wikimedia.org/wiki/${this._imageLocation}`, true)
.SetStyle("width:2em;height: 2em"); .SetStyle("width:2em;height: 2em");
return new Combine([
image,
new Attribution(meta.artist, meta.license, Svg.wikimedia_commons_white_svg())
]).SetClass("relative block").Render()
const attribution = new FixedUiElement(this._imageMeta.data.artist ?? "").SetClass("attribution-author");
const license = new FixedUiElement(this._imageMeta.data.licenseShortName ?? "").SetClass("license");
const image = "<img src='" + url + "' " + "alt='" + this._imageMeta.data.description + "' >";
return "<div class='imgWithAttr'>" +
image +
new Combine([wikimediaLink, attribution]).SetClass("attribution").Render() +
"</div>";
} }