lexgui 0.7.3 → 0.7.5

package/build/lexgui.module.js

@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.3",
+    version: "0.7.5",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1092,6 +1092,7 @@ class DropdownMenu {
         this.alignOffset = options.alignOffset ?? 0;
         this.avoidCollisions = options.avoidCollisions ?? true;
         this.onBlur = options.onBlur;
+        this.event = options.event;
         this.inPlace = false;
 
         this.root = document.createElement( "div" );
@@ -1382,11 +1383,11 @@ class DropdownMenu {
     _adjustPosition() {
 
         const position = [ 0, 0 ];
+        const rect = this._trigger.getBoundingClientRect();
 
         // Place menu using trigger position and user options
+        if( !this.event )
         {
-            const rect = this._trigger.getBoundingClientRect();
-
             let alignWidth = true;
 
             switch( this.side )
@@ -1428,11 +1429,11 @@ class DropdownMenu {
             if( alignWidth ) { position[ 0 ] += this.alignOffset; }
             else { position[ 1 ] += this.alignOffset; }
         }
-
-        if( this.avoidCollisions )
+        // Offset position based on event
+        else
         {
-            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
-            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+            position[ 0 ] = this.event.x;
+            position[ 1 ] = this.event.y;
         }
 
         if( this._parent instanceof HTMLDialogElement )
@@ -1442,6 +1443,12 @@ class DropdownMenu {
             position[ 1 ] -= parentRect.y;
         }
 
+        if( this.avoidCollisions )
+        {
+            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
+            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+        }
+
         this.root.style.left = `${ position[ 0 ] }px`;
         this.root.style.top = `${ position[ 1 ] }px`;
         this.inPlace = true;
@@ -4548,6 +4555,7 @@ Element.prototype.ignore = function( eventName, callbackName ) {
 
 const RAW_ICONS = {
     // Internals
+    "Abc": [24, 24, [], "regular", "M17 15q-.425 0-.712-.288T16 14v-4q0-.425.288-.712T17 9h3q.425 0 .713.288T21 10v1h-1.5v-.5h-2v3h2V13H21v1q0 .425-.288.713T20 15zm-7.5 0V9h4q.425 0 .713.288T14.5 10v1q0 .425-.288.713T13.5 12q.425 0 .713.288T14.5 13v1q0 .425-.288.713T13.5 15zm1.5-3.75h2v-.75h-2zm0 2.25h2v-.75h-2zM3 15v-5q0-.425.288-.712T4 9h3q.425 0 .713.288T8 10v5H6.5v-1.5h-2V15zm1.5-3h2v-1.5h-2z"],
     "Clone": [512, 512, [], "regular", "M64 464l224 0c8.8 0 16-7.2 16-16l0-64 48 0 0 64c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64l64 0 0 48-64 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16zM224 304l224 0c8.8 0 16-7.2 16-16l0-224c0-8.8-7.2-16-16-16L224 48c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16zm-64-16l0-224c0-35.3 28.7-64 64-64L448 0c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64l-224 0c-35.3 0-64-28.7-64-64z"],
     "IdBadge": [384, 512, [], "regular", "M256 48l0 16c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-16L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16l0-384c0-8.8-7.2-16-16-16l-64 0zM0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM160 320l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16L96 416c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"],
     "Paste": [512, 512, [], "regular", "M104.6 48L64 48C28.7 48 0 76.7 0 112L0 384c0 35.3 28.7 64 64 64l96 0 0-48-96 0c-8.8 0-16-7.2-16-16l0-272c0-8.8 7.2-16 16-16l16 0c0 17.7 14.3 32 32 32l72.4 0C202 108.4 227.6 96 256 96l62 0c-7.1-27.6-32.2-48-62-48l-40.6 0C211.6 20.9 188.2 0 160 0s-51.6 20.9-55.4 48zM144 56a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zM448 464l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L464 243.9 464 448c0 8.8-7.2 16-16 16zM256 512l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9l-67.9-67.9c-9-9-21.2-14.1-33.9-14.1L256 128c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64z"],
@@ -4818,6 +4826,17 @@ function toTitleCase( str )
 
 LX.toTitleCase = toTitleCase;
 
+/**
+ * @method toKebabCase
+ * @param {String} str
+ */
+function toKebabCase( str )
+{
+    return str.replace( /[A-Z]/g, m => "-" + m.toLowerCase() );
+}
+
+LX.toKebabCase = toKebabCase;
+
 /**
  * @method getSupportedDOMName
  * @description Convert a text string to a valid DOM name