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

Add slick-carousel instead of homemade one

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-29 03:23:53 +01:00
parent 5192ece1ed
commit 1979aadb49
15 changed files with 164 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

18
UI/Image/Attribution.ts Normal file
View file

@ -0,0 +1,18 @@
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
export default class Attribution extends Combine {
constructor(author: UIElement | string, license: UIElement | string, icon: UIElement) {
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 rounded");
}
}

2
UI/Image/DeleteImage.ts
View file

@ -42,7 +42,7 @@ export default class DeleteImage extends UIElement {
}
InnerRender(): string {
if(!State.state.featureSwitchUserbadge.data){
if(! State.state?.featureSwitchUserbadge?.data){
return "";
}

15
UI/Image/ImageCarousel.ts
View file

@ -1,5 +1,4 @@
import {UIElement} from "../UIElement";
import {ImageSearcher} from "../../Logic/Actors/ImageSearcher";
import {SlideShow} from "./SlideShow";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
@ -9,31 +8,31 @@ import {ImgurImage} from "./ImgurImage";
import {MapillaryImage} from "./MapillaryImage";
import {SimpleImageElement} from "./SimpleImageElement";
export class ImageCarousel extends UIElement{
public readonly slideshow: UIElement;
constructor(tags: UIEventSource<any>, imagePrefix: string = "image", loadSpecial: boolean =true) {
super(tags);
const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags, imagePrefix, loadSpecial).images;
const uiElements = searcher.map((imageURLS: {key: string, url:string}[]) => {
constructor(images: UIEventSource<{key: string, url:string}[]>, tags: UIEventSource<any>) {
super(images);
const uiElements = images.map((imageURLS: {key: string, url:string}[]) => {
const uiElements: UIElement[] = [];
for (const url of imageURLS) {
let image = ImageCarousel.CreateImageElement(url.url);
let image = ImageCarousel.CreateImageElement(url.url)
if(url.key !== undefined){
image = new Combine([
image,
new DeleteImage(url.key, tags)
]);
}
image
.SetClass("w-full block")
uiElements.push(image);
}
return uiElements;
});
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
this.SetClass("block image-carousel-marker");
}
/***

24
UI/Image/ImgurImage.ts
View file

@ -2,6 +2,9 @@ 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 {SimpleImageElement} from "./SimpleImageElement";
export class ImgurImage extends UIElement {
@ -33,21 +36,20 @@ export class ImgurImage extends UIElement {
}
InnerRender(): string {
const image = `<img src='${this._imageLocation}' alt='' >`;
const image = new SimpleImageElement( new UIEventSource (this._imageLocation));
if(this._imageMeta.data === null){
return image;
return image.Render();
}
const meta = this._imageMeta.data;
return new Combine([
image,
new Attribution(meta.artist, meta.license, undefined),
]).SetClass('block relative')
.Render();
const attribution =
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
return "<div class='imgWithAttr'>" +
image +
"<div class='attribution'>" +
attribution +
"</div>" +
"</div>";
}

28
UI/Image/MapillaryImage.ts
View file

@ -3,6 +3,9 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
import {Mapillary} from "../../Logic/Web/Mapillary";
import Svg from "../../Svg";
import {SimpleImageElement} from "./SimpleImageElement";
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
export class MapillaryImage extends UIElement {
@ -39,22 +42,21 @@ export class MapillaryImage extends UIElement {
InnerRender(): string {
const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
const image = `<img src='${url}'>`;
const image =new SimpleImageElement(new UIEventSource<string>(url))
if (this._imageMeta === undefined || this._imageMeta.data === null) {
return image;
if (!this._imageMeta?.data ) {
return image.Render();
}
const meta = this._imageMeta.data;
const attribution =
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
return "<div class='imgWithAttr'>" +
image +
"<div class='attribution'>" +
Svg.mapillary_ui().Render() +
attribution +
"</div>" +
"</div>";
return new Combine([
image,
new Attribution(meta.artist, meta.license, Svg.mapillary_svg())
]).SetClass("relative block").Render();
}

92
UI/Image/SlideShow.ts
View file

@ -1,86 +1,32 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
// @ts-ignore
import $ from "jquery"
export class SlideShow extends UIElement {
private readonly _embeddedElements: UIEventSource<UIElement[]>
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
private _prev: UIElement;
private _next: UIElement;
constructor(
embeddedElements: UIEventSource<UIElement[]>) {
super(embeddedElements);
this._embeddedElements = embeddedElements;
this.ListenTo(this._currentSlide);
this._embeddedElements
.stabilized(1000)
.addCallback(embedded => {
// Always move to the last image - but at most once per second
this._currentSlide.setData(this._embeddedElements.data.length - 1);
});
this.dumbMode = false;
const self = this;
this._prev = new Combine([
"<div class='vspan'></div>",
Svg.arrow_left_smooth_img])
.SetClass("prev-button")
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current - 1);
});
this._next = new Combine([
"<div class='vspan'></div>",
Svg.arrow_right_smooth_img])
.SetClass("next-button")
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current + 1);
});
this._embeddedElements.addCallbackAndRun(elements => {
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
}
})
}
InnerRender(): string {
if (this._embeddedElements.data.length == 0) {
return "";
}
if (this._embeddedElements.data.length == 1) {
return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
this._embeddedElements.data[0].Render() +
"</div></div></div>";
}
let slides = ""
for (let i = 0; i < this._embeddedElements.data.length; i++) {
let embeddedElement = this._embeddedElements.data[i];
let state = "hidden"
if (this._currentSlide.data === i) {
state = "active-slide";
}
slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
}
return new Combine([
this._prev
, "<div class='slides'>", slides, "</div>"
, this._next])
.SetClass('image-slideshow')
return new Combine(
this._embeddedElements.data,
).SetClass("block slick-carousel")
.Render();
}
public MoveTo(index: number) {
if (index < 0) {
index = this._embeddedElements.data.length - 1;
}
index = index % this._embeddedElements.data.length;
this._currentSlide.setData(index);
}
Update() {
super.Update();
for (const uiElement of this._embeddedElements.data) {
@ -88,4 +34,22 @@ export class SlideShow extends UIElement {
}
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
require("slick-carousel")
if(this._embeddedElements.data.length == 0){
return;
}
$('.slick-carousel').not('.slick-initialized').slick({
// autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
variableWidth: true,
centerMode: true,
centerPadding: "60px",
adaptive: true
});
}
}