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

Merge slick carousel

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-02-05 19:11:19 +01:00
commit b9d5a85cd0
18 changed files with 174 additions and 196 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
});
}
}

21
UI/ShowDataLayer.ts
View file

@ -30,8 +30,8 @@ export default class ShowDataLayer {
this._layerDict[layer.id] = layer;
}
function openSelectedElementFeature(feature: any){
function openSelectedElementFeature(feature: any) {
if (feature === undefined) {
return;
}
@ -41,7 +41,7 @@ export default class ShowDataLayer {
action();
}
}
function update() {
if (features.data === undefined) {
return;
@ -66,6 +66,7 @@ export default class ShowDataLayer {
}
mp.addLayer(geoLayer);
oldGeoLayer = geoLayer;
openSelectedElementFeature(State.state.selectedElement.data);
}
features.addCallback(() => update());
@ -109,7 +110,7 @@ export default class ShowDataLayer {
// No popup action defined -> Don't do anything
return;
}
const self = this;
const popup = L.popup({
autoPan: true,
closeOnEscapeKey: true,
@ -121,17 +122,14 @@ export default class ShowDataLayer {
const uiElement = new LazyElement(() =>
FeatureInfoBox.construct(tags, layer, () => {
State.state.selectedElement.setData(undefined);
leafletLayer.closePopup();
popup.remove();
leafletLayer.closePopup();
ScrollableFullScreen.RestoreLeaflet();
}),
"<div style='height: 90vh'>Rendering</div>"); // By setting 90vh, leaflet will attempt to fit the entire screen and move the feature down
popup.setContent(uiElement.Render());
popup.on('remove', () => {
ScrollableFullScreen.RestoreLeaflet(); // Just in case...
if (!popup.isOpen()) {
return;
}
State.state.selectedElement.setData(undefined);
});
leafletLayer.bindPopup(popup);
@ -139,6 +137,7 @@ export default class ShowDataLayer {
// But at least it'll be visible already
leafletLayer.on("popupopen", () => {
console.log("Popup opened")
uiElement.Activate();
State.state.selectedElement.setData(feature);
})
@ -146,8 +145,10 @@ export default class ShowDataLayer {
this._onSelectedTrigger[id]
= () => {
if (!popup.isOpen()) {
leafletLayer.openPopup();
uiElement.Activate();
console.log("Action triggered")
// Close all the popups which might still be opened
self._leafletMap.data.closePopup();
leafletLayer.openPopup()
return;
}
}

7
UI/SpecialVisualizations.ts
View file

@ -16,6 +16,7 @@ import ReviewForm from "./Reviews/ReviewForm";
import OpeningHoursVisualization from "./OpeningHours/OhVisualization";
import State from "../State";
import {ImageSearcher} from "../Logic/Actors/ImageSearcher";
export default class SpecialVisualizations {
@ -56,7 +57,11 @@ export default class SpecialVisualizations {
doc: "Also include images given via 'Wikidata', 'wikimedia_commons' and 'mapillary"
}],
constr: (state: State,tags, args) => {
return new ImageCarousel(tags, args[0], args[1].toLowerCase() === "true");
const imagePrefix = args[0];
const loadSpecial = args[1].toLowerCase() === "true";
const searcher : UIEventSource<{ key: string, url: string }[]> = new ImageSearcher(tags, imagePrefix, loadSpecial);
return new ImageCarousel(searcher, tags);
}
},

3
UI/SubstitutedTranslation.ts
View file

@ -58,6 +58,9 @@ export class SubstitutedTranslation extends UIElement {
}
InnerRender(): string {
if(this.content.length == 1){
return this.content[0].Render();
}
return new Combine(this.content).Render();
}