@lemonadejs/modal 2.3.0 → 2.3.1

package/dist/index.js

@@ -1,4 +1,4 @@
-if (! lemonade && typeof(require) === 'function') {
+if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -14,6 +14,8 @@ if (! lemonade && typeof(require) === 'function') {
     let controls = {};
     // Width of the border
     let cornerSize = 10;
+    // Container with minimized modals
+    const minimizedModals = [];
 
     // Get the coordinates of the action
     const getCoords = function(e) {
@@ -139,13 +141,12 @@ if (! lemonade && typeof(require) === 'function') {
         if (limit < 0) {
             self.el.style.marginTop = limit - 10 + 'px';
         }
-        console.log(limit)
     }
 
     const adjustLeft = function() {
         let self = this;
-        self.el.style.marginLeft = '';
         let rect = self.el.getBoundingClientRect();
+        self.el.style.marginLeft = '';
         // Make sure component will be visible on page
         let limit = document.documentElement.clientWidth - (rect.left +  rect.width);
         if (limit < 0) {
@@ -153,6 +154,10 @@ if (! lemonade && typeof(require) === 'function') {
         }
     }
 
+    const isTrue = function(e) {
+        return e === true || e === 1 || e === 'true';
+    }
+
     const Modal = function (template) {
         let self = this;
 
@@ -181,9 +186,13 @@ 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;
             }
             if (self.top) {
                 self.el.style.top = self.top + 'px';
@@ -278,6 +287,39 @@ if (! lemonade && typeof(require) === 'function') {
             }
         }
 
+        const refreshMinimized = function() {
+            let items = minimizedModals;
+            let numOfItems = items.length;
+            let width = 0;
+            let height = 5;
+            for (let i = 0; i < numOfItems; i++) {
+                let item = items[i];
+                item.el.style.marginLeft = width;
+                item.el.style.marginBottom = height;
+                width += 205;
+
+                if (document.body.offsetWidth - width < 205) {
+                    width = 0;
+                    height += 50;
+                }
+            }
+        }
+
+        const setMini = function(self) {
+            // Minimize modals
+            minimizedModals.push(self);
+            // Refresh positions
+            refreshMinimized.call(self);
+        }
+
+        const removeMini = function(self) {
+            minimizedModals.splice(minimizedModals.indexOf(self), 1);
+            self.el.style.marginLeft = '';
+            self.el.style.marginBottom = '';
+            // Refresh positions
+            refreshMinimized.call(self);
+        }
+
         self.mousedown = function(e) {
             // Get mouse coordinates
             let [x,y] = getCoords(e);
@@ -294,47 +336,15 @@ if (! lemonade && typeof(require) === 'function') {
 
             let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
 
-            if (self.minimizable === true && corner === true) {
-                self.minimized = ! self.minimized;                
-
+            if (isTrue(self.minimizable) && corner === true) {
+                self.minimized = ! self.minimized;
                 // Handles minimized modal positioning
                 if (self.minimized) {
-                    if (!lemonade.minimizedModals) {
-                        lemonade.minimizedModals = []
-                    }
-                    
-                    lemonade.minimizedModals.push(self)
-                    
-                    let rowIndex = Math.floor((lemonade.minimizedModals.length - 1) / 5)
-                    let row = lemonade.minimizedModals.filter((_, i) => rowIndex === Math.floor((i) / 5))
-                    
-                    self.left = self.el.offsetLeft
-                    self.el.style.left = 10 + ((row.length - 1) * (self.width || 310))
-                    self.el.style.marginBottom = rowIndex * 50
+                    setMini(self);
                 } else {
-                    let index = lemonade.minimizedModals.indexOf(self)
-                    let right = lemonade.minimizedModals.slice(index + 1)
-
-                    lemonade.minimizedModals.splice(index, 1)
-
-                    for (let i = 0; i < right.length; i++) {
-                        let rowIndex = Math.floor((index + i + 1) / 5)
-                        let column = ((i + index + 1) % 5)
-
-                        if (rowIndex !== 0 && column === 0) {
-                            right[i].el.style.left = 10 + ((5 - 1) * (self.width || 310))
-                            right[i].el.style.marginBottom = 10 + ((rowIndex - 1) * 50)
-                        } else if (rowIndex !== 0) {
-                            right[i].el.style.left = right[i].el.offsetLeft - (self.width || 310)
-                        } else {
-                            right[i].el.style.left = right[i].el.offsetLeft - (self.width || 310)
-                        }
-                    }
-
-                    self.el.style.left = 'initial'
-                    self.el.style.marginBottom = 0
+                    removeMini(self);
                 }
-            } else if (self.closable === true && corner === true) {
+            } else if (isTrue(self.closable) && corner === true) {
                 self.closed = true;
             } else if (! self.minimized) {
                 // If is not minimized
@@ -353,7 +363,7 @@ if (! lemonade && typeof(require) === 'function') {
                     }
 
                     e.preventDefault();
-                } else if (self.draggable === true && self.title && y - rect.top < 40) {
+                } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
                     // Action
                     controls.type = 'move';
                     // Callback
@@ -373,10 +383,21 @@ if (! lemonade && typeof(require) === 'function') {
 
     return function (root, options) {
         if (typeof(root) === 'object') {
-            let template = root.innerHTML;
-            root.innerHTML = '';
-
-            lemonade.render(Modal, root, options, template)
+            // Keep the DOM elements
+            let elements = [];
+            while (root.firstChild) {
+                elements.push(root.firstChild);
+                root.firstChild.remove();
+            }
+            // Create the modal
+            let e = lemonade.render(Modal, root, options, '');
+            // Append any elements inside the modal
+            if (elements.length) {
+                while (elements[0]) {
+                    e.appendChild(elements[0]);
+                    elements.shift();
+                }
+            }
             return options;
         } else {
             return Modal.call(this, root)

package/dist/style.css

@@ -1,16 +1,20 @@
 .lm-modal {
     position: absolute;
-    min-width: 150px;
-    min-height: 120px;
-    border-radius: 4px;
+    min-width: 300px;
+    min-height: 240px;
+    border-radius: 5px;
     z-index: 9;
     background-color: #fff;
-    border: 1px solid #ccc;
     box-sizing: border-box;
-    box-shadow: 0 0 4px 3px rgba(80,80,80,.1);
+    box-shadow: 1px 1px 5px 1px rgba(0,0,0,.1);
     opacity: 1;
     transition: opacity 0.5s ease;
     will-change: transform;
+    border: 1px solid #e9e9e9;
+}
+
+.lm-modal:focus {
+    z-index: 10;
 }
 
 .lm-modal[data-responsive] {
@@ -53,7 +57,7 @@
     display: block;
     position: relative;
     width: 100%;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #e9e9e9;
     padding: 10px;
     box-sizing: border-box;
     font-size: 1.2em;
@@ -92,11 +96,15 @@
 }
 
 .lm-modal[minimized="true"] {
-    bottom: 10px;
-    min-height: 0;
-    height: 45px !important;
+    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 {

package/package.json

@@ -16,5 +16,5 @@
         "lemonadejs": "^3.4.0"
     },
     "main": "dist/index.js",
-    "version": "2.3.0"
+    "version": "2.3.1"
 }

package/src/index.html

@@ -1,20 +0,0 @@
-<script src="https://cdn.jsdelivr.net/npm/lemonadejs@3.3.1/dist/lemonade.min.js"></script>
-
-<script type="text/javascript" src="../dist/index.js"></script>
-<link rel="stylesheet" href="../dist/style.css" />
-
-<div id="root">
-    <div>
-
-    </div>
-</div>
-
-<script>
-const root = document.getElementById("root")
-
-Modal(root, {
-    title: 'Nicolas Jesse',
-    minimizable: true,
-    height: 350,
-})
-</script>