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);
+    }
+}