lexgui 0.7.15 → 8.1.0

package/demo.js

@@ -1,74 +1,118 @@
 import { LX } from 'lexgui';
-import 'lexgui/extensions/codeeditor.js';
-import 'lexgui/extensions/timeline.js';
-import 'lexgui/extensions/audio.js';
+import { CodeEditor } from 'lexgui/extensions/CodeEditor.js';
 
 window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
 const starterTheme = LX.getTheme();
-
-// Menubar
+const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
+const localHost = window.location.protocol !== "https:";
+const menubarButtons = [
+    { name: "Docs", callback: () => { window.open("./docs/") } },
+    { name: "Examples", callback: () => { window.open("./examples/") } },
+    { name: "Components", callback: () => { window.open("./docs/?p=components") } },
+    { name: "Colors", callback: () => { window.open("./colors/", "_self") } },
+    { name: "Icons", callback: () => { window.open("./icons/", "_self") } },
+];
+let menubar = null, sheetArea = null;
+
+if( mobile )
 {
-    const menubar = area.addMenubar( [
-        { name: "Docs", callback: () => { window.open("./docs/") } },
-        { name: "Components", callback: () => { window.open("./docs/?p=components") } },
-        { name: "Examples", callback: () => { window.open("./examples/") } },
-    ] );
+    menubar = area.addMenubar();
+
+    sheetArea = new LX.Area({ skipAppend: true });
+    sheetArea.addSidebar( ( m ) => {
+
+        m.group( "Menu" );
 
-    menubar.setButtonImage("lexgui.js", `images/icon_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left"} );
+        for( let b of menubarButtons )
+        {
+            m.add( b.name, { callback: b.callback } );
+        }
 
-    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
-        menubar.setButtonImage("lexgui.js", `images/icon_${ value }.png` );
+    }, {
+        headerTitle: `lexgui.js`,
+        headerSubtitle: `v${ LX.version }`,
+        headerImage: "./images/favicon.png",
+        footerTitle: "jxarco",
+            footerSubtitle: "alexroco.30@gmail.com",
+            footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
+        collapsed: false,
+        collapsable: false,
+        displaySelected: false
     } );
+}
+else
+{
+    menubar = area.addMenubar( menubarButtons );
 
     const commandButton = new LX.Button(null, `Search command...<span class="ml-auto">${ LX.makeKbd( ["Ctrl", "Space"], false, "bg-tertiary border px-1 rounded" ).innerHTML }</span>`, () => { LX.setCommandbarState( true ) }, {
-        width: "256px", className: "right", buttonClass: "border fg-tertiary bg-secondary" }
+        width: "256px", className: "right", buttonClass: "p-4 fg-tertiary bg-primary" }
     );
     menubar.root.appendChild( commandButton.root );
+}
 
-    menubar.addButtons( [
-        {
-            title: "Github",
-            icon: "Github@solid",
-            callback:  (event) => window.open( "https://github.com/jxarco/lexgui.js/", "_blank" )
-        },
-        {
-            title: "Switch Theme",
-            icon: starterTheme == "dark" ? "Moon" : "Sun",
-            swap: starterTheme == "dark" ? "Sun" : "Moon",
-            callback:  (value, event) => { LX.switchTheme() }
-        },
-        {
-            title: "Switch Spacing",
-            icon: "AlignVerticalSpaceAround",
-            callback:  (value, event) => { LX.switchSpacing() }
-        }
-    ], { float: "right" });
+menubar.setButtonImage("lexgui.js", `images/icon_${ starterTheme }.png`, () => {  window.location.href = window.origin + window.location.pathname }, { float: "left"} );
+LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+    menubar.setButtonImage("lexgui.js", `images/icon_${ value }.png` );
+} );
+
+menubar.siblingArea.root.style.overflowY = "scroll";
+
+menubar.addButtons( [
+    {
+        title: "Github",
+        icon: "Github@solid",
+        callback:  (event) => window.open( "https://github.com/jxarco/lexgui.js/", "_blank" )
+    },
+    {
+        title: "Switch Theme",
+        icon: starterTheme == "dark" ? "Moon" : "Sun",
+        swap: starterTheme == "dark" ? "Sun" : "Moon",
+        callback:  (value, event) => { LX.switchTheme() }
+    },
+    {
+        title: "Switch Spacing",
+        icon: "AlignVerticalSpaceAround",
+        callback:  (value, event) => { LX.switchSpacing() }
+    }
+], { float: "right" });
+
+if( mobile )
+{
+    menubar.root.querySelector( ".lexmenubuttons" ).style.marginLeft = "auto";
+
+    const commandButton = new LX.Button(null, LX.makeIcon( "Menu" ).innerHTML, () => {
+        window.__currentSheet = new LX.Sheet("256px", [ sheetArea ] );
+    }, { buttonClass: "p-4 bg-none fg-tertiary" } );
+    menubar.root.prepend( commandButton.root );
 }
 
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-10 py-8", `
-        <a>Get started with LexGUI.js <span class="text-sm fg-secondary">${ LX.version }</span></a>
-        <h1>Build your application interface</h1>
-        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible components.
-        No complex frameworks. Pure JavaScript and CSS. Open Source.</p>
+    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 pt-8 pb-4 items-center", `
+        <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full fg-primary decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-accent w-2 h-2 rounded-full"></span>
+            New Components: Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
+        <p class="fg-primary font-medium tracking-tight leading-none text-center text-balance text-5xl xs:text-4xl">Build your Application Interface</p>
+        <p class="fg-primary font-light text-xl xs:text-lg text-center text-balance leading-normal max-w-3xl">A modern-style UI kit, inspired by shadcn, built for the web. Pure JavaScript, CSS, zero dependencies. Fully Open Source.</p>
     `, area );
 
-    const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row", ``, header );
-    const getStartedButton = new LX.Button( null, "Get Started", () => window.open( "./docs/", "_blank" ), { buttonClass: "contrast p-1 px-3" } );
-    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "tertiary p-1 px-3" } );
+    const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row mt-2", ``, header );
+    const getStartedButton = new LX.Button( null, `Get Started <span class="text-lg">${ LX.version }</span>`, () => window.open( "./docs/", "_blank" ), { buttonClass: "contrast" } );
+    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "tertiary" } );
     headerButtons.appendChild( getStartedButton.root );
     headerButtons.appendChild( componentsButton.root );
 }
 
 // Content
 {
-    const tabs = area.addTabs( { parentClass: "p-4", sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
+    let tabs = null;
 
     // Editor
+    if( !mobile )
     {
+        tabs = area.addTabs( { parentClass: "p-4", sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
+
         const editorContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
         tabs.add( "Editor", editorContainer, { selected: true } );
 
@@ -259,7 +303,7 @@ const starterTheme = LX.getTheme();
             panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
             panel.addColor("Font Color", "#303b8d", null);
             panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
-            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Inter", "Monospace", "CascadiaCode"], "GeistSans");
             panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
             panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
             const opacityValues = [
@@ -305,14 +349,81 @@ const starterTheme = LX.getTheme();
         }
     }
 
+    // Examples
+    {
+        const examplesContainer = LX.makeContainer( [ null, "auto" ], `${ mobile ? "flex flex-col" : "grid grid-cols-4" } gap-3 bg-background rounded-lg p-6 overflow-hidden` );
+
+        if( tabs )
+        {
+            tabs.add( "Examples", examplesContainer, { xselected: true } );
+        }
+        else
+        {
+            area.attach( examplesContainer );
+        }
+
+        {
+            const panel = new LX.Panel( { className: "rounded-lg border p-4 flex flex-col gap-4" } );
+            panel.addColor("Background", "#b7a9b1", null);
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
+            panel.addColor("Font Color", "#303b8d", null);
+            panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
+            panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
+
+            examplesContainer.appendChild( panel.root );
+        }
+
+        {
+            const panel = new LX.Panel( { className: "p-4 flex flex-col gap-4" } );
+            panel.addColor("Background", "#b7a9b1", null);
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
+            panel.addColor("Font Color", "#303b8d", null);
+            panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
+            panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
+
+            examplesContainer.appendChild( panel.root );
+        }
+
+        {
+            const panel = new LX.Panel( { className: "p-4 flex flex-col gap-4" } );
+            panel.addColor("Background", "#b7a9b1", null);
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
+            panel.addColor("Font Color", "#303b8d", null);
+            panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
+            panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
+
+            examplesContainer.appendChild( panel.root );
+        }
+
+        {
+            const panel = new LX.Panel( { className: "p-4 flex flex-col gap-4" } );
+            panel.addColor("Background", "#b7a9b1", null);
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
+            panel.addColor("Font Color", "#303b8d", null);
+            panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
+            panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
+
+            examplesContainer.appendChild( panel.root );
+        }
+    }
+
     // Mail
+    if( !mobile )
     {
         const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
-        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "xs fg-white bg-error", asChild: true } } );
+        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "sm fg-white bg-error", asChild: true } } );
 
         const mailArea = new LX.Area();
         mailContainer.appendChild( mailArea.root );
-        const badgeClass = "ml-auto no-bg font-medium";
+        const badgeClass = "ml-auto bg-none font-medium";
 
         const sidebar = mailArea.addSidebar( m => {
             m.add( "Inbox", { selected: true, icon: "Inbox", content: LX.badge("128", badgeClass, { asElement: true }) } );
@@ -394,7 +505,7 @@ const starterTheme = LX.getTheme();
                             msgTags.appendChild( LX.badge( tag, "sm", { asElement: true } ) );
                         }
 
-                        msgContent.listen( "click", function() {
+                        LX.listen( msgContent, "click", function() {
                             mailContainer.childNodes.forEach( e => e.classList.remove( "bg-secondary" ) );
                             this.classList.add( "bg-secondary" );
                             window.__openMail( mail );
@@ -481,7 +592,7 @@ const starterTheme = LX.getTheme();
                         LX.toast( "Message sent!", "To:" + mail.email, { timeout: 5000, action: { name: "Undo", callback: ( toast, actionName, event ) => {
                             toast.close();
                         } } } );
-                    }, { className: "ml-auto", buttonClass: "contrast px-2" } );
+                    }, { className: "ml-auto", buttonClass: "contrast" } );
                     previewButtons.appendChild( sendButton.root );
                 };
             }
@@ -489,8 +600,9 @@ const starterTheme = LX.getTheme();
     }
 
     // Tasks
+    if( !mobile )
     {
-        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6 overflow-hidden" );
+        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-background border rounded-lg p-6 overflow-hidden" );
         tabs.add( "Tasks", tasksContainer, { xselected: true } );
 
         const header = LX.makeContainer( [ null, "auto" ], "col p-4", `
@@ -516,6 +628,7 @@ const starterTheme = LX.getTheme();
             sortable: true,
             toggleColumns: true,
             filter: "Name",
+            // tableClass: "bg-primary",
             customFilters: [
                 { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Canceled"] },
                 { name: "Priority", options: ["Low", "Medium", "High"] },
@@ -541,6 +654,7 @@ const starterTheme = LX.getTheme();
     }
 
     // Code
+    if( !mobile )
     {
         const codeContainer = LX.makeContainer( [ "auto", "800px" ], "flex flex-col border rounded-lg overflow-hidden" );
         tabs.add( "Code", codeContainer );
@@ -548,7 +662,7 @@ const starterTheme = LX.getTheme();
         const codeArea = new LX.Area();
         codeContainer.appendChild( codeArea.root );
 
-        let editor = new LX.CodeEditor(codeArea, {
+        let editor = new CodeEditor(codeArea, {
             // allowAddScripts: false,
             // autocomplete: false,
             // disableEdition: true,

package/examples/all-components.html

@@ -25,13 +25,13 @@
 
 <script type="module">
     import { LX } from 'lexgui';
-    import 'lexgui/extensions/codeeditor.js';
 
     window.LX = LX;
 
     // Init library and get main area
     let area = await LX.init();
 
+    const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
     const starterTheme = LX.getTheme();
     const menubar = area.addMenubar( [], { sticky: false } );
     menubar.addButtons([
@@ -60,13 +60,22 @@
         menubar.setButtonImage( "lexgui.js", `../images/icon_small_${ value }.png` );
     } );
 
-    var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
-    var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
+    var panelA, panelB, panelC;
 
-    // add panels
-    var panelA = left.addPanel();
-    var panelB = center.addPanel();
-    var panelC = right.addPanel();
+    if( mobile )
+    {
+        panelA = panelB = panelC = area.addPanel();
+    }
+    else
+    {
+        var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
+        var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
+
+        // add panels
+        panelA = left.addPanel();
+        panelB = center.addPanel();
+        panelC = right.addPanel();
+    }
 
     let closedDefault = false;
 
@@ -99,17 +108,25 @@
 
         const selectValues = ["Godot", "Unity", "Unreal Engine", "Visual Studio", "Visual Studio Code"];
         const selectValuesWithLabels = ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"];
-
         const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
 
         // Test buttons
         {
             const buttonsArea = new LX.Area({ width: "100%", height: "auto" });
-            var [buttonsLeft, buttonsRight] = buttonsArea.split({ sizes: ["50%", "50%"] });
             panelA.attach(buttonsArea.root);
 
-            const buttonsLeftPanel = buttonsLeft.addPanel();
-            const buttonsRightPanel = buttonsRight.addPanel();
+            let buttonsLeftPanel, buttonsRightPanel;
+
+            if( mobile )
+            {
+                buttonsLeftPanel = buttonsRightPanel = buttonsArea.addPanel();
+            }
+            else
+            {
+                var [ buttonsLeft, buttonsRight ] = buttonsArea.split({ sizes: ["50%", "50%"] });
+                buttonsLeftPanel = buttonsLeft.addPanel();
+                buttonsRightPanel = buttonsRight.addPanel();
+            }
 
             buttonsLeftPanel.branch("Classic Buttons", { closed: closedDefault });
             buttonsLeftPanel.addButton(null, "Classic", null);
@@ -168,12 +185,23 @@
             buttonsRightPanel.addComboButtons("No Selection Combo", comboValues, { noSelection: true });
         }
 
+        
+
         const checkArea = new LX.Area({ width: "100%", height: "auto" });
-        var [checkLeft, checkRight] = checkArea.split({ sizes: ["50%", "50%"] });
         panelA.attach(checkArea.root);
 
-        const checkLeftPanel = checkLeft.addPanel();
-        const checkRightPanel = checkRight.addPanel();
+        let checkLeftPanel, checkRightPanel;
+
+        if( mobile )
+        {
+            checkLeftPanel = checkRightPanel = checkArea.addPanel();
+        }
+        else
+        {
+            var [checkLeft, checkRight] = checkArea.split({ sizes: ["50%", "50%"] });
+            checkLeftPanel = buttonsLeft.addPanel();
+            checkRightPanel = buttonsRight.addPanel();
+        }
 
         // Test Checkboxes
         {
@@ -235,6 +263,9 @@
             panelB.addNumber("With Units", 12, null, { units: "px" });
             panelB.addNumber("With Slider", 0, null, { min: 1, max: 48, step: 1 });
             panelB.addNumber("Disabled Slider", 0, null, { min: 1, max: 48, step: 1, disabled: true });
+            panelB.branch("Counter Inputs", { closed: closedDefault });
+            panelB.addCounter("Classic", 0, null, { min: 1, max: 48, step: 1 });
+            panelB.addCounter("Disabled", 0, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Vector Inputs", { closed: closedDefault });
             panelB.addVector2("Classic Vec2", [0, 0], null);
             panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });

package/examples/asset-view.html

@@ -20,7 +20,8 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/extensions/codeeditor.js';
+    import { CodeEditor } from 'lexgui/extensions/CodeEditor.js';
+    import { AssetView } from 'lexgui/extensions/AssetView.js';
 
     // Init library and get main area
     let area = await LX.init();
@@ -44,14 +45,20 @@
         canvas.height = bounding.height;
     };
 
-    let assetView = new LX.AssetView({
+    let assetView = new AssetView({
         // useNativeTitle: true,
         // skipBrowser: true,
         // skipPreview: true,
         // rootPath: "../",
         // onlyFolders: false,
+        allowedTypes: {
+            "Mesh": { color: "rose-800" },
+            "Script": { color: "orange-500" },
+            "Clip": { color: "fuchsia-600" },
+            "SIGML": { color: "emerald-300" },
+        },
         itemContextMenuOptions: [
-            { name: "Move", callback: ( item ) => { console.log(item) } }
+            { name: "Like", callback: ( item ) => { console.log(item) } }
         ]
     });
     bottomArea.attach(assetView);
@@ -77,13 +84,19 @@
         {
             id: "Avatar",
             type: "Avatar",
-            preview: "https://models.readyplayer.me/66e30a18eca8fb70dcadde68.png?background=68,68,245"
+            metadata: {
+                preview: "https://models.readyplayer.me/66e30a18eca8fb70dcadde68.png?background=68,68,245",
+                volume: 0.5,
+            }
         },
         {
             id: "video-test",
             type: "video",
-            preview: "https://godotengine.org/assets/press/logo_vertical_color_dark.png",
-            src: "https://catsl.eelvex.net/static/vid/teacher-video-Ψ.mp4"
+            src: "https://catsl.eelvex.net/static/vid/teacher-video-Ψ.mp4",
+            metadata: {
+                preview: "https://godotengine.org/assets/press/logo_vertical_color_dark.png",
+                volume: 0.5,
+            }
         },
         {
             id: "nyan-pyportal.gif",
@@ -94,13 +107,17 @@
             id: "sigml_test.sigml",
             type: "sigml",
             src: "../data/sigml_test.sigml",
-            lastModified: 1740588312813
+            metadata: {
+                lastModified: 1740588312813
+            }
         },
         {
             id: "json_sample.json",
             type: "JSON",
             src: "../data/json_sample.json",
-            lastModified: 1740581312813
+            metadata: {
+                lastModified: 1740581312813
+            }
         },
         {
             id: "godot",
@@ -178,53 +195,99 @@
             id: "brow_lowerer.png",
             type: "clip",
             src: "../data/brow_lowerer.png",
-            lastModified: 1740181312813
+            metadata: {
+                lastModified: 1740181312813
+            }
         }
     ];
 
-    assetView.load(assetData, event => {
-        switch (event.type) {
-            case LX.AssetViewEvent.ASSET_SELECTED:
-                if (event.multiple)
-                    console.log("Selected: ", event.item);
-                else
-                    console.log(event.item.id + " selected");
-                break;
-            case LX.AssetViewEvent.ASSET_DBLCLICKED:
-                console.log(event.item.id + " double clicked");
-                if (!event.item.src || event.item.type == "image") break;
-                if (window.dialog) window.dialog.destroy();
-                window.dialog = new LX.PocketDialog("Editor", p => {
-                    const area = new LX.Area();
-                    p.attach(area);
-                    let editor = new LX.CodeEditor(area, {
-                        allowAddScripts: false
-                    });
-                    editor.loadFile(event.item.src);
-                }, { size: ["40%", "600px"], closable: true });
-                break;
-            case LX.AssetViewEvent.ENTER_FOLDER:
-                console.log("Entering folder: " + event.item.id);
-                break;
-            case LX.AssetViewEvent.ASSET_DELETED:
-                console.log(event.item.id + " deleted");
-                break;
-            case LX.AssetViewEvent.ASSET_CLONED:
-                console.log(event.item.id + " cloned");
-                break;
-            case LX.AssetViewEvent.ASSET_RENAMED:
-                console.log(event.value + " is now called " + event.item.id);
-                break;
-        }
-    });
+    // Click events
+    {
+        assetView.on( "select", ( event, resolve ) => {
+            console.log(`${ event.items[ 0 ].id } selected` );
+        } );
 
-    function loop(dt) {
+        assetView.on( "dblClick", ( event ) => {
+            console.log(`${ event.items[ 0 ].id } dbl clicked` );
+        } );
+    }
 
-        var ctx = canvas.getContext("2d");
+    // Folder events
+    {
+        assetView.on( "enterFolder", ( event ) => {
+            console.log(`Entered ${ event.to.id } folder` );
+        } );
+
+        assetView.on( "beforeCreateFolder", ( event, resolve ) => {
+            LX.prompt("Perform CreateFolder Action?", "Server Message", () => {
+                resolve();
+            })
+        } );
+
+        assetView.on( "createFolder", ( event ) => {
+            console.log(`${ event.result[ 0 ].id } folder created`);
+        } );
+    }
+
+    // Rename events
+    {
+        assetView.on( "beforeRename", ( event, resolve ) => {
+            LX.prompt("Perform Rename Action?", "Server Message", () => {
+                resolve();
+            })
+        } );
+
+        assetView.on( "rename", ( event ) => {
+            console.log(`${ event.oldName } renamed to ${ event.newName }`);
+        } );
+    }
+
+    // Delete events
+    {
+        assetView.on( "beforeDelete", ( event, resolve ) => {
+            LX.prompt("Perform Delete Action?", "Server Message", () => {
+                resolve();
+            })
+        } );
 
+        assetView.on( "delete", ( event ) => {
+            console.log(event.items[ 0 ].id + " deleted");
+        } );
+    }
+
+    // Clone events
+    {
+        assetView.on( "beforeClone", ( event, resolve ) => {
+            LX.prompt("Perform Clone Action?", "Server Message", (value) => {
+                resolve( value );
+            })
+        } );
+
+        assetView.on( "clone", ( event, arg1, arg2 ) => {
+            console.log(event.items[ 0 ].id + " cloned",  arg1, arg2);
+        } );
+    }
+
+    // Move events
+    {
+        assetView.on( "beforeMove", ( event, resolve ) => {
+            LX.prompt("Perform Move Action?", "Server Message", () => {
+                resolve();
+            })
+        } );
+
+        assetView.on( "move", ( event ) => {
+            console.log(`${ event.items[ 0 ].id } moved to ${ event.to.id }` );
+        } );
+    }
+
+    assetView.load( assetData );
+
+    function loop( dt )
+    {
+        var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-
         ctx.font = "48px Monospace";
         ctx.fillStyle = "#ff1999";
 

package/examples/code-editor.html

@@ -20,11 +20,11 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/extensions/codeeditor.js';
+    import { CodeEditor } from 'lexgui/extensions/codeeditor.js';
 
-    LX.CodeEditor.debugScopes = false;
-    LX.CodeEditor.debugSymbols = false;
-    LX.CodeEditor.debugProcessedLines = false;
+    CodeEditor.debugScopes = false;
+    CodeEditor.debugSymbols = false;
+    CodeEditor.debugProcessedLines = false;
 
     // init library and get main area
     let area = await LX.init();
@@ -51,7 +51,7 @@
         area = rightArea;
     }
 
-    let editor = new LX.CodeEditor(area, {
+    let editor = new CodeEditor(area, {
         // allowAddScripts: false,
         // autocomplete: false,
         // disableEdition: true,