lexgui 0.1.43 → 0.1.45

package/changelog.md

@@ -1,10 +1,41 @@
 # lexgui.js changelog
 
-## 0.1.44 (dev)
+## 0.1.46 (dev)
 
 
 
-## 0.1.43 (master)
+## 0.1.45 (master)
+
+Widgets:
+- New Counter Widget added `Panel.addCounter`.
+- Support for colored and sized buttons.
+- Fixed editable Progress Widget.
+- Added 'pattern' and 'required' options to Text Widget.
+- Form Widget now uses entry validation (pattern) before callback.
+- Improved Tags Widget style.
+
+Added initial support for creating footers.
+Added `LX.buildTextPattern(options)` for Input validation.
+Allow changing light/dark schemes manually `LX.setTheme`.
+Start support for swap icons (now at `Menubar.addButtons`).
+Started theme customization docs page.
+Added theme-swap button to demo and docs.
+
+## 0.1.44
+
+VideoEditor:
+- Support cropping video area.
+
+Added new `Toggle` Widget (same usage as Checkbox).
+Adding support for inline HTML badges `LX.badge(text)`.
+Checkbox, Progressbar, FileInput css updated.
+Improved Form widget.
+Begin support for light-scheme appearance.
+Fix ContextMenu position when scroll > 0.
+Minor bug fixes.
+Docs Updated.
+
+## 0.1.43
 
 CodeEditor:
 - Support C and CMake highlight.

package/demo.js

@@ -81,12 +81,8 @@ area.addMenubar( m => {
 
         }, { size: ["30%", null], float: "right", draggable: false});
     }} );
-    m.add( "Editor/Open AssetView", { icon: "fa-solid fa-rect", callback: () => {
-        createAssetDialog();
-    }} );
-    m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1", callback: () => { window.open("./docs/") }});
-    m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
-    m.add( "Help/Support LexGUI/Do it" );
+    m.add( "Editor/Open AssetView", { icon: "fa-solid fa-rect", callback: () => { createAssetDialog(); }} );
+    m.add( "Account/Login", { icon: "fa-solid fa-user", callback: () => { createLoginForm(); }} );
     m.add( "Timeline/Shortcuts", { disabled: true });
     m.add( "Timeline/Shortcuts/Play-Pause", { short: "SPACE" });
     m.add( "Timeline/Shortcuts/Zoom", { short: "Wheel" });
@@ -100,24 +96,34 @@ area.addMenubar( m => {
     m.add( "Timeline/Shortcuts/Key Selection/Single", { short: "Left Click" });
     m.add( "Timeline/Shortcuts/Key Selection/Multiple", { short: "Hold LSHIFT" });
     m.add( "Timeline/Shortcuts/Key Selection/Box", { short: "Hold LSHIFT+Drag" });
+    m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1", callback: () => { window.open("./docs/") }});
+    m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
+    m.add( "Help/Support LexGUI/Do it" );
     m.addButtons( [
         {
             title: "Play",
             icon: "fa-solid fa-play",
-            callback:  (domEl) => { 
-                console.log("play!"); 
-                domEl.classList.toggle('fa-play'), domEl.classList.toggle('fa-stop');
+            swap: "fa-solid fa-stop",
+            callback:  (event, swapValue) => {
+                if( swapValue ) console.log("play!");
+                else console.log("stop!");
             }
         },
         {
             title: "Pause",
             icon: "fa-solid fa-pause",
             disabled: true,
-            callback:  (domEl) => { console.log("pause!") }
+            callback:  (event) => { console.log("pause!"); }
         },
         {
             icon: "fa-solid fa-magnifying-glass",
-            callback:  (domEl) => { console.log("glass!") }
+            callback:  (event) => { console.log("glass!"); }
+        },
+        {
+            title: "Change Theme",
+            icon: "fa-solid fa-moon",
+            swap: "fa-solid fa-sun",
+            callback:  (event, swapValue) => { LX.setTheme( swapValue ? "light" : "dark" ) }
         }
     ]);
     
@@ -307,7 +313,6 @@ topTabs.area.addOverlayButtons( [
         {
             name: "Move",
             icon: "fa-solid fa-arrows-up-down-left-right",
-            img: "https://webglstudio.org/latest/imgs/mini-icon-gizmo.png",
             callback: (value, event) => console.log(value),
             selectable: true
         },
@@ -337,7 +342,8 @@ topTabs.area.addOverlayButtons( [
         }
     ], {
         name: "Button 4",
-        img: "https://webglstudio.org/latest/imgs/mini-icon-gizmo.png",
+        // img: "https://webglstudio.org/latest/imgs/mini-icon-gizmo.png",
+        icon: "fa fa-cube",
         callback: (value, event) => console.log(value)
     }
 ], { float: "htc" } );
@@ -355,6 +361,44 @@ fillRightBottomPanel( sideBottomPanelH, 'Horizontal' );
 bottomTabs.add( "Panel V", sideBottomPanel );
 bottomTabs.add( "Panel H", sideBottomPanelH );
 
+const footer = new LX.Footer( {
+    parent: bottomPanel.root,
+    columns: [
+        {
+            title: "LexGUI",
+            items: [
+                { title: "Download", link: "" },
+                { title: "Documentation", link: "" },
+                { title: "Web demo", link: "" },
+                { title: "Source code", link: "" }
+            ]
+        },
+        {
+            title: "Projects",
+            items: [
+                { title: "Animics", link: "" },
+                { title: "Performs", link: "" }
+            ]
+        },
+        {
+            title: "Other stuff",
+            items: [
+                { title: "Some section", link: "" },
+                { title: "Just filling", link: "" },
+                { title: "No more ideas", link: "" },
+            ]
+        }
+    ],
+    credits: `2019-${ new Date().getUTCFullYear() } Alex Rodríguez and contributors. Website source code on GitHub.`,
+    socials: [
+        { title: "Github", link: "", icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>` },
+        { title: "BlueSky", link: "", icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3 3.4.4 6.7.9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3 61.6-9.4 37.5-1.7 21.6 5.5 3.3 13.8.0 41.9.0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7 3.3-.5 6.6-.9 10-1.4-3.3.5-6.6 1-10 1.4-93.9 14-177.3 48.2-67.9 169.9C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4 102.4-103.4 28.1-156-65.8-169.9-3.3-.4-6.7-.8-10-1.3 3.4.4 6.7.9 10 1.3 64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"></path></svg>` },
+        { title: "Mastodon", link: "", icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5.0.0.0-63.7 28.5-63.7 125.7.0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5.0 01-.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V190.1c0-49.7-64-51.6-64 6.9v62.5H201V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"></path></svg>` },
+        { title: "Discord", link: "", icon: `<a class="fa-brands fa-discord"></a>` },
+        { title: "Reddit", link: "", icon: `<a class="fa-brands fa-reddit"></a>` }
+    ]
+} );
+
 function loop(dt) {
     
     var ctx = canvas.getContext("2d");
@@ -480,18 +524,28 @@ function fillPanel( panel ) {
 
     // add widgets to panel branch
     panel.branch("Preferences", {icon: "fa-solid fa-gear"});
-    panel.addButton(null, "Click me, Im Full Width...");
-    panel.addText("Text", "Warning text", null, { warning: true });
+    panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
+    panel.addCounter("Calories Counter ", 350, (v) => { console.log( v + " calories!" ) }, { label: "CALORIES/DAY", max: 500 });
+    panel.addButton("Colored Tiny Button", "Click here!", () => {}, { buttonClass: "primary xs" });
+    panel.addButton("Colored Small Button", "Click here!", () => {}, { buttonClass: "accent sm" });
+    panel.addButton("A Classic Button", "Click here!", () => {}, { buttonClass: "md" });
+    panel.addCheckbox("Check me, Please", false, (value, event) => {
+        console.log(value);
+    }, { className: "secondary" });
     panel.sameLine(2);
-    panel.addFile("Img1", data => { console.log(data) }, {} );
-    panel.addFile("Img2", data => { console.log(data) }, {} );
+    panel.addToggle("Colored Toggle", false, (value, event) => {
+        console.log(value);
+    }, { className: "accent", nameWidth: "50%" });
+    panel.addToggle("Outlined Checkbox ", false, (value, event) => {
+        console.log(value);
+    }, { className: "secondary outline", nameWidth: "50%" });
+    panel.addFile("I'm a File Input", data => { console.log(data) }, { disabled: true } );
     panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
-    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.webp"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
+    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.png"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
         console.log(value);
     }, {filter: true});
-
     panel.addDropdown("Best Gif", [{value:"Godot", src: "https://i.redd.it/4vepr95bye861.gif"}, {value: "Unity", src: "https://i.gifer.com/origin/db/db3cb258e9bbb78c5851a000742e5468_w200.gif"}, {value:"Unreal Engine", src: "https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/0/d/e0deb23c10cc7852c6ab91c28083e27f9c8228f8.gif"}], "Godot", (value, event) => {
         console.log(value);
     }, {filter: true});
@@ -548,11 +602,6 @@ function fillPanel( panel ) {
         console.log(value);
     }, { units: "p", precision: 0 });
 
-    const formData = { username: "", password: { value: "", type: "password" } };
-    panel.addForm("Test form", formData, (value, event) => {
-        console.log(value);
-    }, { actionName: "Login" });
-
     // another branch
     panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
     panel.addColor("Background", "#b7a9b1");
@@ -631,7 +680,7 @@ function fillRightBottomPanel( panel, tab ) {
         panel.addNumber("HeadRoll Value", 0, (value, event) => {
             panel.setValue('HeadRoll', value);
         }, { min: -1, max: 1, step: 0.1 });
-        panel.addProgress("HeadRoll", 0, { min: -1, max: 1, showValue: true, editable: true, callback: (value, event) => {
+        panel.addProgress("HeadRoll", 0, { min: -1, max: 1, low: -0.25, high: 0.25, optimum: 0.75, showValue: true, editable: true, callback: (value, event) => {
             panel.setValue('HeadRoll Value', value);
         } });
     }
@@ -671,24 +720,24 @@ function fillRightBottomPanel( panel, tab ) {
         /************** */
         // Custom Widget
 
-        LX.ADD_CUSTOM_WIDGET( 'Shader', {
-            // icon: "fa-dice-d6",
+        LX.ADD_CUSTOM_WIDGET( "Shader", {
+            icon: "fa-cube",
             default: {
-                'position': [0, 0],
-                'velocity': [0, 0, 0],
-                'color': [0, 0, 0, 0],
-                'hex_color': '#000',
-                'high_res': false
+                position: [0, 0],
+                velocity: [0, 0, 0],
+                color: [0, 0, 0, 0],
+                hexColor: "#000",
+                highRes: false
             }
         });
 
         const shaderInstance = {
-            'hex_color': '#f5f505',
-            'high_res': true
+            'hexColor': "#f5f505",
+            'highRes': true
         };
 
-        panel.addShader( "PBR Shader", shaderInstance, (instance) => { console.log(instance) } );
-        panel.addShader( "Empty", null );
+        panel.addShader( "A Shader", shaderInstance, (instance) => { console.log(instance) } );
+        panel.addShader( "Empty Instance", null );
 
         /************** */
     }
@@ -701,9 +750,11 @@ function fillBottomPanel( panel ) {
     // add widgets to panel branch
     panel.branch("Information", {icon: "fa fa-circle-info"});
     panel.addText("Camera", "Canon EOS 80D", null, {disabled: true}); 
-    panel.addText("Serial number", "194E283DD", (value, event) => {
+    panel.addText("Text", "Warning text", null, { warning: true });
+    const patternOptions = { uppercase: true }
+    panel.addText("Text With Validator Pattern", "", (value, event) => {
         console.log(value);
-    });
+    }, { pattern: LX.buildTextPattern( patternOptions ) });
     panel.addTextArea("Notes", "", (value, event) => {
         console.log(value);
     }, { placeholder: 'Some notes...' });
@@ -722,6 +773,37 @@ function fillBottomPanel( panel ) {
     panel.merge();
 }
 
+function createLoginForm() {
+
+    let dialog = new LX.Dialog('Login', panel => {
+
+        const formData = {
+            Username: {
+                value: "",
+                placeholder: "Enter username",
+                icon: "fa fa-user",
+                pattern: LX.buildTextPattern( { minLength: 3 } )
+            },
+            Password: {
+                value: "",
+                type: "password",
+                placeholder: "Enter password",
+                icon: "fa fa-key",
+                pattern: LX.buildTextPattern( { lowercase: true, uppercase: true, digit: true, minLength: 6 } )
+            }
+        };
+
+        panel.addForm("Test form", formData, (value, event) => {
+            console.log(value);
+        }, { actionName: "Login" });
+
+        panel.addLabel( "Or", { float: 'center' } );
+
+        panel.addButton( null, "Sign up", ( value, event ) => { });
+
+    }, { close: true, minimize: false, size: ["25%"], scroll: true, resizable: true, draggable: true });
+}
+
 function createAssetDialog() {
 
     let dialog = new LX.Dialog('Non Manual Features lexemes', (p) => {
@@ -788,7 +870,6 @@ function createAssetDialog() {
             }
         })
     },{ title:'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
- 
-    
 }
-LX.popup("Hello! I'm a popup :)", null, {position: ["50px", "100px"]})
+
+LX.popup("Hello! I'm a popup :)", null, {position: ["50px", "100px"]});

package/examples/asset_view.html

@@ -160,7 +160,7 @@
                         const area = new LX.Area();
                         p.attach( area );
                         let editor = new LX.CodeEditor(area, {
-                            allow_add_scripts: false
+                            allowAddScripts: false
                         });
                         editor.loadFile( event.item.src );
                     }, { size: ["40%", "600px"], closable: true });

package/examples/video_editor.html

@@ -31,7 +31,7 @@
       video.src = "../data/video.mp4";
       videoArea.attach(video);
 
-      const videoEditor = new LX.VideoEditor(leftArea, {videoArea, video})
+      const videoEditor = new LX.VideoEditor(leftArea, {videoArea, video, crop: true})
       
       const canvas = document.createElement('canvas');
       canvas.width = video.clientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.43",
+    "version": "0.1.45",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",