@lemonadejs/modal 5.8.1 → 5.8.3

package/dist/index.js

@@ -7,8 +7,8 @@ if (!lemonade && typeof (require) === 'function') {
 
 ;(function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Modal = factory();
+        typeof define === 'function' && define.amd ? define(factory) :
+            global.Modal = factory();
 }(this, (function () {
 
     class CustomEvents extends Event {
@@ -22,7 +22,7 @@ if (!lemonade && typeof (require) === 'function') {
             if (props) {
                 for (const key in props) {
                     // Avoid assigning if property already exists anywhere on `this`
-                    if (! (key in this)) {
+                    if (!(key in this)) {
                         this[key] = props[key];
                     }
                 }
@@ -31,7 +31,7 @@ if (!lemonade && typeof (require) === 'function') {
     }
 
     // Dispatcher
-    const Dispatch = function(method, type, options) {
+    const Dispatch = function (method, type, options) {
         // Try calling the method directly if provided
         if (typeof method === 'function') {
             let a = Object.values(options);
@@ -58,7 +58,7 @@ if (!lemonade && typeof (require) === 'function') {
      * Send the modal to the front
      * @param container
      */
-    const sendToFront = function(container) {
+    const sendToFront = function (container) {
         let highestXIndex = defaultZIndex;
         for (let i = 0; i < modals.length; i++) {
             const zIndex = parseInt(modals[i].el.style.zIndex);
@@ -73,12 +73,12 @@ if (!lemonade && typeof (require) === 'function') {
      * Send modal to the back
      * @param container
      */
-    const sendToBack = function(container) {
+    const sendToBack = function (container) {
         container.style.zIndex = defaultZIndex;
     }
 
     // Get the coordinates of the action
-    const getCoords = function(e) {
+    const getCoords = function (e) {
         let x;
         let y;
 
@@ -90,11 +90,11 @@ if (!lemonade && typeof (require) === 'function') {
             y = e.clientY;
         }
 
-        return [x,y];
+        return [x, y];
     }
 
     // Get the button status
-    const getButton = function(e) {
+    const getButton = function (e) {
         e = e || window.event;
         if (e.buttons) {
             return e.buttons;
@@ -106,12 +106,12 @@ if (!lemonade && typeof (require) === 'function') {
     }
 
     // Finalize any potential action
-    const mouseUp = function(e) {
+    const mouseUp = function (e) {
         // Finalize all actions
-        if (typeof(controls.action) === 'function') {
+        if (typeof (controls.action) === 'function') {
             controls.action();
         }
-        setTimeout(function() {
+        setTimeout(function () {
             // Remove cursor
             if (controls.e) {
                 controls.e.style.cursor = '';
@@ -126,12 +126,12 @@ if (!lemonade && typeof (require) === 'function') {
         }, 0)
     }
 
-    const mouseMove = function(e) {
-        if (! getButton(e)) {
+    const mouseMove = function (e) {
+        if (!getButton(e)) {
             return false;
         }
         // Get mouse coordinates
-        let [x,y] = getCoords(e);
+        let [x, y] = getCoords(e);
 
         // Move modal
         if (controls.type === 'move') {
@@ -167,7 +167,7 @@ if (!lemonade && typeof (require) === 'function') {
                 if (e.shiftKey) {
                     height = controls.h + (x - controls.x) * (controls.h / controls.w);
                 }
-            } else if (controls.d === 'w-resize' || controls.d === 'nw-resize'|| controls.d === 'sw-resize') {
+            } else if (controls.d === 'w-resize' || controls.d === 'nw-resize' || controls.d === 'sw-resize') {
                 left = controls.l + (x - controls.x);
                 // Do not move further
                 if (left >= controls.l) {
@@ -182,7 +182,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
 
             if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
-                if (! height) {
+                if (!height) {
                     height = controls.h + (y - controls.y);
                 }
             } else if (controls.d === 'n-resize' || controls.d === 'ne-resize' || controls.d === 'nw-resize') {
@@ -210,16 +210,16 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    if (typeof(document) !== "undefined") {
+    if (typeof (document) !== "undefined") {
         document.addEventListener('mouseup', mouseUp);
         document.addEventListener('mousemove', mouseMove);
     }
 
-    const isTrue = function(e) {
+    const isTrue = function (e) {
         return e === true || e === 1 || e === 'true';
     }
 
-    const refreshMinimized = function() {
+    const refreshMinimized = function () {
         let items = minimizedModals;
         let numOfItems = items.length;
         let width = 10;
@@ -239,7 +239,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const delayAction = function(self, action) {
+    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
@@ -247,18 +247,18 @@ if (!lemonade && typeof (require) === 'function') {
             // Remove adjustment
             removeMargin(self);
             // Make sure to continue with minimize
-            setTimeout(function() {
+            setTimeout(function () {
                 // Remove class
                 self.el.classList.remove('action');
                 // Call action
                 action(self);
-            },0)
+            }, 0)
 
             return true;
         }
     }
 
-    const setMini = function(self) {
+    const setMini = function (self) {
         if (delayAction(self, setMini)) {
             return;
         }
@@ -269,10 +269,10 @@ if (!lemonade && typeof (require) === 'function') {
         self.el.top = self.el.offsetTop;
         self.el.left = self.el.offsetLeft;
 
-        if (! self.el.style.top) {
+        if (!self.el.style.top) {
             self.el.style.top = self.el.top + 'px';
         }
-        if (! self.el.style.left) {
+        if (!self.el.style.left) {
             self.el.style.left = self.el.left + 'px';
         }
 
@@ -280,13 +280,13 @@ if (!lemonade && typeof (require) === 'function') {
         self.el.translateX = 0;
 
         // Refresh positions
-        setTimeout(function() {
+        setTimeout(function () {
             refreshMinimized();
             self.minimized = true;
-        },10)
+        }, 10)
     }
 
-    const removeMini = function(self) {
+    const removeMini = function (self) {
         minimizedModals.splice(minimizedModals.indexOf(self), 1);
         self.minimized = false;
         self.el.style.top = self.el.top + 'px';
@@ -306,7 +306,7 @@ if (!lemonade && typeof (require) === 'function') {
         }, 400);
     }
 
-    const removeMargin = function(self) {
+    const removeMargin = function (self) {
         if (self.el.style.marginLeft) {
             let y = self.el.offsetLeft;
             self.el.style.marginLeft = '';
@@ -320,8 +320,8 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const adjustHorizontal = function(self) {
-        if (! isTrue(self['auto-adjust'])) {
+    const adjustHorizontal = function (self) {
+        if (!isTrue(self['auto-adjust'])) {
             return false;
         }
 
@@ -363,8 +363,8 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const adjustVertical = function(self) {
-        if (! isTrue(self['auto-adjust'])) {
+    const adjustVertical = function (self) {
+        if (!isTrue(self['auto-adjust'])) {
             return false;
         }
 
@@ -409,7 +409,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const removeElements = function(root) {
+    const removeElements = function (root) {
         // Keep the DOM elements
         let elements = [];
         if (root) {
@@ -421,7 +421,7 @@ if (!lemonade && typeof (require) === 'function') {
         return elements;
     }
 
-    const appendElements = function(root, elements) {
+    const appendElements = function (root, elements) {
         if (elements && elements.length) {
             while (elements[0]) {
                 root.appendChild(elements.shift());
@@ -429,7 +429,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Modal = function (template, { onchange, onload, track }) {
+    const Modal = function (template, {onchange, onload, track}) {
         let self = this;
         let backdrop = null;
         let elements = null;
@@ -444,7 +444,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
 
         // Make sure keep the state as boolean
-        self.closed = !! self.closed;
+        self.closed = !!self.closed;
 
         // Keep all modals references
         modals.push(self);
@@ -458,9 +458,9 @@ if (!lemonade && typeof (require) === 'function') {
 
         let ignoreEvents = false;
 
-        const click = function(e) {
+        const click = function (e) {
             if (e.target.classList.contains('lm-modal-close')) {
-                self.close({ origin: 'button' });
+                self.close({origin: 'button'});
             }
 
             if (e.target.classList.contains('lm-modal-minimize')) {
@@ -473,13 +473,13 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        const mousemove = function(e) {
+        const mousemove = function (e) {
             if (getButton(e)) {
                 return;
             }
 
             // Get mouse coordinates
-            let [x,y] = getCoords(e);
+            let [x, y] = getCoords(e);
             // Root element of the component
             let item = self.el;
             // Get the position and dimensions
@@ -545,10 +545,10 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        const mousedown = function(e) {
-            if (! self.minimized) {
+        const mousedown = function (e) {
+            if (!self.minimized) {
                 // Get mouse coordinates
-                let [x,y] = getCoords(e);
+                let [x, y] = getCoords(e);
                 controls.x = x;
                 controls.y = y;
                 // Root element of the component
@@ -563,10 +563,10 @@ if (!lemonade && typeof (require) === 'function') {
                 // If is not minimized
                 if (controls.type === 'resize') {
                     // 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';
                     }
                     // This will be the callback when finalize the resize
@@ -602,15 +602,15 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.back = function() {
+        self.back = function () {
             sendToBack(self.el);
         }
 
-        self.front = function() {
+        self.front = function () {
             sendToFront(self.el);
         }
 
-        self.open = function() {
+        self.open = function () {
             if (self.closed === true) {
                 self.closed = false;
                 // Close event
@@ -620,7 +620,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.close = function(options) {
+        self.close = function (options) {
             if (self.closed === false) {
                 self.closed = true;
                 // Close event
@@ -631,17 +631,32 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.isClosed = function() {
+        self.isClosed = function () {
             return self.closed;
         }
 
-        if (! template || typeof(template) !== 'string') {
+        /**
+         * Recalculate the auto-adjust position when the modal dimensions change,
+         * since the margin compensation depends on the current size of the modal.
+         * NOTE: cannot be named refresh, since lemonade registers its own refresh on self
+         */
+        self.refreshPosition = function () {
+            if (self.closed === false) {
+                // Auto adjust
+                queueMicrotask(() => {
+                    adjustHorizontal(self);
+                    adjustVertical(self);
+                });
+            }
+        }
+
+        if (!template || typeof (template) !== 'string') {
             template = '';
         }
 
         // Custom Root Configuration
         self.settings = {
-            getRoot: function() {
+            getRoot: function () {
                 return self.root;
             }
         }
@@ -699,7 +714,7 @@ if (!lemonade && typeof (require) === 'function') {
                 backdrop = document.createElement('div');
                 backdrop.classList.add('lm-modal-backdrop');
                 backdrop.addEventListener('click', () => {
-                    self.close({ origin: 'backdrop' });
+                    self.close({origin: 'backdrop'});
                 });
 
                 if (self.closed === false) {
@@ -709,18 +724,18 @@ if (!lemonade && typeof (require) === 'function') {
 
             // Import content from DOM
             if (self.content) {
-                if (typeof(self.content) === 'string') {
+                if (typeof (self.content) === 'string') {
                     template = self.content;
-                } else if (typeof(self.content) === 'object' && self.content.tagName) {
+                } else if (typeof (self.content) === 'object' && self.content.tagName) {
                     self.root.appendChild(self.content);
                 }
             }
 
             // Focus out of the component
-            self.el.addEventListener('focusout', function(e) {
-                if (! self.el.contains(e.relatedTarget)) {
+            self.el.addEventListener('focusout', function (e) {
+                if (!self.el.contains(e.relatedTarget)) {
                     if (isTrue(self['auto-close'])) {
-                        self.close({ origin: 'focusout' });
+                        self.close({origin: 'focusout'});
                     }
                     // Remove focus
                     self.el.classList.remove('lm-modal-focus');
@@ -728,7 +743,7 @@ if (!lemonade && typeof (require) === 'function') {
             });
 
             // Focus out of the component
-            self.el.addEventListener('focusin', function(e) {
+            self.el.addEventListener('focusin', function (e) {
                 self.el.classList.add('lm-modal-focus');
             });
 
@@ -736,7 +751,7 @@ if (!lemonade && typeof (require) === 'function') {
             self.el.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') {
                     if (self.closed === false) {
-                        self.close({ origin: 'escape' });
+                        self.close({origin: 'escape'});
                         e.preventDefault();
                         e.stopImmediatePropagation();
                     }
@@ -753,7 +768,7 @@ if (!lemonade && typeof (require) === 'function') {
                     .then(response => response.clone().body)
                     .then(body => {
                         let reader = body.getReader();
-                        reader.read().then(({ done, value }) => {
+                        reader.read().then(({done, value}) => {
                             // Add HTML to the modal
                             self.root.innerHTML = new TextDecoder().decode(value.buffer);
                             // Call onload event
@@ -824,10 +839,10 @@ if (!lemonade && typeof (require) === 'function') {
                         self.left = '';
                     }
                 } else {
-                    if (! self.top) {
+                    if (!self.top) {
                         self.top = (window.innerHeight - self.el.offsetHeight) / 2;
                     }
-                    if (! self.left) {
+                    if (!self.left) {
                         self.left = (window.innerWidth - self.el.offsetWidth) / 2;
                     }
                 }
@@ -846,7 +861,7 @@ if (!lemonade && typeof (require) === 'function') {
     }
 
     const Component = function (root, options) {
-        if (typeof(root) === 'object') {
+        if (typeof (root) === 'object') {
             // Remove elements from the DOM
             let elements = removeElements(root);
             // Create the modal
@@ -861,7 +876,7 @@ if (!lemonade && typeof (require) === 'function') {
     }
 
     // Create LemonadeJS Component
-    lemonade.setComponents({ Modal: Modal });
+    lemonade.setComponents({Modal: Modal});
     // Create Web Component
     lemonade.createWebComponent('modal', Modal)
 

package/package.json

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