@lemonadejs/modal 2.2.0 → 2.3.0

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

@@ -10,21 +10,42 @@ interface Modal {
 }
 
 interface options {
+    /** Close the modal when it loses the focus */
+    autoclose?: boolean;
+    /** Modal is closed */
     closed?: boolean;
+    /** Modal can be closed */
     closable?: boolean;
+    /** Modal is minimized */
     minimized?: boolean;
+    /** Modal can be minimized */
     minimizable?: boolean;
+    /** Modal can be resized */
     resizable?: boolean;
+    /** Modal can be moved from its original position */
     draggable?: boolean;
+    /** Modal is automatic align center */
     center?: boolean;
+    /** Title of the modal */
     title?: string;
+    /** Width of the modal */
     width?: number;
+    /** Height of the modal */
     height?: number;
+    /** Position top */
     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 {
+    autoclose: boolean;
     closed: boolean;
     closable: boolean;
     minimized: boolean;

package/dist/index.js

@@ -131,6 +131,28 @@ 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';
+        }
+        console.log(limit)
+    }
+
+    const adjustLeft = function() {
+        let self = this;
+        self.el.style.marginLeft = '';
+        let rect = self.el.getBoundingClientRect();
+        // 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 Modal = function (template) {
         let self = this;
 
@@ -156,11 +178,39 @@ if (! lemonade && typeof(require) === 'function') {
                 self.left = (window.innerWidth - self.width) / 2;
             }
 
+            // Dimensions
+            if (self.width) {
+                self.el.style.width = self.width + 'px';
+            }
+            if (self.height) {
+                self.el.style.height = self.height + 'px';
+            }
+            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) {
+                    if (!self.el.contains(e.relatedTarget)) {
+                        self.closed = true;
+                    }
+                }
+            });
+
             // Close and stop propagation
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape' && self.closed === false) {
@@ -176,6 +226,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);
+                    }
+                }
             }
         }
 
@@ -236,7 +295,45 @@ 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;
+                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
+                } 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
+                }
             } else if (self.closable === true && corner === true) {
                 self.closed = true;
             } else if (! self.minimized) {

package/dist/style.css

@@ -2,8 +2,6 @@
     position: absolute;
     min-width: 150px;
     min-height: 120px;
-    width: 300px;
-    height: 260px;
     border-radius: 4px;
     z-index: 9;
     background-color: #fff;
@@ -15,25 +13,23 @@
     will-change: transform;
 }
 
-.lm-modal.moving {
-    cursor: move !important;
+.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 {
@@ -100,7 +96,6 @@
     min-height: 0;
     height: 45px !important;
     top: initial !important;
-    left: initial !important;
     overflow: hidden;
 }
 

package/package.json

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