import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; import {FixedUiElement} from "./Base/FixedUiElement"; export class SlideShow extends UIElement { private readonly _embeddedElements: UIEventSource private readonly _currentSlide: UIEventSource = new UIEventSource(0); private readonly _noimages: UIElement; private _prev: FixedUiElement; private _next: FixedUiElement; constructor( embeddedElements: UIEventSource, noImages: UIElement) { super(embeddedElements); this._embeddedElements = embeddedElements; this.ListenTo(this._currentSlide); this._noimages = noImages; const self = this; this._prev = new FixedUiElement("
" + "
" + "Prev" + "
") .onClick(() => { const current = self._currentSlide.data; self.MoveTo(current - 1); }); this._next = new FixedUiElement("
" + "
" + "Next" + "
") .onClick(() => { const current = self._currentSlide.data; self.MoveTo(current + 1); }); } protected InnerRender(): string { if (this._embeddedElements.data.length == 0) { return this._noimages.Render(); } if (this._embeddedElements.data.length == 1) { return "
" + this._embeddedElements.data[0].Render() + "
"; } let slides = "" 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 += "
" + embeddedElement.Render() + "
\n"; } return "
" + this._prev.Render() + "
" + slides + "
" + this._next.Render() + "
"; } public MoveTo(index: number) { if (index < 0) { index = this._embeddedElements.data.length - 1; } index = index % this._embeddedElements.data.length; this._currentSlide.setData(index); } InnerUpdate(htmlElement) { this._next.Update(); this._prev.Update(); } Activate() { for (const embeddedElement of this._embeddedElements.data) { embeddedElement.Activate(); } } }