@lemonadejs/modal 2.6.0 → 2.7.0

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

@@ -157,6 +157,10 @@ if (!lemonade && typeof (require) === 'function') {
     document.addEventListener('mouseup', mouseUp);
     document.addEventListener('mousemove', mouseMove);
 
+    const isTrue = function(e) {
+        return e === true || e === 1 || e === 'true';
+    }
+
     // Dispatcher
     const Dispatch = function(type, option){
         if (typeof this[type] === 'function') {
@@ -184,23 +188,53 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
+    const delayAction = function(self, action) {
+        // Make sure to remove the transformation before minimize to preserve the animation
+        if (self.el.style.marginLeft || self.el.style.marginTop) {
+            // Make sure no animation during this process
+            self.el.classList.add('action');
+            // Remove adjustment
+            removeMargin(self);
+            // Make sure to continue with minimize
+            setTimeout(function() {
+                // Remove class
+                self.el.classList.remove('action');
+                // Call action
+                action(self);
+            },0)
+
+            return true;
+        }
+    }
+
     const setMini = function(self) {
+        if (delayAction(self, setMini)) {
+            return;
+        }
+
         // 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';
         }
+
+        self.el.translateY = 0;
+        self.el.translateX = 0;
+
         // Refresh positions
-        setTimeout(() => {
+        setTimeout(function() {
             refreshMinimized();
-        }, 10);
+            self.minimized = true;
+        },10)
     }
 
     const removeMini = function(self) {
@@ -223,36 +257,80 @@ if (!lemonade && typeof (require) === 'function') {
         }, 400);
     }
 
-    const adjustVertical = function() {
-        let self = this;
-        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);
-        if (limit < 0) {
-            return rect.top + (limit - margin);
-        } else if (rect.top < 0) {
-            return margin;
-        }
-        return false;
+    const removeMargin = function(self) {
+        if (self.el.style.marginLeft) {
+            let y = self.left + parseInt(self.el.style.marginLeft);
+            self.el.style.marginLeft = '';
+            self.left = y;
+        }
+
+        if (self.el.style.marginTop) {
+            let x = self.top + parseInt(self.el.style.marginTop);
+            self.el.style.marginTop = '';
+            self.top = x;
+        }
     }
 
-    const adjustHorizontal = function() {
-        let self = this;
+    const adjustHorizontal = function(self) {
+        if (! isTrue(self['auto-adjust'])) {
+            return false;
+        }
+
+        self.el.style.marginLeft = '';
         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);
-        if (limit < 0) {
-            return rect.left + (limit - margin);
-        } else if (rect.left < 0) {
-            return margin;
-        }
-        return false;
+        let viewportWidth = window.innerWidth;
+        let margin = 10;
+
+        if (self.position) {
+            if (self.position === 'absolute') {
+                viewportWidth = document.documentElement.clientWidth;
+            } else {
+                margin = 0;
+            }
+        }
+
+        let rightEdgeDistance = viewportWidth - (rect.right);
+        let transformX = 0;
+        if (rightEdgeDistance < margin) {
+            transformX = rightEdgeDistance - margin;
+        }
+        if (rect.left < margin) {
+            transformX = margin - rect.left;
+        }
+        if (transformX !== 0) {
+            self.el.style.marginLeft = transformX + 'px';
+        }
     }
 
-    const isTrue = function(e) {
-        return e === true || e === 1 || e === 'true';
+    const adjustVertical = function(self) {
+        if (! isTrue(self['auto-adjust'])) {
+            return false;
+        }
+
+        self.el.style.marginTop = '';
+        let rect = self.el.getBoundingClientRect();
+        let viewportHeight = window.innerHeight;
+        let margin = 10;
+
+        if (self.position) {
+            if (self.position === 'absolute') {
+                viewportHeight = document.documentElement.clientHeight;
+            } else {
+                margin = 0;
+            }
+        }
+
+        let bottomEdgeDistance = viewportHeight - (rect.bottom);
+        let transformY = 0;
+        if (bottomEdgeDistance < margin) {
+            transformY = bottomEdgeDistance - margin;
+        }
+        if (rect.top < margin) {
+            transformY = margin - rect.top;
+        }
+        if (transformY !== 0) {
+            self.el.style.marginTop = transformY + 'px';
+        }
     }
 
     const Modal = function (template) {
@@ -303,7 +381,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) {
@@ -323,28 +401,17 @@ if (!lemonade && typeof (require) === 'function') {
 
                 // Responsive
                 if (document.documentElement.clientWidth < 800) {
-                    if (self.responsive !== false) {
-                        self.el.setAttribute('data-responsive', true);
-                    }
-                    // Full screen
+                        // Full screen
                     if (self.height > 300) {
                         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;
-                    }
-                }
             }
 
+            // Auto adjust
+            adjustHorizontal(self);
+            adjustVertical(self);
+
             // Backdrop
             if (self.backdrop === true) {
                 backdrop = document.createElement('div');
@@ -399,6 +466,10 @@ if (!lemonade && typeof (require) === 'function') {
                     if (backdrop) {
                         self.el.parentNode.insertBefore(backdrop, self.el);
                     }
+
+                    // Auto adjust
+                    adjustHorizontal(self);
+                    adjustVertical(self);
                 } else {
                     // Hide backdrop
                     if (backdrop) {
@@ -414,6 +485,13 @@ if (!lemonade && typeof (require) === 'function') {
                 } else {
                     self.el.style[property] = '';
                 }
+
+                if (property === 'top') {
+                    adjustVertical(self);
+                }
+                if (property === 'left') {
+                    adjustHorizontal(self);
+                }
             } else if (property === 'position') {
                 if (self.position) {
                     if (self.position === 'center') {
@@ -423,6 +501,13 @@ if (!lemonade && typeof (require) === 'function') {
                         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;
+                    }
                 }
             }
         }
@@ -525,27 +610,22 @@ if (!lemonade && typeof (require) === 'function') {
                     controls.action = function () {
                         self.width = parseInt(item.style.width);
                         self.height = parseInt(item.style.height);
-                        controls.e.classList.remove('resizing');
+                        controls.e.classList.remove('action');
                     }
-                    controls.e.classList.add('resizing');
+                    controls.e.classList.add('action');
                 } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
                     // Action
                     controls.type = 'move';
                     // Callback
                     controls.action = function () {
-                        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');
+                        self.top = parseInt(item.style.top);
+                        self.left = parseInt(item.style.left);
+
+                        controls.e.classList.remove('action');
                     }
-                    controls.e.classList.add('moving');
+                    controls.e.classList.add('action');
+                    // Remove transform
+                    removeMargin(self);
                 }
             }
         }
@@ -562,7 +642,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-modal" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
+        return `<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
             <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
             <div>${template}</div>
         </div>`

package/dist/style.css

@@ -87,17 +87,11 @@
     z-index: 999;
 }
 
-.lm-modal[data-responsive].fullscreen {
-    top: 0;
-    height: 100% !important;
-}
-
-.lm-modal.moving {
-    cursor: move !important;
+.lm-modal[animation="false"] {
     transition: initial;
 }
 
-.lm-modal.resizing {
+.lm-modal.action {
     transition: initial;
 }
 
@@ -135,6 +129,11 @@
     background: #888;
 }
 
+.lm-modal[position="absolute"] {
+    position: absolute;
+    transition: initial;
+}
+
 .lm-modal[position="left"] {
     top: 0;
     left: 0;
@@ -165,6 +164,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.7.0"
 }