@lemonadejs/modal 2.0.4 → 2.1.0

package/README.md

@@ -1,4 +1,4 @@
-# Javascript Modal
+# LemonadeJS Modal
 
 [Official website and documentation is here](https://lemonadejs.net/components/modal)
 
@@ -26,7 +26,7 @@ $ npm install @lemonadejs/modal
 
 ### CDN
 
-To use data grid via a CDN, include the following script tags in your HTML file:
+To use modal via a CDN, include the following script tags in your HTML file:
 
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
@@ -93,7 +93,9 @@ You can configure things such as position, size, and functionalities.
 | 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 | Disables the ability to close 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 |
 

package/dist/index.d.ts

@@ -12,6 +12,8 @@ interface Modal {
 interface options {
     closed?: boolean;
     closable?: boolean;
+    minimized?: boolean;
+    minimizable?: boolean;
     resizable?: boolean;
     draggable?: boolean;
     center?: boolean;
@@ -25,6 +27,8 @@ interface options {
 interface instance {
     closed: boolean;
     closable: boolean;
+    minimized: boolean;
+    minimizable: boolean;
     resizable: boolean;
     draggable: boolean;
     center: boolean;

package/dist/index.js

@@ -1,5 +1,5 @@
 if (! lemonade && typeof(require) === 'function') {
-    var lemonade = require('lemonadejs');
+    var lemonade = require('../../../dist/lemonade');
 }
 
 ;(function (global, factory) {
@@ -7,182 +7,112 @@ if (! lemonade && typeof(require) === 'function') {
     typeof define === 'function' && define.amd ? define(factory) :
     global.Modal = factory();
 }(this, (function () {
+
+    // State of the resize and move modal
     let state = {};
-    let editorAction;
+    // Internal controls of the action of resize and move
+    let controls = {};
     // Width of the border
     let cornerSize = 10;
 
-    // Events
-    const mouseDown = function(e) {
-        let item = e.target.closest('.lm-modal');
-        if (item !== null) {
-            // Keep the tracking information
-            let x;
-            let y;
-            let rect = item.getBoundingClientRect();
-
-            if (e.changedTouches && e.changedTouches[0]) {
-                x = e.changedTouches[0].clientX;
-                y = e.changedTouches[0].clientY;
-            } else {
-                x = e.clientX;
-                y = e.clientY;
-            }
-
-            if (item.self.closable === true && rect.width - (x - rect.left) < 40 && (y - rect.top) < 40) {
-                item.self.closed = true;
-            } else {
-                editorAction = {
-                    e: item,
-                    x: x,
-                    y: y,
-                    w: rect.width,
-                    h: rect.height,
-                    d: item.style.cursor,
-                    resizing: !!item.style.cursor,
-                    actioned: false,
-                    s: item.self,
-                }
-
-                // Make sure width and height styling is OK
-                if (!e.target.style.width) {
-                    item.style.width = rect.width + 'px';
-                }
+    // Get the coordinates of the action
+    const getCoords = function(e) {
+        let x;
+        let y;
 
-                if (!item.style.height) {
-                    item.style.height = rect.height + 'px';
-                }
+        if (e.changedTouches && e.changedTouches[0]) {
+            x = e.changedTouches[0].clientX;
+            y = e.changedTouches[0].clientY;
+        } else {
+            x = e.clientX;
+            y = e.clientY;
+        }
 
-                // Remove any selection from the page
-                let s = window.getSelection();
-                if (s.rangeCount) {
-                    for (let i = 0; i < s.rangeCount; i++) {
-                        s.removeRange(s.getRangeAt(i));
-                    }
-                }
+        return [x,y];
+    }
 
-                e.preventDefault();
-                e.stopPropagation();
-            }
+    // Get the button status
+    const getButton = function(e) {
+        e = e || window.event;
+        if (e.buttons) {
+            return e.buttons;
+        } else if (e.button) {
+            return e.button;
+        } else {
+            return e.which;
         }
     }
 
+    // Finalize any potential action
     const mouseUp = function(e) {
-        if (editorAction && editorAction.e) {
-            // Element
-            if (editorAction.resizing) {
-                let w = parseInt(editorAction.e.style.width);
-                let h = parseInt(editorAction.e.style.height)
-                editorAction.s.width = w;
-                editorAction.s.height = h;
-            } else {
-                let t = parseInt(editorAction.e.style.top);
-                let l = parseInt(editorAction.e.style.left)
-                editorAction.s.top = t;
-                editorAction.s.left = l;
-            }
-
-            if (typeof(editorAction.e.refresh) == 'function') {
-                state.actioned = true;
-                editorAction.e.refresh.call(editorAction.s);
-            }
-
-            editorAction.e.style.cursor = '';
+        // Finalize all actions
+        if (typeof(controls.action) === 'function') {
+            controls.action();
         }
-
-        // Reset
+        // Reset controls
+        controls = {};
+        // Reset state controls
         state = {
             x: null,
             y: null,
         }
-
-        editorAction = false;
     }
 
     const mouseMove = function(e) {
-        if (editorAction) {
-            let x = e.clientX || e.pageX;
-            let y = e.clientY || e.pageY;
-
-            // Action on going
-            if (! editorAction.resizing && editorAction.s.draggable === true) {
-                if (state && state.x == null && state.y == null) {
-                    state.x = x;
-                    state.y = y;
-                }
-
-                let dx = x - state.x;
-                let dy = y - state.y;
-                let top = editorAction.e.offsetTop + dy;
-                let left = editorAction.e.offsetLeft + dx;
-
-                // Update position
-                editorAction.top = top
-                editorAction.left = left
-                editorAction.e.style.top = top + 'px';
-                editorAction.e.style.left = left + 'px';
-                editorAction.e.style.cursor = "move";
-
+        if (! getButton(e)) {
+            return false;
+        }
+        // Get mouse coordinates
+        let [x,y] = getCoords(e);
 
+        // Move modal
+        if (controls.type === 'move') {
+            if (state && state.x == null && state.y == null) {
                 state.x = x;
                 state.y = y;
-                state.top = top
-                state.left = left
-
-                // Update element
-                if (typeof(editorAction.e.refresh) == 'function') {
-                    state.actioned = true;
-                    editorAction.e.refresh.call(editorAction.s, 'position', top, left);
-                }
-            } else {
-                let width = null;
-                let height = null;
-                let newHeight = null;
-
-                if (editorAction.d === 'e-resize' || editorAction.d === 'ne-resize' || editorAction.d === 'se-resize') {
-                    // Update width
-                    width = editorAction.w + (x - editorAction.x);
-                    editorAction.e.style.width = width + 'px';
-
-                    // Update Height
-                    if (e.shiftKey) {
-                        newHeight = (x - editorAction.x) * (editorAction.h / editorAction.w);
-                        height = editorAction.h + newHeight;
-                        editorAction.e.style.height = height + 'px';
-                    } else {
-                        newHeight = false;
-                    }
-                }
-
-                if (! newHeight) {
-                    if (editorAction.d === 's-resize' || editorAction.d === 'se-resize' || editorAction.d === 'sw-resize') {
-                        height = editorAction.h + (y - editorAction.y);
-                        editorAction.e.style.height = height + 'px';
-                    }
-                }
+            }
 
-                // Update element
-                if (typeof(editorAction.e.refresh) == 'function') {
-                    state.actioned = true;
-                    editorAction.e.refresh.call(editorAction.s, 'dimensions', width, height);
+            let dx = x - state.x;
+            let dy = y - state.y;
+            let top = controls.e.offsetTop + dy;
+            let left = controls.e.offsetLeft + dx;
+
+            // Update position
+            controls.top = top
+            controls.left = left
+            controls.e.style.top = top + 'px';
+            controls.e.style.left = left + 'px';
+            controls.e.style.cursor = "move";
+
+
+            state.x = x;
+            state.y = y;
+            state.top = top
+            state.left = left
+        } else if (controls.type === 'resize') {
+            let width = null;
+            let height = null;
+            let newHeight = null;
+
+            if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
+                // Update width
+                width = controls.w + (x - controls.x);
+                controls.e.style.width = width + 'px';
+
+                // Update Height
+                if (e.shiftKey) {
+                    newHeight = (x - controls.x) * (controls.h / controls.w);
+                    height = controls.h + newHeight;
+                    controls.e.style.height = height + 'px';
+                } else {
+                    newHeight = false;
                 }
             }
-        } else {
-            let item = e.target.closest('.lm-modal');
-            if (item !== null) {
-                if (item.self && item.self.resizable === true) {
-                    let rect = item.getBoundingClientRect();
-                    if (rect.height - (e.clientY - rect.top) < cornerSize) {
-                        if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                            item.style.cursor = 'se-resize';
-                        } else {
-                            item.style.cursor = 's-resize';
-                        }
-                    } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                        item.style.cursor = 'e-resize';
-                    } else {
-                        item.style.cursor = '';
-                    }
+
+            if (! newHeight) {
+                if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
+                    height = controls.h + (y - controls.y);
+                    controls.e.style.height = height + 'px';
                 }
             }
         }
@@ -191,28 +121,18 @@ if (! lemonade && typeof(require) === 'function') {
     document.addEventListener('mouseup', mouseUp);
     document.addEventListener('mousemove', mouseMove);
 
-    const Modal = function (template) {
-        let self = this;
-
-        // Default values
-        if (typeof(self.title) === 'undefined') {
-            self.title = '';
-        }
-        if (typeof(self.closed) === 'undefined') {
-            self.closed = false;
-        }
-        if (typeof(self.closable) === 'undefined') {
-            self.closable = false;
+    // Dispatcher
+    const Dispatch = function(type, option){
+        if (typeof this[type] === 'function') {
+            this[type](this, option)
         }
+    }
 
-        // Dispatcher
-        const Dispatch = (type, option) => {
-            if (typeof self[type] === 'function') {
-                self[type](self, option)
-            }
-        }
+    const Modal = function (template) {
+        let self = this;
 
-        self.mousedown = mouseDown;
+        // Make sure keep the state as boolean
+        self.closed = !!self.closed;
 
         self.onload = function() {
             if (self.url) {
@@ -233,29 +153,115 @@ if (! lemonade && typeof(require) === 'function') {
                 self.left = (window.innerWidth - self.width) / 2;
             }
 
-            // Make sure the instance of the self is available via the DOM element
-            self.el.self = self;
+            // Full screen
+            if (self.height > 260) {
+                self.el.classList.add('fullscreen');
+            }
 
-            // Close
+            // Close and stop propagation
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape' && self.closed === false) {
                     self.closed = true;
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
                 }
             });
-
-            // Full screen
-            if (self.height > 260) {
-                self.el.classList.add('fullscreen');
-            }
         }
 
         self.onchange = function(property) {
             if (property === 'closed') {
-                self.closed ? Dispatch('onclose') : Dispatch('onopen');
+                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';
+            }
+        }
+
+        self.mousemove = function(e) {
+            if (getButton(e)) {
+                return;
+            }
+
+            // Root element of the component
+            let item = self.el;
+            // Get the position and dimensions
+            let rect = item.getBoundingClientRect();
+
+            controls = {
+                type: null,
+                e: item,
+                w: rect.width,
+                h: rect.height,
+            }
+
+            // When resizable
+            if (self.resizable === true) {
+                if (rect.height - (e.clientY - rect.top) < cornerSize) {
+                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                        item.style.cursor = 'se-resize';
+                    } else {
+                        item.style.cursor = 's-resize';
+                    }
+                } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                    item.style.cursor = 'e-resize';
+                } else {
+                    item.style.cursor = '';
+                }
+
+                if (item.style.cursor) {
+                    controls.type = 'resize';
+                    controls.d = item.style.cursor;
+                } else {
+                    controls.type = null;
+                    controls.d = null;
+                }
+            }
+        }
+
+        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();
+            let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
+
+            if (self.closable === true && corner === true) {
+                self.closed = true;
+            } else if (self.minimizable === true && corner === true) {
+                self.minimized = ! item.lemon.self.minimized;
+            } else {
+                if (controls.type === 'resize') {
+                    // This will be the callback when finalize the resize
+                    controls.action = function() {
+                        self.width = parseInt(item.style.width);
+                        self.height = parseInt(item.style.height);
+                    }
+                    // Make sure the width and height is defined for the modal
+                    if (!item.style.width) {
+                        item.style.width = controls.w + 'px';
+                    }
+                    if (!item.style.height) {
+                        item.style.height = controls.h + 'px';
+                    }
+                } else {
+                    // Modal is draggable by the title
+                    if (self.draggable === true && self.title && y - rect.top < 40) {
+                        // Action
+                        controls.type = 'move';
+                        // Callback
+                        controls.action = function() {
+                            self.top = parseInt(item.style.top);
+                            self.left = parseInt(item.style.left);
+                        }
+                    }
+                }
             }
         }
 
-        return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" :closable="self.closable" style="width: {{self.width}}px; height: {{self.height}}px; top: {{self.top}}px; left: {{self.left}}px;" onmousedown="self.mousedown(e)" tabindex="-1">${template}</div>`
+        return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" :closable="self.closable" :minimized="self.minimized" :minimizable="self.minimizable" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">${template}</div>`
     }
 
     lemonade.setComponents({ Modal: Modal });

package/dist/style.css

@@ -10,6 +10,8 @@
     border: 1px solid #ccc;
     box-sizing: border-box;
     box-shadow: 0 0 4px 3px rgba(80,80,80,.1);
+    opacity: 1;
+    transition: opacity 0.5s ease;
 }
 
 @media only screen and (max-width : 800px) {
@@ -57,15 +59,27 @@
     line-height: 24px;
 }
 
+.lm-modal::after {
+    font-family: 'Material Icons';
+    cursor: pointer;
+}
+
 .lm-modal[closable="true"]::after {
     content: 'close';
-    font-family: 'Material Icons';
     display: block;
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 24px;
-    cursor: pointer;
+}
+
+.lm-modal[minimizable="true"]::after {
+    content: '\2500';
+    display: block;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
 }
 
 
@@ -77,7 +91,26 @@
     display: none !important;
 }
 
+.lm-modal[minimized="true"] {
+    bottom: 0;
+    min-height: 0px;
+    height: 45px !important;
+}
+
+.lm-modal[minimized="true"]::before {
+    height: 100%;
+    cursor: pointer;
+}
+
+.lm-modal[minimized="true"]::after {
+    content: '';
+}
+
 @keyframes slide-bottom-in {
     0% { transform: translateY(100%); }
     100% { transform: translateY(0%); }
 }
+
+.lm-modal.hide {
+    opacity: 0;
+}

package/package.json

@@ -13,8 +13,8 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^3.3.1"
+        "lemonadejs": "^3.3.2"
     },
     "main": "dist/index.js",
-    "version": "2.0.4"
+    "version": "2.1.0"
 }

package/src/index.html

@@ -0,0 +1,20 @@
+<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>