Add slick-carousel instead of homemade one

Logic/Actors/ImageSearcher.ts

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

UI/Image/Attribution.ts

@@ -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");
+    }
+
+}

UI/Image/DeleteImage.ts

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

UI/Image/ImageCarousel.ts

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

UI/Image/ImgurImage.ts

@@ -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>";
     }
 
 

UI/Image/MapillaryImage.ts

@@ -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();
+           
     }
 
 

UI/Image/SlideShow.ts

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

UI/SpecialVisualizations.ts

@@ -18,6 +18,7 @@ import ReviewForm from "./Reviews/ReviewForm";
 import OpeningHoursVisualization from "./OpeningHours/OhVisualization";
 
 import State from "../State";
+import {ImageSearcher} from "../Logic/Actors/ImageSearcher";
 
 export class SubstitutedTranslation extends UIElement {
     private readonly tags: UIEventSource<any>;
@@ -40,11 +41,14 @@ export class SubstitutedTranslation extends UIElement {
             self.content = self.CreateContent();
             self.Update();
         });
-
+        this.SetClass("block w-full")
     }
 
     InnerRender(): string {
-        return new Combine(this.content).Render();
+        if(this.content.length == 1){
+            return this.content[0].Render();
+        }
+        return new Combine(this.content).SetClass("block w-full").Render();
     }
 
     private CreateContent(): UIElement[] {
@@ -145,7 +149,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);
                 }
             },
 

css/ReviewElement.css

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

index.css

@@ -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%;
@@ -416,49 +432,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 ******************/
 

index.html

@@ -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"/>

package-lock.json

@@ -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",

package.json

@@ -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",
@@ -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",

test.html

@@ -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>
 

test.ts

@@ -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;}));
-        
-    }, 1000
-)
+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")    
 
-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";