lexgui 0.1.14 → 0.1.16

package/build/lexgui.css

@@ -2709,7 +2709,7 @@ ul.lexassetscontent {
 .lexcodeeditor {
   outline: none;
   overflow: hidden;
-  width: calc(100% );
+  width: calc(100%);
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
   -ms-user-select: none; /* IE 10+ */
@@ -2730,9 +2730,9 @@ ul.lexassetscontent {
 
 .lexcodegutter {
   width: 32px;
-  height: calc(100% - 69px); /* 6px of the vertical scrollbar */
+  height: calc(100% - 70px);
   background-color: var(--global-branch-darker);
-  margin-top: 25px;
+  margin-top: 24px;
   text-align: center;
   overflow: hidden;
   -webkit-user-select: none; /* Safari 3.1+ */
@@ -2753,19 +2753,29 @@ ul.lexassetscontent {
   line-height: 22px;
 }
 
-.lexcodeeditor .code {
-  height: calc(100% - 30px);
-  cursor: text;
-  font-size: 16px;
-  overflow: scroll;
+.lexcodeeditor .codetabsarea {
   background-color: var(--global-branch-darker);
-  padding-right: 6px;
 }
 
-.lexcodeeditor .code.dragging {
+.lexcodeeditor .codetabsarea.with-vscrollbar {
+  width: calc( 100% - 10px ) !important;
+}
+
+.lexcodeeditor .codetabsarea.with-hscrollbar {
+  height: calc( 100% - 40px ) !important;
+}
+
+.lexcodeeditor .codetabsarea.dragging {
   background-color: var(--global-color-secondary);
 }
 
+.lexcodeeditor .code {
+  cursor: text;
+  font-size: 16px;
+  overflow: hidden;
+  padding-right: 6px;
+}
+
 .codechar {
   font-size: 16px;
   font-family: 'Inconsolata', monospace;
@@ -2797,6 +2807,7 @@ ul.lexassetscontent {
   -webkit-tap-highlight-color: transparent;
   z-index: 0 !important;
   pointer-events: none;
+  height: 16px;
 }
 
 .lexcodeeditor span {
@@ -2852,6 +2863,56 @@ ul.lexassetscontent {
   height: 18px;
 }
 
+.lexcodescrollbar {
+  position: absolute;
+  background-color: var(--global-branch-darker);
+  filter: brightness(0.9);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  margin-top: 26px;
+  z-index: 1 !important;
+  right: 0px;
+  width: 10px;
+  height: calc(100% - 62px);
+}
+
+.lexcodescrollbar.horizontal {
+  position: absolute;
+  background-color: var(--global-branch-darker);
+  filter: brightness(0.9);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  z-index: 1 !important;
+  bottom: 36px;
+  right: 10px;
+  width: calc( 100% - 40px );
+  height: 10px;
+}
+
+.lexcodescrollbar.scrollbar-unused {
+  display: none;
+}
+
+.lexcodescrollbar div { /* thumb */
+  background-color: #bbbbbb57 !important;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border-right: none;
+  position: absolute;
+  z-index: 0 !important;
+  top: 0px;
+  width: 10px;
+  height: 10px;
+  transition: linear 0.1s background-color;
+}
+
+.lexcodescrollbar div:hover { /* thumb */
+  background-color: #bbbbbb8c !important;
+}
+
 .lexcodeeditor .lexcodeselection {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
@@ -2862,6 +2923,7 @@ ul.lexassetscontent {
   margin: 0;
   padding: 0;
   border-right: none;
+  border-radius: 1px;
   position: absolute;
   z-index: 0 !important;
   left: 0px;
@@ -2931,7 +2993,7 @@ ul.lexassetscontent {
   color: #95a0e1;
 }
 
-.cm-str.javascript { color: #d0774e; } /* string */
+.cm-str.javascript { color: #ca7d59; } /* string */
 .cm-kwd.javascript { color: #218cce; } /* keyword */
 .cm-com.javascript { color: #5cab5a; } /* comment */
 .cm-typ.javascript { color: #36c0b0; } /* type */
@@ -2941,7 +3003,7 @@ ul.lexassetscontent {
 .cm-sym.javascript { color: #e7ded2; } /* symbol */
 .cm-mtd.javascript { color: #e0cc68 } /* method */
 
-.cm-str.cpp { color: #d0774e; } /* string */
+.cm-str.cpp { color: #ca7d59; } /* string */
 .cm-kwd.cpp { color: #218cce; } /* keyword */
 .cm-com.cpp { color: #5cab5a; } /* comment */
 .cm-typ.cpp { color: #36c0b0; } /* type */
@@ -2949,10 +3011,10 @@ ul.lexassetscontent {
 .cm-bln.cpp { color: #d44141; } /* builtin */
 .cm-dec.cpp { color: #2ddf53; } /* decimal */
 .cm-sym.cpp { color: #e7ded2; } /* symbol */
-.cm-mtd.cpp { color: #7493d6 } /* method */
+.cm-mtd.cpp { color: #7a9ae0 } /* method */
 .cm-ppc.cpp { color: #969696 } /* preprocessor */
 
-.cm-str.css { color: #d0774e; } /* string */
+.cm-str.css { color: #ca7d59; } /* string */
 .cm-kwd.css { color: #e8be53; } /* keyword */
 .cm-com.css { color: #5cab5a; } /* comment */
 .cm-typ.css { color: #b7c3ec; } /* type */
@@ -2962,7 +3024,7 @@ ul.lexassetscontent {
 .cm-sym.css { color: #f9d620; } /* symbol */
 .cm-mtd.css { color: #e0cc68; } /* method */
 
-.cm-str.json { color: #d0774e; } /* string */
+.cm-str.json { color: #ca7d59; } /* string */
 .cm-kwd.json { color: inherit; } /* keyword */
 .cm-com.json { color: inherit; } /* comment */
 .cm-typ.json { color: inherit; } /* type */
@@ -2972,7 +3034,7 @@ ul.lexassetscontent {
 .cm-sym.json { color: #cf6dcf; } /* symbol */
 .cm-mtd.json { color: inherit; } /* method */
 
-.cm-str.glsl { color: #d0774e; } /* string */
+.cm-str.glsl { color: #ca7d59; } /* string */
 .cm-kwd.glsl { color: #2194ce; } /* keyword */
 .cm-com.glsl { color: #5cab5a; } /* comment */
 .cm-typ.glsl { color: #36c0b0; } /* type */
@@ -2982,7 +3044,7 @@ ul.lexassetscontent {
 .cm-sym.glsl { color: #f9cb20; } /* symbol */
 .cm-mtd.glsl { color: #e0cc68; } /* method */
 
-.cm-str.wgsl { color: #d0774e; } /* string */
+.cm-str.wgsl { color: #ca7d59; } /* string */
 .cm-kwd.wgsl { color: #2194ce; } /* keyword */
 .cm-com.wgsl { color: #5cab5a; } /* comment */
 .cm-typ.wgsl { color: #36c0b0; } /* type */
@@ -2992,7 +3054,7 @@ ul.lexassetscontent {
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
-.cm-str.python { color: #d0774e; } /* string */
+.cm-str.python { color: #ca7d59; } /* string */
 .cm-kwd.python { color: #218cce; } /* keyword */
 .cm-com.python { color: #5cab5a; } /* comment */
 .cm-typ.python { color: #36c0b0; } /* type */
@@ -3002,6 +3064,16 @@ ul.lexassetscontent {
 .cm-sym.python { color: #e7ded2; } /* symbol */
 .cm-mtd.python { color: #e0cc68 } /* method */
 
+.cm-str.batch { color: #ca7d59; } /* string */
+.cm-kwd.batch { color: #218cce; } /* keyword */
+.cm-com.batch { color: #5cab5a; } /* comment */
+.cm-typ.batch { color: #36c0b0; } /* type */
+.cm-std.batch { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.batch { color: inherit; } /* builtin */
+.cm-dec.batch { color: #b1ce9b; } /* decimal */
+.cm-sym.batch { color: #dfd85e; } /* symbol */
+.cm-mtd.batch { color: inherit } /* method */
+
 /* plain color */
 .cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
 .cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.14",
+        version: "0.1.16",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -33,7 +33,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function getExtension(s)
     { 
-        return s.split('.').pop(); 
+        return s.includes('.') ? s.split('.').pop() : null;
     }
     
     LX.getExtension = getExtension;
@@ -343,7 +343,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 const instances = LX.CodeEditor.getInstances();
                 if(!instances.length) return;
 
-                const languages = instances[0].languages;
+                const languages = Object.keys( instances[0].languages );
 
                 for( let l of languages ) {
 
@@ -5046,50 +5046,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if(!name) {
                 throw("Set Widget Name!");
             }
-
+    
             let widget = this.create_widget(name, Widget.FILE, options);
             let element = widget.domEl;
-
+    
             let local = options.local ?? true;
             let type = options.type ?? 'text';
             let read = options.read ?? true; 
-
+    
             // Create hidden input
             let input = document.createElement('input');
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
             if(options.placeholder)
                 input.placeholder = options.placeholder;
-
+    
             input.addEventListener('change', function(e) {
                 const files = e.target.files;
-                if(!files.length) return;
-                if(read) {
+                if( !files.length ) return;
+                if(read)
+                {
                     const reader = new FileReader();
-
-                    if(type === 'text') {
-                        reader.readAsText(files[0]);
-                    }else if(type === 'buffer') {
-                        reader.readAsArrayBuffer(files[0])
-                    }else if(type === 'bin') {
-                        reader.readAsBinaryString(files[0])
-                    }else if(type === 'url') {
-                        reader.readAsDataURL(files[0])
-                    }
-
-                    reader.onload = (e) => { callback.call(this, e.target.result) } ;
+    
+                    if(type === 'text') reader.readAsText(files[0]);
+                    else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
+                    else if(type === 'bin') reader.readAsBinaryString(files[0]);
+                    else if(type === 'url') reader.readAsDataURL(files[0]);
+    
+                    reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
                 }
-                else 
-                    callback(files[0]);
+                else callback(files[0]);
                 
             });
-
+    
             element.appendChild(input);
-
+    
             this.queue( element );
             
-            if(local) {
-
+            if( local )
+            {
                 this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                     
                     new Dialog("Load Settings", p => {
@@ -5099,9 +5094,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     
                 }, { className: "micro", skipInlineCount: true });
             }
-
+    
             this.clearQueue();
-
+    
             return widget;
         }
 
@@ -7282,6 +7277,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
     });
 
+    Object.defineProperty(String.prototype, 'lastChar', {
+        get: function() { return this[ this.length - 1 ]; },
+        enumerable: true,
+        configurable: true
+    });
+
     Element.prototype.insertChildAtIndex = function(child, index = Infinity) {
         if (index >= this.children.length) this.appendChild(child);
         else this.insertBefore(child, this.children[index]);

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.14",
+    version: "0.1.16",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -29,7 +29,7 @@ LX.has = has;
 
 function getExtension(s)
 { 
-    return s.split('.').pop(); 
+    return s.includes('.') ? s.split('.').pop() : null;
 }
 
 LX.getExtension = getExtension;
@@ -339,7 +339,7 @@ function create_global_searchbar( root ) {
             const instances = LX.CodeEditor.getInstances();
             if(!instances.length) return;
 
-            const languages = instances[0].languages;
+            const languages = Object.keys( instances[0].languages );
 
             for( let l of languages ) {
 
@@ -5059,24 +5059,19 @@ class Panel {
 
         input.addEventListener('change', function(e) {
             const files = e.target.files;
-            if(!files.length) return;
-            if(read) {
+            if( !files.length ) return;
+            if(read)
+            {
                 const reader = new FileReader();
 
-                if(type === 'text') {
-                    reader.readAsText(files[0]);
-                }else if(type === 'buffer') {
-                    reader.readAsArrayBuffer(files[0])
-                }else if(type === 'bin') {
-                    reader.readAsBinaryString(files[0])
-                }else if(type === 'url') {
-                    reader.readAsDataURL(files[0])
-                }
+                if(type === 'text') reader.readAsText(files[0]);
+                else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
+                else if(type === 'bin') reader.readAsBinaryString(files[0]);
+                else if(type === 'url') reader.readAsDataURL(files[0]);
 
-                reader.onload = (e) => { callback.call(this, e.target.result) } ;
+                reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
             }
-            else 
-                callback(files[0]);
+            else callback(files[0]);
             
         });
 
@@ -5084,8 +5079,8 @@ class Panel {
 
         this.queue( element );
         
-        if(local) {
-
+        if( local )
+        {
             this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                 
                 new Dialog("Load Settings", p => {
@@ -7279,6 +7274,12 @@ Object.assign(LX, {
     }
 });
 
+Object.defineProperty(String.prototype, 'lastChar', {
+    get: function() { return this[ this.length - 1 ]; },
+    enumerable: true,
+    configurable: true
+});
+
 Element.prototype.insertChildAtIndex = function(child, index = Infinity) {
     if (index >= this.children.length) this.appendChild(child);
     else this.insertBefore(child, this.children[index]);

package/demo.js

@@ -693,9 +693,6 @@ function fillBottomPanel( panel ) {
     panel.addText("Serial number", "194E283DD", (value, event) => {
         console.log(value);
     });
-
-    panel.addNumber( "Decimal Point", 1, null, { min: 0, max: 2, step: 0.001 } )
-
     panel.addTextArea("Notes", "", (value, event) => {
         console.log(value);
     }, { placeholder: 'Some notes...' });

package/examples/code_editor.html

@@ -47,11 +47,20 @@
             // disable_edition: true
         });
 
-        editor.loadFile( "../data/test.json" );
-        editor.loadFile( "../data/style.css" );
-        editor.loadFile( "../data/script.js" );
-        editor.loadFile( "../data/engine.cpp" );
+        // editor.loadFile( "../data/test.json" );
+        // editor.loadFile( "../data/style.css" );
+        // editor.loadFile( "../data/script.js" );
+        // editor.loadFile( "../data/engine.cpp" );
+        editor.loadFile( "../demo.js" );
         
+        // var button = document.createElement('button');
+        // button.value = "CLICK ME";
+        // button.style.width = "100px";
+        // button.style.height = "100px";
+        // button.style.position = "absolute";
+        // button.onclick = editor.processLines.bind(editor);
+        // document.body.appendChild( button );
+
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.font = "48px Monospace";

package/package.json

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