Make imageCarousel fit in with other elements (to make images optional or lower in the popup), add ghost bike popup

UI/Image/ImageCarousel.ts

@@ -8,8 +8,29 @@ import {Changes} from "../../Logic/Changes";
 import {VariableUiElement} from "../Base/VariableUIElement";
 import {ConfirmDialog} from "../ConfirmDialog";
 import {UserDetails} from "../../Logic/OsmConnection";
+import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
+
+export class ImageCarouselConstructor implements TagDependantUIElementConstructor{
+    IsKnown(properties: any): boolean {
+        return true;
+    }
+
+    IsQuestioning(properties: any): boolean {
+        return false;
+    }
+
+    Priority(): number {
+        return 0;
+    }
+
+    construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
+        return new ImageCarousel(tags, changes);
+    }
+    
+}
+
+export class ImageCarousel extends TagDependantUIElement {
 
-export class ImageCarousel extends UIElement {
 
     private readonly searcher: ImageSearcher;
 
@@ -98,6 +119,18 @@ export class ImageCarousel extends UIElement {
             "</span>";
     }
 
+    IsKnown(): boolean {
+        return true;
+    }
+
+    IsQuestioning(): boolean {
+        return false;
+    }
+
+    Priority(): number {
+        return 0;
+    }
+
     InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
         this._deleteButton.Update();

UI/Image/ImageCarouselWithUpload.ts

@@ -0,0 +1,71 @@
+import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
+import {ImageCarousel} from "./ImageCarousel";
+import {OsmImageUploadHandler} from "../../Logic/OsmImageUploadHandler";
+import {UIEventSource} from "../UIEventSource";
+import {Changes} from "../../Logic/Changes";
+import {UserDetails} from "../../Logic/OsmConnection";
+import {ImageUploadFlow} from "../ImageUploadFlow";
+
+export class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{
+    IsKnown(properties: any): boolean {
+        return true;
+    }
+
+    IsQuestioning(properties: any): boolean {
+        return false;
+    }
+
+    Priority(): number {
+        return 0;
+    }
+
+    construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
+        return new ImageCarouselWithUpload(tags, changes);
+    }
+}
+
+class ImageCarouselWithUpload extends TagDependantUIElement {
+    private _imageElement: ImageCarousel;
+    private _pictureUploader: ImageUploadFlow;
+
+    constructor(tags: UIEventSource<any>, changes: Changes) {
+        super(tags);
+        this._imageElement = new ImageCarousel(tags, changes);
+        const userDetails = changes.login.userDetails;
+        const license = changes.login.GetPreference( "mapcomplete-pictures-license");
+        this._pictureUploader = new OsmImageUploadHandler(tags,
+            userDetails, license,
+            changes, this._imageElement.slideshow).getUI();
+
+    }
+
+    protected InnerRender(): string {
+        return this._imageElement.Render() +
+            this._pictureUploader.Render();
+    }
+
+    Activate() {
+        super.Activate();
+        this._imageElement.Activate();
+        this._pictureUploader.Activate();
+    }
+
+    Update() {
+        super.Update();
+        this._imageElement.Update();
+        this._pictureUploader.Update();
+    }
+
+    IsKnown(): boolean {
+        return true;
+    }
+
+    IsQuestioning(): boolean {
+        return false;
+    }
+
+    Priority(): number {
+        return 0;
+    }
+
+}