lexgui 0.7.5 → 0.7.7

package/build/lexgui.module.js

@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.5",
+    version: "0.7.7",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -536,16 +536,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 )
     {
-        if( window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        LX.setTheme( storedcolorScheme );
+    }
+    else if( this._mqlPrefersDarkScheme && ( options.autoTheme ?? true ) )
+    {
+        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;
@@ -2545,8 +2559,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;
@@ -3108,6 +3123,7 @@ class ContextMenu {
             }
             else if( (rect.top + rect.height) > window.innerHeight )
             {
+                div.style.marginTop = "";
                 top = (window.innerHeight - rect.height - margin);
             }
         }
@@ -4971,11 +4987,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 );
 }
 
@@ -5004,6 +5022,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
@@ -8986,7 +9024,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 );
         };
@@ -9725,19 +9763,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" } );
 
@@ -11176,7 +11216,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
@@ -11242,7 +11282,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 });
         }
@@ -15942,8 +15982,7 @@ class Sidebar {
                     return;
                 }
 
-                const f = options.callback;
-                if( f ) f.call( this, key, item.value, e );
+                let value = undefined;
 
                 if( isCollapsable )
                 {
@@ -15953,14 +15992,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 )
                 {
@@ -16378,7 +16421,7 @@ class AssetView {
         }
         else
         {
-            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden' });
+            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden', height:"auto" });
             this.contentPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
         }
 
@@ -16431,9 +16474,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",
@@ -16468,9 +16513,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();