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.

1 files changed, 104 insertions, 0 deletions

diff --git a/input/file.js b/input/file.js
new file mode 100644
index 0000000..db33463
--- /dev/null
+++ b/input/file.js
@@ -0,0 +1,104 @@
+// SPDX-FileCopyrightText: 2024 M. Shulhan <ms@kilabit.info>
+// SPDX-License-Identifier: GPL-3.0-or-later
+export class WuiInputFile {
+    constructor() {
+        this.id = "";
+        this.class = "";
+        // Filter for files. For example "image/*" to allow selecting image files.
+        this.accept = "";
+        this.label = "";
+        this.hint = "";
+        this.classInput = ""; // Custom CSS class for input element.
+        this.classLabel = ""; // Custom CSS class for label.
+        this.classHint = ""; // Custom CSS class for hint text.
+        this.classHintToggle = ""; // Custom CSS class for hint toggler.
+        this.isDisabled = false;
+        this.isHintShowed = false;
+        this.elHint = document.createElement("div");
+    }
+    element() {
+        const el = document.createElement("div");
+        if (this.id) {
+            el.id = this.id;
+        }
+        el.classList.add("wui_input_file");
+        if (this.class) {
+            el.classList.add(this.class);
+        }
+        const wrapper = document.createElement("div");
+        this.generateLabel(wrapper);
+        this.generateInput(wrapper);
+        this.generateHintToggler(wrapper);
+        el.appendChild(wrapper);
+        this.generateHint(el);
+        return el;
+    }
+    generateLabel(wrapper) {
+        const elLabel = document.createElement("label");
+        elLabel.classList.add("wui_input_file_label");
+        if (this.classLabel) {
+            elLabel.classList.add(this.classLabel);
+        }
+        elLabel.innerHTML = `${this.label} `;
+        wrapper.appendChild(elLabel);
+    }
+    generateInput(wrapper) {
+        const elInput = document.createElement("input");
+        elInput.type = "file";
+        elInput.classList.add("wui_input_file_input");
+        if (this.classInput) {
+            elInput.classList.add(this.classInput);
+        }
+        if (this.accept) {
+            elInput.accept = this.accept;
+        }
+        if (this.isDisabled) {
+            elInput.disabled = true;
+        }
+        elInput.onchange = (event) => {
+            const file = event.target.files[0];
+            if (file && this.onChange) {
+                this.onChange(file);
+            }
+        };
+        wrapper.appendChild(elInput);
+    }
+    generateHintToggler(wrapper) {
+        const elHintToggler = document.createElement("span");
+        elHintToggler.classList.add("wui_input_file_hint_toggler");
+        if (this.classHintToggle) {
+            elHintToggler.classList.add(this.classHintToggle);
+        }
+        elHintToggler.innerHTML = " &#x2139;";
+        elHintToggler.onmouseover = () => {
+            elHintToggler.style.cursor = "pointer";
+        };
+        elHintToggler.onclick = () => {
+            if (this.elHint.style.display === "none") {
+                this.elHint.style.display = "block";
+            }
+            else {
+                this.elHint.style.display = "none";
+            }
+        };
+        wrapper.appendChild(elHintToggler);
+    }
+    generateHint(parent) {
+        this.elHint = document.createElement("div");
+        this.elHint.classList.add("wui_input_file_hint");
+        if (this.classHint) {
+            this.elHint.classList.add(this.classHint);
+        }
+        this.elHint.innerHTML = this.hint;
+        this.elHint.style.borderRadius = "2px";
+        this.elHint.style.padding = "4px";
+        this.elHint.style.marginTop = "2px";
+        if (this.isHintShowed) {
+            this.elHint.style.display = "block";
+        }
+        else {
+            this.elHint.style.display = "none";
+        }
+        parent.appendChild(this.elHint);
+    }
+}