Merge pull request #123 from RationAI/feat-vanjs

Feat vanjs
RationAI · Feb 13, 2025 · df40e87 · df40e87
2 parents a469588 + 4309257
commit df40e87
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,7 +3,7 @@
 The changelog file describes changes made since v2.0.0, which made significant changes
 to the versions 1.x.x.
 
-### 2.2.0
+### 2.2.0 (unreleased)
 **NEW UI SYSTEM**. The UI now supports component system using Van.js library. A lightweight
 way of re-using defined components, supported newly by tailwind css. The ui will be further
 separated from the viewer core in the future.

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -41,7 +41,10 @@ module.exports = function(grunt) {
             server: {
                 options: {
                     port: 9000,
-                    base: ""
+                    base: '.',
+                    open: {
+                        target: 'http://localhost:9000/ui/test_ui.html'
+                    }
                 }
             }
         },
@@ -50,7 +53,7 @@ module.exports = function(grunt) {
                 livereload: true
             },
             components: {
-                files: ["ui/*", "./tailwind.config.js"],
+                files: ["ui/*", "./tailwind.config.js", "Gruntfile.js"],
                 tasks: "css"
             }
         },

diff --git a/error.html b/error.html
@@ -16,6 +16,7 @@
         }
     </style>
 </head>
+<!-- todo tailwind theme instead -->
 <body data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed">
 
 <div class="error-container p-3" style="max-width: 850px; margin: 0 auto; margin-top: 5%;">

diff --git a/server/templates/error.html b/server/templates/error.html
@@ -9,8 +9,14 @@
     <template id="template-head"></template>
 </head>
 
-<body data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" >
-
+<body>
+<script>
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.setAttribute("data-theme", "catppuccin-mocha");
+    } else {
+        document.body.removeAttribute("data-theme");
+    }
+</script>
 
 <!-- System messaging -->
 <div id="system-message" class="d-none system-container">

diff --git a/server/templates/index.html b/server/templates/index.html
@@ -45,7 +45,14 @@
     <!-- Template head -->
     <template id="template-head"></template>
 </head>
-<body style="overflow: hidden;">
+<body style="overflow: hidden; height: 100vh; width: 100vw">
+<script>
+if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.body.setAttribute("data-theme", "catppuccin-mocha");
+} else {
+    document.body.removeAttribute("data-theme");
+}
+</script>
 <!-- OSD viewer -->
 <div id="viewer-container" class="position-absolute width-full height-full top-0 left-0" style="pointer-events: none;">
     <div id="osd" style="pointer-events: auto;" class="position-absolute width-full height-full top-0 left-0"></div>

diff --git a/src/libs/tailwind.min.css b/src/libs/tailwind.min.css
diff --git a/src/scripts.js b/src/scripts.js
@@ -182,6 +182,7 @@ function initXopatScripts() {
             if (e.key === 'Escape') {
                 USER_INTERFACE.AdvancedMenu.close();
                 USER_INTERFACE.Tutorials.hide();
+                USER_INTERFACE.DropDown.hide();
             }
         });
     }
@@ -297,9 +298,15 @@ function initXopatScripts() {
         if (theme === "dark_dimmed") {
             document.documentElement.dataset['darkTheme'] = "dark_dimmed";
             document.documentElement.dataset['colorMode'] = "dark";
+            document.body.setAttribute("data-theme", "catppuccin-mocha");
         } else {
             document.documentElement.dataset['darkTheme'] = "dark";
             document.documentElement.dataset['colorMode'] = theme;
+            if (theme === "dark") {
+                document.body.setAttribute("data-theme", "catppuccin-mocha");
+            } else {
+                document.body.removeAttribute("data-theme");
+            }
         }
     };
 

diff --git a/src/user-interface.js b/src/user-interface.js
@@ -452,6 +452,10 @@ aria-label="Close help" onclick="Dialogs.closeWindow('${id}')">
             });
         },
 
+        hide: function() {
+            this._toggle(undefined);
+        },
+
         //TODO: allow toggle to respect the viewport, e.g. switch vertical/horizontal or switch position
         // if too close to edges
         _toggle: function(mouseEvent, optionsGetter) {

diff --git a/ui/components/baseComponent.mjs b/ui/components/baseComponent.mjs
@@ -1,5 +1,11 @@
 import van from "../vanjs.mjs";
 
+const HtmlRenderer = (htmlString) => {
+    const container = van.tags.div(); // Create a container div
+    container.innerHTML = htmlString; // Set innerHTML to render safely
+    return container;
+};
+
 /**
  * @class BaseComponent
  * @description The base class for all components
@@ -16,6 +22,7 @@ class BaseComponent {
 
         this.classMap = {};
         this._children = args;
+        this._renderedChildren = null;
         this._initializing = false;
         this.options = options;
         this.classState = van.state("");
@@ -56,13 +63,19 @@ class BaseComponent {
      * getter for children which will automatically refresh them and create them if they are BaseComponent
      */
     get children() {
-        return (this._children || []).map(child => {
+        if (this._renderedChildren) return this._renderedChildren;
+        this._renderedChildren = (this._children || []).map(child => {
             if (child instanceof BaseComponent) {
                 child.refreshState();
                 return child.create();
             }
-            return child;
-        });
+            if (typeof child === "string") {
+                return child.trimStart().startsWith("<") ? HtmlRenderer(child) : child;
+            }
+            console.warn("Invalid child component provided: ", child);
+            return undefined;
+        }).filter(Boolean);
+        return this._renderedChildren;
     }
 
     /**