More fixes to the refactored code

Logic/Web/ImgurUploader.ts

@@ -26,7 +26,7 @@ export default class ImgurUploader {
             function (url) {
                 console.log("File saved at", url);
                 self.success.setData([...self.success.data, url]);
-            this.    handleSuccessUrl(url);
+                self._handleSuccessUrl(url);
             },
             function () {
                 console.log("All uploads completed");

UI/Image/DeleteImage.ts

@@ -9,49 +9,47 @@ import {Tag} from "../../Logic/Tags/Tag";
 import BaseUIElement from "../BaseUIElement";
 
 
-export default class DeleteImage extends UIElement {
+export default class DeleteImage extends Toggle {
-    private readonly key: string;
-    private readonly tags: UIEventSource<any>;
-
-    private readonly isDeletedBadge: BaseUIElement;
-    private readonly deleteDialog: BaseUIElement;
 
     constructor(key: string, tags: UIEventSource<any>) {
-        super(tags);
+        const oldValue = tags.data[key]
-        this.tags = tags;
+        const isDeletedBadge = Translations.t.image.isDeleted.Clone()
-        this.key = key;
+            .SetClass("rounded-full p-1")
-
+            .SetStyle("color:white;background:#ff8c8c")
-        this.isDeletedBadge = Translations.t.image.isDeleted;
+            .onClick(() => {
+                State.state?.changes?.addTag(tags.data.id, new Tag(key, oldValue), tags);
+            });
 
         const deleteButton = Translations.t.image.doDelete.Clone()
             .SetClass("block w-full pl-4 pr-4")
             .SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
             .onClick(() => {
-                State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
+                State.state?.changes?.addTag(tags.data.id, new Tag(key, ""), tags);
             });
 
-        const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
+        const cancelButton = Translations.t.general.cancel.Clone().SetClass("bg-white pl-4 pr-4").SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
-        this.deleteDialog = new Toggle(
+        const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
+        const deleteDialog = new Toggle(
             new Combine([
                 deleteButton,
                 cancelButton
             ]).SetClass("flex flex-col background-black"),
-            Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
+            openDelete
-        ).ToggleOnClick()
+        )
 
-    }
+        cancelButton.onClick(() => deleteDialog.isEnabled.setData(false))
+        openDelete.onClick(() => deleteDialog.isEnabled.setData(true))
 
-    InnerRender() {
+        super(
-        if(! State.state?.featureSwitchUserbadge?.data){
+            new Toggle(
-            return "";
+                deleteDialog,
-        }
+                isDeletedBadge,
-
+                tags.map(tags => (tags[key] ?? "") !== "")
-        const value = this.tags.data[this.key];
+            ),
-        if (value === undefined || value === "") {
+            undefined /*Login (and thus editing) is disabled*/,
-            return this.isDeletedBadge;
+            State.state?.featureSwitchUserbadge ?? new UIEventSource<boolean>(true)
-        }
+        )
-
+        this.SetClass("cursor-pointer")
-        return this.deleteDialog;
     }
 
 }

UI/Image/ImageUploadFlow.ts

@@ -28,7 +28,7 @@ export class ImageUploadFlow extends Toggle {
                 key = imagePrefix + ":" + freeIndex;
             }
             console.log("Adding image:" + key, url);
-            State.state.changes.addTag(tags.id, new Tag(key, url));
+            State.state.changes.addTag(tags.id, new Tag(key, url), tagsSource);
         })
 
 
@@ -47,7 +47,7 @@ export class ImageUploadFlow extends Toggle {
             }
 
             console.log("Received images from the user, starting upload")
-            const license = licensePicker.GetValue().data ?? "CC0"
+            const license = licensePicker.GetValue()?.data ?? "CC0"
 
             const tags = tagsSource.data;
 

UI/Image/SlideShow.ts

@@ -1,6 +1,5 @@
 import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
-import $ from "jquery"
 
 export class SlideShow extends BaseUIElement {
 
@@ -15,15 +14,29 @@ export class SlideShow extends BaseUIElement {
     protected InnerConstructElement(): HTMLElement {
         const el = document.createElement("div")
         el.classList.add("slic-carousel")
+        el.style.overflowX = "auto"
+        el.style.width = "min-content"
+        el.style.minWidth = "min-content"
+        el.style.display = "flex"
 
         this.embeddedElements.addCallbackAndRun(elements => {
+            while (el.firstChild) {
+                el.removeChild(el.lastChild)
+            }
+
             for (const element of elements ?? []) {
-                element.SetClass("slick-carousel-content")
+                element.SetClass("block ml-1")
+                    .SetStyle("width: 300px;  max-height: var(--image-carousel-height); height: var(--image-carousel-height)")
+
                 el.appendChild(element.ConstructElement())
             }
         });
 
-        return el;
+        const wrapper = document.createElement("div")
+        wrapper.style.maxWidth = "100%"
+        wrapper.style.overflowX = "auto"
+        wrapper.appendChild(el)
+        return wrapper;
     }
 
 }

UI/Input/DropDown.ts

@@ -21,6 +21,8 @@ export class DropDown<T> extends InputElement<T> {
                 }
     ) {
         super();
+        value = value ?? new UIEventSource<T>(undefined)
+        this._value = value
         this._values = values;
         if (values.length <= 1) {
             return;

UI/Input/TextField.ts

@@ -106,7 +106,7 @@ export class TextField extends InputElement<string> {
                 newCursorPos--;
             }
             // @ts-ignore
-            TextField.SetCursorPosition(newCursorPos);
+            TextField.SetCursorPosition(field, newCursorPos);
         };
 
 

UI/Popup/FeatureInfoBox.ts

@@ -53,7 +53,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
         }
 
         let questionBoxIsUsed = false;
-        const renderings = layerConfig.tagRenderings.map(tr => {
+        const renderings : BaseUIElement[] = layerConfig.tagRenderings.map(tr => {
             if (tr.question === null) {
                 // This is the question box!
                 questionBoxIsUsed = true;

UI/ShowDataLayer.ts

@@ -126,22 +126,23 @@ export default class ShowDataLayer {
             closeButton: false
         }, leafletLayer);
 
-         leafletLayer.bindPopup(popup);
+        leafletLayer.bindPopup(popup);
 
-        let infobox : FeatureInfoBox = undefined;
+        let infobox: FeatureInfoBox = undefined;
 
         const id = `popup-${feature.properties.id}-${this._cleanCount}`
-        popup.setContent(`<div style='height: 50vh' id='${id}'>Rendering</div>`)
+        popup.setContent(`<div style='height: 65vh' id='${id}'>Rendering</div>`)
 
         leafletLayer.on("popupopen", () => {
             State.state.selectedElement.setData(feature)
-                if (infobox === undefined) {
+            if (infobox === undefined) {
                 const tags = State.state.allElements.getEventSourceById(feature.properties.id);
                 infobox = new FeatureInfoBox(tags, layer);
 
                 infobox.isShown.addCallback(isShown => {
                     if (!isShown) {
                         State.state.selectedElement.setData(undefined);
+                        leafletLayer.closePopup()
                     }
                 });
             }

Utils.ts

@@ -108,7 +108,7 @@ export class Utils {
     }
 
     public static EllipsesAfter(str: string, l: number = 100) {
-        if (str === undefined) {
+        if (str === undefined || str === null) {
             return undefined;
         }
         if (str.length <= l) {

css/mobile.css

@@ -55,6 +55,10 @@ Contains tweaks for small screens
     .leaflet-control-attribution{
         display: none;
     }
+    
+    .leaflet-popup {
+        display: none;
+    }
 }
 
 

css/slideshow.css

@@ -1,22 +1,18 @@
 
-.slick-next {
+
-    top: unset;
+
-    bottom: -25px;
+.slick-carousel-content {
-    right: 15px;
+    width: 300px;
-    z-index: 10000;
+    max-height: var(--image-carousel-height);
+    display: block;
+    margin-left: 10px;
 }
 
-.slick-prev {
+.slick-carousel-content img {
-    top: unset;
+    /**
-    bottom: -25px;
+Workaround to patch images within a slick carousel
-    left: 0;
+ */
-    z-index: 10000;
+    height: var(--image-carousel-height);
+    width: auto;
 }
 
-.slick-next::before {
-    font-size: 35px;
-}
-
-.slick-prev::before {
-    font-size: 35px;
-}

index.css

@@ -65,21 +65,6 @@
     --image-carousel-height: 400px;
 }
 
-.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%;
     min-height: 100vh;

index.html

@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="./css/tagrendering.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 rel="stylesheet" href="./css/slideshow.css"/>
     <link rel="stylesheet" href="css/ReviewElement.css"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.css"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>

package.json

@@ -80,14 +80,12 @@
     "postcss": "^7.0.35",
     "prompt-sync": "^4.2.0",
     "sharp": "^0.27.0",
-    "slick-carousel": "^1.8.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "tslint": "^6.1.3"
   },
   "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": "^2.0.0",

test.ts

@@ -10,9 +10,9 @@ const tagsSource = new UIEventSource({
     name:'name',
     surface:'asphalt',
     image: "https://i.imgur.com/kX3rl3v.jpg",
-    "image:1": "https://i.imgur.com/kX3rl3v.jpg",
+    "image:1": "https://i.imgur.com/oHAJqMB.jpg",
+   // "opening_hours":"mo-fr 09:00-18:00",
     _country:"be",
-  //      "opening_hours":"mo-fr 09:00-18:00"
 })
 
 const state = new State(undefined)