mapcomplete/UI/Image/ImageCarousel.ts

62 lines
2.3 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "../UIElement";
2020-10-14 12:15:09 +02:00
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 {SimpleImageElement} from "./SimpleImageElement";
2020-10-27 01:01:34 +01:00
export class ImageCarousel extends UIElement{
2020-06-24 00:35:19 +02:00
2020-11-02 18:59:21 +01:00
public readonly slideshow: UIElement;
2020-06-24 00:35:19 +02:00
constructor(images: UIEventSource<{key: string, url:string}[]>, tags: UIEventSource<any>) {
super(images);
const uiElements = images.map((imageURLS: {key: string, url:string}[]) => {
2020-06-24 00:35:19 +02:00
const uiElements: UIElement[] = [];
for (const url of imageURLS) {
let image = ImageCarousel.CreateImageElement(url.url)
if(url.key !== undefined){
image = new Combine([
image,
new DeleteImage(url.key, tags).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
]).SetClass("relative");
}
image
.SetClass("w-full block")
2020-07-07 15:08:52 +02:00
uiElements.push(image);
2020-06-24 00:35:19 +02:00
}
return uiElements;
});
2020-07-07 15:08:52 +02:00
2020-09-13 00:53:24 +02:00
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
this.SetClass("block w-full");
2020-06-24 00:35:19 +02:00
}
/***
* Creates either a 'simpleimage' or a 'wikimediaimage' based on the string
* @param url
* @constructor
*/
private static CreateImageElement(url: string): UIElement {
// @ts-ignore
if (url.startsWith("File:")) {
return new WikimediaImage(url);
} else if (url.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
const commons = url.substr("https://commons.wikimedia.org/wiki/".length);
return new WikimediaImage(commons);
} else if (url.toLowerCase().startsWith("https://i.imgur.com/")) {
return new ImgurImage(url);
} else if (url.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
return new MapillaryImage(url);
} else {
return new SimpleImageElement(new UIEventSource<string>(url));
}
}
2020-11-02 12:38:04 +01:00
2020-06-24 00:35:19 +02:00
InnerRender(): string {
2020-09-13 00:53:24 +02:00
return this.slideshow.Render();
2020-07-07 15:08:52 +02:00
}
2020-06-24 00:35:19 +02:00
}