midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge slick carousel

Browse source
This commit is contained in:
pietervdvn 2021-02-05 19:11:19 +01:00
commit b9d5a85cd0
18 changed files with 174 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Logic/Actors/ImageSearcher.ts
View file

@ -17,17 +17,17 @@ import {UIEventSource} from "../UIEventSource";
* Note that this list is embedded into an UIEVentSource, ready to put it into a carousel.
*
*/
export class ImageSearcher {
export class ImageSearcher extends UIEventSource<{ key: string, url: string }[]>{
public readonly images = new UIEventSource<{ key: string, url: string }[]>([]);
private readonly _wdItem = new UIEventSource<string>("");
private readonly _commons = new UIEventSource<string>("");
constructor(tags: UIEventSource<any>, imagePrefix = "image", loadSpecial = true) {
super([])
const self = this;
function AddImages(images: { key: string, url: string }[]) {
const oldUrls = self.images.data.map(kurl => kurl.url);
const oldUrls = self.data.map(kurl => kurl.url);
let somethingChanged = false;
for (const image of images) {
const url = image.url;
@ -41,11 +41,11 @@ export class ImageSearcher {
continue;
}
self.images.data.push(image);
self.data.push(image);
somethingChanged = true;
}
if (somethingChanged) {
self.images.ping();
self.ping();
}
}

1
Logic/Web/Hash.ts
View file

@ -33,7 +33,6 @@ export default class Hash {
return;
}
h = h.replace(/\//g, "_");
window.location.hash = "#" + h;
});

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");
}
/***

22
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 attribution =
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
const meta = this._imageMeta.data;
return new Combine([
image,
new Attribution(meta.artist, meta.license, undefined),
]).SetClass('block relative')
.Render();
return "<div class='imgWithAttr'>" +
image +
"<div class='attribution'>" +
attribution +
"</div>" +
"</div>";
}

26
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 attribution =
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
const meta = this._imageMeta.data;
return new Combine([
image,
new Attribution(meta.artist, meta.license, Svg.mapillary_svg())
]).SetClass("relative block").Render();
return "<div class='imgWithAttr'>" +
image +
"<div class='attribution'>" +
Svg.mapillary_ui().Render() +
attribution +
"</div>" +
"</div>";
}

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
});
}
}

15
UI/ShowDataLayer.ts
View file

@ -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);
popup.remove();
leafletLayer.closePopup();
popup.remove();
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();
}

1
css/ReviewElement.css
View file

@ -81,6 +81,7 @@
.review-attribution img {
height: 3em;
width: auto;
margin-left: 0.5em;
}

61
index.css
View file

@ -71,12 +71,28 @@
--shadow-color: #00000066;
--variable-title-height: 0px; /* Set by javascript */
--return-to-the-map-height: 2em;
--image-carousel-height: 400px;
}
.hide-when-fullscreen-is-shown {
.clutter {
/*Clutter is actually a class indicating that the element should be hidden when a scrollableFullScreen is opened
It doesn't actually define any rules*/
}
.slick-carousel-content {
width: 300px;
max-height: var(--image-carousel-height);
display: block;
margin-left: 10px;
}
.slick-carousel-content img {
/**
Workaround to patch images within a slick carousel
*/
height: var(--image-carousel-height);
width: auto;
}
html, body {
height: 100%;
@ -423,49 +439,6 @@ a {
}
.imgWithAttr {
max-height: 20em;
position: relative;
overflow: hidden;
}
.attribution {
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: smaller;
position: absolute;
bottom: 0;
left: 6em; /* Offset for the go left button*/
padding: 0.25em;
margin-bottom: 0.25em;
border-radius: 0.5em;
}
.attribution img {
height: 1.2em !important;
padding-right: 0.5em;
padding-left: 0.2em;
}
.attribution-author {
display: inline-block;
}
.license {
font-size: small;
font-weight: lighter;
}
.attribution a {
color: white;
}
/***************** Info box (box containing features and questions ******************/

3
index.html
View file

@ -14,6 +14,9 @@
<link rel="stylesheet" href="./css/openinghourstable.css"/>
<link rel="stylesheet" href="./css/tagrendering.css"/>
<link rel="stylesheet" href="./css/imageUploadFlow.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>

27
package-lock.json generated
View file

@ -3745,6 +3745,14 @@
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-1.0.6.tgz",
"integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w=="
},
"@types/jquery": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
"integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
"requires": {
"@types/sizzle": "*"
}
},
"@types/leaflet": {
"version": "1.5.17",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.17.tgz",
@ -3788,6 +3796,20 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
},
"@types/slick-carousel": {
"version": "1.6.34",
"resolved": "https://registry.npmjs.org/@types/slick-carousel/-/slick-carousel-1.6.34.tgz",
"integrity": "sha512-LdsK0BLNYqe3uBuWCBwzGQVy+8g8LDe3u1XGlaOelrDD07cjJGVVoKBSyKieK4dmfqilmP+DJp7lNRaTI7rRAg==",
"dev": true,
"requires": {
"@types/jquery": "*"
}
},
"@types/strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
@ -10562,6 +10584,11 @@
"resolved": "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz",
"integrity": "sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg=="
},
"slick-carousel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
},
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

7
package.json
View file

@ -30,6 +30,7 @@
"license": "GPL",
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.0.2",
"@types/jquery": "^3.5.5",
"@types/leaflet-markercluster": "^1.0.3",
"@types/leaflet-providers": "^1.2.0",
"@types/leaflet.markercluster": "^1.4.3",
@ -38,7 +39,7 @@
"email-validator": "^2.0.4",
"escape-html": "^1.0.3",
"i18next-client": "^1.11.4",
"jquery": "latest",
"jquery": "^3.5.1",
"latlon2country": "^1.0.8",
"leaflet": "^1.7.1",
"leaflet-providers": "^1.10.2",
@ -52,13 +53,15 @@
"osmtogeojson": "^3.0.0-beta.4",
"parcel": "^1.12.4",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"sharp": "^0.27.0",
"slick-carousel": "^1.8.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"turf": "^3.0.14"
},
"devDependencies": {
"@babel/polyfill": "^7.10.4",
"@types/node": "^7.0.5",
"@types/slick-carousel": "^1.6.34",
"assert": "^2.0.0",
"fs": "0.0.1-security",
"marked": "^1.1.1",

3
test.html
View file

@ -9,6 +9,9 @@
<link href="css/tagrendering.css" rel="stylesheet"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
</head>
<body>

47
test.ts
View file

@ -1,44 +1,19 @@
//*
import MangroveReviews from "./Logic/Web/MangroveReviews";
import ReviewElement from "./UI/Reviews/ReviewElement";
import {ImageCarousel} from "./UI/Image/ImageCarousel";
import {UIEventSource} from "./Logic/UIEventSource";
import ReviewForm from "./UI/Reviews/ReviewForm";
import Combine from "./UI/Base/Combine";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
/*
window.setTimeout(
() => {
mangroveReviews.AddReview({
comment: "These are liars - not even an island here!",
author: "Lost Tourist",
date: new Date(),
affiliated: false,
rating: 10
}, (() => {alert("Review added");return undefined;}));
const images = new UIEventSource<{ url: string, key: string }[]>(
[{url: "https://2.bp.blogspot.com/-fQiZkz9Zlzg/T_xe2X2Ia3I/AAAAAAAAA0Q/VPS8Mb8xtIQ/s1600/cat+15.jpg", key: "image:1"},
{
url: "https://www.mapillary.com/map/im/VEOhKqPcJMuT4F2olz_wHQ",
key: "mapillary"
},
{url: "https://i.imgur.com/mWlghx0.jpg", key: "image:1"}])
new ImageCarousel(images, new UIEventSource<any>({"image:1":"https://2.bp.blogspot.com/-fQiZkz9Zlzg/T_xe2X2Ia3I/AAAAAAAAA0Q/VPS8Mb8xtIQ/s1600/cat+15.jpg"}))
.AttachTo("maindiv")
}, 1000
)
window.setTimeout(
() => {
mangroveReviews.AddReview({
comment: "Excellent conditions to measure weather!!",
author: "Weather-Boy",
date: new Date(),
affiliated: true,
rating: 90
}, (() => {
alert("Review added");
return undefined;
}));
}, 1000
)
*/
/*/
import {Utils} from "./Utils";
import {FixedUiElement} from "./UI/Base/FixedUiElement";