@lemonadejs/modal 2.3.0 → 2.3.2

package/dist/index.d.ts

@@ -10,8 +10,6 @@ interface Modal {
 }
 
 interface options {
-    /** Close the modal when it loses the focus */
-    autoclose?: boolean;
     /** Modal is closed */
     closed?: boolean;
     /** Modal can be closed */
@@ -38,10 +36,14 @@ interface options {
     left?: number;
     /** Load the content from a remote URL */
     url?: string;
-    /** Ensures modal will be visible on screen */
-    autoadjust?: boolean;
     /** Responsive mode. Default is true */
     responsive?: boolean;
+    /** Bring to front on focus */
+    layers?: boolean;
+    /** Close the modal when it loses the focus */
+    'auto-close'?: boolean;
+    /** Ensures modal will be visible on screen */
+    'auto-adjust'?: boolean;
 }
 
 interface instance {

package/dist/index.js

@@ -1,4 +1,7 @@
-if (! lemonade && typeof(require) === 'function') {
+/**
+ * pin the modal to the left panel
+ */
+if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -14,6 +17,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) {
@@ -131,15 +136,47 @@ 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);
+    }
+
     const adjustTop = function() {
         let self = this;
-        let rect = self.el.getBoundingClientRect();
         self.el.style.marginTop = '';
+        let rect = self.el.getBoundingClientRect();
         let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
         if (limit < 0) {
             self.el.style.marginTop = limit - 10 + 'px';
         }
-        console.log(limit)
     }
 
     const adjustLeft = function() {
@@ -153,6 +190,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 +222,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';
@@ -202,9 +247,14 @@ if (! lemonade && typeof(require) === 'function') {
                 self.el.setAttribute('data-responsive', true);
             }
 
+            // Bring to front on focus
+            if (self.layers !== false) {
+                self.el.classList.add('lm-modal-layers');
+            }
+
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
-                if (self.autoclose === true) {
+                if (isTrue(self['auto-close'])) {
                     if (!self.el.contains(e.relatedTarget)) {
                         self.closed = true;
                     }
@@ -228,7 +278,7 @@ if (! lemonade && typeof(require) === 'function') {
                 self.el.style[property] = self[property] + 'px';
 
                 // Adjust position
-                if (self.autoadjust) {
+                if (isTrue(self['auto-adjust'])) {
                     if (property === 'top') {
                         adjustTop.call(self);
                     } else if (property === 'left') {
@@ -294,47 +344,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 +371,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 +391,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-layers: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.2"
 }

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>