@lemonadejs/modal 2.5.0 → 2.6.0

package/dist/index.js

@@ -168,13 +168,13 @@ if (!lemonade && typeof (require) === 'function') {
         let items = minimizedModals;
         let numOfItems = items.length;
         let width = 10;
-        let height = 10;
-        let offsetWidth = document.body.offsetWidth;
-        let offsetHeight = document.body.offsetHeight;
+        let height = 55;
+        let offsetWidth = window.innerWidth;
+        let offsetHeight = window.innerHeight;
         for (let i = 0; i < numOfItems; i++) {
             let item = items[i];
             item.el.style.left = width + 'px';
-            item.el.style.top = offsetHeight - 30 - height + 'px';
+            item.el.style.top = offsetHeight - height + 'px';
             width += 205;
 
             if (offsetWidth - width < 205) {
@@ -187,39 +187,68 @@ if (!lemonade && typeof (require) === 'function') {
     const setMini = function(self) {
         // Minimize modals
         minimizedModals.push(self);
+        let rect = self.el.getBoundingClientRect();
+        self.minimized = true;
+        self.el.top = rect.top;
+        self.el.left = rect.left;
+        if (! self.el.style.top) {
+            self.el.style.top = self.el.top + 'px';
+        }
+        if (! self.el.style.left) {
+            self.el.style.left = self.el.left + 'px';
+        }
         // Refresh positions
-        refreshMinimized();
+        setTimeout(() => {
+            refreshMinimized();
+        }, 10);
     }
 
     const removeMini = function(self) {
         minimizedModals.splice(minimizedModals.indexOf(self), 1);
-        self.el.style.top = self.top + 'px';
-        self.el.style.left = self.left + 'px';
+        self.minimized = false;
+        self.el.style.top = self.el.top + 'px';
+        self.el.style.left = self.el.left + 'px';
         // Refresh positions
-        refreshMinimized();
+        setTimeout(() => {
+            refreshMinimized();
+        }, 10);
+        // Refresh positions
+        setTimeout(() => {
+            if (self.top === '') {
+                self.el.style.top = '';
+            }
+            if (self.left === '') {
+                self.el.style.left = '';
+            }
+        }, 400);
     }
 
     const adjustVertical = function() {
         let self = this;
         let rect = self.el.getBoundingClientRect();
-        let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
+        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);
         if (limit < 0) {
-            return rect.top + (limit - 10);
+            return rect.top + (limit - margin);
         } else if (rect.top < 0) {
-            return 10;
+            return margin;
         }
+        return false;
     }
 
     const adjustHorizontal = function() {
         let self = this;
         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 = document.documentElement.clientWidth - (rect.left +  rect.width);
+        let limit = window.innerWidth - (rect.left + rect.width);
         if (limit < 0) {
-            return rect.left + (limit - 10);
+            return rect.left + (limit - margin);
         } else if (rect.left < 0) {
-            return 10;
+            return margin;
         }
+        return false;
     }
 
     const isTrue = function(e) {
@@ -266,28 +295,54 @@ if (!lemonade && typeof (require) === 'function') {
             if (self.height) {
                 self.el.style.height = self.height + 'px';
             }
+            // Position
+            if (self.top) {
+                self.el.style.top = self.top + 'px';
+            }
+            if (self.left) {
+                self.el.style.left = self.left + 'px';
+            }
 
-            // Initial centralize
-            if (! self.position) {
-                if (! self.width && self.el.offsetWidth) {
+            if (self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
+
+            } else {
+                if (!self.width && self.el.offsetWidth) {
                     self.width = self.el.offsetWidth;
                 }
-                if (! self.height && self.el.offsetHeight) {
+                if (!self.height && self.el.offsetHeight) {
                     self.height = self.el.offsetHeight;
                 }
-            } else if (self.position === 'center') {
-                self.top = (window.innerHeight - self.height) / 2;
-                self.left = (window.innerWidth - self.width) / 2;
-            }
 
-            // Full screen
-            if (self.height > 300) {
-                self.el.classList.add('fullscreen');
-            }
+                // Initial centralize
+                if (self.position === 'center' || !self.top) {
+                    self.top = (window.innerHeight - self.height) / 2;
+                }
+                if (self.position === 'center' || !self.left) {
+                    self.left = (window.innerWidth - self.width) / 2;
+                }
+
+                // Responsive
+                if (document.documentElement.clientWidth < 800) {
+                    if (self.responsive !== false) {
+                        self.el.setAttribute('data-responsive', true);
+                    }
+                    // Full screen
+                    if (self.height > 300) {
+                        self.el.classList.add('fullscreen');
+                    }
+                }
 
-            // Responsive
-            if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
-                self.el.setAttribute('data-responsive', true);
+                // 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;
+                    }
+                }
             }
 
             // Backdrop
@@ -299,18 +354,6 @@ if (!lemonade && typeof (require) === 'function') {
                 })
             }
 
-            // Adjust position
-            if (isTrue(self['auto-adjust'])) {
-                let v = adjustVertical.call(self);
-                if (v) {
-                    self.top = v;
-                }
-                v = adjustHorizontal.call(self);
-                if (v) {
-                    self.left = v;
-                }
-            }
-
             // Bring to front on focus
             if (self.layers !== false) {
                 self.el.classList.add('lm-modal-layers');
@@ -326,7 +369,7 @@ if (!lemonade && typeof (require) === 'function') {
             });
 
             // Close and stop propagation
-            document.addEventListener('keydown', (e) => {
+            self.el.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape' && self.closed === false) {
                     self.closed = true;
                     e.preventDefault();
@@ -444,6 +487,7 @@ if (!lemonade && typeof (require) === 'function') {
             if (isTrue(self.closable)) {
                 if (corner) {
                     self.closed = true;
+
                     if (isTrue(self.minimizable)) {
                         removeMini(self);
                     }
@@ -456,20 +500,11 @@ if (!lemonade && typeof (require) === 'function') {
             // Check if the click in on minimize
             if (isTrue(self.minimizable)) {
                 if (corner) {
-                    // Minimize
-                    self.minimized = ! self.minimized;
                     // Handles minimized modal positioning
-                    if (self.minimized) {
-                        if (! self.top) {
-                            self.top = self.el.offsetTop;
-                        }
-                        if (! self.left) {
-                            self.left = self.el.offsetLeft;
-                        }
-
-                        setMini(self);
-                    } else {
+                    if (self.minimized === true) {
                         removeMini(self);
+                    } else {
+                        setMini(self);
                     }
 
                     return;
@@ -498,10 +533,16 @@ if (!lemonade && typeof (require) === 'function') {
                     controls.type = 'move';
                     // Callback
                     controls.action = function () {
-                        let v = adjustVertical.call(self) || item.style.top;
-                        let h = adjustHorizontal.call(self) || item.style.left;
-                        self.top = parseInt(v);
-                        self.left = parseInt(h);
+                        let v = adjustVertical.call(self);
+                        if (v === false) {
+                            v = parseInt(item.style.top);
+                        }
+                        let h = adjustHorizontal.call(self);
+                        if (v === false) {
+                            h = parseInt(item.style.left);
+                        }
+                        self.top = v;
+                        self.left = h;
                         controls.e.classList.remove('moving');
                     }
                     controls.e.classList.add('moving');

package/dist/style.css

@@ -155,7 +155,7 @@
 }
 
 .lm-modal[position="bottom"] {
-    top: auto;
+    top: initial;
     left: 0;
     bottom: 0;
     width: 100vw !important;

package/package.json

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