lexgui 0.1.41 → 0.1.42

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.41",
+    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 = { } )
@@ -555,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;
 }
@@ -573,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;
@@ -662,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();
@@ -742,7 +747,9 @@ function emit( signalName, value, options = {} )
     const data = LX.signals[ signalName ];
 
     if( !data )
-    return;
+    {
+        return;
+    }
 
     const target = options.target;
 
@@ -781,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 );
 }
@@ -804,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 = {} ) {
@@ -844,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 );
@@ -879,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 )
@@ -975,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' );
                 }
             }
         }
@@ -989,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;
 
@@ -1040,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;
@@ -1055,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
 
@@ -1084,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() } });
@@ -1115,7 +1132,7 @@ class Area {
             area1.root.style.width = "100%";
             area2.root.style.width = "100%";
 
-            if(auto)
+            if( auto )
             {
                 area1.root.style.height = "auto";
 
@@ -1149,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
@@ -1165,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" );
 
@@ -1217,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;
@@ -1649,8 +1666,8 @@ class Area {
     _disableSplitResize() {
 
         this.resize = false;
-        this.split_bar.remove();
-        delete this.split_bar;
+        this.splitBar.remove();
+        delete this.splitBar;
     }
 
     _update() {
@@ -2471,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;
@@ -4092,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>" : 
@@ -4108,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%";
         }
@@ -6078,7 +6124,8 @@ class Panel {
 
     addProgress( name, value, options = {} ) {
 
-        if(!name) {
+        if( !name )
+        {
             throw("Set Widget Name!");
         }
 
@@ -6109,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' );
             }
         }
 
@@ -7640,9 +7715,11 @@ class AssetView {
 
         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 )
         {
@@ -7712,14 +7789,17 @@ class AssetView {
     * @method clear
     */
     clear() {
+
         if( this.previewPanel )
         {
             this.previewPanel.clear();
         }
+
         if( this.leftPanel )
         {
             this.leftPanel.clear();
         }
+
         if( this.rightPanel )
         {
             this.rightPanel.clear()
@@ -7790,7 +7870,7 @@ 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,
             onlyFolders: this.onlyFolders,
@@ -7851,7 +7931,7 @@ class AssetView {
             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') );
@@ -7861,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("");
@@ -7875,7 +7957,7 @@ class AssetView {
                 cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
         }
 
-        const on_change_page = (value, event) => {
+        const on_change_page = ( value, event ) => {
             if( !this.allowNextPage )
             {
                 return;
@@ -7892,13 +7974,13 @@ class AssetView {
         }
 
         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 )
@@ -7908,7 +7990,7 @@ class AssetView {
                 {
                     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();
@@ -7919,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();
@@ -7930,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" } });
@@ -7942,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') );
@@ -7963,9 +8045,9 @@ class AssetView {
 
     _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");
@@ -7979,11 +8061,62 @@ class AssetView {
 
             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');
@@ -8005,6 +8138,7 @@ class AssetView {
                 itemEl.appendChild(span);
                 
             }
+
             let title = document.createElement('span');
             title.className = "lexassettitle";
             title.innerText = item.id;
@@ -8097,14 +8231,20 @@ class AssetView {
 
                     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 ));
                     });
                 });
             }
@@ -8153,8 +8293,14 @@ class AssetView {
                 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 );
+        }
     }
 
     /**
@@ -8318,21 +8464,26 @@ class AssetView {
 
     _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 );
     }
 }
 
@@ -8350,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