Fixes to removing images

This commit is contained in:
Pieter Vander Vennet 2020-07-08 13:12:23 +02:00
parent 0fe6b67976
commit 31a64887a1
4 changed files with 71 additions and 21 deletions

View file

@ -5,7 +5,17 @@ import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
import {UIElement} from "../UI/UIElement"; import {UIElement} from "../UI/UIElement";
import {Changes} from "./Changes"; 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. * 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 * 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 readonly _commons = new UIEventSource<string>("");
private _activated: boolean = false; private _activated: boolean = false;
private _changes: Changes; private _changes: Changes;
public _deletedImages = new UIEventSource<string[]>([]);
constructor(tags: UIEventSource<any>, constructor(tags: UIEventSource<any>,
changes: Changes) { changes: Changes) {
@ -71,7 +83,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
} }
private AddImage(url: string) { private AddImage(url: string) {
if (url === undefined || url === null) { if (url === undefined || url === null || url === "") {
return; return;
} }
@ -107,7 +119,8 @@ export class ImageSearcher extends UIEventSource<string[]> {
} }
console.log("Deleting image...", key, " --> ", url); console.log("Deleting image...", key, " --> ", url);
this._changes.addChange(this._tags.data.id, key, ""); this._changes.addChange(this._tags.data.id, key, "");
this._deletedImages.data.push(url);
this._deletedImages.ping();
} }
public Activate() { public Activate() {
@ -135,7 +148,8 @@ export class ImageSearcher extends UIEventSource<string[]> {
for (const key in this._tags.data) { for (const key in this._tags.data) {
// @ts-ignore // @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);
} }
} }

View file

@ -9,17 +9,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
import {ConfirmDialog} from "../ConfirmDialog"; import {ConfirmDialog} from "../ConfirmDialog";
export class ImageCarousel extends UIElement { 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; private readonly searcher: ImageSearcher;
public readonly slideshow: SlideShow; public readonly slideshow: SlideShow;
@ -27,6 +17,7 @@ export class ImageCarousel extends UIElement {
private readonly _uiElements: UIEventSource<UIElement[]>; private readonly _uiElements: UIEventSource<UIElement[]>;
private readonly _deleteButton: UIElement; private readonly _deleteButton: UIElement;
private readonly _isDeleted: UIElement;
constructor(tags: UIEventSource<any>, changes: Changes) { constructor(tags: UIEventSource<any>, changes: Changes) {
super(tags); 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, this._deleteButton = new ConfirmDialog(showDeleteButton,
"<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>", "<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
"<span>Afbeelding verwijderen</span>", "<span>Afbeelding verwijderen</span>",
"<span>Terug</span>", "<span>Terug</span>",
deleteCurrent, deleteCurrent,
() => {}, () => {
},
'delete-image-confirm', 'delete-image-confirm',
'delete-image-cancel'); '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 { InnerRender(): string {
return "<span class='image-carousel-container'>" + return "<span class='image-carousel-container'>" +
"<div class='image-delete-container'>" + "<div class='image-delete-container'>" +
this._deleteButton.Render() + this._deleteButton.Render() +
this._isDeleted.Render() +
"</div>" + "</div>" +
this.slideshow.Render() + this.slideshow.Render() +
"</span>"; "</span>";
@ -80,6 +96,7 @@ export class ImageCarousel extends UIElement {
InnerUpdate(htmlElement: HTMLElement) { InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement); super.InnerUpdate(htmlElement);
this._deleteButton.Update(); this._deleteButton.Update();
this._isDeleted.Update();
} }

View file

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

View file

@ -688,6 +688,26 @@ body {
position: relative; 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 { .image-delete-container {
position: absolute; position: absolute;
left: 6em; left: 6em;
@ -714,7 +734,6 @@ body {
padding: 0.5em; padding: 0.5em;
padding-left: 0.75em; padding-left: 0.75em;
z-index: -1;
height: 3em; height: 3em;
width: 14em; width: 14em;
border-radius: 1em; border-radius: 1em;