midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring of Attribute Images, fix more or less decent slideshow. Turns out a few lines of css can get us there!

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-18 01:25:13 +02:00
parent 6ba4cb18c6
commit 1609c63f3b
20 changed files with 363 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

11
UI/Base/Img.ts
View file

@ -3,10 +3,12 @@ import BaseUIElement from "../BaseUIElement";
export default class Img extends BaseUIElement {
private _src: string;
private readonly _rawSvg: boolean;
constructor(src: string) {
constructor(src: string, rawSvg = false) {
super();
this._src = src;
this._rawSvg = rawSvg;
}
static AsData(source: string) {
@ -21,6 +23,13 @@ export default class Img extends BaseUIElement {
}
protected InnerConstructElement(): HTMLElement {
if (this._rawSvg) {
const e = document.createElement("div")
e.innerHTML = this._src
return e;
}
const el = document.createElement("img")
el.src = this._src;
el.onload = () => {

6
UI/Base/SubtleButton.ts
View file

@ -29,14 +29,14 @@ export class SubtleButton extends UIElement {
} else {
img = imageUrl;
}
img?.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
img?.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0 mr-4")
const image = new Combine([img])
.SetClass("flex-shrink-0");
if (linkTo == undefined) {
return new Combine([
image,
message?.SetClass("blcok ml-4 overflow-ellipsis"),
message?.SetClass("block overflow-ellipsis"),
]).SetClass("flex group w-full");
}
@ -44,7 +44,7 @@ export class SubtleButton extends UIElement {
return new Link(
new Combine([
image,
message?.SetClass("block ml-4 overflow-ellipsis")
message?.SetClass("block overflow-ellipsis")
]).SetClass("flex group w-full"),
linkTo.url,
linkTo.newTab ?? false

2
UI/BigComponents/Basemap.ts
View file

@ -34,11 +34,11 @@ export class Basemap {
this.map.setMaxBounds(
[[-100, -200], [100, 200]]
);
this.map.attributionControl.setPrefix(
"<span id='leaflet-attribution'></span> | <a href='https://osm.org'>OpenStreetMap</a>");
extraAttribution.AttachTo('leaflet-attribution')
const self = this;
let previousLayer = currentLayer.data;

2
UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -20,7 +20,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
;
const toTheMap = new SubtleButton(
new FixedUiElement(""),
undefined,
Translations.t.general.openTheMap.Clone().SetClass("text-xl font-bold w-full text-center")
).onClick(() =>{
isShown.setData(false)

19
UI/Image/AttributedImage.ts Normal file
View file

@ -0,0 +1,19 @@
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
import Img from "../Base/Img";
import ImageAttributionSource from "../../Logic/Web/ImageAttributionSource";
export class AttributedImage extends Combine {
constructor(urlSource: string, imgSource: ImageAttributionSource) {
urlSource = imgSource.PrepareUrl(urlSource)
super([
new Img( urlSource),
new Attribution(imgSource.GetAttributionFor(urlSource), imgSource.SourceIcon())
]);
this.SetClass('block relative h-full');
}
}

36
UI/Image/Attribution.ts
View file

@ -1,19 +1,33 @@
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
export default class Attribution extends Combine {
export default class Attribution extends VariableUiElement {
constructor(author: BaseUIElement | string, license: BaseUIElement | string, icon: BaseUIElement) {
super([
icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em"),
new Combine([
Translations.W(author).SetClass("block font-bold"),
Translations.W((license ?? "") === "undefined" ? "CC0" : (license ?? ""))
]).SetClass("flex flex-col")
]);
this.SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg");
constructor(license: UIEventSource<LicenseInfo>, icon: BaseUIElement) {
if (license === undefined) {
throw "No license source given in the attribution element"
}
super(
license.map((license : LicenseInfo) => {
if (license?.artist === undefined) {
return undefined;
}
return new Combine([
icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em;"),
new Combine([
Translations.W(license.artist).SetClass("block font-bold"),
Translations.W((license.license ?? "") === "" ? "CC0" : (license.license ?? ""))
]).SetClass("flex flex-col")
]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg")
}));
}
}

21
UI/Image/ImageCarousel.ts
View file

@ -2,12 +2,14 @@ import {SlideShow} from "./SlideShow";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import DeleteImage from "./DeleteImage";
import {WikimediaImage} from "./WikimediaImage";
import {ImgurImage} from "./ImgurImage";
import {MapillaryImage} from "./MapillaryImage";
import {AttributedImage} from "./AttributedImage";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
import Toggle from "../Input/Toggle";
import ImageAttributionSource from "../../Logic/Web/ImageAttributionSource";
import {Wikimedia} from "../../Logic/Web/Wikimedia";
import {Mapillary} from "../../Logic/Web/Mapillary";
import {Imgur} from "../../Logic/Web/Imgur";
export class ImageCarousel extends Toggle {
@ -45,17 +47,20 @@ export class ImageCarousel extends Toggle {
*/
private static CreateImageElement(url: string): BaseUIElement {
// @ts-ignore
let attrSource : ImageAttributionSource = undefined;
if (url.startsWith("File:")) {
return new WikimediaImage(url);
attrSource = Wikimedia.singleton
} else if (url.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
const commons = url.substr("https://commons.wikimedia.org/wiki/".length);
return new WikimediaImage(commons);
attrSource = Wikimedia.singleton;
} else if (url.toLowerCase().startsWith("https://i.imgur.com/")) {
return new ImgurImage(url);
attrSource = Imgur.singleton
} else if (url.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
return new MapillaryImage(url);
attrSource = Mapillary.singleton
} else {
return new Img(url);
}
return new AttributedImage(url, attrSource)
}
}

48
UI/Image/ImgurImage.ts
View file

@ -1,48 +0,0 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
import {Imgur} from "../../Logic/Web/Imgur";
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
import {VariableUiElement} from "../Base/VariableUIElement";
export class ImgurImage extends UIElement {
/***
* Dictionary from url to alreayd known license info
*/
private static allLicenseInfos: any = {};
private readonly _imageMeta: UIEventSource<LicenseInfo>;
private readonly _imageLocation: string;
constructor(source: string) {
super()
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)
})
}
}
InnerRender(): BaseUIElement {
const image = new Img( this._imageLocation);
return new Combine([
image,
new VariableUiElement(this._imageMeta.map(meta => (meta === undefined || meta === null) ? undefined : new Attribution(meta.artist, meta.license, undefined)))
]).SetClass('block relative h-full');
}
}

61
UI/Image/MapillaryImage.ts
View file

@ -1,61 +0,0 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
import {Mapillary} from "../../Logic/Web/Mapillary";
import Svg from "../../Svg";
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
import Img from "../Base/Img";
import BaseUIElement from "../BaseUIElement";
export class MapillaryImage extends UIElement {
/***
* Dictionary from url to already known license info
*/
private static allLicenseInfos: any = {};
private readonly _imageMeta: UIEventSource<LicenseInfo>;
private readonly _imageLocation: string;
constructor(source: string) {
super()
if (source.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
source = source.substring("https://www.mapillary.com/map/im/".length);
}
this._imageLocation = source;
if (MapillaryImage.allLicenseInfos[source] !== undefined) {
this._imageMeta = MapillaryImage.allLicenseInfos[source];
} else {
this._imageMeta = new UIEventSource<LicenseInfo>(null);
MapillaryImage.allLicenseInfos[source] = this._imageMeta;
const self = this;
Mapillary.getDescriptionOfImage(source, (license) => {
self._imageMeta.setData(license)
})
}
this.ListenTo(this._imageMeta);
}
InnerRender(): BaseUIElement {
const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
const image = new Img(url)
const meta = this._imageMeta?.data;
if (!meta) {
return image;
}
return new Combine([
image,
new Attribution(meta.artist, meta.license, Svg.mapillary_svg())
]).SetClass("relative block h-full");
}
}

14
UI/Image/SlideShow.ts
View file

@ -11,23 +11,27 @@ export class SlideShow extends BaseUIElement {
constructor(embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
this.embeddedElements =embeddedElements;
}
this.SetStyle("scroll-snap-type: x mandatory; overflow-x: scroll")
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("div")
el.style.overflowX = "auto"
el.style.width = "min-content"
el.style.minWidth = "min-content"
el.style.display = "flex"
el.style.justifyContent = "center"
this.embeddedElements.addCallbackAndRun(elements => {
if(elements.length > 1){
el.style.justifyContent = "unset"
}
while (el.firstChild) {
el.removeChild(el.lastChild)
}
elements = Utils.NoNull(elements).map(el => new Combine([el])
.SetClass("block relative ml-1 bg-gray-200 m-1 rounded slideshow-item")
.SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);")
.SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);scroll-snap-align: start;")
)
for (const element of elements ?? []) {

59
UI/Image/WikimediaImage.ts
View file

@ -1,59 +0,0 @@
import {UIElement} from "../UIElement";
import {LicenseInfo, Wikimedia} from "../../Logic/Web/Wikimedia";
import {UIEventSource} from "../../Logic/UIEventSource";
import Svg from "../../Svg";
import Link from "../Base/Link";
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
export class WikimediaImage extends UIElement {
static allLicenseInfos: any = {};
private readonly _imageMeta: UIEventSource<LicenseInfo>;
private readonly _imageLocation: string;
constructor(source: string) {
super(undefined)
this._imageLocation = source;
if (WikimediaImage.allLicenseInfos[source] !== undefined) {
this._imageMeta = WikimediaImage.allLicenseInfos[source];
} else {
this._imageMeta = new UIEventSource<LicenseInfo>(new LicenseInfo());
WikimediaImage.allLicenseInfos[source] = this._imageMeta;
const self = this;
Wikimedia.LicenseData(source, (info) => {
self._imageMeta.setData(info);
})
}
this.ListenTo(this._imageMeta);
}
InnerRender(): BaseUIElement {
const url = Wikimedia.ImageNameToUrl(this._imageLocation, 500, 400)
.replace(/'/g, '%27');
const image = new Img(url)
const meta = this._imageMeta?.data;
if (!meta) {
return image;
}
new Link(Svg.wikimedia_commons_white_img,
`https://commons.wikimedia.org/wiki/${this._imageLocation}`, true)
.SetStyle("width:2em;height: 2em");
return new Combine([
image,
new Attribution(meta.artist, meta.license, Svg.wikimedia_commons_white_svg())
]).SetClass("relative block h-full")
}
}