From d1e96e09438b4a5c7580b86c469e817a61be991f Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Sun, 15 Sep 2024 14:32:48 +0700
Subject: all: commit all generate JavaScript files

This is to simplify development on third party where they can
clone and include the file directly without installing or running
anything to build the files.
---
 input/string.js | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 input/string.js

(limited to 'input/string.js')

diff --git a/input/string.js b/input/string.js
new file mode 100644
index 0000000..437d66b
--- /dev/null
+++ b/input/string.js
@@ -0,0 +1,130 @@
+// SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
+// SPDX-License-Identifier: GPL-3.0-or-later
+const WUI_INPUT_STRING_CLASS = "wui_input_string";
+const WUI_INPUT_STRING_CLASS_HINT = "wui_input_string_hint";
+const WUI_INPUT_STRING_CLASS_HINT_TOGGLER = "wui_input_string_hint_toggler";
+const WUI_INPUT_STRING_CLASS_INPUT = "wui_input_string_input";
+const WUI_INPUT_STRING_CLASS_LABEL = "wui_input_string_label";
+// WuiInputString create an HTML input for string with predefined options.
+// The required options are "label" and "value".
+//
+// Format of generated HTML output,
+//
+//	<div [id=${id}] class="${WUI_INPUT_STRING_CLASS}">
+//		<div>
+//			<label class="${WUI_INPUT_STRING_CLASS_LABEL} [${class_label}]">
+//				${label} | HTMLElement
+//			</label>
+//			<input
+//				class="${WUI_INPUT_STRING_CLASS_INPUT} [${class_input}]"
+//				[disabled=${is_disabled}]
+//				value=${value}
+//			>
+//			[<span class="${WUI_INPUT_STRING_CLASS_HINT_TOGGLER}">i </span>]
+//		</div>
+//		[<div class="${WUI_INPUT_STRING_CLASS_HINT}">${hint}</div>]
+//	</div>
+//
+// The "hint" option is optional, if it set the input will have a hint toggler
+// to display or hide the input information.
+//
+// User can set onChangeHandler to receive new value when the input value
+// changes.
+export class WuiInputString {
+    constructor(opts) {
+        this.opts = opts;
+        this.value = "";
+        this.value = opts.value;
+        this.el = document.createElement("div");
+        if (opts.id) {
+            this.el.id = opts.id;
+        }
+        this.el.classList.add(WUI_INPUT_STRING_CLASS);
+        this.el.style.padding = "2px";
+        const wrapper = document.createElement("div");
+        this.generateLabel(wrapper);
+        this.generateInput(wrapper);
+        if (opts.hint) {
+            this.generateHintToggler(wrapper);
+        }
+        this.el.appendChild(wrapper);
+        if (opts.hint) {
+            this.generateHint();
+        }
+    }
+    generateLabel(wrapper) {
+        this.el_label = document.createElement("label");
+        this.el_label.classList.add(WUI_INPUT_STRING_CLASS_LABEL);
+        if (this.opts.class_label) {
+            this.el_label.classList.add(this.opts.class_label);
+        }
+        if (typeof this.opts.label === "string") {
+            this.el_label.innerHTML = `${this.opts.label} `;
+        }
+        else {
+            this.el_label.appendChild(this.opts.label);
+        }
+        wrapper.appendChild(this.el_label);
+    }
+    generateInput(wrapper) {
+        this.el_input = document.createElement("input");
+        this.el_input.classList.add(WUI_INPUT_STRING_CLASS_INPUT);
+        if (this.opts.class_input) {
+            this.el_input.classList.add(this.opts.class_input);
+        }
+        this.el_input.value = "" + this.opts.value;
+        if (this.opts.is_disabled) {
+            this.el_input.disabled = true;
+        }
+        if (this.opts.onChangeHandler) {
+            this.el_input.onkeyup = () => {
+                if (this.opts.onChangeHandler) {
+                    if (this.value !== this.el_input.value) {
+                        this.opts.onChangeHandler(this.el_input.value);
+                        this.value = this.el_input.value;
+                    }
+                }
+            };
+        }
+        wrapper.appendChild(this.el_input);
+    }
+    generateHintToggler(wrapper) {
+        this.el_hint_toggler = document.createElement("span");
+        this.el_hint_toggler.classList.add(WUI_INPUT_STRING_CLASS_HINT_TOGGLER);
+        this.el_hint_toggler.innerHTML = " &#x2139;";
+        this.el_hint_toggler.onmouseover = () => {
+            this.el_hint_toggler.style.cursor = "pointer";
+        };
+        this.el_hint_toggler.onclick = () => {
+            this.onClickHintToggler();
+        };
+        wrapper.appendChild(this.el_hint_toggler);
+    }
+    generateHint() {
+        this.el_hint = document.createElement("div");
+        this.el_hint.classList.add(WUI_INPUT_STRING_CLASS_HINT);
+        this.el_hint.innerHTML = this.opts.hint || "";
+        if (this.opts.is_hint_toggled) {
+            this.el_hint.style.display = "block";
+        }
+        else {
+            this.el_hint.style.display = "none";
+        }
+        this.el_hint.style.borderRadius = "2px";
+        this.el_hint.style.padding = "4px";
+        this.el_hint.style.marginTop = "2px";
+        this.el.appendChild(this.el_hint);
+    }
+    onClickHintToggler() {
+        if (this.el_hint.style.display === "none") {
+            this.el_hint.style.display = "block";
+        }
+        else {
+            this.el_hint.style.display = "none";
+        }
+    }
+    // set the input value.
+    set(v) {
+        this.el_input.value = v;
+    }
+}
-- 
cgit v1.3