@lemonadejs/modal 2.7.2 → 2.8.1

package/README.md

@@ -62,6 +62,65 @@ export default function App() {
 }
 ```
 
+Quick example with React
+
+```jsx
+import React, { useRef } from 'react';
+import Modal from '@lemonadejs/modal/dist/react';
+import '@lemonadejs/modal/dist/style.css';
+
+export default function App() {
+    const modal = useRef();
+
+    const toggle = () => {
+        modal.current.closed = !modal.current.closed;
+    };
+
+    return (
+        <div>
+            <Modal center={true} width={400} height={200} title="My window modal" ref={modal}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '10px' }}>
+                <p>Quick example!</p>
+                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
+            </div>
+            </Modal>
+            <input type="button" value="Toggle Modal" id="button" onClick={toggle} />
+        </div>
+    );
+}
+```
+
+Quick example with Vue
+
+```vue
+<template>
+    <Modal ref='modal' :center="true" :width="400" :height="200" title="My window modal" >
+     <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
+       <p>Quick example!</p>
+       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
+     </div>
+    </Modal>
+     <input type="button" value="Toggle Modal" id="button" @click="toggleModal" />
+ </template>
+ <script>
+ import Modal from '@lemonadejs/modal/dist/vue';
+ import '@lemonadejs/modal/dist/style.css'
+ 
+ export default {
+     name: 'App',
+     components: {
+         Modal,
+     },
+     methods: {
+     toggleModal() {
+        console.log(this.$refs.modal);
+       this.$refs.modal.current.closed = !this.$refs.modal.current.closed;
+     }
+   }
+ };
+ </script>
+```
+
 Programmatical - Quick example with Javascript 
 
 ```html
@@ -139,5 +198,5 @@ The LemonadeJS Modal is released under the MIT.
 
 ## Other Tools
 
--   [jSuites](https://jsuites.net/v4/)
+-   [jSuites](https://jsuites.net/docs)
 -   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.js

@@ -280,18 +280,23 @@ if (!lemonade && typeof (require) === 'function') {
 
         if (self.position) {
             if (self.position === 'absolute') {
-                viewportWidth = document.documentElement.offsetWidth;
+                let w = document.documentElement.offsetWidth;
+                if (w > viewportWidth) {
+                    //viewportWidth = w;
+                }
             } else if (self.position !== 'center') {
                 margin = 0;
             }
         }
 
-        let rightEdgeDistance = viewportWidth - (self.el.offsetLeft + self.el.offsetWidth);
+        let el = self.el.getBoundingClientRect();
+
+        let rightEdgeDistance = viewportWidth - (el.left + el.width);
         let transformX = 0;
 
         if (self.position === 'absolute') {
-            if (rightEdgeDistance < 5) {
-                transformX = (-1 * self.el.offsetWidth) - margin;
+            if (rightEdgeDistance < 0) {
+                transformX = rightEdgeDistance - margin - 10; // 10 is the scroll width
             }
         } else {
             if (rightEdgeDistance < 0) {
@@ -299,8 +304,8 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        if (self.el.offsetLeft < 0) {
-            transformX = margin - self.el.offsetLeft;
+        if (el.left < 0) {
+            transformX = margin - el.left;
         }
         if (transformX !== 0) {
             self.el.style.marginLeft = transformX + 'px';
@@ -318,18 +323,23 @@ if (!lemonade && typeof (require) === 'function') {
 
         if (self.position) {
             if (self.position === 'absolute') {
-                viewportHeight = document.documentElement.offsetHeight;
+                let h = document.documentElement.offsetHeight;
+                if (h > viewportHeight) {
+                    //viewportHeight = h;
+                }
             } else if (self.position !== 'center') {
                 margin = 0;
             }
         }
 
-        let bottomEdgeDistance = viewportHeight - (self.el.offsetTop + self.el.offsetHeight);
+        let el = self.el.getBoundingClientRect();
+
+        let bottomEdgeDistance = viewportHeight - (el.top + el.height);
         let transformY = 0;
 
         if (self.position === 'absolute') {
             if (bottomEdgeDistance < 5) {
-                transformY = (-1 * self.el.offsetHeight) - margin;
+                transformY = (-1 * el.height) - margin - 20;
             }
         } else {
             if (bottomEdgeDistance < 0) {
@@ -337,8 +347,8 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        if (self.el.offsetTop < 0) {
-            transformY = margin - self.el.offsetTop;
+        if (el.top < 0) {
+            transformY = margin - el.top;
         }
         if (transformY !== 0) {
             self.el.style.marginTop = transformY + 'px';
@@ -428,7 +438,7 @@ if (!lemonade && typeof (require) === 'function') {
             if (self.backdrop === true) {
                 backdrop = document.createElement('div');
                 backdrop.classList.add('lm-modal-backdrop');
-                backdrop.addEventListener('mousedown', function() {
+                backdrop.addEventListener('click', function() {
                     self.closed = true;
                 })
             }
@@ -565,50 +575,18 @@ if (!lemonade && typeof (require) === 'function') {
         }
 
         self.mousedown = function(e) {
-            // Get mouse coordinates
-            let [x,y] = getCoords(e);
-            controls.x = x;
-            controls.y = y;
-            // Root element of the component
-            let item = self.el;
-            // Get the position and dimensions
-            let rect = item.getBoundingClientRect();
-
-            controls.e = item;
-            controls.w = rect.width;
-            controls.h = rect.height;
-
-            let corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 34;
-
-            // Check if the click in on close
-            if (isTrue(self.closable)) {
-                if (corner) {
-                    self.closed = true;
-
-                    if (isTrue(self.minimizable)) {
-                        removeMini(self);
-                    }
-                    return;
-                }
-
-                corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 65;
-            }
-
-            // Check if the click in on minimize
-            if (isTrue(self.minimizable)) {
-                if (corner) {
-                    // Handles minimized modal positioning
-                    if (self.minimized === true) {
-                        removeMini(self);
-                    } else {
-                        setMini(self);
-                    }
-
-                    return;
-                }
-            }
-
             if (! self.minimized) {
+                // Get mouse coordinates
+                let [x,y] = getCoords(e);
+                controls.x = x;
+                controls.y = y;
+                // Root element of the component
+                let item = self.el;
+                // Get the position and dimensions
+                let rect = item.getBoundingClientRect();
+                controls.e = item;
+                controls.w = rect.width;
+                controls.h = rect.height;
                 // If is not minimized
                 if (controls.type === 'resize') {
                     // Make sure the width and height is defined for the modal
@@ -642,6 +620,41 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
+        self.click = function(e) {
+            // Get mouse coordinates
+            let [x,y] = getCoords(e);
+            // Get the position and dimensions
+            let rect = self.el.getBoundingClientRect();
+            // Right
+            let right = rect.width - (x - rect.left);
+            // Corner
+            let corner = (y - rect.top) < 40 && right > 10 && right < 34;
+            // Check if the click in on close
+            if (isTrue(self.closable)) {
+                if (corner) {
+                    self.closed = true;
+
+                    if (isTrue(self.minimizable)) {
+                        removeMini(self);
+                    }
+                    return;
+                }
+
+                corner = (y - rect.top) < 40 && right > 10 && right < 65;
+            }
+            // Check if the click in on minimize
+            if (isTrue(self.minimizable)) {
+                if (corner) {
+                    // Handles minimized modal positioning
+                    if (self.minimized === true) {
+                        removeMini(self);
+                    } else {
+                        setMini(self);
+                    }
+                }
+            }
+        }
+
         self.open = function() {
             if (self.closed === true) {
                 self.closed = false;
@@ -654,7 +667,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
+        return `<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown" onmousemove="self.mousemove" onclick="self.click" tabindex="-1">
             <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
             <div>${template}</div>
         </div>`

package/dist/style.css

@@ -4,27 +4,27 @@
     min-height: 240px;
     border-radius: 5px;
     z-index: 15;
-    background-color: #fff;
+    background-color: var(--lm-background-color, #fff);
     box-sizing: border-box;
     box-shadow: 0 0 12px rgb(0 0 0 / 22%);
     opacity: 1;
     will-change: transform;
-    border: 1px solid #bbb;
+    border: 1px solid var(--lm-border-color, #ccc);
     outline: none;
     margin: 0;
     display: flex;
     flex-direction: column;
     transition: opacity 0.4s ease, top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
+    color: var(--lm-font-color, #000);
 }
 
 .lm-modal-title {
     width: 100%;
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid  var(--lm-border-color, #ccc);
     padding: 10px;
     box-sizing: border-box;
     font-size: 1.2em;
     line-height: 24px;
-    background: #fff;
     user-select: none;
     display: flex;
     border-radius: 5px;
@@ -170,4 +170,4 @@
     min-width: initial;
     min-height: initial;
     overflow: hidden;
-}
+}

package/package.json

@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.1.1"
+        "lemonadejs": "^4.2.2"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "2.7.2"
+    "version": "2.8.1"
 }