contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add image delete button

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-08 11:23:36 +02:00
parent f548ddea84
commit 0fe6b67976
13 changed files with 303 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

69
UI/ConfirmDialog.ts Normal file
View file

@ -0,0 +1,69 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
export class ConfirmDialog extends UIElement {
private _showOptions: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _question: UIElement;
private _optionA: UIElement;
private _optionB: UIElement;
constructor(
show: UIEventSource<boolean>,
question: string,
optionA: string, optionB: string,
executeA: () => void,
executeB: () => void,
classA: string = "",
classB: string = "") {
super(show);
this.ListenTo(this._showOptions);
const self = this;
show.addCallback(() => {
self._showOptions.setData(false);
})
this._question = new FixedUiElement("<span class='ui-question'>" + question + "</span>")
.onClick(() => {
self._showOptions.setData(!self._showOptions.data);
});
this._optionA = new VariableUiElement(
this._showOptions.map(
(show) => show ? "<div class='" + classA + "'>" + optionA + "</div>" : ""))
.onClick(() => {
self._showOptions.setData(false);
executeA();
}
);
this._optionB = new VariableUiElement(
this._showOptions.map((show) =>
show ? "<div class='" + classB + "'>" + optionB + "</div>" : "") )
.onClick(() => {
self._showOptions.setData(false);
executeB();
});
}
protected InnerRender(): string {
if (!this._source.data) {
return "";
}
return this._question.Render() +
this._optionA.Render() +
this._optionB.Render();
}
Update() {
super.Update();
this._question.Update();
this._optionA.Update();
this._optionB.Update();
}
}

39
UI/Image/ImageCarousel.ts
View file

@ -6,6 +6,7 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import {VerticalCombine} from "../Base/VerticalCombine";
import {Changes} from "../../Logic/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
import {ConfirmDialog} from "../ConfirmDialog";
export class ImageCarousel extends UIElement {
/**
@ -25,7 +26,6 @@ export class ImageCarousel extends UIElement {
private readonly _uiElements: UIEventSource<UIElement[]>;
private readonly _deleteButtonText = new UIEventSource<string>("");
private readonly _deleteButton: UIElement;
constructor(tags: UIEventSource<any>, changes: Changes) {
@ -48,24 +48,33 @@ export class ImageCarousel extends UIElement {
new FixedUiElement("")).HideOnEmpty(true);
this._deleteButtonText = this.slideshow._currentSlide.map((i) => {
if(self.searcher.IsDeletable(self.searcher.data[i])){
return "DELETE";
}else{
return "";
}
});
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
})
this._deleteButton = new VariableUiElement(this._deleteButtonText)
.HideOnEmpty(true)
.onClick(() => {
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,
"<img src='assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
"<span>Afbeelding verwijderen</span>",
"<span>Terug</span>",
deleteCurrent,
() => {},
'delete-image-confirm',
'delete-image-cancel');
}
InnerRender(): string {
return this.slideshow.Render() ;
// + this._deleteButton.Render();
return "<span class='image-carousel-container'>" +
"<div class='image-delete-container'>" +
this._deleteButton.Render() +
"</div>" +
this.slideshow.Render() +
"</span>";
}
InnerUpdate(htmlElement: HTMLElement) {

11
UI/UIElement.ts
View file

@ -58,6 +58,17 @@ export abstract class UIElement {
}
element.style.pointerEvents = "all";
element.style.cursor = "pointer";
/*
const childs = element.children;
for (let i = 0; i < childs.length; i++) {
const ch = childs[i];
console.log(ch);
ch.style.cursor = "pointer";
ch.onclick = () => {
self._onClick();
}
ch.style.pointerEvents = "all";
}*/
}
this.InnerUpdate(element);

14
UI/UIEventSource.ts
View file

@ -27,15 +27,23 @@ export class UIEventSource<T>{
}
}
public map<J>(f: ((T) => J)): UIEventSource<J> {
public map<J>(f: ((T) => J),
extraSources : UIEventSource<any>[] = []): UIEventSource<J> {
const self = this;
this.addCallback(function () {
const update = function () {
newSource.setData(f(self.data));
newSource.ping();
});
}
this.addCallback(update);
for (const extraSource of extraSources) {
extraSource.addCallback(update);
}
const newSource = new UIEventSource<J>(
f(this.data)
);
return newSource;