lexgui 0.1.41 → 0.1.42

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.41",
+        version: "0.1.42",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -501,7 +501,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * @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 = { } )
@@ -557,8 +557,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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;
     }
@@ -575,16 +577,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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;
@@ -664,7 +668,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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();
@@ -743,7 +748,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         const data = LX.signals[ signalName ];
 
         if( !data )
-        return;
+        {
+            return;
+        }
 
         const target = options.target;
 
@@ -779,13 +786,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function addSignal( name, obj, callback )
     {
-        obj[name] = callback;
+        obj[ name ] = callback;
 
         if( !LX.signals[ name ] )
+        {
             LX.signals[ name ] = [];
+        }
         
         if( LX.signals[ name ].indexOf( obj ) > -1 )
+        {
             return;
+        }
 
         LX.signals[ name ].push( obj );
     }
@@ -805,7 +816,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * 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 = {} ) {
@@ -845,7 +856,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.sections = [];
             this.panels = [];
     
-            if( !options.no_append )
+            if( !options.skipAppend )
             {
                 var lexroot = document.getElementById("lexroot");
                 lexroot.appendChild( this.root );
@@ -880,94 +891,97 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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 )
@@ -976,7 +990,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         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' );
                     }
                 }
             }
@@ -990,13 +1004,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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;
 
@@ -1041,14 +1058,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // 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;
@@ -1056,19 +1073,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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
 
@@ -1085,7 +1102,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         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() } });
@@ -1116,7 +1133,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 area1.root.style.width = "100%";
                 area2.root.style.width = "100%";
 
-                if(auto)
+                if( auto )
                 {
                     area1.root.style.height = "auto";
 
@@ -1150,11 +1167,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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
@@ -1166,34 +1183,34 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             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" );
 
@@ -1218,7 +1235,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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;
@@ -1651,8 +1668,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         _disableSplitResize() {
 
             this.resize = false;
-            this.split_bar.remove();
-            delete this.split_bar;
+            this.splitBar.remove();
+            delete this.splitBar;
         }
 
         _update() {
@@ -2473,6 +2490,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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;
@@ -4093,52 +4122,69 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * 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>" : 
                 ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (newValue || "") + "</span>" ));
             };
-            
+
             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%";
             }
@@ -6076,7 +6122,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addProgress( name, value, options = {} ) {
 
-            if(!name) {
+            if( !name )
+            {
                 throw("Set Widget Name!");
             }
 
@@ -6107,46 +6154,74 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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;
+
+                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_mousemove( e )
+                {
+                    let dt = -e.movementX;
 
-                    if(options.callback)
-                        options.callback(v, e);
+                    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(el) {
-                    el.removeEventListener("mousemove", inner_mousemove);
+                function inner_mouseup( e )
+                {
+                    var doc = that.root.ownerDocument;
+                    doc.removeEventListener( 'mousemove', inner_mousemove );
+                    doc.removeEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.remove( 'noevents' );
                 }
             }
 
@@ -7633,9 +7708,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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.skipBrowser )
             {
@@ -7705,14 +7782,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         * @method clear
         */
         clear() {
+
             if( this.previewPanel )
             {
                 this.previewPanel.clear();
             }
+
             if( this.leftPanel )
             {
                 this.leftPanel.clear();
             }
+
             if( this.rightPanel )
             {
                 this.rightPanel.clear()
@@ -7783,7 +7863,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 children: this.data
             }
 
-            this.tree = this.leftPanel.addTree("Content Browser", treeData, { 
+            this.tree = this.leftPanel.addTree( "Content Browser", treeData, {
                 // icons: tree_icons, 
                 filter: false,
                 onlyFolders: this.onlyFolders,
@@ -7844,7 +7924,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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') );
@@ -7854,10 +7934,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 } );
                 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("");
@@ -7868,7 +7950,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
             }
 
-            const on_change_page = (value, event) => {
+            const on_change_page = ( value, event ) => {
                 if( !this.allowNextPage )
                 {
                     return;
@@ -7885,13 +7967,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             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.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" });
+            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.skipBrowser )
@@ -7901,7 +7983,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         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();
@@ -7912,7 +7994,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         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();
@@ -7923,7 +8005,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         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" } });
@@ -7935,17 +8017,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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') );
@@ -7956,9 +8038,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _refreshContent( searchValue, filter ) {
 
-            const isContentLayout = (this.layout == AssetView.LAYOUT_CONTENT); // default
+            const isContentLayout = ( this.layout == AssetView.LAYOUT_CONTENT ); // default
     
-            this.filter = filter ?? (this.filter ?? "None");
+            this.filter = filter ?? ( this.filter ?? "None" );
             this.searchValue = searchValue ?? (this.searchValue ?? "");
             this.content.innerHTML = "";
             this.content.className = (isContentLayout ? "lexassetscontent" : "lexassetscontent list");
@@ -7972,11 +8054,62 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     
                 let itemEl = document.createElement('li');
                 itemEl.className = "lexassetitem " + item.type.toLowerCase();
-                itemEl.title = type + ": " + item.id;
                 itemEl.tabIndex = -1;
                 that.content.appendChild( itemEl );
     
-                if(item.selected != undefined) {
+                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 )
+                {
                     let span = document.createElement('span');
                     span.className = "lexcheckbox"; 
                     let checkbox_input = document.createElement('input');
@@ -7998,6 +8131,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     itemEl.appendChild(span);
                     
                 }
+
                 let title = document.createElement('span');
                 title.className = "lexassettitle";
                 title.innerText = item.id;
@@ -8090,14 +8224,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     
                         LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
                                     isFolder ? item.id : item.type, e, m => {
-                            if(multiple <= 1)   
+                            if( multiple <= 1 )
+                            {
                                 m.add("Rename");
+                            }
                             if( !isFolder )
-                                m.add("Clone", that._clone_item.bind(that, item));
-                            if(multiple <= 1)
+                            {
+                                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 ));
                         });
                     });
                 }
@@ -8146,8 +8286,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     item.domEl = add_item( item );
                 }
             }
+
             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 );
+            }
         }
 
         /**
@@ -8311,21 +8457,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _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.searchValue, 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 );
         }
     }
 
@@ -8343,7 +8494,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         * @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