bump to THREE v173; improved UI live filter

package.json

@@ -69,7 +69,7 @@
     "express-session": "^1.18.1",
     "fast-glob": "^3.3.3",
     "fast-json-patch": "^3.1.1",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "gltf-bounding-box": "^0.4.1",
     "gltf-pipeline": "^4.1.0",
@@ -94,8 +94,8 @@
     "ws": "^8.18.0",
     "swagger-jsdoc": "^6.2.8",
     "swagger-ui-express": "^5.0.1",
-    "three": "0.172.0",
-    "three-custom-shader-material": "6.2.1",
+    "three": "0.173.0",
+    "three-custom-shader-material": "6.3.0",
     "three-mesh-bvh": "0.9.0",
     "webdav-server": "^2.6.2",
     "zlibjs": "^0.3.1"

public/dist/THREE.bundle.js.LICENSE.txt

@@ -17,6 +17,6 @@ version 0.8.2
 
 /**
  * @license
- * Copyright 2010-2024 Three.js Authors
+ * Copyright 2010-2025 Three.js Authors
  * SPDX-License-Identifier: MIT
  */

public/res/css/main.css

@@ -277,11 +277,11 @@ canvas:active {
     height: 16px;
 }
 
-/*
+
 .aton-btn {
-    background-color: var(--bs-secondary-bg);
+    /*background-color: var(--bs-body-bg) !important;*/
+    white-space: nowrap;
 }
-*/
 
 .aton-btn img {
     width: 1.5em;
@@ -306,6 +306,17 @@ canvas:active {
     display: inline-block;
 }
 
+.aton-dropdown-item img {
+    margin-right: 8px;
+    height: 20px;
+    width: 20px;
+}
+.aton-dropdown-item .bi {
+    margin-right: 8px;
+    height: 16px;
+    width: 16px;
+}
+
 .aton-dropdown-item:hover {
     background-color: var(--bs-secondary-bg);
 }

public/src/ATON.ui.js

@@ -355,7 +355,9 @@ UI.createButton = (options)=>{
 
 /**
 Create a dropdown
-- options.items: an array of objects with "title" (string) and "url" (string) properties.
+- options.title: the dropdown button title
+- options.icon: icon for dropdown button
+- options.items: an array of objects with "title" (string) and "url" (string) properties. An optional icon can be provided
 
 @param {object} options - UI options object
 @returns {HTMLElement}
@@ -365,7 +367,7 @@ UI.createDropdown = (options)=>{
     el.classList.add("btn-group");
 
     let elBtn = UI.createElementFromHTMLString(`
-        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">${options.title}</button>
+        <button type="button" class="btn aton-btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">${options.title}</button>
     `);
 
     if (options.icon) UI.prependIcon(elBtn, options.icon);
@@ -375,8 +377,8 @@ UI.createDropdown = (options)=>{
     if (options.items){
         let elList = document.createElement("ul");
 
-        elList.classList.add("dropdown-menu", "aton-dropdown-menu");
-        if (options.align) elList.classList.add(options.align);
+        elList.classList.add("dropdown-menu", "dropdown-menu-sm-end", "aton-dropdown-menu");
+        //if (options.align) elList.classList.add(options.align);
 
         for (let i=0; i<options.items.length; i++){
             let E = options.items[i];
@@ -798,6 +800,7 @@ Create a live filter, search as user is typing
 - options.filterclass: items class to filter (eg. "aton-scene-card")
 - options.onfocus: routine when input filed is focused
 - options.onblur: routine when leaving input filed
+- options.oninput: custom routine on keyboard input. If not provided uses filterclass option
 
 @param {object} options - UI options object
 @returns {HTMLElement}
@@ -820,7 +823,8 @@ UI.createLiveFilter = (options)=>{
     elInGroup.append(UI.createElementFromHTMLString("<span class='input-group-text' id='basic-addon1'><i class='bi bi-search'></i></span>"));
     elInGroup.append(elInput);
 
-    elInput.oninput = ()=> {
+    if (options.oninput) elInput.oninput = options.oninput;
+    else elInput.oninput = ()=> {
         if (!options.filterclass) return;
 
         let v = elInput.value.trim().toLowerCase();
@@ -836,7 +840,9 @@ UI.createLiveFilter = (options)=>{
         }    
 
         for (let item of filterItems) {
-            if (item.getAttribute('data-search-term').includes(v) || v.length < 1) {
+            let attr = item.getAttribute('data-search-term');
+
+            if (attr && (attr.includes(v) || v.length < 1)) {
                 item.classList.remove('d-none');
             }
             else {

services/views/v2/home.ejs

@@ -56,7 +56,7 @@ window.addEventListener( 'load', ()=>{
         let elNavCont  = document.getElementById("navbarSupportedContent");
         let elNavItems = document.getElementById("navbarItems");
 
-        elNavCont.append(ATON.UI.createLiveFilter({
+        let elSearch = ATON.UI.createLiveFilter({
                 filterclass: "aton-scene-card",
                 onfocus: ()=>{
                         elHero.style.display = "none";
@@ -68,7 +68,9 @@ window.addEventListener( 'load', ()=>{
                         if (elApps) elApps.style.display = "block";
                         //elStaffPick.style.display = "block";   
                 }
-        }));
+        })
+
+        elNavCont.append(elSearch);
 
         let btnLogin = ATON.UI.createButton({
                 icon: "bi-person",
@@ -112,12 +114,12 @@ window.addEventListener( 'load', ()=>{
 
                         elNavCont.append( ATON.UI.createDropdown({
                                 icon: "bi-person",
-                                align: "dropdown-menu-end",
+                                //align: "dropdown-menu-end",
                                 title: u.username,
                                 items: [
                                         { title: "My Scenes", url: "#", icon:"scene" },
                                         { title: "My Collection", url: "#", icon:"collection" },
-                                        { title: "Logout", url: "/v2/logout" }
+                                        { title: "Logout", url: "/v2/logout", xicon: "bi-box-arrow-left" }
                                 ]
                         }));