formgen/source/logic/input/simple.ts

namespace formgen.input
{
	
	/**
	 */
	export class class_input_simple<type_value> implements interface_input<type_value>
	{
		
		/**
		 */
		private type : string;
		
		
		/**
		 */
		private value_encode : ((type_value) => string);
		
		
		/**
		 */
		private value_decode : ((string) => type_value);
		
		
		/**
		 */
		private additional_classes : Array<string>;
		
		
		/**
		 */
		private label : (null | string);
		
		
		/**
		 */
		private hint : (null | string);
		
		
		/**
		 */
		private element_input : (null | Element);
		
		
		/**
		 */
		public constructor(
			type : string,
			value_encode : ((type_value) => string),
			value_decode : ((string) => type_value),
			{
				"additional_classes": additional_classes = [],
				"label": label = null,
				"hint": hint = null,
			}
			:
			{
				additional_classes ?: Array<string>,
				label ?: (null | string);
				hint ?: (null | string);
			}
			=
			{
			}
		)
		{
			this.type = type;
			this.value_encode = value_encode;
			this.value_decode = value_decode;
			this.additional_classes = additional_classes;
			this.label = label;
			this.hint = hint;
			this.element_input = null;
		}
		
		
		/**
		 * [implementation]
		 */
		public async setup(
			element_target : Element
		) : Promise<void>
		{
			const id : string = formgen.helpers.string.generate({"prefix": "input-label-pair-"});
			
			const element_container : Element = document.createElement("div");
			element_container.classList.add("formgen-input");
			for (const class_ of this.additional_classes)
			{
				element_container.classList.add(class_);
			}
			// label
			{
				const element_label : Element = document.createElement("label");
				element_label.setAttribute("for", id);
				element_label.textContent = (this.label ?? "");
				// hint
				{
					if (this.hint === null)
					{
						// do nothing
					}
					else
					{
						await (new formgen.info.class_info(this.hint)).setup(element_label);
					}
				}
				element_container.appendChild(element_label);
			}
			// input
			{
				const element_input : Element = document.createElement("input");
				element_input.setAttribute("type", this.type);
				element_input.setAttribute("id", id);
				element_container.appendChild(element_input);
				this.element_input = element_input;
			}
			element_target.appendChild(element_container);
			// return Promise.resolve<void>(undefined);
		}
		
		
		/**
		 * [implementation]
		 */
		public read(
		) : Promise<type_value>
		{
			const raw : string = (this.element_input as HTMLInputElement).value;
			const value : type_value = this.value_decode(raw);
			return Promise.resolve<type_value>(value);
		}
		
		
		/**
		 * [implementation]
		 */
		public write(
			value : type_value
		) : Promise<void>
		{
			const raw : string = this.value_encode(value);
			(this.element_input as HTMLInputElement).value = raw;
			return Promise.resolve<void>(undefined);
		}
		
	}

}