lexgui 0.1.44 → 0.1.45

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.44",
+    version: "0.1.45",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -60,6 +60,15 @@ function deepCopy( o )
 
 LX.deepCopy = deepCopy;
 
+function setTheme( colorScheme )
+{
+    colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
+    document.documentElement.setAttribute( "data-theme", colorScheme );
+    LX.emit( "@on_new_color_scheme", colorScheme );
+}
+
+LX.setTheme = setTheme;
+
 function setThemeColor( colorName, color )
 {
     var r = document.querySelector( ':root' );
@@ -75,7 +84,9 @@ function getThemeColor( colorName )
 
     if( value.includes( "light-dark" ) && window.matchMedia )
     {
-        if( window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        const currentScheme = r.getPropertyValue( "color-scheme" );
+
+        if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
         {
             return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
         }
@@ -142,6 +153,23 @@ function simple_guidGenerator() {
 
 LX.guidGenerator = simple_guidGenerator;
 
+function buildTextPattern( options = {} ) {
+    let patterns = [];
+    if ( options.lowercase ) patterns.push("(?=.*[a-z])");
+    if ( options.uppercase ) patterns.push("(?=.*[A-Z])");
+    if ( options.digit ) patterns.push("(?=.*\\d)");
+    if ( options.specialChar ) patterns.push("(?=.*[@#$%^&+=!])");
+    if ( options.noSpaces ) patterns.push("(?!.*\\s)");
+
+    let minLength = options.minLength || 0;
+    let maxLength = options.maxLength || ""; // Empty means no max length restriction
+
+    let pattern = `^${ patterns.join("") }.{${ minLength },${ maxLength }}$`;
+    return options.asRegExp ? new RegExp( pattern ) : pattern;
+}
+
+LX.buildTextPattern = buildTextPattern;
+
 // Timer that works everywhere (from litegraph.js)
 if (typeof performance != "undefined") {
     LX.getTime = performance.now.bind(performance);
@@ -756,7 +784,7 @@ function prompt( text, title, callback, options = {} )
                 if( callback ) callback.call( this, value );
                 dialog.close();
             }
-        }, { buttonClass: "accept" });
+        }, { buttonClass: "primary" });
 
         p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
 
@@ -2205,18 +2233,18 @@ class Menubar {
             entry.className = "lexmenuentry";
             entry.id = pKey;
             entry.innerHTML = "<span>" + key + "</span>";
-            if(options.position == "left") {	
-                this.root.prepend( entry );	
-            }	
-            else {	
-                if(options.position == "right") 	
-                    entry.right = true;	
-                if(this.root.lastChild && this.root.lastChild.right) {	
-                    this.root.lastChild.before( entry );	
-                }	
-                else {	
-                    this.root.appendChild( entry );	
-                }	
+            if(options.position == "left") {
+                this.root.prepend( entry );
+            }
+            else {
+                if(options.position == "right")
+                    entry.right = true;
+                if(this.root.lastChild && this.root.lastChild.right) {
+                    this.root.lastChild.before( entry );
+                }
+                else {
+                    this.root.appendChild( entry );
+                }
             }
 
             const create_submenu = function( o, k, c, d ) {
@@ -2437,16 +2465,16 @@ class Menubar {
             button.style.maxHeight = "calc(100% - 10px)";
             button.style.alignItems = "center";
 
-            if(options.float == "right")	
-                button.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( button );	
+            if(options.float == "right")
+                button.right = true;
+            if(this.root.lastChild && this.root.lastChild.right) {
+                this.root.lastChild.before( button );
             }
             else if(options.float == "left") {
                 this.root.prepend(button);
-            }	
-            else {	
-                this.root.appendChild( button );	
+            }
+            else {
+                this.root.appendChild( button );
             }
 
             const _b = button.querySelector('a');
@@ -2478,16 +2506,16 @@ class Menubar {
             button.style.padding = "5px";
             button.style.alignItems = "center";
 
-            if(options.float == "right")	
-                button.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( button );	
-            }	
+            if(options.float == "right")
+                button.right = true;
+            if(this.root.lastChild && this.root.lastChild.right) {
+                this.root.lastChild.before( button );
+            }
             else if(options.float == "left") {
                 this.root.prepend(button);
             }
-            else {	
-                this.root.appendChild( button );	
+            else {
+                this.root.appendChild( button );
             }
 
             const _b = button.querySelector('a');
@@ -2507,44 +2535,75 @@ class Menubar {
 
     addButtons( buttons, options = {} ) {
 
-        if(!buttons)
-            throw("No buttons to add!");
+        if( !buttons )
+        {
+            throw( "No buttons to add!" );
+        }
 
-        if(!this.buttonContainer)
+        if( !this.buttonContainer )
         {
-            this.buttonContainer = document.createElement('div');
+            this.buttonContainer = document.createElement( "div" );
             this.buttonContainer.className = "lexmenubuttons";
-            this.buttonContainer.classList.add(options.float ?? 'center');
-            if(options.position == "right")	
-                this.buttonContainer.right = true;	
-            if(this.root.lastChild && this.root.lastChild.right) {	
-                this.root.lastChild.before( this.buttonContainer );	
-            }	
-            else {	
-                this.root.appendChild( this.buttonContainer );	
+            this.buttonContainer.classList.add( options.float ?? "center" );
+
+            if( options.position == "right" )
+            {
+                this.buttonContainer.right = true;
+            }
+
+            if( this.root.lastChild && this.root.lastChild.right )
+            {
+                this.root.lastChild.before( this.buttonContainer );
+            }
+            else
+            {
+                this.root.appendChild( this.buttonContainer );
             }
         }
 
         for( let i = 0; i < buttons.length; ++i )
         {
-            let data = buttons[i];
-            let button = document.createElement('div');
+            let data = buttons[ i ];
+            let button = document.createElement( "label" );
             const title = data.title;
             let disabled = data.disabled ?? false;
             button.className = "lexmenubutton" + (disabled ? " disabled" : "");
             button.title = title ?? "";
-            button.innerHTML = "<a class='" + data.icon + " lexicon'></a>";
             this.buttonContainer.appendChild( button );
 
-            const _b = button.querySelector('a');
-            _b.addEventListener("click", (e) => {
-                disabled = e.target.parentElement.classList.contains("disabled");
-                if(data.callback && !disabled)
-                    data.callback.call( this, _b, e );
+            const icon = document.createElement( "a" );
+            icon.className = data.icon + " lexicon";
+            button.appendChild( icon );
+
+            let trigger = icon;
+
+            if( data.swap )
+            {
+                button.classList.add( "swap" );
+                icon.classList.add( "swap-off" );
+
+                const input = document.createElement( "input" );
+                input.type = "checkbox";
+                button.prepend( input );
+                trigger = input;
+
+                const swapIcon = document.createElement( "a" );
+                swapIcon.className = data.swap + " swap-on lexicon";
+                button.appendChild( swapIcon );
+            }
+
+            trigger.addEventListener("click", e => {
+                if( data.callback && !disabled )
+                {
+                    const swapInput = button.querySelector( "input" );
+                    data.callback.call( this, e, swapInput?.checked );
+                }
             });
 
-            if(title)
+            if( title )
+            {
                 this.buttons[ title ] = button;
+            }
         }
     }
 };
@@ -2698,6 +2757,7 @@ class Widget {
     static PAD          = 26;
     static FORM         = 27;
     static DIAL         = 28;
+    static COUNTER      = 29;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2787,6 +2847,7 @@ class Widget {
             case Widget.PAD: return "Pad";
             case Widget.FORM: return "Form";
             case Widget.DIAL: return "Dial";
+            case Widget.COUNTER: return "Counter";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -4017,7 +4078,9 @@ class Panel {
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * disabled: Make the widget disabled [false]
+     * required: Make the input required
      * placeholder: Add input placeholder
+     * pattern: Regular expression that value must match
      * trigger: Choose onchange trigger (default, input) [default]
      * inputWidth: Width of the text input
      * skipReset: Don't add the reset value button when value changes
@@ -4032,11 +4095,18 @@ class Panel {
         widget.onGetValue = () => {
             return wValue.value;
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
             this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
             Panel._dispatch_event( wValue, "focusout", skipCallback );
         };
 
+        widget.valid = () => {
+            if( wValue.pattern == "" ) { return true; }
+            const regexp = new RegExp( wValue.pattern );
+            return regexp.test( wValue.value );
+        };
+
         let element = widget.domEl;
 
         // Add reset functionality
@@ -4071,14 +4141,33 @@ class Panel {
             wValue.style.width = "100%";
             wValue.style.textAlign = options.float ?? "";
 
-            if( options.placeholder )
-                wValue.setAttribute( "placeholder", options.placeholder );
+            wValue.setAttribute( "placeholder", options.placeholder ?? "" );
+
+            if( options.required )
+            {
+                wValue.setAttribute( "required", options.required );
+            }
+
+            if( options.pattern )
+            {
+                wValue.setAttribute( "pattern", options.pattern );
+            }
 
             var resolve = ( function( val, event ) {
+
+                if( !widget.valid() )
+                {
+                    return;
+                }
+
                 const skipCallback = event.detail;
                 let btn = element.querySelector( ".lexwidgetname .lexicon" );
                 if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
-                if( !skipCallback ) this._trigger( new IEvent( name, val, event ), callback );
+                if( !skipCallback )
+                {
+                    this._trigger( new IEvent( name, val, event ), callback );
+                }
+
             }).bind( this );
 
             const trigger = options.trigger ?? 'default';
@@ -4290,18 +4379,13 @@ class Panel {
 
         var wValue = document.createElement( 'button' );
         wValue.title = options.title ?? "";
-        wValue.className = "lexbutton";
+        wValue.className = "lexbutton " + ( options.buttonClass ?? "" );
 
         if( options.selected )
         {
             wValue.classList.add( "selected" );
         }
 
-        if( options.buttonClass )
-        {
-            wValue.classList.add( options.buttonClass );
-        }
-
         wValue.innerHTML =
             (options.icon ? "<a class='" + options.icon + "'></a>" :
             ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
@@ -4540,7 +4624,7 @@ class Panel {
 
             this.addLabel( entry, { textClass: "formlabel" } );
 
-            this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+            entryData.textWidget = this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                 container.formData[ entry ] = value;
             }, entryData );
 
@@ -4550,11 +4634,22 @@ class Panel {
         this.addBlank( );
 
         this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+
+            for( let entry in data )
+            {
+                let entryData = data[ entry ];
+
+                if( !entryData.textWidget.valid() )
+                {
+                    return;
+                }
+            }
+
             if( callback )
             {
                 callback( container.formData, event );
             }
-        }, { buttonClass: "accept", width: "calc(100% - 10px)" } );
+        }, { buttonClass: "primary", width: "calc(100% - 10px)" } );
 
         this.clearQueue();
 
@@ -4709,13 +4804,35 @@ class Panel {
                 delete list.unfocus_event;
                 return;
             }
-            const topPosition = selectedOption.getBoundingClientRect().y;
-            list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
+
+            list.toggleAttribute( "hidden" );
+            list.classList.remove( "place-above" );
+
+            const listHeight = 26 * values.length;
+            const rect = selectedOption.getBoundingClientRect();
+            const topPosition = rect.y;
+
+            let maxY = window.innerHeight;
+
+            if( this.mainContainer )
+            {
+                const parentRect = this.mainContainer.getBoundingClientRect();
+                maxY = parentRect.y + parentRect.height;
+            }
+
+            list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
+
+            const showAbove = ( topPosition + listHeight ) > maxY;
+            if( showAbove )
+            {
+                list.style.top = ( topPosition - listHeight ) + 'px';
+                list.classList.add( "place-above" );
+            }
+
             list.style.width = (event.currentTarget.clientWidth) + 'px';
             list.style.minWidth = (_getMaxListWidth()) + 'px';
-            list.toggleAttribute('hidden');
             list.focus();
-        }, { buttonClass: 'array', skipInlineCount: true });
+        }, { buttonClass: "array", skipInlineCount: true });
 
         this.clearQueue();
 
@@ -5361,40 +5478,45 @@ class Panel {
 
         // Show tags
 
-        let tags_container = document.createElement('div');
-        tags_container.className = "lextags";
-        tags_container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+        const tagsContainer = document.createElement('div');
+        tagsContainer.className = "lextags";
+        tagsContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         const create_tags = () => {
 
-            tags_container.innerHTML = "";
+            tagsContainer.innerHTML = "";
 
             for( let i = 0; i < value.length; ++i )
             {
-                let tag_name = value[i];
-                let tag = document.createElement('span');
+                const tagName = value[i];
+                const tag = document.createElement('span');
                 tag.className = "lextag";
-                tag.innerHTML = tag_name;
+                tag.innerHTML = tagName;
 
-                tag.addEventListener('click', function( e ) {
-                    this.remove();
-                    value.splice( value.indexOf( tag_name ), 1 );
+                const removeButton = document.createElement('a');
+                removeButton.className = "lextagrmb fa-solid fa-xmark lexicon";
+                tag.appendChild( removeButton );
+
+                removeButton.addEventListener( 'click', e => {
+                    tag.remove();
+                    value.splice( value.indexOf( tagName ), 1 );
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = ( value != defaultValue ? "block" : "none" );
                     that._trigger( new IEvent( name, value, e ), callback );
-                });
+                } );
 
-                tags_container.appendChild( tag );
+                tagsContainer.appendChild( tag );
             }
 
-            let tag_input = document.createElement( 'input' );
-            tag_input.value = "";
-            tag_input.placeholder = "Tag...";
-            tags_container.insertChildAtIndex( tag_input, 0 );
+            let tagInput = document.createElement( 'input' );
+            tagInput.value = "";
+            tagInput.placeholder = "Add tag...";
+            tagsContainer.appendChild( tagInput );
 
-            tag_input.onkeydown = function( e ) {
+            tagInput.onkeydown = function( e ) {
                 const val = this.value.replace(/\s/g, '');
-                if( e.key == ' ') {
+                if( e.key == ' ' || e.key == 'Enter' )
+                {
                     e.preventDefault();
                     if( !val.length || value.indexOf( val ) > -1 )
                         return;
@@ -5406,18 +5528,19 @@ class Panel {
                 }
             };
 
-            tag_input.focus();
+            tagInput.focus();
         }
 
         create_tags();
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name )
+        {
             element.className += " noname";
-            tags_container.style.width = "100%";
+            tagsContainer.style.width = "100%";
         }
 
-        element.appendChild(tags_container);
+        element.appendChild( tagsContainer );
 
         return widget;
     }
@@ -6604,7 +6727,7 @@ class Panel {
             progress.classList.add( "editable" );
             progress.addEventListener( "mousedown", inner_mousedown );
 
-            var that = this;
+            const that = this;
 
             function inner_mousedown( e )
             {
@@ -6612,24 +6735,28 @@ class Panel {
                 doc.addEventListener( 'mousemove', inner_mousemove );
                 doc.addEventListener( 'mouseup', inner_mouseup );
                 document.body.classList.add( 'noevents' );
+                progress.classList.add( "grabbing" );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
+
+                const rect = progress.getBoundingClientRect();
+                const newValue = round( remapRange( e.offsetX, 0, rect.width, progress.min, progress.max ) );
+                that.setValue( name, newValue );
             }
 
             function inner_mousemove( e )
             {
-                let dt = -e.movementX;
+                let dt = e.movementX;
 
                 if ( dt != 0 )
                 {
-                    let v = that.getValue( name, value );
-                    v += e.movementX / 100;
-                    v = round( v );
-                    that.setValue( name, v );
+                    const rect = progress.getBoundingClientRect();
+                    const newValue = round( remapRange( e.offsetX - rect.x, 0, rect.width, progress.min, progress.max ) );
+                    that.setValue( name, newValue );
 
                     if( options.callback )
                     {
-                        options.callback( v, e );
+                        options.callback( newValue, e );
                     }
                 }
 
@@ -6643,6 +6770,7 @@ class Panel {
                 doc.removeEventListener( 'mousemove', inner_mousemove );
                 doc.removeEventListener( 'mouseup', inner_mouseup );
                 document.body.classList.remove( 'noevents' );
+                progress.classList.remove( "grabbing" );
             }
         }
 
@@ -6932,6 +7060,91 @@ class Panel {
 
         this.addSeparator();
     }
+
+    /**
+     * @method addCounter
+     * @param {String} name Widget name
+     * @param {Number} value Counter value
+     * @param {Function} callback Callback function on change
+     * @param {*} options:
+     * disabled: Make the widget disabled [false]
+     * min, max: Min and Max values
+     * step: Step for adding/substracting
+     * label: Text to show below the counter
+     */
+
+    addCounter( name, value, callback, options = { } ) {
+
+        let widget = this.create_widget( name, Widget.COUNTER, options );
+
+        widget.onGetValue = () => {
+            return counterText.count;
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            _onChange( newValue, skipCallback );
+        };
+
+        let element = widget.domEl;
+
+        const min = options.min ?? 0;
+        const max = options.max ?? 100;
+        const step = options.step ?? 1;
+
+        const _onChange = ( value, skipCallback, event ) => {
+            value = clamp( value, min, max );
+            counterText.count = value;
+            counterText.innerHTML = value;
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, value, event ), callback );
+            }
+        }
+
+        const container = document.createElement( 'div' );
+        container.className = "lexcounter";
+        element.appendChild( container );
+
+        this.queue( container );
+
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-minus'></a>", (value, e) => {
+            let mult = step ?? 1;
+            if( e.shiftKey ) mult *= 10;
+            _onChange( counterText.count - mult, false, e );
+        }, { className: "micro", skipInlineCount: true, title: "Minus" });
+
+        this.clearQueue();
+
+        const containerBox = document.createElement( 'div' );
+        containerBox.className = "lexcounterbox";
+        container.appendChild( containerBox );
+
+        const counterText = document.createElement( 'span' );
+        counterText.className = "lexcountervalue";
+        counterText.innerHTML = value;
+        counterText.count = value;
+        containerBox.appendChild( counterText );
+
+        if( options.label )
+        {
+            const counterLabel = document.createElement( 'span' );
+            counterLabel.className = "lexcounterlabel";
+            counterLabel.innerHTML = options.label;
+            containerBox.appendChild( counterLabel );
+        }
+
+        this.queue( container );
+
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-plus'></a>", (value, e) => {
+            let mult = step ?? 1;
+            if( e.shiftKey ) mult *= 10;
+            _onChange( counterText.count + mult, false, e );
+        }, { className: "micro", skipInlineCount: true, title: "Plus" });
+
+        this.clearQueue();
+
+        return widget;
+    }
 }
 
 LX.Panel = Panel;
@@ -7167,6 +7380,104 @@ class Branch {
 
 LX.Branch = Branch;
 
+/**
+ * @class Footer
+ */
+
+class Footer {
+    /**
+     * @param {*} options:
+     * columns: Array with data per column { title, items: [ { title, link } ]  }
+     * credits: html string
+     * socials: Array with data per item { title, link, iconHtml }
+    */
+    constructor( options = {} ) {
+
+        const root = document.createElement( "footer" );
+        root.className = "lexfooter";
+
+        const wrapper = document.createElement( "div" );
+        wrapper.className = "wrapper";
+        root.appendChild( wrapper );
+
+        if( options.columns && options.columns.constructor == Array )
+        {
+            const cols = document.createElement( "div" );
+            cols.className = "columns";
+            cols.style.gridTemplateColumns = "1fr ".repeat( options.columns.length );
+            wrapper.appendChild( cols );
+
+            for( let col of options.columns )
+            {
+                const colDom = document.createElement( "div" );
+                colDom.className = "col";
+                cols.appendChild( colDom );
+
+                const colTitle = document.createElement( "h2" );
+                colTitle.innerHTML = col.title;
+                colDom.appendChild( colTitle );
+
+                if( !col.items || !col.items.length )
+                {
+                    continue;
+                }
+
+                const itemListDom = document.createElement( "ul" );
+                colDom.appendChild( itemListDom );
+
+                for( let item of col.items )
+                {
+                    const itemDom = document.createElement( "li" );
+                    itemDom.innerHTML = `<a class="" href="${ item.link }">${ item.title }</a>`;
+                    itemListDom.appendChild( itemDom );
+                }
+            }
+        }
+
+        if( options.credits || options.socials )
+        {
+            const hr = document.createElement( "hr" );
+            wrapper.appendChild( hr );
+
+            const creditsSocials = document.createElement( "div" );
+            creditsSocials.className = "credits-and-socials";
+            wrapper.appendChild( creditsSocials );
+
+            if( options.credits )
+            {
+                const credits = document.createElement( "p" );
+                credits.innerHTML = options.credits;
+                creditsSocials.appendChild( credits );
+            }
+
+            if( options.socials )
+            {
+                const socials = document.createElement( "div" );
+                socials.className = "social";
+
+                for( let social of options.socials )
+                {
+                    const itemDom = document.createElement( "a" );
+                    itemDom.title = social.title;
+                    itemDom.innerHTML = social.icon;
+                    itemDom.href = social.link;
+                    itemDom.target = "_blank";
+                    socials.appendChild( itemDom );
+                }
+
+                creditsSocials.appendChild( socials );
+            }
+        }
+
+        // Append directly to body
+        const parent = options.parent ?? document.body;
+        parent.appendChild( root );
+    }
+
+}
+
+LX.Footer = Footer;
+
 /**
  * @class Dialog
  */
@@ -9312,7 +9623,7 @@ Object.assign(LX, {
             //request.mimeType = "text/plain; charset=x-user-defined";
             dataType = "arraybuffer";
             request.mimeType = "application/octet-stream";
-        }	
+        }
 
         //regular case, use AJAX call
         var xhr = new XMLHttpRequest();