From 31a64887a1646a8a89cba3f95cb2fccc9d8d203a Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 8 Jul 2020 13:12:23 +0200 Subject: [PATCH] Fixes to removing images --- Logic/ImageSearcher.ts | 26 +++++++++++++++++------ UI/Image/ImageCarousel.ts | 43 +++++++++++++++++++++++++++------------ UI/UIElement.ts | 2 +- index.css | 21 ++++++++++++++++++- 4 files changed, 71 insertions(+), 21 deletions(-) diff --git a/Logic/ImageSearcher.ts b/Logic/ImageSearcher.ts index dc4815313..1a07957c2 100644 --- a/Logic/ImageSearcher.ts +++ b/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 { private readonly _commons = new UIEventSource(""); private _activated: boolean = false; private _changes: Changes; + public _deletedImages = new UIEventSource([]); + constructor(tags: UIEventSource, changes: Changes) { @@ -71,7 +83,7 @@ export class ImageSearcher extends UIEventSource { } 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 { 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 { for (const key in this._tags.data) { // @ts-ignore - if(key.startsWith("image:")){ - this.AddImage(this._tags.data[key]); + if (key.startsWith("image:")) { + const url = this._tags.data[key] + this.AddImage(url); } } diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 21d36f64d..82627f1cf 100644 --- a/UI/Image/ImageCarousel.ts +++ b/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; private readonly _deleteButton: UIElement; + private readonly _isDeleted: UIElement; constructor(tags: UIEventSource, 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, "Afbeelding verwijderen", "Afbeelding verwijderen", "Terug", 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 "
Deze afbeelding is verwijderd
" + } + + return ""; + }); + this._isDeleted = new VariableUiElement( + mapping + ) + // .HideOnEmpty(true); + + this.searcher._deletedImages.addCallback(() => { + this.slideshow._currentSlide.ping(); + }) + } InnerRender(): string { return "" + "
" + this._deleteButton.Render() + + this._isDeleted.Render() + "
" + this.slideshow.Render() + ""; @@ -80,6 +96,7 @@ export class ImageCarousel extends UIElement { InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); this._deleteButton.Update(); + this._isDeleted.Update(); } diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 57f142753..efd574ff8 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -17,7 +17,7 @@ export abstract class UIElement { } - protected ListenTo(source: UIEventSource) { + public ListenTo(source: UIEventSource) { if (source === undefined) { return; } diff --git a/index.css b/index.css index f61ecac65..1d39a9c76 100644 --- a/index.css +++ b/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;