From 1cd4745c3a216e16c624a634f965bdddb2a0eb2d Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 7 Jul 2020 15:08:52 +0200 Subject: [PATCH] Preparation for delete button --- Logic/FilteredLayer.ts | 9 ++++--- Logic/ImageSearcher.ts | 57 +++++++++++++++++++++++++++++++-------- UI/FeatureInfoBox.ts | 2 +- UI/Image/ImageCarousel.ts | 45 ++++++++++++++++++++++++++----- UI/SlideShow.ts | 4 ++- UI/UIElement.ts | 1 - index.css | 9 ++++--- index.html | 1 - 8 files changed, 98 insertions(+), 30 deletions(-) diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 3d66d03cf..87ba7c669 100644 --- a/Logic/FilteredLayer.ts +++ b/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 }); diff --git a/Logic/ImageSearcher.ts b/Logic/ImageSearcher.ts index 08a630e37..7e7b5dd66 100644 --- a/Logic/ImageSearcher.ts +++ b/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,18 +16,20 @@ export class ImageSearcher extends UIEventSource { private readonly _wdItem = new UIEventSource(""); private readonly _commons = new UIEventSource(""); private _activated: boolean = false; - - constructor(tags: UIEventSource) { + private _changes: Changes; + + constructor(tags: UIEventSource, + changes: Changes) { super([]); this._tags = tags; - + this._changes = changes; const self = this; this._wdItem.addCallback(() => { - // Load the wikidata item, then detect usage on 'commons' - let wikidataId = self._wdItem.data; - // @ts-ignore + // Load the wikidata item, then detect usage on 'commons' + let wikidataId = self._wdItem.data; + // @ts-ignore if (wikidataId.startsWith("Q")) { wikidataId = wikidataId.substr(1); } @@ -34,6 +37,7 @@ export class ImageSearcher extends UIEventSource { 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 { } 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); - this.ping(); + + for (const el of this.data) { + 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; diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index b2fa05c5a..fbd42ac57 100644 --- a/UI/FeatureInfoBox.ts +++ b/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) { diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 372488dd0..05682c408 100644 --- a/UI/Image/ImageCarousel.ts +++ b/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) { + private readonly _uiElements: UIEventSource; + + private readonly _deleteButtonText = new UIEventSource(""); + private readonly _deleteButton: UIElement; + + constructor(tags: UIEventSource, 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(); } diff --git a/UI/SlideShow.ts b/UI/SlideShow.ts index 2be231211..8602d4cda 100644 --- a/UI/SlideShow.ts +++ b/UI/SlideShow.ts @@ -6,7 +6,7 @@ export class SlideShow extends UIElement { private readonly _embeddedElements: UIEventSource - private readonly _currentSlide: UIEventSource = new UIEventSource(0); + public readonly _currentSlide: UIEventSource = new UIEventSource(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(); } } \ No newline at end of file diff --git a/UI/UIElement.ts b/UI/UIElement.ts index f1bb77913..5a7204332 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -1,5 +1,4 @@ import {UIEventSource} from "./UIEventSource"; -import {Playground} from "../Layers/Playground"; export abstract class UIElement { diff --git a/index.css b/index.css index 6a0e9c585..f95ddb02f 100644 --- a/index.css +++ b/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; diff --git a/index.html b/index.html index 8e1ed55d4..52e1f1044 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> -