import {InputElement} from "./InputElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import {Utils} from "../../Utils"; import {UIElement} from "../UIElement"; /** * Supports multi-input */ export class CheckBoxes extends InputElement { IsSelected: UIEventSource = new UIEventSource(false); private readonly value: UIEventSource; private readonly _elements: UIElement[] constructor(elements: UIElement[]) { super(undefined); this._elements = Utils.NoNull(elements); this.dumbMode = false; this.value = new UIEventSource([]) this.ListenTo(this.value); } IsValid(ts: number[]): boolean { if (ts === undefined) { return false; } return true; } GetValue(): UIEventSource { return this.value; } private IdFor(i) { return 'checkmark-' + this.id + '-' + i; } InnerRender(): string { let body = ""; for (let i = 0; i < this._elements.length; i++) { let el = this._elements[i]; const htmlElement = `
`; body += htmlElement; } return `
${body}
`; } protected InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); const self = this; for (let i = 0; i < this._elements.length; i++) { const el = document.getElementById(this.IdFor(i)); if(this.value.data.indexOf(i) >= 0){ // @ts-ignore el.checked = true; } el.onchange = () => { const index = self.value.data.indexOf(i); // @ts-ignore if(el.checked && index < 0){ self.value.data.push(i); self.value.ping(); }else if(index >= 0){ self.value.data.splice(index,1); self.value.ping(); } } } } }