up

nikeedev · Sep 27, 2024 · 9ae5f4d · 9ae5f4d
1 parent 41858ae
commit 9ae5f4d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/kefir.js b/kefir.js
@@ -21,9 +21,11 @@ class Kefir {
         this.ui.forEach((elem, i) => {
             if (typeof elem === "string") {
                 if (elem == "br") {
-                    const br = document.createElement("br");
-                    root.appendChild(br);
-                } else if (elem.trimStart().startsWith("css:")) {
+                    root.appendChild(document.createElement("br"));
+                } else if (elem == "hr") {
+                    root.appendChild(document.createElement("hr"));
+                }
+                else if (elem.trimStart().startsWith("css:")) {
                     const css = document.createElement("style");
                     css.innerHTML = elem.split("css:")[1].trim();
                     document.head.appendChild(css);
@@ -107,6 +109,9 @@ class Kefir {
                     case "img":
                     case "image":
                         const img = document.createElement("img");
+                        if (elem.id !== undefined && elem.id.trim() !== "") {
+                            input.id = elem.id;
+                        }
                         try {
                             img.src = elem.src;
                             img.alt = elem.alt != "" ? elem.alt : "";
@@ -116,12 +121,34 @@ class Kefir {
                             if (elem.height !== undefined) {
                                 img.height = elem.height;
                             }
+                            if (elem.action !== undefined) {
+                                img.onclick = elem.action;
+                            }
                         } catch (e) {
                             console.error(e);
                         }
                         root.appendChild(img);
                         break;
 
+                    case "input":
+                        const input = document.createElement("input");
+                        if (elem.id !== undefined && elem.id.trim() !== "") {
+                            input.id = elem.id;
+                        }
+                        try {
+                            input.type = elem.input_type;
+                            if (elem.placeholder != undefined)
+                                input.placeholder = elem.placeholder;
+
+                            if (elem.action !== undefined) {
+                                input.onchange = elem.action;
+                            }
+                        } catch (e) {
+                            console.error(e);
+                        }
+                        root.appendChild(input);
+                        break;
+
                     default:
                         break;
                 }

diff --git a/test.html b/test.html
@@ -6,7 +6,8 @@
     <title>Kefir tests</title>
 </head>
 <body>
-    <div id="root"></div>
+    <div id="root">
+    </div>
     <script type="module" src="test.js"></script>
 </body>
 </html>
diff --git a/test.js b/test.js
@@ -4,7 +4,6 @@ let button = localStorage.getItem("counter") || 0;
 const ui = [
     "Hello",
     "br",
-    "br",
     {
         type: "button",
         text: "Increment: " + button,
@@ -16,6 +15,7 @@ const ui = [
         id: "incr"
     },
     "br",
+    "br",
     {
         type: "button",
         text: "Clear",
@@ -24,6 +24,11 @@ const ui = [
             document.getElementById("incr").innerText = "Increment: " + button;
             localStorage.setItem("counter", button);
         }
+    },
+    "hr",
+    {
+        type: "input",
+        input_type: "checkbox",
     }
 ]