@lemonadejs/modal 2.6.0 → 2.6.1

package/dist/index.d.ts

@@ -22,8 +22,8 @@ declare namespace Modal {
         resizable?: boolean;
         /** Modal can be moved from its original position. Default: false */
         draggable?: boolean;
-        /** Modal is automatic align during initialization */
-        position?: 'center' | 'left' | 'right' | 'bottom' | undefined;
+        /** Modal is automatic align during initialization. Absolute change the CSS position to absolute position to respect the screen position */
+        position?: 'center' | 'left' | 'right' | 'bottom' | 'absolute' |undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */

package/dist/index.js

@@ -228,7 +228,11 @@ if (!lemonade && typeof (require) === 'function') {
         let rect = self.el.getBoundingClientRect();
         let margin = rect.height >= window.innerHeight || self.position ? 0 : 10;
         // Make sure component will be visible on page
-        let limit = window.innerHeight + window.scrollY - (rect.top + rect.height);
+        let h = window.innerHeight;
+        if (self.position === 'absolute') {
+            h = document.body.offsetHeight;
+        }
+        let limit = h - (rect.top + rect.height);
         if (limit < 0) {
             return rect.top + (limit - margin);
         } else if (rect.top < 0) {
@@ -242,7 +246,11 @@ if (!lemonade && typeof (require) === 'function') {
         let rect = self.el.getBoundingClientRect();
         let margin = rect.width >= window.innerWidth || self.position ? 0 : 10;
         // Make sure component will be visible on page
-        let limit = window.innerWidth - (rect.left + rect.width);
+        let w = window.innerWidth;
+        if (self.position === 'absolute') {
+            w = document.body.offsetWidth;
+        }
+        let limit = w - (rect.left + rect.width);
         if (limit < 0) {
             return rect.left + (limit - margin);
         } else if (rect.left < 0) {
@@ -255,6 +263,20 @@ if (!lemonade && typeof (require) === 'function') {
         return e === true || e === 1 || e === 'true';
     }
 
+    const autoAdjust = function(s) {
+        // Adjust position
+        if (isTrue(s['auto-adjust'])) {
+            let v = adjustVertical.call(s);
+            if (v !== false) {
+                s.top = v;
+            }
+            v = adjustHorizontal.call(s);
+            if (v !== false) {
+                s.left = v;
+            }
+        }
+    }
+
     const Modal = function (template) {
         let self = this;
         let backdrop = null;
@@ -303,7 +325,7 @@ if (!lemonade && typeof (require) === 'function') {
                 self.el.style.left = self.left + 'px';
             }
 
-            if (self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
+            if (self.position === 'absolute' || self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
 
             } else {
                 if (!self.width && self.el.offsetWidth) {
@@ -331,20 +353,10 @@ if (!lemonade && typeof (require) === 'function') {
                         self.el.classList.add('fullscreen');
                     }
                 }
-
-                // Adjust position
-                if (isTrue(self['auto-adjust'])) {
-                    let v = adjustVertical.call(self);
-                    if (v !== false) {
-                        self.top = v;
-                    }
-                    v = adjustHorizontal.call(self);
-                    if (v !== false) {
-                        self.left = v;
-                    }
-                }
             }
 
+            autoAdjust(self);
+
             // Backdrop
             if (self.backdrop === true) {
                 backdrop = document.createElement('div');
@@ -399,6 +411,8 @@ if (!lemonade && typeof (require) === 'function') {
                     if (backdrop) {
                         self.el.parentNode.insertBefore(backdrop, self.el);
                     }
+                    // Auto adjust
+                    autoAdjust(self);
                 } else {
                     // Hide backdrop
                     if (backdrop) {
@@ -415,13 +429,15 @@ if (!lemonade && typeof (require) === 'function') {
                     self.el.style[property] = '';
                 }
             } else if (property === 'position') {
-                if (self.position) {
-                    if (self.position === 'center') {
+                if (self.position && self.position !== 'center') {
+                    self.top = '';
+                    self.left = '';
+                } else {
+                    if (! self.top) {
                         self.top = (window.innerHeight - self.el.offsetHeight) / 2;
+                    }
+                    if (! self.left) {
                         self.left = (window.innerWidth - self.el.offsetWidth) / 2;
-                    } else {
-                        self.top = '';
-                        self.left = '';
                     }
                 }
             }

package/dist/style.css

@@ -135,6 +135,10 @@
     background: #888;
 }
 
+.lm-modal[position="absolute"] {
+    position: absolute;
+}
+
 .lm-modal[position="left"] {
     top: 0;
     left: 0;
@@ -165,6 +169,7 @@
 }
 
 .lm-modal[minimized="true"] {
+    position: fixed;
     width: 200px !important;
     height: 45px !important;
     min-width: initial;

package/package.json

@@ -17,5 +17,5 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "2.6.0"
+    "version": "2.6.1"
 }