import {UIElement} from "../UIElement"; import {ImageSearcher} from "../../Logic/ImageSearcher"; import {SlideShow} from "../SlideShow"; import {FixedUiElement} from "../Base/FixedUiElement"; import {VariableUiElement} from "../Base/VariableUIElement"; import {ConfirmDialog} from "../ConfirmDialog"; import {UIEventSource} from "../../Logic/UIEventSource"; import { Dependencies, TagDependantUIElement, TagDependantUIElementConstructor } from "../../Customizations/UIElementConstructor"; import {State} from "../../State"; export class ImageCarouselConstructor implements TagDependantUIElementConstructor{ IsKnown(properties: any): boolean { return true; } IsQuestioning(properties: any): boolean { return false; } Priority(): number { return 0; } construct(dependencies: Dependencies): TagDependantUIElement { return new ImageCarousel(dependencies.tags); } GetContent(tags: any): string { return undefined; } } export class ImageCarousel extends TagDependantUIElement { private readonly searcher: ImageSearcher; public readonly slideshow: SlideShow; private readonly _uiElements: UIEventSource; private readonly _deleteButton: UIElement; private readonly _isDeleted: UIElement; constructor(tags: UIEventSource) { super(tags); const self = this; this.searcher = new ImageSearcher(tags); this._uiElements = this.searcher.map((imageURLS: string[]) => { const uiElements: UIElement[] = []; for (const url of imageURLS) { const image = ImageSearcher.CreateImageElement(url); uiElements.push(image); } return uiElements; }); this.slideshow = new SlideShow( this._uiElements, new FixedUiElement("")).HideOnEmpty(true); const showDeleteButton = this.slideshow._currentSlide.map((i) => { if(!State.state.osmConnection.userDetails.data.loggedIn){ return false; } return self.searcher.IsDeletable(self.searcher.data[i]); }, [this.searcher, State.state.osmConnection.userDetails]); this.slideshow._currentSlide.addCallback(() => { showDeleteButton.ping(); // This pings the showDeleteButton, which indicates that it has to hide it's subbuttons }) 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 ) this.searcher._deletedImages.addCallback(() => { this.slideshow._currentSlide.ping(); }) } InnerRender(): string { return "" + "
" + this._deleteButton.Render() + this._isDeleted.Render() + "
" + this.slideshow.Render() + "
"; } IsKnown(): boolean { return true; } IsQuestioning(): boolean { return false; } IsSkipped(): boolean { return false; } Priority(): number { return 0; } InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); this._deleteButton.Update(); this._isDeleted.Update(); } Activate() { super.Activate(); this.searcher.Activate(); } }