lexgui 0.1.40 → 0.1.42

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.40",
+    version: "0.1.42",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -498,7 +498,7 @@ function create_global_searchbar( root ) {
  * @param {Object} options 
  * container: Root location for the gui (default is the document body)
  * id: Id of the main area
- * skip_default_area: Skip creation of main area
+ * skipDefaultArea: Skip creation of main area
  */
 
 function init( options = { } )
@@ -543,7 +543,8 @@ function init( options = { } )
     var link = document.createElement( 'link' );
     link.rel = 'stylesheet';
     link.type = 'text/css';
-    link.href = 'https://use.fontawesome.com/releases/v6.6.0/css/all.css';
+    link.crossOrigin = 'anonymous';
+    link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/all.css';
     head.appendChild( link );
 
     // Global vars
@@ -554,8 +555,10 @@ function init( options = { } )
     this.ready = true;
     this.menubars = [ ];
 
-    if( !options.skip_default_area )
+    if( !options.skipDefaultArea )
+    {
         this.main_area = new Area( { id: options.id ?? 'mainarea' } );
+    }
 
     return this.main_area;
 }
@@ -572,16 +575,18 @@ LX.init = init;
  * draggable: Dialog can be dragged [false]
  */
 
-function message(text, title, options = {})
+function message( text, title, options = {} )
 {
-    if(!text)
-        throw("No message to show");
+    if( !text )
+    {
+        throw( "No message to show" );
+    }
 
     options.modal = true;
 
-    return new Dialog(title, p => {
-        p.addTextArea(null, text, null, { disabled: true, fitHeight: true  });
-    }, options);
+    return new Dialog( title, p => {
+        p.addTextArea( null, text, null, { disabled: true, fitHeight: true  } );
+    }, options );
 }
 
 LX.message = message;
@@ -661,7 +666,8 @@ function prompt( text, title, callback, options = {} )
                 text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
                 dialog.close();
                 prompt( text, title, callback, options );
-            }else
+            }
+            else
             {
                 if( callback ) callback.call( this, value );
                 dialog.close();
@@ -741,7 +747,9 @@ function emit( signalName, value, options = {} )
     const data = LX.signals[ signalName ];
 
     if( !data )
-    return;
+    {
+        return;
+    }
 
     const target = options.target;
 
@@ -780,10 +788,14 @@ function addSignal( name, obj, callback )
     obj[name] = callback;
 
     if( !LX.signals[ name ] )
+    {
         LX.signals[ name ] = [];
+    }
     
     if( LX.signals[ name ].indexOf( obj ) > -1 )
+    {
         return;
+    }
 
     LX.signals[ name ].push( obj );
 }
@@ -803,7 +815,7 @@ class Area {
      * className: Add class to the element
      * width: Width of the area element [fit space]
      * height: Height of the area element [fit space]
-     * no_append: Create but not append to GUI root [false]
+     * skipAppend: Create but not append to GUI root [false]
      */
 
     constructor( options = {} ) {
@@ -843,7 +855,7 @@ class Area {
         this.sections = [];
         this.panels = [];
 
-        if( !options.no_append )
+        if( !options.skipAppend )
         {
             var lexroot = document.getElementById("lexroot");
             lexroot.appendChild( this.root );
@@ -878,94 +890,97 @@ class Area {
                 makeDraggable( root, options );
             }
 
-            if( options.resizeable ) {
+            if( options.resizeable )
+            {
                 root.classList.add("resizeable");
             }
             
             if( options.resize )
             {                  
-                this.split_bar = document.createElement("div");
+                this.splitBar = document.createElement("div");
                 let type = (overlay == "left") || (overlay == "right") ? "horizontal" : "vertical";
-                this.type = overlay;;
-                this.split_bar.className = "lexsplitbar " + type;
+                this.type = overlay;
+                this.splitBar.className = "lexsplitbar " + type;
 
                 if( overlay == "right" )
                 {
-                    this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                    this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 } 
                 else if( overlay == "left" )
                 {
                     let size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientWidth);
-                    this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                    this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
                 else if( overlay == "top" )
                 {
                     let size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientHeight);
-                    this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                    this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
                 else if( overlay == "bottom" )
                 {
-                    this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                    this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
 
-                this.split_bar.addEventListener("mousedown", inner_mousedown);
-                this.root.appendChild( this.split_bar );
+                this.splitBar.addEventListener("mousedown", inner_mousedown);
+                this.root.appendChild( this.splitBar );
                 
                 var that = this;
-                var last_pos = [ 0, 0 ];
+                var lastMousePosition = [ 0, 0 ];
                 
                 function inner_mousedown( e )
                 {
                     var doc = that.root.ownerDocument;
                     doc.addEventListener( 'mousemove', inner_mousemove );
                     doc.addEventListener( 'mouseup', inner_mouseup );
-                    last_pos[ 0 ] = e.x;
-                    last_pos[ 1 ] = e.y;
+                    lastMousePosition[ 0 ] = e.x;
+                    lastMousePosition[ 1 ] = e.y;
                     e.stopPropagation();
                     e.preventDefault();
                     document.body.classList.add( 'nocursor' );
-                    that.split_bar.classList.add( 'nocursor' );
+                    that.splitBar.classList.add( 'nocursor' );
                 }
 
                 function inner_mousemove( e )
                 {
                     switch( that.type ) {
                         case "right":
-                            var dt = ( last_pos[ 0 ] - e.x );
+                            var dt = ( lastMousePosition[ 0 ] - e.x );
                             var size = ( that.root.offsetWidth + dt );
                             that.root.style.width = size + "px";
                             break;
                         case "left":
-                            var dt = ( last_pos[ 0 ] - e.x );
+                            var dt = ( lastMousePosition[ 0 ] - e.x );
                             var size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetWidth - dt));
                             that.root.style.width = size + "px";
-                            that.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                            that.splitBar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                             break;
                         case "top":
-                            var dt = ( last_pos[ 1 ] - e.y );
+                            var dt = ( lastMousePosition[ 1 ] - e.y );
                             var size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetHeight - dt));
                             that.root.style.height = size + "px";
-                            that.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                            that.splitBar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                             break;
                         case "bottom":
-                            var dt = ( last_pos[ 1 ] - e.y );
+                            var dt = ( lastMousePosition[ 1 ] - e.y );
                             var size = ( that.root.offsetHeight + dt );
                             that.root.style.height = size + "px";
                             break;
                     }
                     
-                    last_pos[ 0 ] = e.x;
-                    last_pos[ 1 ] = e.y;
+                    lastMousePosition[ 0 ] = e.x;
+                    lastMousePosition[ 1 ] = e.y;
                     e.stopPropagation();
                     e.preventDefault();
                     
                     // Resize events   
                     if( that.onresize )
+                    {
                         that.onresize( that.root.getBoundingClientRect() );
+                    }
                 }
 
                 function inner_mouseup( e )
@@ -974,7 +989,7 @@ class Area {
                     doc.removeEventListener( 'mousemove', inner_mousemove );
                     doc.removeEventListener( 'mouseup', inner_mouseup );
                     document.body.classList.remove( 'nocursor' );
-                    that.split_bar.classList.remove( 'nocursor' );
+                    that.splitBar.classList.remove( 'nocursor' );
                 }
             }
         }
@@ -988,13 +1003,16 @@ class Area {
     attach( content ) {
 
         // Append to last split section if area has been split
-        if(this.sections.length) {
-            this.sections[1].attach( content );
+        if( this.sections.length)
+        {
+            this.sections[ 1 ].attach( content );
             return;
         }
 
-        if(!content)
-        throw("no content to attach");
+        if( !content )
+        {
+            throw("no content to attach");
+        }
 
         content.parent = this;
 
@@ -1039,14 +1057,14 @@ class Area {
         }
 
         // Create areas
-        var area1 = new Area( { no_append: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
-        var area2 = new Area( { no_append: true, className: "split"} );
+        var area1 = new Area( { skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+        var area2 = new Area( { skipAppend: true, className: "split" } );
 
         area1.parentArea = this;
         area2.parentArea = this;
 
         let minimizable = options.minimizable ?? false;
-        let resize = (options.resize ?? true) || minimizable;
+        let resize = ( options.resize ?? true ) || minimizable;
 
         var data = "0px";
         this.offset = 0;
@@ -1054,19 +1072,19 @@ class Area {
         if( resize )
         {
             this.resize = resize;
-            this.split_bar = document.createElement( "div" );
-            this.split_bar.className = "lexsplitbar " + type;
+            this.splitBar = document.createElement( "div" );
+            this.splitBar.className = "lexsplitbar " + type;
 
             if( type == "horizontal" )
             {
-                this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
             else
             {
-                this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
 
-            this.split_bar.addEventListener( 'mousedown', inner_mousedown );
+            this.splitBar.addEventListener( 'mousedown', inner_mousedown );
 
             data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
 
@@ -1083,7 +1101,7 @@ class Area {
                     flushCss(area2.root);
                 });
 
-                this.split_bar.addEventListener("contextmenu", e => {
+                this.splitBar.addEventListener("contextmenu", e => {
                     e.preventDefault();
                     addContextMenu(null, e, c => {
                         c.add("Extend", { disabled: this.split_extended, callback: () => { this.extend() } });
@@ -1114,7 +1132,7 @@ class Area {
             area1.root.style.width = "100%";
             area2.root.style.width = "100%";
 
-            if(auto)
+            if( auto )
             {
                 area1.root.style.height = "auto";
 
@@ -1148,11 +1166,11 @@ class Area {
 
         if( resize )
         {
-            this.root.appendChild(this.split_bar);
+            this.root.appendChild(this.splitBar);
         }
 
         this.root.appendChild( area2.root );
-        this.sections = [area1, area2];
+        this.sections = [ area1, area2 ];
         this.type = type;
 
         // Update sizes
@@ -1164,34 +1182,34 @@ class Area {
         }
 
         var that = this;
-        var last_pos = [ 0, 0 ];
+        var lastMousePosition = [ 0, 0 ];
 
         function inner_mousedown( e )
         {
             var doc = that.root.ownerDocument;
             doc.addEventListener( 'mousemove', inner_mousemove );
             doc.addEventListener( 'mouseup', inner_mouseup );
-            last_pos[0] = e.x;
-            last_pos[1] = e.y;
+            lastMousePosition[0] = e.x;
+            lastMousePosition[1] = e.y;
             e.stopPropagation();
             e.preventDefault();
             document.body.classList.add( 'nocursor' );
-            that.split_bar.classList.add( 'nocursor' );
+            that.splitBar.classList.add( 'nocursor' );
         }
 
         function inner_mousemove( e )
         {
             if(that.type == "horizontal")
             {
-                that._moveSplit( last_pos[ 0 ] - e.x );
+                that._moveSplit( lastMousePosition[ 0 ] - e.x );
             }
             else
             {
-                that._moveSplit( last_pos[ 1 ] - e.y );
+                that._moveSplit( lastMousePosition[ 1 ] - e.y );
             }
             
-            last_pos[ 0 ] = e.x;
-            last_pos[ 1 ] = e.y;
+            lastMousePosition[ 0 ] = e.x;
+            lastMousePosition[ 1 ] = e.y;
 
             const widgets = that.root.querySelectorAll( ".lexwidget" );
 
@@ -1216,7 +1234,7 @@ class Area {
             doc.removeEventListener( 'mousemove', inner_mousemove );
             doc.removeEventListener( 'mouseup', inner_mouseup );
             document.body.classList.remove( 'nocursor' );
-            that.split_bar.classList.remove( 'nocursor' );
+            that.splitBar.classList.remove( 'nocursor' );
         }
 
         return this.sections;
@@ -1648,8 +1666,8 @@ class Area {
     _disableSplitResize() {
 
         this.resize = false;
-        this.split_bar.remove();
-        delete this.split_bar;
+        this.splitBar.remove();
+        delete this.splitBar;
     }
 
     _update() {
@@ -2470,6 +2488,18 @@ class SideBar {
         desc.innerHTML = key;
         entry.appendChild( desc );
 
+        button.addEventListener("mouseenter", () => {
+            setTimeout( () => {
+                desc.style.display = "unset";
+            }, 100 );
+        });
+
+        button.addEventListener("mouseleave", () => {
+            setTimeout( () => {
+                desc.style.display = "none";
+            }, 100 );
+        });
+
         entry.addEventListener("click", () => {
 
             const f = options.callback;
@@ -2821,7 +2851,7 @@ class NodeTree {
         let isParent = node.children.length > 0;
         let isSelected = this.selected.indexOf( node ) > -1 || node.selected;
         
-        if( this.options.only_folders )
+        if( this.options.onlyFolders )
         {
             let has_folders = false;
             node.children.forEach( c => has_folders |= (c.type == 'folder') );
@@ -3200,7 +3230,7 @@ class NodeTree {
         {
             let child = node.children[i];
 
-            if( this.options.only_folders && child.type != 'folder')
+            if( this.options.onlyFolders && child.type != 'folder')
                 continue;
 
             this._create_item( node, child, level + 1 );
@@ -4091,14 +4121,17 @@ class Panel {
      * disabled: Make the widget disabled [false]
      * icon: Icon class to show as button value
      * img: Path to image to show as button value
+     * title: Text to show in native Element title
      */
 
     addButton( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.BUTTON, options);
+        let widget = this.create_widget( name, Widget.BUTTON, options );
+
         widget.onGetValue = () => {
             return wValue.innerText;
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
             wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
@@ -4107,36 +4140,50 @@ class Panel {
 
         let element = widget.domEl;
 
-        var wValue = document.createElement('button');
-        if(options.icon || options.img) 
-            wValue.title = value;
+        var wValue = document.createElement( 'button' );
+        wValue.title = options.title ?? "";
         wValue.className = "lexbutton";
-        if(options.selected)
-            wValue.classList.add("selected");
-        if(options.buttonClass)
-            wValue.classList.add(options.buttonClass);
+
+        if( options.selected )
+        {
+            wValue.classList.add( "selected" );
+        }
+
+        if( options.buttonClass )
+        {
+            wValue.classList.add( options.buttonClass );
+        }
+
         wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
             ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
         wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
 
-        if(options.disabled)
-            wValue.setAttribute("disabled", true);
+        if( options.disabled )
+        {
+            wValue.setAttribute( "disabled", true );
+        }
 
         wValue.addEventListener("click", e => {
-            if( options.selectable ) {
+            if( options.selectable )
+            {
                 if( options.parent )
+                {
                     options.parent.querySelectorAll(".lexbutton.selected").forEach( e => { if(e == wValue) return; e.classList.remove("selected") } );
+                }
+
                 wValue.classList.toggle('selected');
             }
-            this._trigger( new IEvent(name, value, e), callback );   
+
+            this._trigger( new IEvent( name, value, e ), callback );
         });
 
-        element.appendChild(wValue);
+        element.appendChild( wValue );
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name )
+        {
             wValue.className += " noname";
             wValue.style.width = "100%";
         }
@@ -6077,7 +6124,8 @@ class Panel {
 
     addProgress( name, value, options = {} ) {
 
-        if(!name) {
+        if( !name )
+        {
             throw("Set Widget Name!");
         }
 
@@ -6108,46 +6156,74 @@ class Panel {
         progress.max = options.max ?? 1;
         progress.value = value;
         
-        if(options.low)
+        if( options.low )
             progress.low = options.low;
-        if(options.high)
+        if( options.high )
             progress.high = options.high;
-        if(options.optimum)
+        if( options.optimum )
             progress.optimum = options.optimum;
 
-        container.appendChild(progress);
-        element.appendChild(container);
+        container.appendChild( progress );
+        element.appendChild( container );
 
-        if(options.showValue) {
-            if(document.getElementById('progressvalue-' + name ))
+        if( options.showValue )
+        {
+            if( document.getElementById('progressvalue-' + name ) )
+            {
                 document.getElementById('progressvalue-' + name ).remove();
+            }
+
             let span = document.createElement("span");
             span.id = "progressvalue-" + name;
             span.style.padding = "0px 5px";
             span.innerText = value;
-            container.appendChild(span);
+            container.appendChild( span );
         }
 
-        if(options.editable) {
-            progress.classList.add("editable");
-            progress.addEventListener("mousemove", inner_mousemove.bind(this, value));
-            progress.addEventListener("mouseup", inner_mouseup.bind(this, progress));
+        if( options.editable )
+        {
+            progress.classList.add( "editable" );
+            progress.addEventListener( "mousedown", inner_mousedown );
 
-            function inner_mousemove(value, e) {
-            
-                if(e.which < 1)
-                    return;
-                let v = this.getValue(name, value);
-                v+=e.movementX/100;
-                v = v.toFixed(2);
-                this.setValue(name, v);
+            var that = this;
 
-                if(options.callback)
-                    options.callback(v, e);
+            function inner_mousedown( e )
+            {
+                var doc = that.root.ownerDocument;
+                doc.addEventListener( 'mousemove', inner_mousemove );
+                doc.addEventListener( 'mouseup', inner_mouseup );
+                document.body.classList.add( 'noevents' );
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
-            function inner_mouseup(el) {
-                el.removeEventListener("mousemove", inner_mousemove);
+            function inner_mousemove( e )
+            {
+                let dt = -e.movementX;
+
+                if ( dt != 0 )
+                {
+                    let v = that.getValue( name, value );
+                    v += e.movementX / 100;
+                    v = round( v );
+                    that.setValue( name, v );
+
+                    if( options.callback )
+                    {
+                        options.callback( v, e );
+                    }
+                }
+
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mouseup( e )
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener( 'mousemove', inner_mousemove );
+                doc.removeEventListener( 'mouseup', inner_mouseup );
+                document.body.classList.remove( 'noevents' );
             }
         }
 
@@ -7620,12 +7696,12 @@ class AssetView {
         this.layout = options.layout ?? AssetView.LAYOUT_CONTENT;
         this.contentPage = 1;
 
-        if(options.root_path)
+        if( options.rootPath )
         {
-            if(options.root_path.constructor !== String)
+            if(options.rootPath.constructor !== String)
                 console.warn("Asset Root Path must be a String (now is " + path.constructor.name + ")");
             else
-                this.rootPath = options.root_path;
+                this.rootPath = options.rootPath;
         }
 
         let div = document.createElement('div');
@@ -7637,13 +7713,15 @@ class AssetView {
 
         let left, right, contentArea = area;
 
-        this.skip_browser = options.skip_browser ?? false;
-        this.skip_preview = options.skip_preview ?? false;
-        this.only_folders = options.only_folders ?? true;
-        this.preview_actions = options.preview_actions ?? [];
-        this.context_menu = options.context_menu ?? [];
+        this.skipBrowser = options.skipBrowser ?? false;
+        this.skipPreview = options.skipPreview ?? false;
+        this.useNativeTitle = options.useNativeTitle ?? false;
+        this.onlyFolders = options.onlyFolders ?? true;
+        this.previewActions = options.previewActions ?? [];
+        this.contextMenu = options.contextMenu ?? [];
+        this.onRefreshContent = options.onRefreshContent;
 
-        if( !this.skip_browser )
+        if( !this.skipBrowser )
         {
             [left, right] = area.split({ type: "horizontal", sizes: ["15%", "85%"]});
             contentArea = right;
@@ -7652,28 +7730,34 @@ class AssetView {
             right.setLimitBox( 512, 0 );
         }
 
-        if( !this.skip_preview )
-            [contentArea, right] = contentArea.split({ type: "horizontal", sizes: ["80%", "20%"]});
+        if( !this.skipPreview )
+        {
+            [ contentArea, right ] = contentArea.split({ type: "horizontal", sizes: ["80%", "20%"]});
+        }
         
-        this.allowedTypes = options.allowed_types || ["None", "Image", "Mesh", "Script", "JSON", "Clip"];
+        this.allowedTypes = options.allowedTypes || ["None", "Image", "Mesh", "Script", "JSON", "Clip"];
 
         this.prevData = [];
         this.nextData = [];
         this.data = [];
 
-        this._processData(this.data, null);
+        this._processData( this.data, null );
 
         this.currentData = this.data;
         this.path = ['@'];
 
-        if(!this.skip_browser)
-            this._createTreePanel(left);
+        if( !this.skipBrowser )
+        {
+            this._createTreePanel( left );
+        }
 
-        this._createContentPanel(contentArea);
+        this._createContentPanel( contentArea );
         
         // Create resource preview panel
-        if( !this.skip_preview )
-            this.previewPanel = right.addPanel({className: 'lexassetcontentpanel', style: { overflow: 'scroll' }});
+        if( !this.skipPreview )
+        {
+            this.previewPanel = right.addPanel( {className: 'lexassetcontentpanel', style: { overflow: 'scroll' }} );
+        }
     }
 
     /**
@@ -7687,12 +7771,15 @@ class AssetView {
         
         this.data = data;
 
-        this._processData(this.data, null);
+        this._processData( this.data, null );
         this.currentData = this.data;
-        this.path = ['@'];
+        this.path = [ '@' ];
+
+        if( !this.skipBrowser )
+        {
+            this._createTreePanel( this.area );
+        }
 
-        if(!this.skip_browser)
-            this._createTreePanel(this.area);
         this._refreshContent();
 
         this.onevent = onevent;
@@ -7702,12 +7789,21 @@ class AssetView {
     * @method clear
     */
     clear() {
-        if(this.previewPanel)
+
+        if( this.previewPanel )
+        {
             this.previewPanel.clear();
-        if(this.leftPanel)
+        }
+
+        if( this.leftPanel )
+        {
             this.leftPanel.clear();
-        if(this.rightPanel)
+        }
+
+        if( this.rightPanel )
+        {
             this.rightPanel.clear()
+        }
     }
 
     /**
@@ -7718,14 +7814,16 @@ class AssetView {
 
         if( data.constructor !== Array )
         {
-            data['folder'] = parent;
+            data[ 'folder' ] = parent;
             data.children = data.children ?? [];
         }
 
         let list = data.constructor === Array ? data : data.children;
 
         for( var i = 0; i < list.length; ++i )
-            this._processData( list[i], data );
+        {
+            this._processData( list[ i ], data );
+        }
     }
 
     /**
@@ -7737,9 +7835,9 @@ class AssetView {
         this.path.length = 0;
 
         const push_parents_id = i => {
-            if(!i) return;
+            if( !i ) return;
             let list = i.children ? i.children : i;
-            let c = list[0];
+            let c = list[ 0 ];
             if( !c ) return;
             if( !c.folder ) return;
             this.path.push( c.folder.id ?? '@' );
@@ -7748,19 +7846,22 @@ class AssetView {
 
         push_parents_id( data );
 
-        LX.emit("@on_folder_change", this.path.reverse().join('/'));
+        LX.emit( "@on_folder_change", this.path.reverse().join('/') );
     }
 
     /**
     * @method _createTreePanel
     */
 
-    _createTreePanel(area) {
+    _createTreePanel( area ) {
 
-        if(this.leftPanel)
+        if( this.leftPanel )
+        {
             this.leftPanel.clear();
-        else {
-            this.leftPanel = area.addPanel({className: 'lexassetbrowserpanel'});
+        }
+        else
+        {
+            this.leftPanel = area.addPanel({ className: 'lexassetbrowserpanel' });
         }
 
         // Process data to show in tree
@@ -7769,21 +7870,24 @@ class AssetView {
             children: this.data
         }
 
-        this.tree = this.leftPanel.addTree("Content Browser", tree_data, { 
+        this.tree = this.leftPanel.addTree( "Content Browser", tree_data, {
             // icons: tree_icons, 
             filter: false,
-            only_folders: this.only_folders,
-            onevent: (event) => { 
+            onlyFolders: this.onlyFolders,
+            onevent: event => {
 
                 let node = event.node;
                 let value = event.value;
 
-                switch(event.type) {
+                switch( event.type )
+                {
                     case LX.TreeEvent.NODE_SELECTED: 
-                        if(!event.multiple) {
+                        if( !event.multiple )
+                        {
                             this._enterFolder( node );
                         }
-                        if(!node.parent) {
+                        if( !node.parent )
+                        {
                             this.prevData.push( this.currentData );
                             this.currentData = this.data;
                             this._refreshContent();
@@ -7805,9 +7909,9 @@ class AssetView {
     * @method _setContentLayout
     */
 
-    _setContentLayout( layout_mode ) {
+    _setContentLayout( layoutMode ) {
 
-        this.layout = layout_mode;
+        this.layout = layoutMode;
 
         this._refreshContent();
     }
@@ -7816,15 +7920,18 @@ class AssetView {
     * @method _createContentPanel
     */
 
-    _createContentPanel(area) {
+    _createContentPanel( area ) {
 
-        if(this.rightPanel)
+        if( this.rightPanel )
+        {
             this.rightPanel.clear();
-        else {
-            this.rightPanel = area.addPanel({className: 'lexassetcontentpanel'});
+        }
+        else
+        {
+            this.rightPanel = area.addPanel({ className: 'lexassetcontentpanel' });
         }
 
-        const on_sort = (value, event) => {
+        const on_sort = ( value, event ) => {
             const cmenu = addContextMenu( "Sort by", event, c => {
                 c.add("Name", () => this._sortData('id') );
                 c.add("Type", () => this._sortData('type') );
@@ -7834,10 +7941,12 @@ class AssetView {
             } );
             const parent = this.parent.root.parentElement;
             if( parent.classList.contains('lexdialog') )
+            {
                 cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
+            }
         }
 
-        const on_change_view = (value, event) => {
+        const on_change_view = ( value, event ) => {
             const cmenu = addContextMenu( "Layout", event, c => {
                 c.add("Content", () => this._setContentLayout( AssetView.LAYOUT_CONTENT ) );
                 c.add("");
@@ -7848,36 +7957,40 @@ class AssetView {
                 cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
         }
 
-        const on_change_page = (value, event) => {
-            if(!this.allow_next_page)
+        const on_change_page = ( value, event ) => {
+            if( !this.allowNextPage )
+            {
                 return;
-            const last_page = this.contentPage;
+            }
+            const lastPage = this.contentPage;
             this.contentPage += value;
             this.contentPage = Math.min( this.contentPage, (((this.currentData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1 );
             this.contentPage = Math.max( this.contentPage, 1 );
 
-            if( last_page != this.contentPage )
+            if( lastPage != this.contentPage )
+            {
                 this._refreshContent();
+            }
         }
 
         this.rightPanel.sameLine();
-        this.rightPanel.addDropdown("Filter", this.allowedTypes, this.allowedTypes[0], (v) => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" });
-        this.rightPanel.addText(null, this.search_value ?? "", (v) => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." });
-        this.rightPanel.addButton(null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" });
-        this.rightPanel.addButton(null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" });
+        this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" } );
+        this.rightPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
+        this.rightPanel.addButton( null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" } );
+        this.rightPanel.addButton( null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" } );
         // Content Pages
-        this.rightPanel.addButton(null, "<a class='fa-solid fa-angles-left'></a>", on_change_page.bind(this, -1), { className: "micro", title: "Previous Page" });
-        this.rightPanel.addButton(null, "<a class='fa-solid fa-angles-right'></a>", on_change_page.bind(this, 1), { className: "micro", title: "Next Page" });
+        this.rightPanel.addButton( null, "<a class='fa-solid fa-angles-left'></a>", on_change_page.bind(this, -1), { className: "micro", title: "Previous Page" } );
+        this.rightPanel.addButton( null, "<a class='fa-solid fa-angles-right'></a>", on_change_page.bind(this, 1), { className: "micro", title: "Next Page" } );
         this.rightPanel.endLine();
 
-        if( !this.skip_browser )
+        if( !this.skipBrowser )
         {
             this.rightPanel.sameLine();
             this.rightPanel.addComboButtons( null, [
                 {
                     value: "Left",
                     icon: "fa-solid fa-left-long",
-                    callback:  (domEl) => { 
+                    callback: domEl => {
                         if(!this.prevData.length) return;
                         this.nextData.push( this.currentData );
                         this.currentData = this.prevData.pop();
@@ -7888,7 +8001,7 @@ class AssetView {
                 {
                     value: "Right",
                     icon: "fa-solid fa-right-long",
-                    callback:  (domEl) => { 
+                    callback: domEl => {
                         if(!this.nextData.length) return;
                         this.prevData.push( this.currentData );
                         this.currentData = this.nextData.pop();
@@ -7899,7 +8012,7 @@ class AssetView {
                 {
                     value: "Refresh",
                     icon: "fa-solid fa-arrows-rotate",
-                    callback:  (domEl) => { this._refreshContent(); }
+                    callback: domEl => { this._refreshContent(); }
                 }
             ], { width: "auto", noSelection: true } );
             this.rightPanel.addText(null, this.path.join('/'), null, { disabled: true, signal: "@on_folder_change", style: { fontWeight: "bolder", fontSize: "16px", color: "#aaa" } });
@@ -7911,17 +8024,17 @@ class AssetView {
         this.content.className = "lexassetscontent";
         this.rightPanel.root.appendChild(this.content);
 
-        this.content.addEventListener('dragenter', function(e) {
+        this.content.addEventListener('dragenter', function( e ) {
             e.preventDefault();
             this.classList.add('dragging');
         });
-        this.content.addEventListener('dragleave', function(e) {
+        this.content.addEventListener('dragleave', function( e ) {
             e.preventDefault();
             this.classList.remove('dragging');
         });
-        this.content.addEventListener('drop', (e) => {
+        this.content.addEventListener('drop', ( e ) => {
             e.preventDefault();
-            this._processDrop(e);
+            this._processDrop( e );
         });
         this.content.addEventListener('click', function() {
             this.querySelectorAll('.lexassetitem').forEach( i => i.classList.remove('selected') );
@@ -7930,38 +8043,90 @@ class AssetView {
         this._refreshContent();
     }
 
-    _refreshContent(search_value, filter) {
+    _refreshContent( searchValue, filter ) {
 
-        const is_content_layout = (this.layout == AssetView.LAYOUT_CONTENT); // default
+        const isContentLayout = ( this.layout == AssetView.LAYOUT_CONTENT ); // default
 
-        this.filter = filter ?? (this.filter ?? "None");
-        this.search_value = search_value ?? (this.search_value ?? "");
+        this.filter = filter ?? ( this.filter ?? "None" );
+        this.searchValue = searchValue ?? (this.searchValue ?? "");
         this.content.innerHTML = "";
-        this.content.className = (is_content_layout ? "lexassetscontent" : "lexassetscontent list");
+        this.content.className = (isContentLayout ? "lexassetscontent" : "lexassetscontent list");
         let that = this;
         
         const add_item = function(item) {
 
-            const type = item.type.charAt(0).toUpperCase() + item.type.slice(1);
+            const type = item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 );
             const extension = getExtension( item.id );
-            const is_folder = type === "Folder";
+            const isFolder = type === "Folder";
 
             let itemEl = document.createElement('li');
             itemEl.className = "lexassetitem " + item.type.toLowerCase();
-            itemEl.title = type + ": " + item.id;
             itemEl.tabIndex = -1;
-            that.content.appendChild(itemEl);
+            that.content.appendChild( itemEl );
+
+            if( !that.useNativeTitle )
+            {
+                let desc = document.createElement( 'span' );
+                desc.className = 'lexitemdesc';
+                desc.innerHTML = "File: " + item.id + "<br>Type: " + type;
+                that.content.appendChild( desc );
+
+                itemEl.addEventListener("mousemove", e => {
+
+                    if( !isContentLayout )
+                    {
+                        return;
+                    }
+
+                    const rect = itemEl.getBoundingClientRect();
+                    const targetRect = e.target.getBoundingClientRect();
+                    const parentRect = desc.parentElement.getBoundingClientRect();
+
+                    let localOffsetX = targetRect.x - parentRect.x - ( targetRect.x - rect.x );
+                    let localOffsetY = targetRect.y - parentRect.y - ( targetRect.y - rect.y );
+
+                    if( e.target.classList.contains( "lexassettitle" ) )
+                    {
+                        localOffsetY += ( targetRect.y - rect.y );
+                    }
+
+                    desc.style.left = (localOffsetX + e.offsetX + 12) + "px";
+                    desc.style.top = (localOffsetY + e.offsetY) + "px";
+                });
+
+                itemEl.addEventListener("mouseenter", () => {
+                    if( isContentLayout )
+                    {
+                        desc.style.display = "unset";
+                    }
+                });
+
+                itemEl.addEventListener("mouseleave", () => {
+                    if( isContentLayout )
+                    {
+                        setTimeout( () => {
+                            desc.style.display = "none";
+                        }, 100 );
+                    }
+                });
+            }
+            else
+            {
+                itemEl.title = type + ": " + item.id;
+            }
 
-            if(item.selected != undefined) {
+            if( item.selected != undefined )
+            {
                 let span = document.createElement('span');
                 span.className = "lexcheckbox"; 
                 let checkbox_input = document.createElement('input');
                 checkbox_input.type = "checkbox";
                 checkbox_input.className = "checkbox";
                 checkbox_input.checked = item.selected;
-                checkbox_input.addEventListener('change', (e, v) => {
+                checkbox_input.addEventListener('change', ( e, v ) => {
                     item.selected = !item.selected;
-                    if(that.onevent) {
+                    if( that.onevent )
+                    {
                         const event = new AssetViewEvent(AssetViewEvent.ASSET_CHECKED, e.shiftKey ? [item] : item );
                         event.multiple = !!e.shiftKey;
                         that.onevent( event );
@@ -7973,22 +8138,23 @@ class AssetView {
                 itemEl.appendChild(span);
                 
             }
+
             let title = document.createElement('span');
             title.className = "lexassettitle";
             title.innerText = item.id;
-            itemEl.appendChild(title);
+            itemEl.appendChild( title );
 
-            if( !that.skip_preview ) {
+            if( !that.skipPreview ) {
 
                 let preview = null;
-                const has_image = item.src && (['png', 'jpg'].indexOf( getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
+                const hasImage = item.src && (['png', 'jpg'].indexOf( getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
 
-                if( has_image || is_folder || !is_content_layout)
+                if( hasImage || isFolder || !isContentLayout)
                 {
                     preview = document.createElement('img');
-                    let real_src = item.unknown_extension ? that.rootPath + "images/file.png" : (is_folder ? that.rootPath + "images/folder.png" : item.src);
-                    preview.src = (is_content_layout || is_folder ? real_src : that.rootPath + "images/file.png");
-                    itemEl.appendChild(preview);
+                    let real_src = item.unknown_extension ? that.rootPath + "images/file.png" : (isFolder ? that.rootPath + "images/folder.png" : item.src);
+                    preview.src = (isContentLayout || isFolder ? real_src : that.rootPath + "images/file.png");
+                    itemEl.appendChild( preview );
                 }
                 else
                 {
@@ -8014,7 +8180,7 @@ class AssetView {
                 }
             }
 
-            if( !is_folder )
+            if( !isFolder )
             {
                 let info = document.createElement('span');
                 info.className = "lexassetinfo";
@@ -8026,30 +8192,37 @@ class AssetView {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
 
-                const is_double_click = e.detail == LX.MOUSE_DOUBLE_CLICK;
+                const isDoubleClick = ( e.detail == LX.MOUSE_DOUBLE_CLICK );
 
-                if(!is_double_click)
+                if( !isDoubleClick )
                 {
-                    if(!e.shiftKey)
+                    if( !e.shiftKey )
+                    {
                         that.content.querySelectorAll('.lexassetitem').forEach( i => i.classList.remove('selected') );
+                    }
+
                     this.classList.add('selected');
-                    if( !that.skip_preview )
+
+                    if( !that.skipPreview )
+                    {
                         that._previewAsset( item );
+                    }
                 } 
-                else if(is_folder) 
+                else if( isFolder )
                 {
                     that._enterFolder( item );
                     return;
                 }
 
-                if(that.onevent) {
-                    const event = new AssetViewEvent(is_double_click ? AssetViewEvent.ASSET_DBLCLICKED : AssetViewEvent.ASSET_SELECTED, e.shiftKey ? [item] : item );
+                if( that.onevent )
+                {
+                    const event = new AssetViewEvent(isDoubleClick ? AssetViewEvent.ASSET_DBLCLICKED : AssetViewEvent.ASSET_SELECTED, e.shiftKey ? [item] : item );
                     event.multiple = !!e.shiftKey;
                     that.onevent( event );
                 }
             });
 
-            if( that.context_menu )
+            if( that.contextMenu )
             {
                 itemEl.addEventListener('contextmenu', function(e) {
                     e.preventDefault();
@@ -8057,15 +8230,21 @@ class AssetView {
                     const multiple = that.content.querySelectorAll('.selected').length;
 
                     LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
-                                is_folder ? item.id : item.type, e, m => {
-                        if(multiple <= 1)   
+                                isFolder ? item.id : item.type, e, m => {
+                        if( multiple <= 1 )
+                        {
                             m.add("Rename");
-                        if( !is_folder )
-                            m.add("Clone", that._clone_item.bind(that, item));
-                        if(multiple <= 1)
+                        }
+                        if( !isFolder )
+                        {
+                            m.add("Clone", that._cloneItem.bind( that, item ));
+                        }
+                        if( multiple <= 1 )
+                        {
                             m.add("Properties");
+                        }
                         m.add("");
-                        m.add("Delete", that._delete_item.bind(that, item));
+                        m.add("Delete", that._deleteItem.bind( that, item ));
                     });
                 });
             }
@@ -8079,21 +8258,23 @@ class AssetView {
 
         const fr = new FileReader();
 
-        const filtered_data = this.currentData.filter( _i => {
+        const filteredData = this.currentData.filter( _i => {
             return (this.filter != "None" ? _i.type.toLowerCase() == this.filter.toLowerCase() : true) &&
-                _i.id.toLowerCase().includes(this.search_value.toLowerCase())
+                _i.id.toLowerCase().includes(this.searchValue.toLowerCase())
         } );
 
-        if(filter || search_value) {
+        if( filter || searchValue )
+        {
             this.contentPage = 1;
         }
+
         // Show all data if using filters
-        const start_index = (this.contentPage - 1) * AssetView.MAX_PAGE_ELEMENTS;
-        const end_index = Math.min( start_index + AssetView.MAX_PAGE_ELEMENTS, filtered_data.length );
+        const startIndex = (this.contentPage - 1) * AssetView.MAX_PAGE_ELEMENTS;
+        const endIndex = Math.min( startIndex + AssetView.MAX_PAGE_ELEMENTS, filteredData.length );
 
-        for( let i = start_index; i < end_index; ++i )
+        for( let i = startIndex; i < endIndex; ++i )
         {
-            let item = filtered_data[i];
+            let item = filteredData[ i ];
 
             if( item.path )
             {
@@ -8104,7 +8285,7 @@ class AssetView {
                         item.src = e.currentTarget.result;  // This is a base64 string...
                         item._path = item.path;
                         delete item.path;
-                        this._refreshContent(search_value, filter);
+                        this._refreshContent( searchValue, filter );
                     };
                 } });
             }else
@@ -8112,15 +8293,21 @@ class AssetView {
                 item.domEl = add_item( item );
             }
         }
-        this.allow_next_page = filtered_data.length - 1 > AssetView.MAX_PAGE_ELEMENTS;
-        LX.emit("@on_page_change", "Page " + this.contentPage + " / " + ((((filtered_data.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1));
+
+        this.allowNextPage = filteredData.length - 1 > AssetView.MAX_PAGE_ELEMENTS;
+        LX.emit("@on_page_change", "Page " + this.contentPage + " / " + ((((filteredData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1));
+
+        if( this.onRefreshContent )
+        {
+            this.onRefreshContent( searchValue, filter );
+        }
     }
 
     /**
     * @method _previewAsset
     */
 
-    _previewAsset(file) {
+    _previewAsset( file ) {
 
         const is_base_64 = file.src && file.src.includes("data:image/");
 
@@ -8129,34 +8316,37 @@ class AssetView {
 
         if( file.type == 'image' || file.src )
         {
-            const has_image = ['png', 'jpg'].indexOf( getExtension( file.src ) ) > -1 || is_base_64;
-            if( has_image )
-                this.previewPanel.addImage(file.src, { style: { width: "100%" } });
+            const hasImage = ['png', 'jpg'].indexOf( getExtension( file.src ) ) > -1 || is_base_64;
+            if( hasImage )
+            {
+                this.previewPanel.addImage( file.src, { style: { width: "100%" } } );
+            }
         }
 
         const options = { disabled: true };
 
         this.previewPanel.addText("Filename", file.id, null, options);
-        if(file._path || file.src ) this.previewPanel.addText("URL", file._path ? file._path : file.src, null, options);
+        if( file.lastModified ) this.previewPanel.addText("Last Modified", new Date( file.lastModified ).toLocaleString(), null, options);
+        if( file._path || file.src ) this.previewPanel.addText("URL", file._path ? file._path : file.src, null, options);
         this.previewPanel.addText("Path", this.path.join('/'), null, options);
         this.previewPanel.addText("Type", file.type, null, options);
-        if(file.bytesize) this.previewPanel.addText("Size", (file.bytesize/1024).toPrecision(3) + " KBs", null, options);
-        if(file.type == "folder") this.previewPanel.addText("Files", file.children ? file.children.length.toString() : "0", null, options);
+        if( file.bytesize ) this.previewPanel.addText("Size", (file.bytesize/1024).toPrecision(3) + " KBs", null, options);
+        if( file.type == "folder" ) this.previewPanel.addText("Files", file.children ? file.children.length.toString() : "0", null, options);
 
         this.previewPanel.addSeparator();
         
-        const preview_actions = [...this.preview_actions];
+        const previewActions = [...this.previewActions];
 
-        if( !preview_actions.length )
+        if( !previewActions.length )
         {
             // By default
-            preview_actions.push({
+            previewActions.push({
                 name: 'Download', 
                 callback: () => LX.downloadURL(file.src, file.id)
             });
         }
 
-        for( let action of preview_actions )
+        for( let action of previewActions )
         {
             if( action.type && action.type !== file.type || action.path && action.path !== this.path.join('/') )
                 continue;
@@ -8166,7 +8356,7 @@ class AssetView {
         this.previewPanel.merge();
     }
 
-    _processDrop(e) {
+    _processDrop( e ) {
 
         const fr = new FileReader();
         const num_files = e.dataTransfer.files.length;
@@ -8186,7 +8376,8 @@ class AssetView {
                 let item = {
                     "id": file.name,
                     "src": e.currentTarget.result,
-                    "extension": ext
+                    "extension": ext,
+                    "lastModified": file.lastModified
                 };
 
                 switch(ext)
@@ -8211,7 +8402,7 @@ class AssetView {
                 
                 if(i == (num_files - 1)) {
                     this._refreshContent();
-                    if( !this.skip_browser )
+                    if( !this.skipBrowser )
                         this.tree.refresh();
                 }
             };
@@ -8231,10 +8422,10 @@ class AssetView {
         this._refreshContent();
     }
 
-    _enterFolder( folder_item ) {
+    _enterFolder( folderItem ) {
 
         this.prevData.push( this.currentData );
-        this.currentData = folder_item.children;
+        this.currentData = folderItem.children;
         this.contentPage = 1;
         this._refreshContent();
 
@@ -8242,46 +8433,57 @@ class AssetView {
         this._updatePath(this.currentData);
 
         // Trigger event
-        if(this.onevent) {
-            const event = new AssetViewEvent(AssetViewEvent.ENTER_FOLDER, folder_item);
+        if( this.onevent )
+        {
+            const event = new AssetViewEvent( AssetViewEvent.ENTER_FOLDER, folderItem );
             this.onevent( event );
         }
     }
 
     _deleteItem( item ) {
 
-        const idx = this.currentData.indexOf(item);
-        if(idx > -1) {
-            this.currentData.splice(idx, 1);
-            this._refreshContent(this.search_value, this.filter);
+        const idx = this.currentData.indexOf( item );
+        if(idx < 0)
+        {
+            console.error( "[AssetView Error] Cannot delete. Item not found." );
+            return;
+        }
 
-            if(this.onevent) {
-                const event = new AssetViewEvent(AssetViewEvent.ASSET_DELETED, item );
-                this.onevent( event );
-            }
+        this.currentData.splice( idx, 1 );
+        this._refreshContent( this.searchValue, this.filter );
 
-            this.tree.refresh();
-            this._processData(this.data);
+        if(this.onevent)
+        {
+            const event = new AssetViewEvent( AssetViewEvent.ASSET_DELETED, item );
+            this.onevent( event );
         }
+
+        this.tree.refresh();
+        this._processData( this.data );
     }
 
     _cloneItem( item ) {
 
-        const idx = this.currentData.indexOf(item);
-        if(idx > -1) {
-            delete item.domEl;
-            delete item.folder;
-            const new_item = deepCopy( item );
-            this.currentData.splice(idx, 0, new_item);
-            this._refreshContent(this.search_value, this.filter);
+        const idx = this.currentData.indexOf( item );
+        if( idx < 0 )
+        {
+            return;
+        }
+
+        delete item.domEl;
+        delete item.folder;
+        const new_item = deepCopy( item );
+        this.currentData.splice( idx, 0, new_item );
 
-            if(this.onevent) {
-                const event = new AssetViewEvent(AssetViewEvent.ASSET_CLONED, item );
-                this.onevent( event );
-            }
+        this._refreshContent( this.searchValue, this.filter );
 
-            this._processData(this.data);
+        if( this.onevent )
+        {
+            const event = new AssetViewEvent( AssetViewEvent.ASSET_CLONED, item );
+            this.onevent( event );
         }
+
+        this._processData( this.data );
     }
 }
 
@@ -8299,7 +8501,7 @@ Object.assign(LX, {
     * @param {Object} request object with all the parameters like data (for sending forms), dataType, success, error
     * @param {Function} on_complete
     **/
-    request(request) {
+    request( request ) {
 
         var dataType = request.dataType || "text";
         if(dataType == "json") //parse it locally
@@ -8540,6 +8742,10 @@ Element.prototype.hasClass = function( list ) {
     return !!r.length;
 }
 
+Element.prototype.addClass = function( className ) {
+    if( className ) this.classList.add( className );
+}
+
 Element.prototype.getComputedSize = function() {
     const cs = getComputedStyle( this );
     return {
@@ -8552,7 +8758,6 @@ LX.UTILS = {
     getTime() { return new Date().getTime() },
     compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },
     compareThresholdRange( v0, v1, t0, t1 ) { return v0 >= t0 && v0 <= t1 || v1 >= t0 && v1 <= t1 || v0 <= t0 && v1 >= t1},
-    clamp (num, min, max) { return Math.min(Math.max(num, min), max) },
     uidGenerator: simple_guidGenerator,
     deleteElement( el ) { if( el ) el.remove(); },
     flushCss(element) {