Preparation for delete button

Logic/FilteredLayer.ts

@@ -190,15 +190,16 @@ export class FilteredLayer {
                 });
 
 
-                const uiElement = self._showOnPopup(eventSource);
-                layer.bindPopup(uiElement.Render());
                 layer.on("click", function (e) {
                     console.log("Selected ", feature)
                     self._selectedElement.setData(feature.properties);
-
+                    const uiElement = self._showOnPopup(eventSource);
+                    const popup = L.popup()
+                        .setContent(uiElement.Render())
+                        .setLatLng(e.latlng)
+                        .openOn(self._map.map);
                     uiElement.Update();
                     uiElement.Activate();
-
                     L.DomEvent.stop(e); // Marks the event as consumed
 
                 });

Logic/ImageSearcher.ts

@@ -3,6 +3,7 @@ import {ImagesInCategory, Wikidata, Wikimedia} from "./Wikimedia";
 import {WikimediaImage} from "../UI/Image/WikimediaImage";
 import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
 import {UIElement} from "../UI/UIElement";
+import {Changes} from "./Changes";
 
 
 /**
@@ -15,12 +16,14 @@ export class ImageSearcher extends UIEventSource<string[]> {
     private readonly _wdItem = new UIEventSource<string>("");
     private readonly _commons = new UIEventSource<string>("");
     private _activated: boolean = false;
+    private _changes: Changes;
 
-    constructor(tags: UIEventSource<any>) {
+    constructor(tags: UIEventSource<any>,
+                changes: Changes) {
         super([]);
 
         this._tags = tags;
-
+        this._changes = changes;
 
         const self = this;
         this._wdItem.addCallback(() => {
@@ -34,6 +37,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
                     self.AddImage(wd.image);
                     Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
                         for (const image of images.images) {
+                            // @ts-ignore
                             if (image.startsWith("File:")) {
                                 self.AddImage(image);
                             }
@@ -67,17 +71,48 @@ export class ImageSearcher extends UIEventSource<string[]> {
     }
 
     private AddImage(url: string) {
-        if(url === undefined || url === null){
+        if (url === undefined || url === null) {
             return;
         }
-        if (this.data.indexOf(url) < 0) {
+
-            this.data.push(url);
+        for (const el of this.data) {
-            this.ping();
+            if (el === url) {
+                return;
             }
         }
 
+        this.data.push(url);
+        this.ping();
+    }
+
+    private ImageKey(url: string): string {
+        const tgs = this._tags.data;
+        for (const key in tgs) {
+            if (tgs[key] === url) {
+                return key;
+            }
+        }
+        return undefined;
+    }
+
+    public IsDeletable(url: string): boolean {
+        return this.ImageKey(url) !== undefined;
+    }
+
+    public Delete(url: string): void {
+
+        const key = this.ImageKey(url);
+        if(key === undefined){
+            return;
+        }
+        console.log("Deleting image...");
+        
+        // this._changes.addChange(this._tags.data.id, key, "");
+        
+    }
+
     public Activate() {
-        if(this._activated){
+        if (this._activated) {
             return;
         }
         this._activated = true;

UI/FeatureInfoBox.ts

@@ -44,7 +44,7 @@ export class FeatureInfoBox extends UIElement {
         this._userDetails = userDetails;
         this.ListenTo(userDetails);
 
-        this._imageElement = new ImageCarousel(this._tagsES);
+        this._imageElement = new ImageCarousel(this._tagsES, changes);
 
         this._infoboxes = [];
         for (const tagRenderingOption of elementsToShow) {

UI/Image/ImageCarousel.ts

@@ -3,6 +3,9 @@ import {ImageSearcher} from "../../Logic/ImageSearcher";
 import {UIEventSource} from "../UIEventSource";
 import {SlideShow} from "../SlideShow";
 import {FixedUiElement} from "../Base/FixedUiElement";
+import {VerticalCombine} from "../Base/VerticalCombine";
+import {Changes} from "../../Logic/Changes";
+import {VariableUiElement} from "../Base/VariableUIElement";
 
 export class ImageCarousel extends UIElement {
     /**
@@ -20,26 +23,54 @@ export class ImageCarousel extends UIElement {
 
     public readonly slideshow: SlideShow;
 
-    constructor(tags: UIEventSource<any>) {
+    private readonly _uiElements: UIEventSource<UIElement[]>;
+
+    private readonly _deleteButtonText = new UIEventSource<string>("");
+    private readonly _deleteButton: UIElement;
+
+    constructor(tags: UIEventSource<any>, changes: Changes) {
         super(tags);
 
-        this.searcher = new ImageSearcher(tags);
+        const self = this;
+        this.searcher = new ImageSearcher(tags, changes);
 
-        let uiElements = this.searcher.map((imageURLS: string[]) => {
+        this._uiElements = this.searcher.map((imageURLS: string[]) => {
             const uiElements: UIElement[] = [];
             for (const url of imageURLS) {
-                uiElements.push(ImageSearcher.CreateImageElement(url));
+                const image = ImageSearcher.CreateImageElement(url);
+                uiElements.push(image);
             }
             return uiElements;
         });
 
         this.slideshow = new SlideShow(
-            uiElements,
+            this._uiElements,
             new FixedUiElement("")).HideOnEmpty(true);
+
+
+        this._deleteButtonText = this.slideshow._currentSlide.map((i) => {
+            if(self.searcher.IsDeletable(self.searcher.data[i])){
+                return "DELETE";
+            }else{
+                return "";
+            }
+        });
+
+        this._deleteButton = new VariableUiElement(this._deleteButtonText)
+            .HideOnEmpty(true)
+            .onClick(() => {
+                self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
+            });
     }
 
     InnerRender(): string {
-        return this.slideshow.Render();
+        return this.slideshow.Render() ;
+            // + this._deleteButton.Render();
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        this._deleteButton.Update();
     }
 
 

UI/SlideShow.ts

@@ -6,7 +6,7 @@ export class SlideShow extends UIElement {
 
     private readonly _embeddedElements: UIEventSource<UIElement[]>
 
-    private readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
+    public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
     private readonly _noimages: UIElement;
     private _prev: FixedUiElement;
     private _next: FixedUiElement;
@@ -84,6 +84,8 @@ export class SlideShow extends UIElement {
         for (const embeddedElement of this._embeddedElements.data) {
             embeddedElement.Activate();
         }
+        this._next.Update();
+        this._prev.Update();
     }
 
 }

UI/UIElement.ts

@@ -1,5 +1,4 @@
 import {UIEventSource} from "./UIEventSource";
-import {Playground} from "../Layers/Playground";
 
 export abstract class UIElement {
 

index.css

@@ -457,14 +457,15 @@ body {
     text-align: center;
 }
 
-
+.slide > span {
-
+    max-height: 40vh;
+}
 
 .slide > span img {
     height: auto;
     width: auto;
     max-width: 100%;
-    max-height: 50vh;
+    max-height: 30vh;
     border-radius: 1em;
 }
 
@@ -497,7 +498,7 @@ body {
 
     position: absolute;
     bottom: 0;
-    left: 5em; /* Offset for the go left button*/
+    left: 6em; /* Offset for the go left button*/
     padding: 0.25em;
     margin-bottom: 0.25em;
     border-radius: 0.5em;

index.html

@@ -9,7 +9,6 @@
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
     <link rel="stylesheet" href="./index.css"/>
-    <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
 
 </head>
 <body>