npm - @lemonadejs/modal - Versions diffs - 3.1.0 → 3.3.0 - Mend

@lemonadejs/modal 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -121,7 +121,7 @@ Quick example with Vue
  </script>
 ```
-Programmatical - Quick example with Javascript
+Programmatically - Quick example with Javascript
 ```html
 <html>
@@ -159,43 +159,58 @@ You can configure things such as position, size, and functionalities.
 ### Settings
-| Attribute | Type | Description |
-| --- | --- | --- |
-| title? | String | The header title of the modal. If empty, the header will be not displayed. |
-| 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 window in pixels. |
-| left? | Number | The horizontal position of the modal within its window in pixels. |
-| draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
-| resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
-| closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
-| closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
-| center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
-| url? | String | The URL from which to fetch and render content. |
-| auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
-| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
-| backdrop? | Boolean | Enables the backdrop when the modal is opened. |
-| minimizable? | Boolean | Modal can be minimized. `Default: false`.  |
-| minimized? | Boolean | Current minimized state of the modal. |
-| position? | String | Modal is automatic align during initialization. |
-| title? | String | Title of the modal. |
-| responsive? | Boolean | Enables responsive mode. `Default: true`. |
-| layers? | Boolean | Bring to front on focus. |
-| focus? | Boolean | Focus on the modal when open it. `Default: true`. |
-| overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
+| Attribute    | Type    | Description                                                                |
+|--------------|---------|----------------------------------------------------------------------------|
+| title?       | String  | The header title of the modal. If empty, the header will be not displayed. |
+| 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 window in pixels.            |
+| left?        | Number  | The horizontal position of the modal within its window in pixels.          |
+| draggable?   | Boolean | Determines if the modal can be dragged. `Default: false`.                  |
+| resizable?   | Boolean | Determines if the modal can be resized. `Default: false`.                  |
+| closed?      | Boolean | Controls the open and close state of the modal. `Default: false`.          |
+| closable?    | Boolean | Disables the ability to close the modal. `Default: false`.                 |
+| center?      | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
+| url?         | String  | The URL from which to fetch and render content.                            |
+| auto-close?  | Boolean | Close the modal when it loses the focus. `Default: false`.                 |
+| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`.                 |
+| backdrop?    | Boolean | Enables the backdrop when the modal is opened.                             |
+| minimizable? | Boolean | Modal can be minimized. `Default: false`.                                  |
+| minimized?   | Boolean | Current minimized state of the modal.                                      |
+| position?    | String  | Modal is automatic align during initialization.                            |
+| title?       | String  | Title of the modal.                                                        |
+| responsive?  | Boolean | Enables responsive mode. `Default: true`.                                  |
+| layers?      | Boolean | Bring to front on focus.                                                   |
+| focus?       | Boolean | Focus on the modal when open it. `Default: true`.                          |
+| overflow?    | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
 ### Events
-| Event                        | Description |
-|------------------------------| --- |
-| onclose? | Called when modal closes. |
-| onopen? | Called when modal opens. |
+| Event     | Description                              |
+|-----------|------------------------------------------|
+| onload?   | When the modal is ready.                 |
+| onclose?  | Called when modal closes.                |
+| onopen?   | Called when modal opens.                 |
+| onresize? | When the user resize the modal.          |
+| onmove?   | When the user change the modal position. |
 ## License
 The LemonadeJS Modal is released under the MIT.
+## Changelog
+### 3.1.1
+- Added new events: `onmove` and `onresize`.
+### 3.1.0
+- Close modal using the keyboard by pressing `Shift + Tab` on the icon.
 ## Other Tools
 -   [jSuites](https://jsuites.net/docs)

package/dist/index.d.ts CHANGED Viewed

@@ -54,6 +54,10 @@ declare namespace Modal {
         onclose?: (self: object) => void;
         /** onload event */
         onload?: (self: object) => void;
+        /** Move event */
+        onmove?: (self: object, x: number, y: number) => void;
+        /** Resize event */
+        onresize?: (self: object, w: number, h: number) => void;
         /** Import content from DOM reference */
         content?: HTMLElement;
     }

package/dist/index.js CHANGED Viewed

@@ -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');
 }
@@ -188,9 +188,11 @@ if (!lemonade && typeof (require) === 'function') {
     }
     // Dispatcher
-    const Dispatch = function(type, option){
+    const Dispatch = function(type){
         if (typeof this[type] === 'function') {
-            this[type](this, option)
+            let args = Array.from(arguments);
+            args.shift();
+            this[type](...args)
         }
     }
@@ -433,18 +435,6 @@ if (!lemonade && typeof (require) === 'function') {
         // Native lemonade
         self.onload = function() {
-            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();
-                            template += decoder.decode(value.buffer);
-                        });
-                    });
-            }
             // Dimensions
             if (self.width) {
                 self.el.style.width = self.width + 'px';
@@ -497,7 +487,11 @@ if (!lemonade && typeof (require) === 'function') {
                 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
@@ -507,7 +501,11 @@ if (!lemonade && typeof (require) === 'function') {
             // Import content from DOM
             if (self.content) {
-                self.el.children[1].appendChild(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
@@ -704,6 +702,8 @@ if (!lemonade && typeof (require) === '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) {
@@ -712,6 +712,8 @@ 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);
                     }
                     controls.e.classList.add('action');
                     // Remove transform
@@ -747,22 +749,41 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
-        if (! template) {
+        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 = '';
         }
-        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">
+        // 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">
             <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>${template}</div>
+            <div :ref="self.root">${template}</div>
         </div>`
     }
-    const Component = function (root, options, template) {
+    const Component = function (root, options) {
         if (typeof(root) === 'object') {
             // Remove elements from the DOM
             let elements = removeElements(root);
             // Create the modal
-            let e = lemonade.render(Modal, root, options, template);
+            let e = lemonade.render(Modal, root, options);
             // Add elements to the container
             appendElements(e.children[1], elements);

package/dist/style.css CHANGED Viewed

@@ -17,6 +17,10 @@
     color: var(--lm-font-color, #000);
 }
+.lm-modal[closed="true"] {
+    display: none;
+}
 .lm-modal.action {
     user-select: none;
 }
@@ -30,62 +34,58 @@
     line-height: 24px;
     user-select: none;
     display: flex;
-    border-radius: 5px;
+    border-radius: 5px 5px 0 0;
 }
-.lm-modal .lm-modal-title {
+.lm-modal > .lm-modal-title {
     display: none;
 }
-.lm-modal .lm-modal-title[data-icon],
-.lm-modal .lm-modal-title[data-title],
-.lm-modal[closable="true"] .lm-modal-title,
-.lm-modal[minimizable="true"] .lm-modal-title {
+.lm-modal > .lm-modal-title[data-icon],
+.lm-modal > .lm-modal-title[data-title],
+.lm-modal[closable="true"] > .lm-modal-title,
+.lm-modal[minimizable="true"] > .lm-modal-title {
     display: inherit;
 }
-.lm-modal-title > div:nth-child(2) {
+.lm-modal > .lm-modal-title > div:nth-child(2) {
     flex: 1;
 }
-.lm-modal .lm-modal-icon {
+.lm-modal > .lm-modal-title > .lm-modal-icon {
     width: 24px;
     height: 24px;
     font-size: 24px;
     cursor: pointer;
     font-family: "Material Icons";
     text-align: center;
+    margin-right: 5px;
     display: none;
 }
-.lm-modal .lm-modal-icon:not(:empty) {
+.lm-modal > .lm-modal-title > .lm-modal-icon:not(:empty) {
     display: inherit;
 }
-.lm-modal .lm-modal-close::before {
+.lm-modal > .lm-modal-title > .lm-modal-close::before {
     content: 'close';
 }
-.lm-modal .lm-modal-minimize::before {
+.lm-modal > .lm-modal-title > .lm-modal-minimize::before {
     content: '\2500';
 }
-.lm-modal div[data-icon] .lm-modal-feature,
-.lm-modal[minimizable="true"] .lm-modal-minimize {
-    margin-right: 5px;
-    display: block;
+.lm-modal[minimized="true"] > .lm-modal-title > .lm-modal-minimize::before {
+    content: '\e5d7';
 }
-.lm-modal[closable="true"] .lm-modal-close {
+.lm-modal[minimizable="true"] > .lm-modal-title > .lm-modal-minimize {
     display: block;
 }
-.lm-modal[closed="true"] {
-    display: none;
-}
-.lm-modal[minimized="true"] .lm-modal-minimize::before {
-    content: '\e5d7';
+.lm-modal[closable="true"] > .lm-modal-title > .lm-modal-close {
+    margin-right: 0;
+    display: block;
 }
 .lm-modal.hide {
@@ -111,7 +111,7 @@
     width: 100vw;
     height: 100vh;
     background-color: #00000020;
-    z-index: 999;
+    z-index: 15;
 }
 .lm-modal > div:last-child {

package/package.json CHANGED Viewed

@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.2"
+        "lemonadejs": "^4.3.3"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.1.0"
+    "version": "3.3.0"
 }