mapcomplete/UI/Image/SlideShow.ts

91 lines
2.9 KiB
TypeScript
Raw Normal View History

2020-10-14 12:15:09 +02:00
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
2020-11-02 18:59:21 +01:00
import Combine from "../Base/Combine";
2020-11-06 03:17:27 +01:00
import Svg from "../../Svg";
2020-06-24 00:35:19 +02:00
export class SlideShow extends UIElement {
private readonly _embeddedElements: UIEventSource<UIElement[]>
2020-07-07 15:08:52 +02:00
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
2020-09-12 23:15:17 +02:00
private _prev: UIElement;
private _next: UIElement;
2020-06-24 00:35:19 +02:00
constructor(
2020-09-13 00:53:24 +02:00
embeddedElements: UIEventSource<UIElement[]>) {
2020-06-24 00:35:19 +02:00
super(embeddedElements);
this._embeddedElements = embeddedElements;
this.ListenTo(this._currentSlide);
2020-10-14 12:15:09 +02:00
this._embeddedElements
.stabilized(1000)
.addCallback(embedded => {
// Always move to the last image - but at most once per second
this._currentSlide.setData(this._embeddedElements.data.length - 1);
});
2020-07-06 13:47:22 +02:00
2020-11-02 18:59:21 +01:00
this.dumbMode = false;
2020-07-06 13:47:22 +02:00
const self = this;
2020-11-06 03:17:27 +01:00
this._prev = new Combine([
"<div class='vspan'></div>",
2020-11-06 04:02:53 +01:00
Svg.arrow_left_smooth_img])
.SetClass("prev-button")
2020-07-06 13:47:22 +02:00
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current - 1);
});
2020-11-06 03:17:27 +01:00
this._next = new Combine([
"<div class='vspan'></div>",
Svg.arrow_right_smooth_img])
.SetClass("next-button")
2020-07-06 13:47:22 +02:00
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current + 1);
});
2020-06-24 00:35:19 +02:00
}
InnerRender(): string {
2020-06-24 00:35:19 +02:00
if (this._embeddedElements.data.length == 0) {
2020-09-13 00:53:24 +02:00
return "";
2020-06-24 00:35:19 +02:00
}
if (this._embeddedElements.data.length == 1) {
return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
this._embeddedElements.data[0].Render() +
"</div></div></div>";
2020-06-24 00:35:19 +02:00
}
let slides = ""
2020-06-24 00:35:19 +02:00
for (let i = 0; i < this._embeddedElements.data.length; i++) {
let embeddedElement = this._embeddedElements.data[i];
let state = "hidden"
if (this._currentSlide.data === i) {
state = "active-slide";
}
slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
2020-06-24 00:35:19 +02:00
}
2020-11-06 04:02:53 +01:00
return new Combine([
this._prev
2020-11-02 18:59:21 +01:00
, "<div class='slides'>", slides, "</div>"
2020-11-06 04:02:53 +01:00
, this._next])
.SetClass('image-slideshow')
.Render();
2020-06-24 00:35:19 +02:00
}
public MoveTo(index: number) {
if (index < 0) {
index = this._embeddedElements.data.length - 1;
}
index = index % this._embeddedElements.data.length;
this._currentSlide.setData(index);
}
Update() {
super.Update();
for (const uiElement of this._embeddedElements.data) {
uiElement.Update();
}
}
}