lexgui 0.1.44 → 0.1.46

package/changelog.md

@@ -1,8 +1,32 @@
 # lexgui.js changelog
 
-## 0.1.45 (dev)
+## 0.1.47 (dev)
 
-## 0.1.44 (master)
+## 0.1.46 (master)
+
+Support for creating code snippets `LX.makeCodeSnippet(options)`.
+Added `swapButton.swap()` and Add `swapButton.setState(bool)`.
+Fixed colored buttons in light theme.
+Fixed GoogleSans.ttf usage.
+
+## 0.1.45
+
+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.

package/demo.js

@@ -21,6 +21,36 @@ let area = LX.init();
 // LX.setThemeColor('global-selected', "#a74");
 // LX.setThemeColor('global-text', "#f21");
 
+const snippet = LX.makeCodeSnippet(`
+import { LX } from 'lexgui';
+
+class Test {
+
+    constructor() {
+
+        this.foo = 1;
+
+        var div = document.createElement('div');
+        div.style.width = "100px"
+        div.style.height = "100px"
+
+        // single line comment
+
+        document.body.appendChild( div );
+
+        let a = 1; /* single line block comment */ let b = 2;
+
+        /*
+            multiple line block comment
+        */
+    }
+}
+`, ["780px", "580px"], { tabName: "script.js", language: "JavaScript", linesAdded: [2, [10, 12]], linesRemoved: [14, 16], windowMode: true });
+snippet.style.left = "200px";
+snippet.style.top = "200px";
+snippet.style.position = "absolute";
+document.body.appendChild( snippet );
+
 // menu bar
 area.addMenubar( m => {
 
@@ -103,20 +133,31 @@ area.addMenubar( m => {
         {
             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) => {
+                const playButton = m.getButton( "Play" );
+                playButton.swap();
+                console.log("glass!");
+            }
+        },
+        {
+            title: "Change Theme",
+            icon: "fa-solid fa-moon",
+            swap: "fa-solid fa-sun",
+            callback:  (event, swapValue) => { LX.setTheme( swapValue ? "light" : "dark" ) }
         }
     ]);
     
@@ -306,7 +347,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
         },
@@ -336,7 +376,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" } );
@@ -354,6 +395,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,13 +559,20 @@ function fillPanel( panel ) {
     // add widgets to panel branch
     panel.branch("Preferences", {icon: "fa-solid fa-gear"});
     panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
-    panel.addText("Text", "Warning text", null, { warning: true });
+    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.addToggle("Toggle me, Please", false, (value, event) => {
+    panel.sameLine(2);
+    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: "accent" });
+    }, { 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);
@@ -494,7 +580,6 @@ function fillPanel( panel ) {
     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});
@@ -699,9 +784,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...' });
@@ -728,13 +815,15 @@ function createLoginForm() {
             Username: {
                 value: "",
                 placeholder: "Enter username",
-                icon: "fa fa-user"
+                icon: "fa fa-user",
+                pattern: LX.buildTextPattern( { minLength: 3 } )
             },
             Password: {
                 value: "",
                 type: "password",
                 placeholder: "Enter password",
-                icon: "fa fa-key"
+                icon: "fa fa-key",
+                pattern: LX.buildTextPattern( { lowercase: true, uppercase: true, digit: true, minLength: 6 } )
             }
         };
 

package/package.json

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