@lemonadejs/modal 3.3.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

@@ -1,7 +1,7 @@
 /**
  * pin the modal to the left panel
  */
-if (! lemonade && typeof (require) === 'function') {
+if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -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
@@ -180,22 +210,15 @@ if (! lemonade && typeof (require) === 'function') {
         }
     }
 
-    document.addEventListener('mouseup', mouseUp);
-    document.addEventListener('mousemove', mouseMove);
+    if (typeof(document) !== "undefined") {
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener('mousemove', mouseMove);
+    }
 
     const isTrue = function(e) {
         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;
@@ -403,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;
@@ -418,190 +441,36 @@ 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);
 
-        self.back = function() {
-            sendToBack(self.el);
-        }
-        self.front = function() {
-            sendToFront(self.el);
-        }
-
-        // Onload method
-        let onload = self.onload;
-
-        // Native lemonade
-        self.onload = function() {
-            // Dimensions
-            if (self.width) {
-                self.el.style.width = self.width + 'px';
-            }
-            if (self.height) {
-                self.el.style.height = self.height + 'px';
-            }
-            // Position
-            if (self.top) {
-                self.el.style.top = self.top + 'px';
-            }
-            if (self.left) {
-                self.el.style.left = self.left + 'px';
-            }
-
-            if (self.position === 'absolute' || self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
-
-            } else {
-                if (!self.width && self.el.offsetWidth) {
-                    self.width = self.el.offsetWidth;
-                }
-                if (!self.height && self.el.offsetHeight) {
-                    self.height = self.el.offsetHeight;
-                }
-
-                // Initial centralize
-                if (self.position === 'center' || !self.top) {
-                    self.top = (window.innerHeight - self.height) / 2;
-                }
-                if (self.position === 'center' || !self.left) {
-                    self.left = (window.innerWidth - self.width) / 2;
-                }
-
-                // Responsive
-                if (document.documentElement.clientWidth < 800) {
-                        // Full screen
-                    if (self.height > 300) {
-                        self.el.classList.add('fullscreen');
-                    }
-                }
-            }
-
-            // Auto adjust
-            adjustHorizontal(self);
-            adjustVertical(self);
-
-            // Backdrop
-            if (self.backdrop === true) {
-                backdrop = document.createElement('div');
-                backdrop.classList.add('lm-modal-backdrop');
-                backdrop.addEventListener('click', function() {
-                    self.closed = true;
-                });
-
-                if (self.closed === false) {
-                    self.el.parentNode.insertBefore(backdrop, self.el);
-                }
-            }
-
-            // Bring to front on focus
-            if (self.layers !== false) {
-                self.el.classList.add('lm-modal-layers');
-            }
-
-            // 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) {
-                    self.root.appendChild(self.content);
-                }
-            }
-
-            // Focus out of the component
-            self.el.addEventListener('focusout', function(e) {
-                if (isTrue(self['auto-close'])) {
-                    if (! self.el.contains(e.relatedTarget)) {
-                        self.closed = true;
-                    }
-                }
-            });
+        // External onload remove from the lifecycle
+        let change = self.onchange;
+        self.onchange = null;
 
-            // Close and stop propagation
-            self.el.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    if (self.closed === false) {
-                        self.closed = true;
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                    }
-                } else if (e.key === 'Enter') {
-                    self.click(e);
-                }
-            });
-
-            // Append elements to the container
-            appendElements(self.el.children[1], elements);
-
-            if (typeof(onload) === 'function') {
-                Dispatch.call(self, 'onload', self);
-            }
-        }
+        let load = self.onload;
+        self.onload = null;
 
         let ignoreEvents = false;
 
-        self.onchange = function(property) {
-            if (ignoreEvents) {
-                return false;
+        const click = function(e) {
+            if (e.target.classList.contains('lm-modal-close')) {
+                self.close({ origin: 'button' });
             }
 
-            if (property === 'closed') {
-                if (self.closed === false) {
-                    // Focus on the modal
-                    if (self.focus !== false) {
-                        self.el.focus();
-                    }
-                    // Show backdrop
-                    if (backdrop) {
-                        self.el.parentNode.insertBefore(backdrop, self.el);
-                    }
-
-                    // Auto adjust
-                    adjustHorizontal(self);
-                    adjustVertical(self);
-                } else {
-                    // Hide backdrop
-                    if (backdrop) {
-                        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';
-                } else {
-                    self.el.style[property] = '';
-                }
-
-                if (property === 'top') {
-                    adjustVertical(self);
-                }
-                if (property === 'left') {
-                    adjustHorizontal(self);
-                }
-            } else if (property === 'position') {
-                if (self.position) {
-                    if (self.position === 'center') {
-                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
-                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
-                    } else {
-                        self.top = '';
-                        self.left = '';
-                    }
+            if (e.target.classList.contains('lm-modal-minimize')) {
+                // Handles minimized modal positioning
+                if (self.minimized === true) {
+                    removeMini(self);
                 } else {
-                    if (! self.top) {
-                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
-                    }
-                    if (! self.left) {
-                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
-                    }
+                    setMini(self);
                 }
             }
         }
-        
-        self.mousemove = function(e) {
+
+        const mousemove = function(e) {
             if (getButton(e)) {
                 return;
             }
@@ -622,7 +491,7 @@ if (! lemonade && typeof (require) === 'function') {
             controls.l = rect.left;
 
             // When resizable
-            if (self.resizable === true) {
+            if (isTrue(self.resizable)) {
                 if (e.clientY - rect.top < cornerSize) {
                     if (rect.width - (e.clientX - rect.left) < cornerSize) {
                         item.style.cursor = 'ne-resize';
@@ -673,7 +542,7 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.mousedown = function(e) {
+        const mousedown = function(e) {
             if (! self.minimized) {
                 // Get mouse coordinates
                 let [x,y] = getCoords(e);
@@ -703,7 +572,11 @@ if (! lemonade && typeof (require) === 'function') {
                         self.height = parseInt(item.style.height);
                         controls.e.classList.remove('action');
                         // Event
-                        Dispatch.call(self, 'onresize', self, self.width, self.height);
+                        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) {
@@ -712,8 +585,12 @@ if (! lemonade && typeof (require) === '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);
+                        // Open event
+                        Dispatch.call(self, self.onmove, 'move', {
+                            instance: self,
+                            top: self.top,
+                            left: self.left,
+                        });
                     }
                     controls.e.classList.add('action');
                     // Remove transform
@@ -722,43 +599,38 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.click = function(e) {
-            if (e.target.classList.contains('lm-modal-close')) {
-                self.closed = true;
-            }
+        self.back = function() {
+            sendToBack(self.el);
+        }
 
-            if (e.target.classList.contains('lm-modal-minimize')) {
-                // Handles minimized modal positioning
-                if (self.minimized === true) {
-                    removeMini(self);
-                } else {
-                    setMini(self);
-                }
-            }
+        self.front = function() {
+            sendToFront(self.el);
         }
 
         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() {
+        self.close = function(options) {
             if (self.closed === false) {
                 self.closed = true;
+                // Close event
+                Dispatch.call(self, self.onclose, 'close', {
+                    instance: self,
+                    ...options
+                });
             }
         }
 
-        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);
-                    });
-                });
+        self.isClosed = function() {
+            return self.closed;
         }
 
         if (! template || typeof(template) !== 'string') {
@@ -772,7 +644,189 @@ 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" onmousemove="self.mousemove" onclick="self.click" tabindex="-1" role="modal">
+        // Native lemonade
+        onload(() => {
+            // Dimensions
+            if (self.width) {
+                self.el.style.width = self.width + 'px';
+            }
+            if (self.height) {
+                self.el.style.height = self.height + 'px';
+            }
+            // Position
+            if (self.top) {
+                self.el.style.top = self.top + 'px';
+            }
+            if (self.left) {
+                self.el.style.left = self.left + 'px';
+            }
+
+            if (self.position === 'absolute' || self.position === 'right' || self.position === 'bottom' || self.position === 'left') {
+
+            } else {
+                if (!self.width && self.el.offsetWidth) {
+                    self.width = self.el.offsetWidth;
+                }
+                if (!self.height && self.el.offsetHeight) {
+                    self.height = self.el.offsetHeight;
+                }
+
+                // Initial centralize
+                if (self.position === 'center' || !self.top) {
+                    self.top = (window.innerHeight - self.height) / 2;
+                }
+                if (self.position === 'center' || !self.left) {
+                    self.left = (window.innerWidth - self.width) / 2;
+                }
+
+                // Responsive
+                if (document.documentElement.clientWidth < 800) {
+                    // Full screen
+                    if (self.height > 300) {
+                        self.el.classList.add('fullscreen');
+                    }
+                }
+            }
+
+            // Auto adjust
+            adjustHorizontal(self);
+            adjustVertical(self);
+
+            // Backdrop
+            if (self.backdrop === true) {
+                backdrop = document.createElement('div');
+                backdrop.classList.add('lm-modal-backdrop');
+                backdrop.addEventListener('click', () => {
+                    self.close({ origin: 'backdrop' });
+                });
+
+                if (self.closed === false) {
+                    self.el.parentNode.insertBefore(backdrop, self.el);
+                }
+            }
+
+            // Import content from DOM
+            if (self.content) {
+                if (typeof(self.content) === 'string') {
+                    template = self.content;
+                } else if (typeof(self.content) === 'object' && self.content.tagName) {
+                    self.root.appendChild(self.content);
+                }
+            }
+
+            // Focus out of the component
+            self.el.addEventListener('focusout', function(e) {
+                if (! self.el.contains(e.relatedTarget)) {
+                    if (isTrue(self['auto-close'])) {
+                        self.close({ origin: 'focusout' });
+                    }
+                    // Remove focus
+                    self.el.classList.remove('lm-modal-focus');
+                }
+            });
+
+            // Focus out of the component
+            self.el.addEventListener('focusin', function(e) {
+                self.el.classList.add('lm-modal-focus');
+            });
+
+            // Close and stop propagation
+            self.el.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    if (self.closed === false) {
+                        self.close({ origin: 'escape' });
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                } else if (e.key === 'Enter') {
+                    click(e);
+                }
+            });
+
+            // Append elements to the container
+            appendElements(self.el.children[1], elements);
+
+            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
+                });
+            }
+        });
+
+        onchange((property) => {
+            if (ignoreEvents) {
+                return false;
+            }
+
+            if (property === 'closed') {
+                if (self.closed === false) {
+                    // Focus on the modal
+                    if (self.focus !== false) {
+                        self.el.focus();
+                    }
+                    // Show backdrop
+                    if (backdrop) {
+                        self.el.parentNode.insertBefore(backdrop, self.el);
+                    }
+
+                    // Auto adjust
+                    adjustHorizontal(self);
+                    adjustVertical(self);
+                } else {
+                    // Hide backdrop
+                    if (backdrop) {
+                        backdrop.remove();
+                    }
+                }
+            } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
+                if (self[property] !== '') {
+                    self.el.style[property] = self[property] + 'px';
+                } else {
+                    self.el.style[property] = '';
+                }
+
+                if (property === 'top') {
+                    adjustVertical(self);
+                }
+                if (property === 'left') {
+                    adjustHorizontal(self);
+                }
+            } else if (property === 'position') {
+                if (self.position) {
+                    if (self.position === 'center') {
+                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
+                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
+                    } else {
+                        self.top = '';
+                        self.left = '';
+                    }
+                } else {
+                    if (! self.top) {
+                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
+                    }
+                    if (! self.left) {
+                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
+                    }
+                }
+            }
+        });
+
+        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/dist/style.css

@@ -1,7 +1,7 @@
 .lm-modal {
     position: fixed;
-    min-width: 300px;
-    min-height: 240px;
+    min-width: 200px;
+    min-height: 200px;
     border-radius: 5px;
     z-index: 15;
     background-color: var(--lm-background-color, #fff);
@@ -28,15 +28,19 @@
 .lm-modal-title {
     width: 100%;
     border-bottom: 1px solid  var(--lm-border-color, #ccc);
-    padding: 10px;
+    padding: 12px;
     box-sizing: border-box;
-    font-size: 1.2em;
+    font-size: 1.3em;
     line-height: 24px;
     user-select: none;
     display: flex;
     border-radius: 5px 5px 0 0;
 }
 
+.lm-modal-focus {
+    z-index: 999;
+}
+
 .lm-modal > .lm-modal-title {
     display: none;
 }
@@ -57,9 +61,9 @@
     height: 24px;
     font-size: 24px;
     cursor: pointer;
-    font-family: "Material Icons";
+    font-family: "Material Symbols Outlined", "Material Icons";
     text-align: center;
-    margin-right: 5px;
+    margin-right: 8px;
     display: none;
 }
 
@@ -92,10 +96,6 @@
     opacity: 0;
 }
 
-.lm-modal-layers:focus {
-    z-index: 999;
-}
-
 .lm-modal[animation="false"] {
     transition: initial;
 }

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": "^4.3.3"
+        "lemonadejs": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.3.0"
+    "version": "5.2.0"
 }