@lemonadejs/modal 2.2.1 → 2.3.1

package/README.md

@@ -83,21 +83,23 @@ You can configure things such as position, size, and functionalities.
 
 #### Modal Properties
 
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| title? | string | The header title of the modal |
-| height? | number | The height of the modal in pixels |
-| width? | number | The width of the modal in pixels |
-| top? | number | The vertical position of the modal within its container in pixels |
-| left? | number | The horizontal position of the modal within its container in pixels |
-| draggable? | boolean | Determines if the modal can be dragged |
-| resizable? | boolean | Determines if the modal can be resized |
-| closed? | boolean | Controls the open and close state of the modal |
-| closable? | boolean | Enables the close button |
-| minimized? | boolean | Controls the minimized state of the modal |
-| minimizable? | boolean | Enables the minimize button |
-| center? | boolean | Enables rendering the modal in the center of its parent container |
-| url? | string | The URL from which to fetch and render content |
+| Property     | Type    | Description                                                        |
+|--------------|---------|--------------------------------------------------------------------|
+| title?       | string  | The header title of the modal                                      |
+| height?      | number  | The height of the modal in pixels                                  |
+| width?       | number  | The width of the modal in pixels                                   |
+| top?         | number  | The vertical position of the modal within its container in pixels  |
+| left?        | number  | The horizontal position of the modal within its container in pixels |
+| draggable?   | boolean | Determines if the modal can be dragged                             |
+| resizable?   | boolean | Determines if the modal can be resized                             |
+| closed?      | boolean | Controls the open and close state of the modal                     |
+| closable?    | boolean | Enables the close button                                           |
+| minimized?   | boolean | Controls the minimized state of the modal                          |
+| minimizable? | boolean | Enables the minimize button                                        |
+| center?      | boolean | Enables rendering the modal in the center of its parent container  |
+| url?         | string  | The URL from which to fetch and render content                     |
+| autoadjust?  | boolean | Adjust the position when the modal is outside the viewport         |
+| autoclose?   | boolean | Close when the modal loses focus                                   |
 
 #### Modal Events
 
@@ -113,4 +115,4 @@ The LemonadeJS Modal is released under the MIT.
 ## Other Tools
 
 -   [jSuites](https://jsuites.net/v4/)
--   [Jspreadsheet](https://jspreadsheet.com)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -36,6 +36,12 @@ interface options {
     top?: number;
     /** Position Left */
     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;
 }
 
 interface instance {

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) {
@@ -131,6 +133,31 @@ if (! lemonade && typeof(require) === 'function') {
         }
     }
 
+    const adjustTop = function() {
+        let self = this;
+        let rect = self.el.getBoundingClientRect();
+        self.el.style.marginTop = '';
+        let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
+        if (limit < 0) {
+            self.el.style.marginTop = limit - 10 + 'px';
+        }
+    }
+
+    const adjustLeft = function() {
+        let self = this;
+        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) {
+            self.el.style.marginLeft = limit - 10 + 'px';
+        }
+    }
+
+    const isTrue = function(e) {
+        return e === true || e === 1 || e === 'true';
+    }
+
     const Modal = function (template) {
         let self = this;
 
@@ -156,11 +183,34 @@ if (! lemonade && typeof(require) === 'function') {
                 self.left = (window.innerWidth - self.width) / 2;
             }
 
+            // 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';
+            }
+            if (self.left) {
+                self.el.style.left = self.left + 'px';
+            }
+
             // Full screen
             if (self.height > 260) {
                 self.el.classList.add('fullscreen');
             }
 
+            // Responsive
+            if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
+                self.el.setAttribute('data-responsive', true);
+            }
+
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
                 if (self.autoclose === true) {
@@ -185,6 +235,15 @@ if (! lemonade && typeof(require) === 'function') {
                 self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
             } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
                 self.el.style[property] = self[property] + 'px';
+
+                // Adjust position
+                if (self.autoadjust) {
+                    if (property === 'top') {
+                        adjustTop.call(self);
+                    } else if (property === 'left') {
+                        adjustLeft.call(self);
+                    }
+                }
             }
         }
 
@@ -228,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);
@@ -244,9 +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) {
+            if (isTrue(self.minimizable) && corner === true) {
                 self.minimized = ! self.minimized;
-            } else if (self.closable === true && corner === true) {
+                // Handles minimized modal positioning
+                if (self.minimized) {
+                    setMini(self);
+                } else {
+                    removeMini(self);
+                }
+            } else if (isTrue(self.closable) && corner === true) {
                 self.closed = true;
             } else if (! self.minimized) {
                 // If is not minimized
@@ -265,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
@@ -285,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,39 +1,39 @@
 .lm-modal {
     position: absolute;
-    min-width: 150px;
-    min-height: 120px;
-    width: 300px;
-    height: 260px;
-    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.moving {
-    cursor: move !important;
+.lm-modal:focus {
+    z-index: 10;
+}
+
+.lm-modal[data-responsive] {
+    width: 100% !important;
+    bottom: 0;
+    left: 0;
+    border: 0;
+    border-radius: 0;
+    transform: none;
+    animation: slide-bottom-in 0.4s forwards;
 }
 
-@media only screen and (max-width : 800px) {
-    .lm-modal {
-        width: 100% !important;
-        bottom: 0;
-        left: 0;
-        border: 0;
-        border-radius: 0;
-        transform: none;
-        animation: slide-bottom-in 0.4s forwards;
-    }
+.lm-modal[data-responsive].fullscreen {
+    top: 0;
+    height: 100% !important;
+}
 
-    .lm-modal.fullscreen {
-        top: 0;
-        height: 100% !important;
-    }
+.lm-modal.moving {
+    cursor: move !important;
 }
 
 .lm-modal-picker {
@@ -57,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;
@@ -96,12 +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.2.1"
+    "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>