mapcomplete/UI/Image/ImageCarousel.ts

108 lines
3.3 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "../UIElement";
import {ImageSearcher} from "../../Logic/ImageSearcher";
import {UIEventSource} from "../UIEventSource";
import {SlideShow} from "../SlideShow";
2020-06-29 03:16:34 +02:00
import {FixedUiElement} from "../Base/FixedUiElement";
2020-07-07 15:08:52 +02:00
import {VerticalCombine} from "../Base/VerticalCombine";
import {Changes} from "../../Logic/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
2020-07-08 11:23:36 +02:00
import {ConfirmDialog} from "../ConfirmDialog";
2020-06-24 00:35:19 +02:00
export class ImageCarousel extends UIElement {
2020-07-08 13:12:23 +02:00
2020-06-24 00:35:19 +02:00
private readonly searcher: ImageSearcher;
public readonly slideshow: SlideShow;
2020-06-24 00:35:19 +02:00
2020-07-07 15:08:52 +02:00
private readonly _uiElements: UIEventSource<UIElement[]>;
private readonly _deleteButton: UIElement;
2020-07-08 13:12:23 +02:00
private readonly _isDeleted: UIElement;
2020-07-07 15:08:52 +02:00
constructor(tags: UIEventSource<any>, changes: Changes) {
2020-06-24 00:35:19 +02:00
super(tags);
2020-07-07 15:08:52 +02:00
const self = this;
this.searcher = new ImageSearcher(tags, changes);
2020-06-24 00:35:19 +02:00
2020-07-07 15:08:52 +02:00
this._uiElements = this.searcher.map((imageURLS: string[]) => {
2020-06-24 00:35:19 +02:00
const uiElements: UIElement[] = [];
for (const url of imageURLS) {
2020-07-07 15:08:52 +02:00
const image = ImageSearcher.CreateImageElement(url);
uiElements.push(image);
2020-06-24 00:35:19 +02:00
}
return uiElements;
});
2020-07-07 15:08:52 +02:00
2020-06-24 00:35:19 +02:00
this.slideshow = new SlideShow(
2020-07-07 15:08:52 +02:00
this._uiElements,
new FixedUiElement("")).HideOnEmpty(true);
2020-07-07 15:08:52 +02:00
2020-07-08 11:23:36 +02:00
const showDeleteButton = this.slideshow._currentSlide.map((i) => {
return self.searcher.IsDeletable(self.searcher.data[i]);
}, [this.searcher]);
this.slideshow._currentSlide.addCallback(() => {
showDeleteButton.ping(); // This pings the showDeleteButton, which indicates that it has to hide it's subbuttons
})
2020-07-08 13:12:23 +02:00
const deleteCurrent = () => {
self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
}
2020-07-07 15:08:52 +02:00
2020-07-08 11:23:36 +02:00
this._deleteButton = new ConfirmDialog(showDeleteButton,
"<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
"<span>Afbeelding verwijderen</span>",
"<span>Terug</span>",
deleteCurrent,
2020-07-08 13:12:23 +02:00
() => {
},
2020-07-08 11:23:36 +02:00
'delete-image-confirm',
'delete-image-cancel');
2020-07-08 13:12:23 +02:00
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();
})
2020-06-24 00:35:19 +02:00
}
InnerRender(): string {
2020-07-08 11:23:36 +02:00
return "<span class='image-carousel-container'>" +
"<div class='image-delete-container'>" +
this._deleteButton.Render() +
2020-07-08 13:12:23 +02:00
this._isDeleted.Render() +
2020-07-08 11:23:36 +02:00
"</div>" +
this.slideshow.Render() +
"</span>";
2020-07-07 15:08:52 +02:00
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
this._deleteButton.Update();
2020-07-08 13:12:23 +02:00
this._isDeleted.Update();
2020-06-24 00:35:19 +02:00
}
Activate() {
super.Activate();
this.searcher.Activate();
}
}