Fixes to removing images
This commit is contained in:
parent
0fe6b67976
commit
31a64887a1
4 changed files with 71 additions and 21 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
21
index.css
21
index.css
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue