@lemonadejs/modal 2.3.1 → 2.3.3

package/dist/index.d.ts

@@ -10,14 +10,12 @@ interface Modal {
 }
 
 interface options {
-    /** Close the modal when it loses the focus */
-    autoclose?: boolean;
     /** Modal is closed */
     closed?: boolean;
-    /** Modal can be closed */
-    closable?: boolean;
     /** Modal is minimized */
     minimized?: boolean;
+    /** Modal can be closed */
+    closable?: boolean;
     /** Modal can be minimized */
     minimizable?: boolean;
     /** Modal can be resized */
@@ -38,14 +36,17 @@ interface options {
     left?: number;
     /** Load the content from a remote URL */
     url?: string;
-    /** Ensures modal will be visible on screen */
-    autoadjust?: boolean;
     /** Responsive mode. Default is true */
     responsive?: boolean;
+    /** Bring to front on focus */
+    layers?: boolean;
+    /** Close the modal when it loses the focus */
+    'auto-close'?: boolean;
+    /** Ensures modal will be visible on screen */
+    'auto-adjust'?: boolean;
 }
 
 interface instance {
-    autoclose: boolean;
     closed: boolean;
     closable: boolean;
     minimized: boolean;
@@ -58,6 +59,7 @@ interface instance {
     height: number;
     top: number;
     left: number;
+    'auto-close': boolean;
 }
 
 export declare function Modal(el: HTMLElement, options?: options): instance;

package/dist/index.js

@@ -1,3 +1,6 @@
+/**
+ * pin the modal to the left panel
+ */
 if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
@@ -133,10 +136,43 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
+    const refreshMinimized = function() {
+        let items = minimizedModals;
+        let numOfItems = items.length;
+        let width = 0;
+        let height = 5;
+        for (let i = 0; i < numOfItems; i++) {
+            let item = items[i];
+            item.el.style.marginLeft = width;
+            item.el.style.marginBottom = height;
+            width += 205;
+
+            if (document.body.offsetWidth - width < 205) {
+                width = 0;
+                height += 50;
+            }
+        }
+    }
+
+    const setMini = function(self) {
+        // Minimize modals
+        minimizedModals.push(self);
+        // Refresh positions
+        refreshMinimized.call(self);
+    }
+
+    const removeMini = function(self) {
+        minimizedModals.splice(minimizedModals.indexOf(self), 1);
+        self.el.style.marginLeft = '';
+        self.el.style.marginBottom = '';
+        // Refresh positions
+        refreshMinimized.call(self);
+    }
+
     const adjustTop = function() {
         let self = this;
-        let rect = self.el.getBoundingClientRect();
         self.el.style.marginTop = '';
+        let rect = self.el.getBoundingClientRect();
         let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
         if (limit < 0) {
             self.el.style.marginTop = limit - 10 + 'px';
@@ -145,8 +181,8 @@ if (!lemonade && typeof (require) === 'function') {
 
     const adjustLeft = function() {
         let self = this;
-        let rect = self.el.getBoundingClientRect();
         self.el.style.marginLeft = '';
+        let rect = self.el.getBoundingClientRect();
         // Make sure component will be visible on page
         let limit = document.documentElement.clientWidth - (rect.left +  rect.width);
         if (limit < 0) {
@@ -211,9 +247,14 @@ if (!lemonade && typeof (require) === 'function') {
                 self.el.setAttribute('data-responsive', true);
             }
 
+            // Bring to front on focus
+            if (self.layers !== false) {
+                self.el.classList.add('lm-modal-layers');
+            }
+
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
-                if (self.autoclose === true) {
+                if (isTrue(self['auto-close'])) {
                     if (!self.el.contains(e.relatedTarget)) {
                         self.closed = true;
                     }
@@ -237,7 +278,7 @@ if (!lemonade && typeof (require) === 'function') {
                 self.el.style[property] = self[property] + 'px';
 
                 // Adjust position
-                if (self.autoadjust) {
+                if (isTrue(self['auto-adjust'])) {
                     if (property === 'top') {
                         adjustTop.call(self);
                     } else if (property === 'left') {
@@ -287,39 +328,6 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        const refreshMinimized = function() {
-            let items = minimizedModals;
-            let numOfItems = items.length;
-            let width = 0;
-            let height = 5;
-            for (let i = 0; i < numOfItems; i++) {
-                let item = items[i];
-                item.el.style.marginLeft = width;
-                item.el.style.marginBottom = height;
-                width += 205;
-
-                if (document.body.offsetWidth - width < 205) {
-                    width = 0;
-                    height += 50;
-                }
-            }
-        }
-
-        const setMini = function(self) {
-            // Minimize modals
-            minimizedModals.push(self);
-            // Refresh positions
-            refreshMinimized.call(self);
-        }
-
-        const removeMini = function(self) {
-            minimizedModals.splice(minimizedModals.indexOf(self), 1);
-            self.el.style.marginLeft = '';
-            self.el.style.marginBottom = '';
-            // Refresh positions
-            refreshMinimized.call(self);
-        }
-
         self.mousedown = function(e) {
             // Get mouse coordinates
             let [x,y] = getCoords(e);

package/dist/style.css

@@ -13,7 +13,7 @@
     border: 1px solid #e9e9e9;
 }
 
-.lm-modal:focus {
+.lm-modal-layers:focus {
     z-index: 10;
 }
 

package/package.json

@@ -16,5 +16,6 @@
         "lemonadejs": "^3.4.0"
     },
     "main": "dist/index.js",
-    "version": "2.3.1"
+    "types": "dist/index.d.ts",
+    "version": "2.3.3"
 }