@lemonadejs/modal 5.0.0 → 5.2.0

package/README.md

@@ -1,8 +1,8 @@
 # LemonadeJS Modal
 
-[Official website and documentation is here](https://lemonadejs.net/components/modal)
+[Official website and documentation is here](https://lemonadejs.com/plugins/modal)
 
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.
 
 The LemonadeJS JavaScript Modal is a responsive and reactive component that creates floating modals. With its flexible settings, users can easily configure draggability, closability, and resizability according to their needs.
 
@@ -36,28 +36,25 @@ To use modal via a CDN, include the following script tags in your HTML file:
 
 ### Usage
 
-Declarative - Quick example with Lemonade
+Declarative—Quick example with Lemonade
 
 ```javascript
-import lemonade from 'lemonadejs'
 import Modal from '@lemonadejs/modal';
 import '@lemonadejs/modal/dist/style.css';
 
 export default function App() {
-    const self = this;
-
-    self.toggle = function () {
-        self.modalRef.closed = !self.modalRef.closed
+    const toggle = () => {
+        this.modal.closed = ! this.modal.closed
     }
 
-    return `<>
-        <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modalRef">
+    return render => render`<>
+        <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.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" onclick="self.toggle" />        
+        <input type="button" value="Toggle Modal" onclick="${toggle}" />        
     </>`
 }
 ```

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare namespace Modal {
         /** Modal can be moved from its original position. Default: false */
         draggable?: boolean;
         /** Modal is automatic align during initialization. Absolute change the CSS position to absolute position to respect the screen position */
-        position?: 'center' | 'left' | 'right' | 'bottom' | 'absolute' |undefined;
+        position?: 'center' | 'left' | 'right' | 'bottom' | 'absolute' | undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */
@@ -49,15 +49,15 @@ declare namespace Modal {
         /** Create scroll when the content is larger than the modal. Default: false */
         overflow?: boolean;
         /** onopen event */
-        onopen?: (self: object) => void;
-        /** onclose event */
-        onclose?: (self: object) => void;
+        onopen?: (self: Modal.Instance) => void;
+        /** onclose event. */
+        onclose?: (self: Modal.Instance, origin?: 'button' | 'backdrop' | 'focusout' | 'escape') => void;
         /** onload event */
-        onload?: (self: object) => void;
+        onload?: (self: Modal.Instance) => void;
         /** Move event */
-        onmove?: (self: object, x: number, y: number) => void;
+        onmove?: (self: Modal.Instance, x: number, y: number) => void;
         /** Resize event */
-        onresize?: (self: object, w: number, h: number) => void;
+        onresize?: (self: Modal.Instance, w: number, h: number) => void;
         /** Import content from DOM reference */
         content?: HTMLElement;
     }
@@ -78,7 +78,7 @@ declare namespace Modal {
         /** Modal can be moved from its original position. */
         draggable?: boolean;
         /** Modal is automatic align center during initialization */
-        position?: string | undefined;
+        position?: 'center' | 'left' | 'right' | 'bottom' | 'absolute' | undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */
@@ -111,6 +111,18 @@ declare namespace Modal {
         front: () => void;
         /** Send to back when layers is activated */
         back: () => void;
+        /** onopen event */
+        onopen?: (self: Modal.Instance) => void;
+        /** onclose event */
+        onclose?: (self: Modal.Instance, origin?: 'button' | 'backdrop' | 'focusout' | 'escape') => void;
+        /** onload event */
+        onload?: (self: Modal.Instance) => void;
+        /** Move event */
+        onmove?: (self: Modal.Instance, x: number, y: number) => void;
+        /** Resize event */
+        onresize?: (self: Modal.Instance, w: number, h: number) => void;
+        /** Import content from DOM reference */
+        content?: HTMLElement;
     }
 }
 

package/dist/index.js

@@ -11,6 +11,36 @@ if (!lemonade && typeof (require) === 'function') {
     global.Modal = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
     // References
     const modals = [];
     // State of the resize and move modal
@@ -189,15 +219,6 @@ if (!lemonade && typeof (require) === 'function') {
         return e === true || e === 1 || e === 'true';
     }
 
-    // Dispatcher
-    const Dispatch = function(type){
-        if (typeof this[type] === 'function') {
-            let args = Array.from(arguments);
-            args.shift();
-            this[type](...args)
-        }
-    }
-
     const refreshMinimized = function() {
         let items = minimizedModals;
         let numOfItems = items.length;
@@ -405,7 +426,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Modal = function (template) {
+    const Modal = function (template, { onchange, onload }) {
         let self = this;
         let backdrop = null;
         let elements = null;
@@ -420,23 +441,211 @@ if (!lemonade && typeof (require) === 'function') {
         }
 
         // Make sure keep the state as boolean
-        self.closed = !!self.closed;
+        self.closed = !! self.closed;
 
         // Keep all modals references
         modals.push(self);
 
+        // External onload remove from the lifecycle
+        let change = self.onchange;
+        self.onchange = null;
+
+        let load = self.onload;
+        self.onload = null;
+
+        let ignoreEvents = false;
+
+        const click = function(e) {
+            if (e.target.classList.contains('lm-modal-close')) {
+                self.close({ origin: 'button' });
+            }
+
+            if (e.target.classList.contains('lm-modal-minimize')) {
+                // Handles minimized modal positioning
+                if (self.minimized === true) {
+                    removeMini(self);
+                } else {
+                    setMini(self);
+                }
+            }
+        }
+
+        const mousemove = function(e) {
+            if (getButton(e)) {
+                return;
+            }
+
+            // Get mouse coordinates
+            let [x,y] = getCoords(e);
+            // Root element of the component
+            let item = self.el;
+            // Get the position and dimensions
+            let rect = item.getBoundingClientRect();
+
+            controls.type = null;
+            controls.d = null;
+            controls.e = item;
+            controls.w = rect.width;
+            controls.h = rect.height;
+            controls.t = rect.top;
+            controls.l = rect.left;
+
+            // When resizable
+            if (isTrue(self.resizable)) {
+                if (e.clientY - rect.top < cornerSize) {
+                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                        item.style.cursor = 'ne-resize';
+                    } else if (e.clientX - rect.left < cornerSize) {
+                        item.style.cursor = 'nw-resize';
+                    } else {
+                        item.style.cursor = 'n-resize';
+                    }
+                } else if (rect.height - (e.clientY - rect.top) < cornerSize) {
+                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                        item.style.cursor = 'se-resize';
+                    } else if (e.clientX - rect.left < cornerSize) {
+                        item.style.cursor = 'sw-resize';
+                    } else {
+                        item.style.cursor = 's-resize';
+                    }
+                } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                    item.style.cursor = 'e-resize';
+                } else if (e.clientX - rect.left < cornerSize) {
+                    item.style.cursor = 'w-resize';
+                } else {
+                    item.style.cursor = '';
+                }
+
+                if (item.style.cursor) {
+                    controls.type = 'resize';
+                    controls.d = item.style.cursor;
+                } else {
+                    controls.type = null;
+                    controls.d = null;
+                }
+            }
+
+            if (controls.type == null && isTrue(self.draggable)) {
+                if (y - rect.top < 40) {
+                    item.style.cursor = 'move';
+                } else {
+                    item.style.cursor = '';
+                }
+
+                if (item.style.cursor) {
+                    controls.type = 'move';
+                    controls.d = item.style.cursor;
+                } else {
+                    controls.type = null;
+                    controls.d = null;
+                }
+            }
+        }
+
+        const mousedown = function(e) {
+            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;
+                controls.t = rect.top;
+                controls.l = rect.left;
+                // If is not minimized
+                if (controls.type === 'resize') {
+                    // 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';
+                    }
+                    // This will be the callback when finalize the resize
+                    controls.action = function () {
+                        self.width = parseInt(item.style.width);
+                        self.height = parseInt(item.style.height);
+                        controls.e.classList.remove('action');
+                        // Event
+                        Dispatch.call(self, self.onresize, 'resize', {
+                            instance: self,
+                            width: self.width,
+                            height: self.height,
+                        });
+                    }
+                    controls.e.classList.add('action');
+                } else if (isTrue(self.draggable) && y - rect.top < 40) {
+                    // Callback
+                    controls.action = function () {
+                        self.top = parseInt(item.style.top);
+                        self.left = parseInt(item.style.left);
+                        controls.e.classList.remove('action');
+                        // Open event
+                        Dispatch.call(self, self.onmove, 'move', {
+                            instance: self,
+                            top: self.top,
+                            left: self.left,
+                        });
+                    }
+                    controls.e.classList.add('action');
+                    // Remove transform
+                    removeMargin(self);
+                }
+            }
+        }
+
         self.back = function() {
             sendToBack(self.el);
         }
+
         self.front = function() {
             sendToFront(self.el);
         }
 
-        // Onload method
-        let onload = self.onload;
+        self.open = function() {
+            if (self.closed === true) {
+                self.closed = false;
+                console.l
+                // Close event
+                Dispatch.call(self, self.onopen, 'open', {
+                    instance: self
+                });
+            }
+        }
+
+        self.close = function(options) {
+            if (self.closed === false) {
+                self.closed = true;
+                // Close event
+                Dispatch.call(self, self.onclose, 'close', {
+                    instance: self,
+                    ...options
+                });
+            }
+        }
+
+        self.isClosed = function() {
+            return self.closed;
+        }
+
+        if (! template || typeof(template) !== 'string') {
+            template = '';
+        }
+
+        // Custom Root Configuration
+        self.settings = {
+            getRoot: function() {
+                return self.root;
+            }
+        }
 
         // Native lemonade
-        self.onload = function() {
+        onload(() => {
             // Dimensions
             if (self.width) {
                 self.el.style.width = self.width + 'px';
@@ -472,7 +681,7 @@ if (!lemonade && typeof (require) === 'function') {
 
                 // Responsive
                 if (document.documentElement.clientWidth < 800) {
-                        // Full screen
+                    // Full screen
                     if (self.height > 300) {
                         self.el.classList.add('fullscreen');
                     }
@@ -487,8 +696,8 @@ if (!lemonade && typeof (require) === 'function') {
             if (self.backdrop === true) {
                 backdrop = document.createElement('div');
                 backdrop.classList.add('lm-modal-backdrop');
-                backdrop.addEventListener('click', function() {
-                    self.closed = true;
+                backdrop.addEventListener('click', () => {
+                    self.close({ origin: 'backdrop' });
                 });
 
                 if (self.closed === false) {
@@ -499,8 +708,8 @@ if (!lemonade && typeof (require) === 'function') {
             // Import content from DOM
             if (self.content) {
                 if (typeof(self.content) === 'string') {
-                    self.root.appendChild(document.createTextNode(self.content));
-                } else if (typeof(self.content.tagName) === 'object' && self.content.tagName) {
+                    template = self.content;
+                } else if (typeof(self.content) === 'object' && self.content.tagName) {
                     self.root.appendChild(self.content);
                 }
             }
@@ -509,7 +718,7 @@ if (!lemonade && typeof (require) === 'function') {
             self.el.addEventListener('focusout', function(e) {
                 if (! self.el.contains(e.relatedTarget)) {
                     if (isTrue(self['auto-close'])) {
-                        self.closed = true;
+                        self.close({ origin: 'focusout' });
                     }
                     // Remove focus
                     self.el.classList.remove('lm-modal-focus');
@@ -525,26 +734,41 @@ if (!lemonade && typeof (require) === 'function') {
             self.el.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') {
                     if (self.closed === false) {
-                        self.closed = true;
+                        self.close({ origin: 'escape' });
                         e.preventDefault();
                         e.stopImmediatePropagation();
                     }
                 } else if (e.key === 'Enter') {
-                    self.click(e);
+                    click(e);
                 }
             });
 
             // Append elements to the container
             appendElements(self.el.children[1], elements);
 
-            if (typeof(onload) === 'function') {
-                Dispatch.call(self, 'onload', self);
+            if (self.url) {
+                fetch(self.url)
+                    .then(response => response.clone().body)
+                    .then(body => {
+                        let reader = body.getReader();
+                        reader.read().then(({ done, value }) => {
+                            // Add HTML to the modal
+                            self.root.innerHTML = new TextDecoder().decode(value.buffer);
+                            // Call onload event
+                            Dispatch.call(self, load, 'load', {
+                                instance: self
+                            });
+                        });
+                    });
+            } else {
+                // Call onload event
+                Dispatch.call(self, load, 'load', {
+                    instance: self
+                });
             }
-        }
-
-        let ignoreEvents = false;
+        });
 
-        self.onchange = function(property) {
+        onchange((property) => {
             if (ignoreEvents) {
                 return false;
             }
@@ -569,9 +793,6 @@ if (!lemonade && typeof (require) === 'function') {
                         backdrop.remove();
                     }
                 }
-
-                // Call the vents
-                self.closed ? Dispatch.call(self,'onclose',self) : Dispatch.call(self,'onopen',self);
             } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
                 if (self[property] !== '') {
                     self.el.style[property] = self[property] + 'px';
@@ -603,182 +824,9 @@ if (!lemonade && typeof (require) === 'function') {
                     }
                 }
             }
-        }
-        
-        self.mousemove = function(e) {
-            if (getButton(e)) {
-                return;
-            }
-
-            // Get mouse coordinates
-            let [x,y] = getCoords(e);
-            // Root element of the component
-            let item = self.el;
-            // Get the position and dimensions
-            let rect = item.getBoundingClientRect();
-
-            controls.type = null;
-            controls.d = null;
-            controls.e = item;
-            controls.w = rect.width;
-            controls.h = rect.height;
-            controls.t = rect.top;
-            controls.l = rect.left;
-
-            // When resizable
-            if (self.resizable === true) {
-                if (e.clientY - rect.top < cornerSize) {
-                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                        item.style.cursor = 'ne-resize';
-                    } else if (e.clientX - rect.left < cornerSize) {
-                        item.style.cursor = 'nw-resize';
-                    } else {
-                        item.style.cursor = 'n-resize';
-                    }
-                } else if (rect.height - (e.clientY - rect.top) < cornerSize) {
-                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                        item.style.cursor = 'se-resize';
-                    } else if (e.clientX - rect.left < cornerSize) {
-                        item.style.cursor = 'sw-resize';
-                    } else {
-                        item.style.cursor = 's-resize';
-                    }
-                } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                    item.style.cursor = 'e-resize';
-                } else if (e.clientX - rect.left < cornerSize) {
-                    item.style.cursor = 'w-resize';
-                } else {
-                    item.style.cursor = '';
-                }
-
-                if (item.style.cursor) {
-                    controls.type = 'resize';
-                    controls.d = item.style.cursor;
-                } else {
-                    controls.type = null;
-                    controls.d = null;
-                }
-            }
-
-            if (controls.type == null && isTrue(self.draggable)) {
-                if (y - rect.top < 40) {
-                    item.style.cursor = 'move';
-                } else {
-                    item.style.cursor = '';
-                }
-
-                if (item.style.cursor) {
-                    controls.type = 'move';
-                    controls.d = item.style.cursor;
-                } else {
-                    controls.type = null;
-                    controls.d = null;
-                }
-            }
-        }
-
-        self.mousedown = function(e) {
-            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;
-                controls.t = rect.top;
-                controls.l = rect.left;
-                // If is not minimized
-                if (controls.type === 'resize') {
-                    // 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';
-                    }
-                    // This will be the callback when finalize the resize
-                    controls.action = function () {
-                        self.width = parseInt(item.style.width);
-                        self.height = parseInt(item.style.height);
-                        controls.e.classList.remove('action');
-                        // Event
-                        Dispatch.call(self, 'onresize', self, self.width, self.height);
-                    }
-                    controls.e.classList.add('action');
-                } else if (isTrue(self.draggable) && y - rect.top < 40) {
-                    // Callback
-                    controls.action = function () {
-                        self.top = parseInt(item.style.top);
-                        self.left = parseInt(item.style.left);
-                        controls.e.classList.remove('action');
-                        // Event
-                        Dispatch.call(self, 'onmove', self, self.top, self.left);
-                    }
-                    controls.e.classList.add('action');
-                    // Remove transform
-                    removeMargin(self);
-                }
-            }
-        }
-
-        self.click = function(e) {
-            if (e.target.classList.contains('lm-modal-close')) {
-                self.closed = true;
-            }
-
-            if (e.target.classList.contains('lm-modal-minimize')) {
-                // Handles minimized modal positioning
-                if (self.minimized === true) {
-                    removeMini(self);
-                } else {
-                    setMini(self);
-                }
-            }
-        }
-
-        self.open = function() {
-            if (self.closed === true) {
-                self.closed = false;
-            }
-            // Focus on the new modal
-            self.el.focus();
-        }
-
-        self.close = function() {
-            if (self.closed === false) {
-                self.closed = true;
-            }
-        }
-
-        if (self.url) {
-            fetch(self.url)
-                .then(response => response.clone().body)
-                .then(body => {
-                    let reader = body.getReader();
-                    reader.read().then(function pump({done, value}) {
-                        const decoder = new TextDecoder();
-                        self.root.innerHTML = decoder.decode(value.buffer);
-                    });
-                });
-        }
-
-        if (! template || typeof(template) !== 'string') {
-            template = '';
-        }
-
-        // Custom Root Configuration
-        self.settings = {
-            getRoot: function() {
-                return self.root;
-            }
-        }
+        });
 
-        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" role="modal">
+        return render => render`<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" tabindex="-1" role="modal" onmousedown="${mousedown}" onmousemove="${mousemove}" onclick="${click}">
             <div class="lm-modal-title" data-title="{{self.title}}" data-icon="{{self.icon}}"><div class="lm-modal-icon">{{self.icon}}</div><div>{{self.title}}</div><div class="lm-modal-icon lm-modal-minimize" tabindex="0"></div><div class="lm-modal-icon lm-modal-close" tabindex="0"></div></div>
             <div :ref="self.root">${template}</div>
         </div>`

package/package.json

@@ -3,7 +3,7 @@
     "title": "JavaScript Modal",
     "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
     "author": {
-        "name": "Contact <contact@lemonadejs.net>",
+        "name": "Contact <contact@lemonadejs.com>",
         "url": "https://lemonadejs.net"
     },
     "keywords": [
@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^5.0.3"
+        "lemonadejs": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.0.0"
+    "version": "5.2.0"
 }