@lemonadejs/modal 2.4.10 → 2.6.0

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare namespace Modal {
         /** Modal can be moved from its original position. Default: false */
         draggable?: boolean;
         /** Modal is automatic align during initialization */
-        position?: 'center' | 'left' | 'right' | undefined;
+        position?: 'center' | 'left' | 'right' | 'bottom' | undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */
@@ -52,6 +52,8 @@ declare namespace Modal {
         onopen?: (self: object) => void;
         /** onclose event */
         onclose?: (self: object) => void;
+        /** onload event */
+        onload?: (self: object) => void;
     }
 
     interface Instance {

package/dist/index.js

@@ -81,18 +81,19 @@ if (!lemonade && typeof (require) === 'function') {
         if (typeof(controls.action) === 'function') {
             controls.action();
         }
-        // Remove cursor
-        if (controls.e) {
-            controls.e.style.cursor = '';
-            controls.e.classList.remove('moving');
-        }
-        // Reset controls
-        controls = {};
-        // Reset state controls
-        state = {
-            x: null,
-            y: null,
-        }
+        setTimeout(function() {
+            // Remove cursor
+            if (controls.e) {
+                controls.e.style.cursor = '';
+            }
+            // Reset controls
+            controls = {};
+            // Reset state controls
+            state = {
+                x: null,
+                y: null,
+            }
+        }, 0)
     }
 
     const mouseMove = function(e) {
@@ -166,16 +167,18 @@ if (!lemonade && typeof (require) === 'function') {
     const refreshMinimized = function() {
         let items = minimizedModals;
         let numOfItems = items.length;
-        let width = 0;
-        let height = 5;
+        let width = 10;
+        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.marginLeft = width;
-            item.el.style.marginBottom = height;
+            item.el.style.left = width + 'px';
+            item.el.style.top = offsetHeight - height + 'px';
             width += 205;
 
-            if (document.body.offsetWidth - width < 205) {
-                width = 0;
+            if (offsetWidth - width < 205) {
+                width = 10;
                 height += 50;
             }
         }
@@ -184,40 +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.call(self);
+        setTimeout(() => {
+            refreshMinimized();
+        }, 10);
     }
 
     const removeMini = function(self) {
         minimizedModals.splice(minimizedModals.indexOf(self), 1);
-        self.el.style.marginLeft = '';
-        self.el.style.marginBottom = '';
+        self.minimized = false;
+        self.el.style.top = self.el.top + 'px';
+        self.el.style.left = self.el.left + 'px';
         // Refresh positions
-        refreshMinimized.call(self);
+        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;
-        self.el.style.marginTop = '';
         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) {
-            self.el.style.marginTop = limit - 10 + 'px';
+            return rect.top + (limit - margin);
         } else if (rect.top < 0) {
-            self.el.style.marginTop = -1 * rect.top + 10 + 'px';
+            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) {
-            self.el.style.marginLeft = limit - 10 + 'px';
+            return rect.left + (limit - margin);
         } else if (rect.left < 0) {
-            self.el.style.marginLeft = -1 * rect.left + 10 + 'px';
+            return margin;
         }
+        return false;
     }
 
     const isTrue = function(e) {
@@ -240,6 +271,10 @@ if (!lemonade && typeof (require) === 'function') {
             sendToFront(self.el);
         }
 
+        // Onload method
+        let onload = self.onload;
+
+        // Native lemonade
         self.onload = function() {
             if (self.url) {
                 fetch(self.url)
@@ -256,14 +291,11 @@ if (!lemonade && typeof (require) === 'function') {
             // Dimensions
             if (self.width) {
                 self.el.style.width = self.width + 'px';
-            } else if (self.el.offsetWidth) {
-                self.width = self.el.offsetWidth;
             }
             if (self.height) {
                 self.el.style.height = self.height + 'px';
-            } else if (self.el.offsetHeight) {
-                self.height = self.el.offsetHeight;
             }
+            // Position
             if (self.top) {
                 self.el.style.top = self.top + 'px';
             }
@@ -271,20 +303,46 @@ if (!lemonade && typeof (require) === 'function') {
                 self.el.style.left = self.left + 'px';
             }
 
-            // Initial centralize
-            if (self.position === 'center') {
-                self.top = (window.innerHeight - self.height) / 2;
-                self.left = (window.innerWidth - self.width) / 2;
-            }
+            if (self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
 
-            // Full screen
-            if (self.height > 300) {
-                self.el.classList.add('fullscreen');
-            }
+            } else {
+                if (!self.width && self.el.offsetWidth) {
+                    self.width = self.el.offsetWidth;
+                }
+                if (!self.height && self.el.offsetHeight) {
+                    self.height = self.el.offsetHeight;
+                }
 
-            // Responsive
-            if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
-                self.el.setAttribute('data-responsive', true);
+                // 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');
+                    }
+                }
+
+                // 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
@@ -296,12 +354,6 @@ if (!lemonade && typeof (require) === 'function') {
                 })
             }
 
-            // Adjust position
-            if (isTrue(self['auto-adjust'])) {
-                adjustVertical.call(self);
-                adjustHorizontal.call(self);
-            }
-
             // Bring to front on focus
             if (self.layers !== false) {
                 self.el.classList.add('lm-modal-layers');
@@ -310,23 +362,33 @@ if (!lemonade && typeof (require) === 'function') {
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
                 if (isTrue(self['auto-close'])) {
-                    if (!self.el.contains(e.relatedTarget)) {
+                    if (! self.el.contains(e.relatedTarget)) {
                         self.closed = true;
                     }
                 }
             });
 
             // 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();
                     e.stopImmediatePropagation();
                 }
             });
+
+            if (typeof(onload) === 'function') {
+                Dispatch.call(self, 'onload', self);
+            }
         }
 
+        let ignoreEvents = false;
+
         self.onchange = function(property) {
+            if (ignoreEvents) {
+                return false;
+            }
+
             if (property === 'closed') {
                 if (self.closed === false) {
                     // Focus on the modal
@@ -337,31 +399,30 @@ if (!lemonade && typeof (require) === 'function') {
                     if (backdrop) {
                         self.el.parentNode.insertBefore(backdrop, self.el);
                     }
-                    // Animation
-                    if (self.animation) {
-                        self.el.classList.add('lm-modal-animation');
-                    }
                 } else {
                     // Hide backdrop
                     if (backdrop) {
                         backdrop.remove();
                     }
-                    if (self.animation) {
-                        self.el.classList.remove('lm-modal-animation');
-                    }
                 }
 
                 // Call the vents
-                self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
+                self.closed ? Dispatch.call(self,'onclose',self) : Dispatch.call(self,'onopen',self);
             } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
-                self.el.style[property] = self[property] + 'px';
-            }
-
-            // Adjust position
-            if (self.closed === false) {
-                if (isTrue(self['auto-adjust'])) {
-                    adjustVertical.call(self);
-                    adjustHorizontal.call(self);
+                if (self[property] !== '') {
+                    self.el.style[property] = self[property] + 'px';
+                } else {
+                    self.el.style[property] = '';
+                }
+            } else if (property === 'position') {
+                if (self.position) {
+                    if (self.position === 'center') {
+                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
+                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
+                    } else {
+                        self.top = '';
+                        self.left = '';
+                    }
                 }
             }
         }
@@ -420,49 +481,69 @@ if (!lemonade && typeof (require) === 'function') {
             controls.w = rect.width;
             controls.h = rect.height;
 
-            let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
+            let corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 34;
 
-            if (isTrue(self.minimizable) && corner === true) {
-                self.minimized = ! self.minimized;
-                // Handles minimized modal positioning
-                if (self.minimized) {
-                    setMini(self);
-                } else {
-                    removeMini(self);
+            // Check if the click in on close
+            if (isTrue(self.closable)) {
+                if (corner) {
+                    self.closed = true;
+
+                    if (isTrue(self.minimizable)) {
+                        removeMini(self);
+                    }
+                    return;
                 }
-            } else if (isTrue(self.closable) && corner === true) {
-                self.closed = true;
-            } else if (! self.minimized) {
+
+                corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 65;
+            }
+
+            // Check if the click in on minimize
+            if (isTrue(self.minimizable)) {
+                if (corner) {
+                    // Handles minimized modal positioning
+                    if (self.minimized === true) {
+                        removeMini(self);
+                    } else {
+                        setMini(self);
+                    }
+
+                    return;
+                }
+            }
+
+            if (! self.minimized) {
                 // If is not minimized
                 if (controls.type === 'resize') {
-                    // This will be the callback when finalize the resize
-                    controls.action = function () {
-                        self.width = parseInt(item.style.width);
-                        self.height = parseInt(item.style.height);
-                    }
                     // Make sure the width and height is defined for the modal
-                    if (!item.style.width) {
+                    if (! item.style.width) {
                         item.style.width = controls.w + 'px';
                     }
-                    if (!item.style.height) {
+                    if (! item.style.height) {
                         item.style.height = controls.h + 'px';
                     }
-
-                    e.preventDefault();
+                    // This will be the callback when finalize the resize
+                    controls.action = function () {
+                        self.width = parseInt(item.style.width);
+                        self.height = parseInt(item.style.height);
+                        controls.e.classList.remove('resizing');
+                    }
+                    controls.e.classList.add('resizing');
                 } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
-                    let rect = self.el.getBoundingClientRect();
-                    let top = rect.top;
-                    let left = rect.left;
-                    self.el.style.marginLeft = 0;
-                    self.el.style.marginTop = 0;
-                    self.el.style.top = top + 'px';
-                    self.el.style.left = left + 'px';
                     // Action
                     controls.type = 'move';
                     // Callback
                     controls.action = function () {
-                        self.top = parseInt(item.style.top);
-                        self.left = parseInt(item.style.left);
+                        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

@@ -8,13 +8,13 @@
     box-sizing: border-box;
     box-shadow: 0 0 12px rgb(0 0 0 / 22%);
     opacity: 1;
-    transition: opacity 0.5s ease;
     will-change: transform;
     border: 1px solid #bbb;
     outline: none;
     margin: 0;
     display: flex;
     flex-direction: column;
+    transition: opacity 0.4s ease, top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
 }
 
 .lm-modal-title {
@@ -75,25 +75,8 @@
     display: none !important;
 }
 
-.lm-modal[minimized="true"] {
-    bottom: 0;
-    top: initial !important;
-    left: initial !important;
-    width: 200px !important;
-    height: 45px !important;
-    min-width: initial;
-    min-height: initial;
-    overflow: hidden;
-    transition: margin 0.2s ease-in-out;
-}
-
-.lm-modal[minimized="true"]::after {
-    content: 'open_in_full';
-}
-
-@keyframes slide-bottom-in {
-    0% { transform: translateY(100%); }
-    100% { transform: translateY(0%); }
+.lm-modal[minimized="true"]:before {
+    content: '\e5d7';
 }
 
 .lm-modal.hide {
@@ -104,11 +87,6 @@
     z-index: 999;
 }
 
-.lm-modal-animation {
-    transform: none;
-    animation: slide-bottom-in 0.4s forwards;
-}
-
 .lm-modal[data-responsive].fullscreen {
     top: 0;
     height: 100% !important;
@@ -116,6 +94,11 @@
 
 .lm-modal.moving {
     cursor: move !important;
+    transition: initial;
+}
+
+.lm-modal.resizing {
+    transition: initial;
 }
 
 .lm-modal-backdrop {
@@ -156,17 +139,35 @@
     top: 0;
     left: 0;
     width: 280px;
-    height: 100vh;
+    height: 100vh !important;
     border-width: 0;
     border-radius: initial;
 }
 
 .lm-modal[position="right"] {
     top: 0;
-    left: initial;
+    left: auto;
     right: 0;
     width: 280px;
-    height: 100vh;
+    height: 100vh !important;
+    border-width: 0;
+    border-radius: initial;
+}
+
+.lm-modal[position="bottom"] {
+    top: initial;
+    left: 0;
+    bottom: 0;
+    width: 100vw !important;
+    height: 280px;
     border-width: 0;
     border-radius: initial;
+}
+
+.lm-modal[minimized="true"] {
+    width: 200px !important;
+    height: 45px !important;
+    min-width: initial;
+    min-height: initial;
+    overflow: hidden;
 }

package/package.json

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