lexgui 0.7.6 → 0.7.8

package/build/lexgui.module.js

@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.6",
+    version: "0.7.8",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1239,7 +1239,7 @@ class DropdownMenu {
         }
 
         const menuItem = document.createElement('div');
-        menuItem.className = "lexdropdownmenuitem" + ( item.name ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
+        menuItem.className = "lexdropdownmenuitem" + ( ( item.name || item.options ) ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
         menuItem.dataset["id"] = pKey;
         menuItem.innerHTML = `<span>${ key }</span>`;
         menuItem.tabIndex = "1";
@@ -1325,7 +1325,7 @@ class DropdownMenu {
         else
         {
             menuItem.addEventListener( "click", () => {
-                const f = item[ 'callback' ];
+                const f = item.callback;
                 if( f )
                 {
                     f.call( this, key, menuItem );
@@ -1337,7 +1337,11 @@ class DropdownMenu {
                     this._trigger[ radioName ] = key;
                 }
 
-                this.destroy( true );
+                // If has options, it's a radio group label, so don't close the menu
+                if( !item.options && ( item.closeOnClick ?? true ) )
+                {
+                    this.destroy( true );
+                }
             } );
         }
 
@@ -1375,8 +1379,6 @@ class DropdownMenu {
 
         if( item.options )
         {
-            this._addSeparator();
-
             console.assert( this._trigger[ item.name ] && "An item of the radio group must be selected!" );
             this._radioGroup = {
                 name: item.name,
@@ -3123,6 +3125,7 @@ class ContextMenu {
             }
             else if( (rect.top + rect.height) > window.innerHeight )
             {
+                div.style.marginTop = "";
                 top = (window.innerHeight - rect.height - margin);
             }
         }
@@ -6609,6 +6612,22 @@ Object.assign(LX, {
     }
 });
 
+/**
+ * @method formatBytes
+ * @param {Number} bytes
+ **/
+function formatBytes( bytes )
+{
+    if( bytes === 0 ) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB", "GB", "TB" ];
+    const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+    const value = bytes / Math.pow( k, i );
+    return value.toFixed( 2 ) + " " + sizes[ i ];
+}
+
+LX.formatBytes = formatBytes;
+
 /**
  * @method compareThreshold
  * @param {String} url
@@ -11215,7 +11234,7 @@ class RangeInput extends BaseComponent {
         container.appendChild( slider );
 
         slider.addEventListener( "input", e => {
-            this.set( isRangeValue ? [ e.target.valueAsNumber, ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
+            this.set( isRangeValue ? [ Math.min(e.target.valueAsNumber, ogValue[ 1 ]), ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
         }, { passive: false });
 
         // If its a range value, we need to update the slider using the thumbs
@@ -11281,7 +11300,7 @@ class RangeInput extends BaseComponent {
             container.appendChild( maxSlider );
 
             maxSlider.addEventListener( "input", e => {
-                ogValue[ 1 ] = +e.target.valueAsNumber;
+                ogValue[ 1 ] = Math.max(value, +e.target.valueAsNumber);
                 this.set( [ value, ogValue[ 1 ] ], false, e );
             }, { passive: false });
         }
@@ -16158,7 +16177,8 @@ LX.AssetViewEvent = AssetViewEvent;
 class AssetView {
 
     static LAYOUT_GRID          = 0;
-    static LAYOUT_LIST          = 1;
+    static LAYOUT_COMPACT       = 1;
+    static LAYOUT_LIST          = 2;
 
     static CONTENT_SORT_ASC     = 0;
     static CONTENT_SORT_DESC    = 1;
@@ -16420,7 +16440,9 @@ class AssetView {
         }
         else
         {
-            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden' });
+            area.root.classList.add( "flex", "flex-col" );
+            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden', height:"auto" });
+            this.toolsPanel.root.style.flex = "none";
             this.contentPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
         }
 
@@ -16437,7 +16459,8 @@ class AssetView {
         const _onChangeView = ( value, event ) => {
             new LX.DropdownMenu( event.target, [
                 { name: "Grid", icon: "LayoutGrid", callback: () => this._setContentLayout( AssetView.LAYOUT_GRID ) },
-                { name: "List", icon: "LayoutList", callback: () => this._setContentLayout( AssetView.LAYOUT_LIST ) }
+                { name: "Compact", icon: "LayoutList", callback: () => this._setContentLayout( AssetView.LAYOUT_COMPACT ) },
+                { name: "List", icon: "List", callback: () => this._setContentLayout( AssetView.LAYOUT_LIST ) }
             ], { side: "right", align: "start" });
         };
 
@@ -16473,9 +16496,11 @@ class AssetView {
             this.toolsPanel.addText(null, textString, null, {
                 inputClass: "nobg", disabled: true, signal: "@on_page_change", maxWidth: "16ch" }
             );
+            this.toolsPanel.endLine();
 
             if( !this.skipBrowser )
             {
+                this.toolsPanel.sameLine();
                 this.toolsPanel.addComboButtons( null, [
                     {
                         value: "Left",
@@ -16510,9 +16535,9 @@ class AssetView {
                     inputClass: "nobg", disabled: true, signal: "@on_folder_change",
                     style: { fontWeight: "600", fontSize: "15px" }
                 });
-            }
 
-            this.toolsPanel.endLine();
+                this.toolsPanel.endLine();
+            }
         };
 
         this.toolsPanel.refresh();
@@ -16545,11 +16570,13 @@ class AssetView {
     _refreshContent( searchValue, filter ) {
 
         const isGridLayout = ( this.layout == AssetView.LAYOUT_GRID ); // default
+        const isCompactLayout = ( this.layout == AssetView.LAYOUT_COMPACT );
+        const isListLayout = ( this.layout == AssetView.LAYOUT_LIST );
 
         this.filter = filter ?? ( this.filter ?? "None" );
         this.searchValue = searchValue ?? (this.searchValue ?? "");
         this.content.innerHTML = "";
-        this.content.className = (isGridLayout ? "lexassetscontent" : "lexassetscontent list");
+        this.content.className = `lexassetscontent${ isCompactLayout ? " compact" : ( isListLayout ? " list" : "" ) }`;
         let that = this;
 
         const _addItem = function(item) {
@@ -16563,6 +16590,11 @@ class AssetView {
             itemEl.tabIndex = -1;
             that.content.appendChild( itemEl );
 
+            if( item.lastModified && !item.lastModifiedDate )
+            {
+                item.lastModifiedDate = that._lastModifiedToStringDate( item.lastModified );
+            }
+
             if( !that.useNativeTitle )
             {
                 let desc = document.createElement( 'span' );
@@ -16684,14 +16716,17 @@ class AssetView {
                 }
             }
 
-            if( !isFolder )
+            // Add item type info
+            let itemInfoHtml = type;
+
+            if( isListLayout )
             {
-                let info = document.createElement('span');
-                info.className = "lexassetinfo";
-                info.innerText = type;
-                itemEl.appendChild(info);
+                if( item.bytesize ) itemInfoHtml += ` | ${ LX.formatBytes( item.bytesize ) }`;
+                if( item.lastModifiedDate ) itemInfoHtml += ` | ${ item.lastModifiedDate }`;
             }
 
+            LX.makeContainer( [ "auto", "auto" ], "lexassetinfo", itemInfoHtml, itemEl );
+
             itemEl.addEventListener('click', function( e ) {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
@@ -16833,18 +16868,18 @@ class AssetView {
         const options = { disabled: true };
 
         this.previewPanel.addText("Filename", file.id, null, options);
-        if( file.lastModified ) this.previewPanel.addText("Last Modified", new Date( file.lastModified ).toLocaleString(), null, options);
+        if( file.lastModifiedDate ) this.previewPanel.addText("Last Modified", file.lastModifiedDate, 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.bytesize ) this.previewPanel.addText("Size", LX.formatBytes( file.bytesize ), null, options);
         if( file.type == "folder" ) this.previewPanel.addText("Files", file.children ? file.children.length.toString() : "0", null, options);
 
         this.previewPanel.addSeparator();
 
         const previewActions = [...this.previewActions];
 
-        if( !previewActions.length )
+        if( !previewActions.length && file.type !== "folder" )
         {
             // By default
             previewActions.push({
@@ -16884,7 +16919,8 @@ class AssetView {
                     "id": file.name,
                     "src": e.currentTarget.result,
                     "extension": ext,
-                    "lastModified": file.lastModified
+                    "lastModified": file.lastModified,
+                    "lastModifiedDate": this._lastModifiedToStringDate( file.lastModified )
                 };
 
                 switch(ext)
@@ -16997,6 +17033,11 @@ class AssetView {
 
         this._processData( this.data );
     }
+
+    _lastModifiedToStringDate( lm ) {
+        const d = new Date( lm ).toLocaleString();
+        return d.substring( 0, d.indexOf( ',' ) );
+    }
 }
 
 LX.AssetView = AssetView;