lexgui 0.7.8 → 0.7.10

package/build/lexgui.css

@@ -252,6 +252,11 @@ body {
     box-sizing: border-box;
 }
 
+.no-transition,
+.no-transition * {
+  transition: none !important;
+}
+
 blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
     margin: 0;
 }
@@ -4471,28 +4476,40 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 12px;
 }
 
+/* Height, Width transitions */
+
+.lexarea .minimize-vertical, .lexarea .maximize-vertical {
+    transition: height 0.1s ease-out;
+}
+
+.lexarea .minimize-horizontal, .lexarea .maximize-horizontal {
+    transition: width 0.1s ease-out;
+}
+
+/* Opacity transitions */
+
 .lexarea .fadein-vertical {
     animation-name: fadein;
+    animation-duration: 0.1s;
     animation-fill-mode: forwards;
 }
 
 .lexarea .fadeout-vertical {
     animation-name: fadeout;
-    animation-duration: 0.25s;
+    animation-duration: 0.1s;
     animation-fill-mode: forwards;
-    transition: height;
 }
 
 .lexarea .fadein-horizontal {
     animation-name: fadein;
+    animation-duration: 0.1s;
     animation-fill-mode: forwards;
 }
 
 .lexarea .fadeout-horizontal {
     animation-name: fadeout;
-    animation-duration: 0.25s;
+    animation-duration: 0.1s;
     animation-fill-mode: forwards;
-    transition: width;
 }
 
 @keyframes fadein {
@@ -4711,7 +4728,7 @@ ul.lexassetscontent {
 }
 
 .lexassetscontent li.script {
-    border-color: rgb(104, 129, 195);
+    border-color: rgb(207, 127, 36);
 }
 
 .lexassetscontent li.json {
@@ -4730,6 +4747,10 @@ ul.lexassetscontent {
     border-color: rgb(154, 188, 101);
 }
 
+.lexassetscontent li.video {
+    border-color: rgb(84, 119, 214);
+}
+
 .lexassetscontent li:hover {
     outline: 2px solid var(--global-color-accent);
 }
@@ -4825,6 +4846,12 @@ ul.lexassetscontent {
     transition: all 0.2s;
 }
 
+.lexassetscontent li video {
+    z-index: 1;
+    object-fit: cover;
+    height: calc(100% - 24px);
+}
+
 .lexassetscontent.list img, .lexassetscontent.compact img {
     width: unset;
     object-fit: contain;
@@ -6348,6 +6375,7 @@ ul.lexassetscontent {
 .w-full { width: 100% }
 .w-screen { width: 100vw }
 .w-auto { width: auto }
+.w-fit-content { width: fit-content }
 
 .w-2\/3 { width: 66.666% }
 .w-1\/2 { width: 50% }

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.8",
+    version: "0.7.10",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1332,18 +1332,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 ) )
                 {
@@ -2584,9 +2584,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 );
@@ -5542,47 +5544,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 )
-            {
-                code.childNodes[ l - 1 ].classList.add( "added" );
-            }
-            else if( l.constructor == Array ) // It's a range
+            if( options.linesAdded )
             {
-                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 )
+            if( options.linesRemoved )
             {
-                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++ )
+                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 )
     {
@@ -5607,6 +5611,7 @@ function makeCodeSnippet( code, size, options = { } )
     }
 
     snippet.appendChild( area.root );
+
     return snippet;
 }
 
@@ -7539,21 +7544,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 );
     }
 
     /**
@@ -7563,23 +7572,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;
+
+        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 }` );
 
-        LX.doAsync( () => this.propagateEvent('onresize'), 150 );
+        this._moveSplit( this.offset );
+
+        LX.doAsync( () => {
+            this.propagateEvent( 'onresize' );
+        }, 100 );
     }
 
     /**
@@ -15169,17 +15179,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) => {
@@ -15346,7 +15365,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 );
@@ -16581,13 +16605,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";
@@ -16606,10 +16630,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 )
                     {
@@ -16637,23 +16662,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
             {
@@ -16688,26 +16697,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;
@@ -16717,8 +16749,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)`;
                     }
                 }
             }
@@ -16732,7 +16764,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();
@@ -16744,10 +16776,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 )
@@ -16800,6 +16832,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;
         };
 
@@ -16944,7 +17012,7 @@ class AssetView {
                     item.type = "mesh"; break;
                 default:
                     item.type = ext;
-                    item.unknown_extension = true;
+                    item.unknownExtension = true;
                     break;
                 }