lexgui 0.7.5 → 0.7.6

package/build/extensions/codeeditor.js

@@ -319,6 +319,25 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
+        if( options.filesAsync )
+        {
+            options.files = [ ...options.filesAsync ];
+
+            return (async () => {
+                await this._init( area, options );
+                // Constructors return `this` implicitly, but this is an IIFE, so
+                // return `this` explicitly (else we'd return an empty object).
+                return this;
+            })();
+        }
+        else
+        {
+            this._init( area, options );
+        }
+    }
+
+    async _init( area, options ) {
+
         window.editor = this;
 
         CodeEditor.__instances.push( this );
@@ -1259,7 +1278,6 @@ class CodeEditor {
         if( options.allowAddScripts ?? true )
         {
             this.onCreateFile = options.onCreateFile;
-
             this.addTab( "+", false, "Create file" );
         }
 
@@ -1267,11 +1285,14 @@ class CodeEditor {
         {
             console.assert( options.files.constructor === Array, "_files_ must be an Array!" );
             const numFiles = options.files.length;
+            const loadAsync = ( options.filesAsync !== undefined );
             let filesLoaded = 0;
-
             for( let url of options.files )
             {
-                this.loadFile( url, { callback: ( name, text ) => {
+                const finalUrl = url.constructor === Array ? url[ 0 ] : url;
+                const finalFileName = url.constructor === Array ? url[ 1 ] : url;
+
+                await this.loadFile( finalUrl, { filename: finalFileName, async: loadAsync, callback: ( name, text ) => {
                     filesLoaded++;
                     if( filesLoaded == numFiles )
                     {
@@ -1279,7 +1300,7 @@ class CodeEditor {
 
                         if( options.onFilesLoaded )
                         {
-                            options.onFilesLoaded( this, numFiles );
+                            options.onFilesLoaded( this.loadedTabs, numFiles );
                         }
                     }
                 }});
@@ -1421,15 +1442,12 @@ class CodeEditor {
         const _innerAddTab = ( text, name, title ) => {
 
             // Remove Carriage Return in some cases and sub tabs using spaces
-            text = text.replaceAll( '\r', '' );
-            text = text.replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
+            text = text.replaceAll( '\r', '' ).replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
 
             // Set current text and language
-
             const lines = text.split( '\n' );
 
             // Add item in the explorer if used
-
             if( this.useFileExplorer || this.skipTabs )
             {
                 this._tabStorage[ name ] = {
@@ -1465,13 +1483,20 @@ class CodeEditor {
 
         if( file.constructor == String )
         {
-            let filename = file;
-
-            LX.request({ url: filename, success: text => {
-                const name = filename.substring(filename.lastIndexOf( '/' ) + 1);
-                _innerAddTab( text, name, filename );
-            } });
+            const filename = file;
+            const name = options.filename ?? filename.substring(filename.lastIndexOf( '/' ) + 1);
 
+            if( options.async ?? false )
+            {
+                const text = await this._requestFileAsync( filename, "text" );
+                _innerAddTab( text, name, options.filename ?? filename );
+            }
+            else
+            {
+                LX.request({ url: filename, success: text => {
+                    _innerAddTab( text, name, options.filename ?? filename );
+                } });
+            }
         }
         else // File Blob
         {
@@ -5602,6 +5627,36 @@ s
         delete this._lastResult;
         delete this._scopeStack;
     }
+
+    async _requestFileAsync( url, dataType, nocache ) {
+        return new Promise( (resolve, reject) => {
+            dataType = dataType ?? "arraybuffer";
+            const mimeType = dataType === "arraybuffer" ? "application/octet-stream" : undefined;
+            var xhr = new XMLHttpRequest();
+            xhr.open( 'GET', url, true );
+            xhr.responseType = dataType;
+            if( mimeType )
+                xhr.overrideMimeType( mimeType );
+            if( nocache )
+                xhr.setRequestHeader('Cache-Control', 'no-cache');
+            xhr.onload = function(load)
+            {
+                var response = this.response;
+                if( this.status != 200)
+                {
+                    var err = "Error " + this.status;
+                    reject(err);
+                    return;
+                }
+                resolve( response );
+            };
+            xhr.onerror = function(err) {
+                reject(err);
+            };
+            xhr.send();
+            return xhr;
+        });
+    }
 }
 
 CodeEditor.languages = {

package/build/lexgui.css

@@ -6337,7 +6337,11 @@ ul.lexassetscontent {
 
 .uppercase { text-transform: uppercase }
 .capitalize { text-transform: capitalize }
+
 .decoration-none { text-decoration: none }
+.text-underline { text-decoration: underline }
+
+.hover\:text-underline:hover { text-decoration: underline }
 
 /* Width / Height */
 

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.5",
+    version: "0.7.6",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -543,16 +543,30 @@ async function init( options = { } )
         this.main_area = new LX.Area( { id: options.id ?? 'mainarea' } );
     }
 
-    if( ( options.autoTheme ?? true ) )
+    // Initial or automatic changes don't force color scheme
+    // to be stored in localStorage
+
+    this._onChangeSystemTheme = function( event ) {
+        const storedcolorScheme = localStorage.getItem( "lxColorScheme" );
+        if( storedcolorScheme ) return;
+        LX.setTheme( event.matches ? "dark" : "light", false );
+    };
+
+    this._mqlPrefersDarkScheme = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+
+    const storedcolorScheme = localStorage.getItem( "lxColorScheme" );
+    if( storedcolorScheme )
+    {
+        LX.setTheme( storedcolorScheme );
+    }
+    else if( this._mqlPrefersDarkScheme && ( options.autoTheme ?? true ) )
     {
-        if( window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        if( window.matchMedia( "(prefers-color-scheme: light)" ).matches )
         {
-            LX.setTheme( "light" );
+            LX.setTheme( "light", false );
         }
 
-        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
-            LX.setTheme( event.matches ? "dark" : "light" );
-        });
+        this._mqlPrefersDarkScheme.addEventListener( "change", this._onChangeSystemTheme );
     }
 
     return this.main_area;
@@ -2552,8 +2566,9 @@ class Tabs {
         });
 
         // Attach content
-        tabEl.childIndex = ( this.root.childElementCount - 1 );
-        this.root.appendChild( tabEl );
+        const indexOffset = options.indexOffset ?? -1;
+        tabEl.childIndex = ( this.root.childElementCount + indexOffset );
+        this.root.insertChildAtIndex( tabEl, tabEl.childIndex + 1 );
         this.area.attach( contentEl );
         this.tabDOMs[ name ] = tabEl;
         this.tabs[ name ] = content;
@@ -4978,11 +4993,13 @@ LX.deepCopy = deepCopy;
  * @method setTheme
  * @description Set dark or light theme
  * @param {String} colorScheme Name of the scheme
+ * @param {Boolean} storeLocal Store in localStorage
  */
-function setTheme( colorScheme )
+function setTheme( colorScheme, storeLocal = true )
 {
     colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
     document.documentElement.setAttribute( "data-theme", colorScheme );
+    if( storeLocal ) localStorage.setItem( "lxColorScheme", colorScheme );
     LX.emit( "@on_new_color_scheme", colorScheme );
 }
 
@@ -5011,6 +5028,26 @@ function switchTheme()
 
 LX.switchTheme = switchTheme;
 
+/**
+ * @method setSystemTheme
+ * @description Sets back the system theme
+ */
+function setSystemTheme()
+{
+    const currentTheme = ( window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches ) ? "light" : "dark";
+    setTheme( currentTheme );
+    localStorage.removeItem( "lxColorScheme" );
+
+    // Reapply listener
+    if( this._mqlPrefersDarkScheme )
+    {
+        this._mqlPrefersDarkScheme.removeEventListener( "change", this._onChangeSystemTheme );
+        this._mqlPrefersDarkScheme.addEventListener( "change", this._onChangeSystemTheme );
+    }
+}
+
+LX.setSystemTheme = setSystemTheme;
+
 /**
  * @method setThemeColor
  * @description Sets a new value for one of the main theme variables
@@ -8993,7 +9030,7 @@ class TextInput extends BaseComponent {
 
         this.valid = ( v ) => {
             v = v ?? this.value();
-            if( !v.length || wValue.pattern == "" ) return true;
+            if( ( wValue.pattern ?? "" ) == "" ) return true;
             const regexp = new RegExp( wValue.pattern );
             return regexp.test( v );
         };
@@ -9732,19 +9769,21 @@ class Form extends BaseComponent {
 
         const primaryButton = new LX.Button( null, options.primaryActionName ?? "Submit", ( value, event ) => {
 
+            const errors = [];
+
             for( let entry in data )
             {
                 let entryData = data[ entry ];
 
                 if( !entryData.textComponent.valid() )
                 {
-                    return;
+                    errors.push( { type: "input_not_valid", entry } );
                 }
             }
 
             if( callback )
             {
-                callback( container.formData, event );
+                callback( container.formData, errors, event );
             }
         }, { width: "100%", minWidth: "0", buttonClass: options.primaryButtonClass ?? "contrast" } );
 
@@ -15949,8 +15988,7 @@ class Sidebar {
                     return;
                 }
 
-                const f = options.callback;
-                if( f ) f.call( this, key, item.value, e );
+                let value = undefined;
 
                 if( isCollapsable )
                 {
@@ -15960,14 +15998,18 @@ class Sidebar {
                 {
                     item.value = !item.value;
                     item.checkbox.set( item.value, true );
+                    value = item.value;
                 }
-
-                if( options.swap && !( e.target instanceof HTMLInputElement ) )
+                else if( options.swap && !( e.target instanceof HTMLInputElement ) )
                 {
                     const swapInput = itemDom.querySelector( "input" );
                     swapInput.checked = !swapInput.checked;
+                    value = swapInput.checked;
                 }
 
+                const f = options.callback;
+                if( f ) f.call( this, key, value ?? entry, e );
+
                 // Manage selected
                 if( this.displaySelected && !options.skipSelection )
                 {