Fixes to removing images

Logic/ImageSearcher.ts

@@ -5,7 +5,17 @@ import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
 import {UIElement} from "../UI/UIElement";
 import {Changes} from "./Changes";
 
-
+/**
+ * There are multiple way to fetch images for an object
+ * 1) There is an image tag
+ * 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
+ * 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
+ * 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
+ * 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
+ * 6) There is a wikipedia article, from which we can deduct the wikidata item
+ *
+ * For some images, author and license should be shown
+ */
 /**
  * Class which search for all the possible locations for images and which builds a list of UI-elements for it.
  * Note that this list is embedded into an UIEVentSource, ready to put it into a carousel
@@ -17,6 +27,8 @@ export class ImageSearcher extends UIEventSource<string[]> {
     private readonly _commons = new UIEventSource<string>("");
     private _activated: boolean = false;
     private _changes: Changes;
+    public _deletedImages = new UIEventSource<string[]>([]);
+
 
     constructor(tags: UIEventSource<any>,
                 changes: Changes) {
@@ -71,7 +83,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
     }
 
     private AddImage(url: string) {
-        if (url === undefined || url === null) {
+        if (url === undefined || url === null || url === "")  {
             return;
         }
 
@@ -102,12 +114,13 @@ export class ImageSearcher extends UIEventSource<string[]> {
     public Delete(url: string): void {
 
         const key = this.ImageKey(url);
-        if(key === undefined){
+        if (key === undefined) {
             return;
         }
         console.log("Deleting image...", key, " --> ", url);
         this._changes.addChange(this._tags.data.id, key, "");
-        
+        this._deletedImages.data.push(url);
+        this._deletedImages.ping();
     }
 
     public Activate() {
@@ -134,8 +147,9 @@ export class ImageSearcher extends UIEventSource<string[]> {
 
         for (const key in this._tags.data) {
             // @ts-ignore
-            if(key.startsWith("image:")){
+            if (key.startsWith("image:")) {
-                this.AddImage(this._tags.data[key]);
+                const url = this._tags.data[key]
+                this.AddImage(url);
             }
         }
 

UI/Image/ImageCarousel.ts

@@ -9,17 +9,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
 import {ConfirmDialog} from "../ConfirmDialog";
 
 export class ImageCarousel extends UIElement {
-    /**
+
-     * There are multiple way to fetch images for an object
-     * 1) There is an image tag
-     * 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
-     * 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
-     * 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
-     * 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
-     * 6) There is a wikipedia article, from which we can deduct the wikidata item
-     *
-     * For some images, author and license should be shown
-     */
     private readonly searcher: ImageSearcher;
 
     public readonly slideshow: SlideShow;
@@ -27,6 +17,7 @@ export class ImageCarousel extends UIElement {
     private readonly _uiElements: UIEventSource<UIElement[]>;
 
     private readonly _deleteButton: UIElement;
+    private readonly _isDeleted: UIElement;
 
     constructor(tags: UIEventSource<any>, changes: Changes) {
         super(tags);
@@ -56,22 +47,47 @@ export class ImageCarousel extends UIElement {
         })
 
 
-        const deleteCurrent = () => self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
+        const deleteCurrent = () => {
+            self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
+        }
+
 
         this._deleteButton = new ConfirmDialog(showDeleteButton,
             "<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
             "<span>Afbeelding verwijderen</span>",
             "<span>Terug</span>",
             deleteCurrent,
-            () => {},
+            () => {
+            },
             'delete-image-confirm',
             'delete-image-cancel');
+
+
+        const mapping = this.slideshow._currentSlide.map((i) => {
+            if (this.searcher._deletedImages.data.indexOf(
+                this.searcher.data[i]
+            ) >= 0) {
+                return "<div class='image-is-removed'>Deze afbeelding is verwijderd</div>"
+            }
+
+            return "";
+        });
+        this._isDeleted = new VariableUiElement(
+            mapping
+        )
+        // .HideOnEmpty(true);
+
+        this.searcher._deletedImages.addCallback(() => {
+            this.slideshow._currentSlide.ping();
+        })
+
     }
 
     InnerRender(): string {
         return "<span class='image-carousel-container'>" +
             "<div class='image-delete-container'>" +
             this._deleteButton.Render() +
+            this._isDeleted.Render() +
             "</div>" +
             this.slideshow.Render() +
             "</span>";
@@ -80,6 +96,7 @@ export class ImageCarousel extends UIElement {
     InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
         this._deleteButton.Update();
+        this._isDeleted.Update();
     }
 
 

UI/UIElement.ts

@@ -17,7 +17,7 @@ export abstract class UIElement {
     }
 
 
-    protected ListenTo(source: UIEventSource<any>) {
+    public ListenTo(source: UIEventSource<any>) {
         if (source === undefined) {
             return;
         }

index.css

@@ -688,6 +688,26 @@ body {
     position: relative;
 }
 
+.image-is-removed{
+    display: inline-block;
+    left: 0;
+    top: 2.5em;
+
+    padding: 0.5em;
+    padding-left: 0.75em;
+
+    height: 3em;
+    width: 14em;
+    border-radius: 1em;
+    background-color: black;
+
+    color: white;
+    font-weight: bold;
+    height: 1.5em; /* same as .delete-image */
+
+    z-index: 7000;
+}
+
 .image-delete-container {
     position: absolute;
     left: 6em;
@@ -714,7 +734,6 @@ body {
     padding: 0.5em;
     padding-left: 0.75em;
 
-    z-index: -1;
     height: 3em;
     width: 14em;
     border-radius: 1em;