lexgui 0.7.8 → 0.7.10

package/build/lexgui.module.js

@@ -1,4 +1,4 @@
-// This is a generated file. Do not edit.
+// This is a generated file. Do not edit.
 // Lexgui.js @jxarco
 
 /**
@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.8",
+    version: "0.7.10",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1325,18 +1325,18 @@ class DropdownMenu {
         else
         {
             menuItem.addEventListener( "click", () => {
-                const f = item.callback;
-                if( f )
-                {
-                    f.call( this, key, menuItem );
-                }
-
                 const radioName = menuItem.getAttribute( "data-radioname" );
                 if( radioName )
                 {
                     this._trigger[ radioName ] = key;
                 }
 
+                const f = item.callback;
+                if( f )
+                {
+                    f.call( this, key, menuItem, radioName );
+                }
+
                 // If has options, it's a radio group label, so don't close the menu
                 if( !item.options && ( item.closeOnClick ?? true ) )
                 {
@@ -2577,9 +2577,11 @@ class Tabs {
 
             if( isSelected && this.thumb )
             {
+                this.thumb.classList.add( "no-transition" );
                 this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
                 this.thumb.style.width = ( tabEl.offsetWidth ) + "px";
                 this.thumb.item = tabEl;
+                this.thumb.classList.remove( "no-transition" );
             }
 
         }, 10 );
@@ -4567,8 +4569,8 @@ Element.prototype.ignore = function( eventName, callbackName ) {
     callbackName = callbackName ?? ( "_on" + eventName );
     const callback = this[ callbackName ];
     this.removeEventListener( eventName, callback );
-};
-
+};
+
 // icons.js @jxarco
 
 const RAW_ICONS = {
@@ -4749,8 +4751,8 @@ LX.LucideIconAlias = {
     "RotateRight": "RotateCw",
     "RotateBack": "RotateCcw",
     "RotateLeft": "RotateCcw",
-};
-
+};
+
 // utils.js @jxarco
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
@@ -5535,47 +5537,49 @@ function makeCodeSnippet( code, size, options = { } )
         disableEdition: true,
         allowAddScripts: false,
         name: options.tabName,
-        // showTab: options.showTab ?? true
-    } );
-    editor.setText( code, options.language ?? "Plain Text" );
-
-    if( options.linesAdded )
-    {
-        const code = editor.root.querySelector( ".code" );
-        for( let l of options.linesAdded )
+        callback: () =>
         {
-            if( l.constructor == Number )
+            if( options.linesAdded )
             {
-                code.childNodes[ l - 1 ].classList.add( "added" );
-            }
-            else if( l.constructor == Array ) // It's a range
-            {
-                for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                const code = editor.root.querySelector( ".code" );
+                for( let l of options.linesAdded )
                 {
-                    code.childNodes[ i ].classList.add( "added" );
+                    if( l.constructor == Number )
+                    {
+                        code.childNodes[ l - 1 ].classList.add( "added" );
+                    }
+                    else if( l.constructor == Array ) // It's a range
+                    {
+                        for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                        {
+                            code.childNodes[ i ].classList.add( "added" );
+                        }
+                    }
                 }
             }
-        }
-    }
 
-    if( options.linesRemoved )
-    {
-        const code = editor.root.querySelector( ".code" );
-        for( let l of options.linesRemoved )
-        {
-            if( l.constructor == Number )
-            {
-                code.childNodes[ l - 1 ].classList.add( "removed" );
-            }
-            else if( l.constructor == Array ) // It's a range
+            if( options.linesRemoved )
             {
-                for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                const code = editor.root.querySelector( ".code" );
+                for( let l of options.linesRemoved )
                 {
-                    code.childNodes[ i ].classList.add( "removed" );
+                    if( l.constructor == Number )
+                    {
+                        code.childNodes[ l - 1 ].classList.add( "removed" );
+                    }
+                    else if( l.constructor == Array ) // It's a range
+                    {
+                        for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                        {
+                            code.childNodes[ i ].classList.add( "removed" );
+                        }
+                    }
                 }
             }
         }
-    }
+    } );
+
+    editor.setText( code, options.language ?? "Plain Text" );
 
     if( options.windowMode )
     {
@@ -5600,6 +5604,7 @@ function makeCodeSnippet( code, size, options = { } )
     }
 
     snippet.appendChild( area.root );
+
     return snippet;
 }
 
@@ -6730,8 +6735,8 @@ function drawSpline( ctx, pts, t )
     ctx.restore();
 }
 
-LX.drawSpline = drawSpline;
-
+LX.drawSpline = drawSpline;
+
 // area.js @jxarco
 
 class AreaOverlayButtons {
@@ -7532,21 +7537,25 @@ class Area {
         let [ area1, area2 ] = this.sections;
         this.splitExtended = true;
 
+        area1.root.classList.add( `maximize-${ this.type }` );
+        area2.root.classList.add( `minimize-${ this.type }` );
+        area2.root.classList.add( `fadeout-${ this.type }` );
+        area2.root.classList.remove( `fadein-${ this.type }` );
+
         if( this.type == "vertical" )
         {
             this.offset = area2.root.offsetHeight;
-            area2.root.classList.add("fadeout-vertical");
             this._moveSplit( -Infinity, true );
-
         }
         else
         {
             this.offset = area2.root.offsetWidth - 8; // Force some height here...
-            area2.root.classList.add("fadeout-horizontal");
             this._moveSplit( -Infinity, true, 8 );
         }
 
-        LX.doAsync( () => this.propagateEvent('onresize'), 150 );
+        LX.doAsync( () => {
+            this.propagateEvent( 'onresize' );
+        }, 100 );
     }
 
     /**
@@ -7556,23 +7565,24 @@ class Area {
     reduce() {
 
         if( !this.splitExtended )
-        return;
+        {
+            return;
+        }
 
         this.splitExtended = false;
-        let [area1, area2] = this.sections;
 
-        if( this.type == "vertical")
-        {
-            area2.root.classList.add("fadein-vertical");
-            this._moveSplit(this.offset);
-        }
-        else
-        {
-            area2.root.classList.add("fadein-horizontal");
-            this._moveSplit(this.offset);
-        }
+        let [ area1, area2 ] = this.sections;
 
-        LX.doAsync( () => this.propagateEvent('onresize'), 150 );
+        area1.root.classList.add( `minimize-${ this.type }` );
+        area2.root.classList.add( `maximize-${ this.type }` );
+        area2.root.classList.add( `fadein-${ this.type }` );
+        area2.root.classList.remove( `fadeout-${ this.type }` );
+
+        this._moveSplit( this.offset );
+
+        LX.doAsync( () => {
+            this.propagateEvent( 'onresize' );
+        }, 100 );
     }
 
     /**
@@ -7876,8 +7886,8 @@ class Area {
         }
     }
 }
-LX.Area = Area;
-
+LX.Area = Area;
+
 // base_component.js @jxarco
 
 /**
@@ -13658,8 +13668,8 @@ class Rate extends BaseComponent {
     }
 }
 
-LX.Rate = Rate;
-
+LX.Rate = Rate;
+
 // panel.js @jxarco
 
 /**
@@ -14858,8 +14868,8 @@ class Panel {
     }
 }
 
-LX.Panel = Panel;
-
+LX.Panel = Panel;
+
 // branch.js @jxarco
 
 /**
@@ -15083,8 +15093,8 @@ class Branch {
         }
     }
 }
-LX.Branch = Branch;
-
+LX.Branch = Branch;
+
 // menubar.js @jxarco
 
 /**
@@ -15162,17 +15172,26 @@ class Menubar {
                 } });
             };
 
-            entry.addEventListener("click", () => {
+            entry.addEventListener("mousedown", (e) => {
+                e.preventDefault();
+            });
+
+            entry.addEventListener("mouseup", (e) => {
+
+                e.preventDefault();
+
                 const f = item[ 'callback' ];
                 if( f )
                 {
-                    f.call( this, key, entry );
+                    f.call( this, key, entry, e );
                     return;
                 }
 
                 _showEntry();
 
                 this.focused = true;
+
+                return false;
             });
 
             entry.addEventListener( "mouseover", (e) => {
@@ -15339,7 +15358,12 @@ class Menubar {
         }
 
         const _b = button.querySelector('a');
-        _b.addEventListener("click", (e) => {
+
+        _b.addEventListener( "mousedown", (e) => {
+            e.preventDefault();
+        });
+
+        _b.addEventListener( "mouseup", (e) => {
             if( callback && !disabled )
             {
                 callback.call( this, _b, e );
@@ -15406,8 +15430,8 @@ class Menubar {
         }
     }
 }
-LX.Menubar = Menubar;
-
+LX.Menubar = Menubar;
+
 // sidebar.js @jxarco
 
 /**
@@ -16131,8 +16155,8 @@ class Sidebar {
         }
     }
 }
-LX.Sidebar = Sidebar;
-
+LX.Sidebar = Sidebar;
+
 // asset_view.js @jxarco
 
 class AssetViewEvent {
@@ -16574,13 +16598,13 @@ class AssetView {
         const isListLayout = ( this.layout == AssetView.LAYOUT_LIST );
 
         this.filter = filter ?? ( this.filter ?? "None" );
-        this.searchValue = searchValue ?? (this.searchValue ?? "");
+        this.searchValue = searchValue ?? ( this.searchValue ?? "" );
         this.content.innerHTML = "";
         this.content.className = `lexassetscontent${ isCompactLayout ? " compact" : ( isListLayout ? " list" : "" ) }`;
         let that = this;
 
-        const _addItem = function(item) {
-
+        const _addItem = function( item )
+        {
             const type = item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 );
             const extension = LX.getExtension( item.id );
             const isFolder = type === "Folder";
@@ -16599,10 +16623,11 @@ class AssetView {
             {
                 let desc = document.createElement( 'span' );
                 desc.className = 'lexitemdesc';
-                desc.innerHTML = "File: " + item.id + "<br>Type: " + type;
+                desc.id = `floatingTitle_${ item.id }`;
+                desc.innerHTML = `File: ${ item.id }<br>Type: ${ type }`;
                 that.content.appendChild( desc );
 
-                itemEl.addEventListener("mousemove", e => {
+                itemEl.addEventListener( "mousemove", e => {
 
                     if( !isGridLayout )
                     {
@@ -16630,23 +16655,7 @@ class AssetView {
 
                     desc.style.left = ( localOffsetX ) + "px";
                     desc.style.top = ( localOffsetY - 36 ) + "px";
-                });
-
-                itemEl.addEventListener("mouseenter", () => {
-                    if( isGridLayout )
-                    {
-                        desc.style.display = "unset";
-                    }
-                });
-
-                itemEl.addEventListener("mouseleave", () => {
-                    if( isGridLayout )
-                    {
-                        setTimeout( () => {
-                            desc.style.display = "none";
-                        }, 100 );
-                    }
-                });
+                } );
             }
             else
             {
@@ -16681,26 +16690,49 @@ class AssetView {
 
             if( !that.skipPreview )
             {
+                if( item.type === 'video' )
+                {
+                    const itemVideo = LX.makeElement( 'video', 'absolute left-0 top-0 w-full border-none pointer-events-none', '', itemEl );
+                    itemVideo.setAttribute( 'disablePictureInPicture', false );
+                    itemVideo.setAttribute( 'disableRemotePlayback', false );
+                    itemVideo.setAttribute( 'loop', true );
+                    itemVideo.setAttribute( 'async', true );
+                    itemVideo.style.transition = 'opacity 0.2s ease-out';
+                    itemVideo.style.opacity = item.preview ? '0' : '1';
+                    itemVideo.src = item.src;
+                    itemVideo.volume = item.videoVolume ?? 0.4;
+                }
+
                 let preview = null;
-                const hasImage = item.src && (['png', 'jpg'].indexOf( LX.getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
 
-                if( hasImage || isFolder || !isGridLayout)
+                const previewSrc    = item.preview ?? item.src;
+                const hasImage = previewSrc && (
+                    (() => {
+                        const ext = LX.getExtension( previewSrc.split( '?' )[ 0 ].split( '#' )[ 0 ]); // get final source without url parameters/anchors
+                        return ext ? ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'avif'].includes( ext.toLowerCase() ) : false;
+                    })()
+                    || previewSrc.startsWith( 'data:image/' )
+                );
+
+                if( hasImage || isFolder || !isGridLayout )
                 {
+                    const defaultPreviewPath    = `${ that.rootPath }images/file.png`;
+                    const defaultFolderPath     = `${ that.rootPath }images/folder.png`;
+
                     preview = document.createElement('img');
-                    let real_src = item.unknown_extension ? that.rootPath + "images/file.png" : (isFolder ? that.rootPath + "images/folder.png" : item.src);
-                    preview.src = (isGridLayout || isFolder ? real_src : that.rootPath + "images/file.png");
+                    let realSrc = item.unknownExtension ? defaultPreviewPath : ( isFolder ? defaultFolderPath : previewSrc );
+                    preview.src = ( isGridLayout || isFolder ? realSrc : defaultPreviewPath );
                     itemEl.appendChild( preview );
                 }
                 else
                 {
-                    preview = document.createElement('svg');
-                    preview.className = "asset-file-preview";
-                    itemEl.appendChild(preview);
+                    preview = document.createElement( 'svg' );
+                    preview.className = 'asset-file-preview';
+                    itemEl.appendChild( preview );
 
-                    let textEl = document.createElement('text');
-                    preview.appendChild(textEl);
-                    // If no extension, e.g. Clip, use the type...
-                    textEl.innerText = (!extension || extension == item.id) ? item.type.toUpperCase() : ("." + extension.toUpperCase());
+                    let textEl = document.createElement( 'text' );
+                    textEl.innerText = ( !extension || extension == item.id ) ? item.type.toUpperCase() : ( `.${ extension.toUpperCase() }` ); // If no extension, e.g. Clip, use the type...
+                    preview.appendChild( textEl );
 
                     var newLength = textEl.innerText.length;
                     var charsPerLine = 2.5;
@@ -16710,8 +16742,8 @@ class AssetView {
                     if( newEmSize < 1 )
                     {
                         var newFontSize = newEmSize * textBaseSize;
-                        textEl.style.fontSize = newFontSize + "px";
-                        preview.style.paddingTop = "calc(50% - " + (textEl.offsetHeight * 0.5 + 10) + "px)";
+                        textEl.style.fontSize = newFontSize + 'px';
+                        preview.style.paddingTop = `calc(50% - ${ ( textEl.offsetHeight * 0.5 + 10 ) }px)`;
                     }
                 }
             }
@@ -16725,7 +16757,7 @@ class AssetView {
                 if( item.lastModifiedDate ) itemInfoHtml += ` | ${ item.lastModifiedDate }`;
             }
 
-            LX.makeContainer( [ "auto", "auto" ], "lexassetinfo", itemInfoHtml, itemEl );
+            LX.makeContainer( [ 'auto', 'auto' ], 'lexassetinfo', itemInfoHtml, itemEl );
 
             itemEl.addEventListener('click', function( e ) {
                 e.stopImmediatePropagation();
@@ -16737,10 +16769,10 @@ class AssetView {
                 {
                     if( !e.shiftKey )
                     {
-                        that.content.querySelectorAll('.lexassetitem').forEach( i => i.classList.remove('selected') );
+                        that.content.querySelectorAll( '.lexassetitem').forEach( i => i.classList.remove( 'selected' ) );
                     }
 
-                    this.classList.add('selected');
+                    this.classList.add( 'selected' );
                     that.selectedItem = item;
 
                     if( !that.skipPreview )
@@ -16793,6 +16825,42 @@ class AssetView {
                 e.preventDefault();
             }, false );
 
+            itemEl.addEventListener( "mouseenter", ( e ) => {
+
+                if( !that.useNativeTitle && isGridLayout )
+                {
+                    const desc = that.content.querySelector( `#floatingTitle_${ item.id }` );
+                    if( desc ) desc.style.display = "unset";
+                }
+
+                if( item.type !== "video" ) return;
+                e.preventDefault();
+                const video = itemEl.querySelector( "video" );
+                video.style.opacity = "1";
+                video.play();
+            } );
+
+            itemEl.addEventListener( "mouseleave", ( e ) => {
+
+                if( !that.useNativeTitle && isGridLayout )
+                {
+                    setTimeout( () => {
+                        const desc = that.content.querySelector( `#floatingTitle_${ item.id }` );
+                        if( desc ) desc.style.display = "none";
+                    }, 100 );
+                }
+
+                if( item.type !== "video" ) return;
+                e.preventDefault();
+                const video = itemEl.querySelector( "video" );
+                video.pause();
+                video.currentTime = 0;
+                if( item.preview )
+                {
+                    video.style.opacity = "0";
+                }
+            } );
+
             return itemEl;
         };
 
@@ -16937,7 +17005,7 @@ class AssetView {
                     item.type = "mesh"; break;
                 default:
                     item.type = ext;
-                    item.unknown_extension = true;
+                    item.unknownExtension = true;
                     break;
                 }
 
@@ -17040,8 +17108,8 @@ class AssetView {
     }
 }
 
-LX.AssetView = AssetView;
-
+LX.AssetView = AssetView;
+
 // tour.js @jxarco
 
 class Tour {
@@ -17339,6 +17407,6 @@ class Tour {
         } );
     }
 }
-LX.Tour = Tour;
-
-export { ADD_CUSTOM_COMPONENT, Area, AssetView, AssetViewEvent, BaseComponent, Branch, LX, Menubar, Panel, Sidebar, Tour };
+LX.Tour = Tour;
+
+export { ADD_CUSTOM_COMPONENT, Area, AssetView, AssetViewEvent, BaseComponent, Branch, LX, Menubar, Panel, Sidebar, Tour };