namespace formgen.input { /** */ type type_entry = { id : string; input : interface_input; element : Element; }; /** */ export class class_input_list implements interface_input> { /** */ private element_input_factory : (() => interface_input); /** */ private label : (null | string); /** */ private element_entries : (null | Element); /** */ private entries : Array>; /** */ public constructor( element_input_factory : (() => interface_input), { "label": label = null, } : { label ?: (null | string); } = { } ) { this.element_input_factory = element_input_factory; this.label = label; this.element_entries = null; this.entries = []; } /** */ private remove( id : string ) : void { const index : int = this.entries.findIndex(entry => (entry.id === id)); this.entries[index].element.remove(); this.entries.splice(index, 1); } /** */ private async add( ) : Promise { const id : string = formgen.helpers.string.generate(); const input : interface_input = this.element_input_factory(); const element_entry : Element = document.createElement("div"); element_entry.classList.add("formgen-input-list-element"); element_entry.setAttribute("rel", id); // remover { const element_remover : Element = document.createElement("button"); element_remover.classList.add("formgen-input-list-remover"); element_remover.textContent = "-"; element_remover.addEventListener( "click", (event) => { event.preventDefault(); this.remove(id); } ); element_entry.appendChild(element_remover); } // input { await input.setup(element_entry); } this.entries.push( { "id": id, "input": input, "element": element_entry, } ); this.element_entries.appendChild(element_entry); } /** * [implementation] */ public async setup( element_target : Element ) : Promise { const element_container : Element = document.createElement("div"); { // label { if (this.label === null) { // do nothing } else { const element_label : Element = document.createElement("label"); element_label.textContent = this.label; element_container.appendChild(element_label); } } // entries { const element_entries : Element = document.createElement("div"); element_entries.classList.add("formgen-input-list-entries"); element_container.appendChild(element_entries); this.element_entries = element_entries; } // adder { const element_adder : Element = document.createElement("div"); element_adder.classList.add("formgen-input-list-adder"); { const element_adder_button : Element = document.createElement("button"); element_adder_button.textContent = "+"; element_adder.appendChild(element_adder_button); element_adder.addEventListener( "click", (event) => { event.preventDefault(); this.add(); } ); } element_container.appendChild(element_adder); } } element_target.appendChild(element_container); } /** * [implementation] */ public async read( ) : Promise> { let result : Array = []; for (const entry of this.entries) { result.push(await entry.input.read()); } return result; } /** * [implementation] */ public write( value : Array ) : Promise { return Promise.reject(new Error("not implemented")); } } }