mapcomplete/UI/Image/ImageCarousel.ts

180 lines
5.8 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "../UIElement";
import {ImageSearcher} from "../../Logic/ImageSearcher";
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 {VariableUiElement} from "../Base/VariableUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {
Dependencies,
TagDependantUIElement,
TagDependantUIElementConstructor
} from "../../Customizations/UIElementConstructor";
import {State} from "../../State";
import Translation from "../i18n/Translation";
import {CheckBox} from "../Input/CheckBox";
import Combine from "../Base/Combine";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import Translations from "../i18n/Translations";
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);
}
2020-07-20 17:30:02 +02:00
GetContent(tags: any): Translation {
return new Translation({"en":"Images without upload"});
2020-08-22 03:15:42 +02:00
}
}
export class ImageCarousel extends TagDependantUIElement {
2020-06-24 00:35:19 +02:00
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;
constructor(tags: UIEventSource<any>, osmConnection: OsmConnection = undefined) {
2020-06-24 00:35:19 +02:00
super(tags);
2020-07-07 15:08:52 +02:00
const self = this;
osmConnection = osmConnection ?? State.state?.osmConnection;
this.searcher = new ImageSearcher(tags);
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
const showDeleteButton = this.slideshow._currentSlide.map((i: number) => {
if (!osmConnection?.userDetails?.data?.loggedIn) {
return false;
}
2020-07-08 11:23:36 +02:00
return self.searcher.IsDeletable(self.searcher.data[i]);
}, [this.searcher, osmConnection?.userDetails]);
const isDeleted: UIEventSource<boolean> = this.slideshow._currentSlide.map((i: number) => {
return self.searcher._deletedImages.data.indexOf(self.searcher.data[i]) >= 0;
}, [this.searcher, this.searcher._deletedImages]);
2020-07-08 11:23:36 +02:00
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
const style = ";padding:0.4em;height:2em;padding: 0.4em; font-weight:bold;";
const backButton = Translations.t.image.dontDelete
.SetStyle("background:black;border-radius:0.4em 0.4em 0 0" + style)
const deleteButton = Translations.t.image.doDelete
.SetStyle("background:#ff8c8c;border-radius:0 0 0.4em 0.4em" + style)
.onClick(deleteCurrent);
const deleteButtonCheckbox = new CheckBox(
new Combine([
backButton,
deleteButton]
).SetStyle("display:flex;" +
"flex-direction:column;" +
"background:black;" +
"color:white;" +
"border-radius:0.5em;" +
"width:max-content;" +
"height:min-content;"),
new VariableUiElement(
showDeleteButton.map(showDelete => {
if (isDeleted.data) {
return Translations.t.image.isDeleted
.SetStyle("display:block;" +
"background-color: black;color:white;padding:0.4em;border-radius:0.4em").Render()
}
if (!showDelete) {
return "";
}
return new FixedUiElement("<img style='width:1.5em' src='./assets/delete.svg'>")
.SetStyle("display:block;" +
"width: 1.5em;" +
"height: 1.5em;" +
"padding: 0.5em;" +
"border-radius: 3em;" +
"background-color: black;").Render();
}, [this.searcher._deletedImages, isDeleted]
)));
this._deleteButton = deleteButtonCheckbox;
this._deleteButton.SetStyle(
"position:absolute;display:block;top:1em;left:5em;z-index: 7000;width:min-content;height:min-content;"
2020-07-08 13:12:23 +02:00
)
this.slideshow._currentSlide.addCallback(() => {
deleteButtonCheckbox.isEnabled.setData(false)
})
2020-07-08 13:12:23 +02:00
this.searcher._deletedImages.addCallback(() => {
this.slideshow._currentSlide.ping();
})
2020-06-24 00:35:19 +02:00
}
InnerRender(): string {
return new Combine([
this._deleteButton,
this.slideshow
]).SetStyle("position:relative").Render();
2020-07-07 15:08:52 +02:00
}
IsKnown(): boolean {
return true;
}
IsQuestioning(): boolean {
return false;
}
2020-07-25 01:07:02 +02:00
IsSkipped(): boolean {
return false;
}
Priority(): number {
return 0;
}
2020-06-24 00:35:19 +02:00
Activate() {
super.Activate();
this.searcher.Activate();
return this;
2020-06-24 00:35:19 +02:00
}
}