@lemonadejs/modal 1.2.0 → 2.0.1

package/README.md

@@ -0,0 +1,61 @@
+# Javascript Modal
+
+[Official website and documentation is here](https://lemonadejs.net/components/modal)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue 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.
+
+## Features
+
+-   Lightweight: The JavaScript Modal is only about 4 KBytes;
+-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/modal
+```
+
+### CDN
+
+To use data grid 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>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+```
+
+### Configuration
+
+Quick example
+
+```javascript
+import Signature from "@lemonadejs/modal";
+
+export default function Component() {
+    const self = this;
+    self.width = 400;
+    self.height = 200;
+
+    return `<Modal width="{{self.width}}" height="{{self.height}}" title="My windowmodal">
+        <h1>Teste</h1>
+    </Modal>`;
+}
+```
+
+## License
+
+The LemonadeJS Modal is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+interface Modal {
+    (): any
+    [key: string]: any
+}
+
+interface options {
+    closed?: boolean;
+    closable?: boolean;
+    resizable?: boolean;
+    draggable?: boolean;
+    center?: boolean;
+    title?: string;
+    width?: number;
+    height?: number;
+    top?: number;
+    left?: number;
+}
+
+interface instance {
+    closed: boolean;
+    closable: boolean;
+    resizable: boolean;
+    draggable: boolean;
+    center: boolean;
+    title: string;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+
+export declare function Modal(el: HTMLElement, options?: options): instance;

package/dist/index.js

@@ -1,41 +1,272 @@
+if (! lemonade && typeof(require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
 ;(function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     global.Modal = factory();
 }(this, (function () {
+    let state = {};
+    let editorAction;
+    // 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';
+                }
+
+                if (!item.style.height) {
+                    item.style.height = rect.height + 'px';
+                }
 
-    // Load lemonadejs
-    if (typeof(lemonade) == 'undefined') {
-        if (typeof(require) === 'function') {
-            var lemonade = require('lemonadejs');
-        } else if (window.lemonade) {
-            var lemonade = window.lemonade;
+                // 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));
+                    }
+                }
+
+                e.preventDefault();
+                e.stopPropagation();
+            }
         }
     }
 
-    // Load lemonadejs
-    if (typeof(jSuites) == 'undefined') {
-        if (typeof(require) === 'function') {
-            var jSuites = require('jsuites');
-        } else if (window.jSuites) {
-            var jSuites = window.jSuites;
+    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 = '';
+        }
+
+        // Reset
+        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";
+
+
+                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);
+                }
+            }
+        } 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 = '';
+                    }
+                }
+            }
         }
     }
 
-    return function(html) {
-        var self = this;
+    document.addEventListener('mouseup', mouseUp);
+    document.addEventListener('mousemove', mouseMove);
+
+    const Modal = function (template) {
+        let self = this;
 
-        self.create = function(o) {
-            self.modal = jSuites.modal(o, self);
+        // 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 = (type, option) => {
+            if (typeof self[type] === 'function') {
+                self[type](self, option)
+            }
+        }
+
+        self.mousedown = mouseDown;
+
+        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);
+                        });
+                    });
+            }
 
-        var template = `
-            <div @ready="self.create(this)" name={{self.name}}>
-                ${html}
-            </div>
-        `;
+            // Initial centralize
+            if (self.center === true) {
+                self.top = (window.innerHeight - self.height) / 2;
+                self.left = (window.innerWidth - self.width) / 2;
+            }
 
-        return lemonade.element(template, self);
+            // Make sure the instance of the self is available via the DOM element
+            self.el.self = self;
+
+            // Close
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && self.closed === false) {
+                    self.closed = true;
+                }
+            });
+
+            // Full screen
+            if (self.height > 260) {
+                self.el.classList.add('fullscreen');
+            }
+        }
+
+        self.onchange = function(property) {
+            if (property === 'closed') {
+                self.closed ? Dispatch('onclose') : Dispatch('onopen');
+            }
+        }
+
+        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>`
     }
 
+
+    lemonade.setComponents({ Modal: Modal });
+
+    return function (root, options) {
+        if (typeof(root) === 'object') {
+            lemonade.render(Modal, root, options)
+            return options;
+        } else {
+            return Modal.call(this, root)
+        }
+    }
 })));

package/dist/style.css

@@ -0,0 +1,83 @@
+.lm-modal {
+    position: absolute;
+    min-width: 150px;
+    min-height: 120px;
+    width: 300px;
+    height: 260px;
+    border-radius: 4px;
+    z-index: 9;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    box-shadow: 0 0 4px 3px rgba(80,80,80,.1);
+}
+
+@media only screen and (max-width : 800px) {
+    .lm-modal {
+        width: 100% !important;
+        bottom: 0;
+        left: 0;
+        border: 0;
+        border-radius: 0;
+        transform: none;
+        animation: slide-bottom-in 0.4s forwards;
+    }
+
+    .lm-modal.fullscreen {
+        top: 0;
+        height: 100% !important;
+    }
+}
+
+.lm-modal-picker {
+    width: 100% !important;
+    height: 260px !important;
+    left: 0;
+    bottom: 0;
+    border: 0;
+    border-radius: 0;
+    transform: none;
+}
+
+.lm-modal-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lm-modal[title]::before {
+    content: attr(title);
+    display: block;
+    position: relative;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 1.2em;
+    line-height: 24px;
+}
+
+.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[title=""]::before {
+    display: none;
+}
+
+.lm-modal[closed="true"] {
+    display: none !important;
+}
+
+@keyframes slide-bottom-in {
+    0% { transform: translateY(100%); }
+    100% { transform: translateY(0%); }
+}

package/package.json

@@ -1,22 +1,20 @@
 {
     "name": "@lemonadejs/modal",
-    "title": "LemonadeJS modal",
-    "description": "LemonadeJS modal integration.",
+    "title": "JavaScript Modal",
+    "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
     "author": {
         "name": "Contact <contact@lemonadejs.net>",
         "url": "https://lemonadejs.net"
     },
     "keywords": [
         "javascript modal",
-        "lemonadejs plugins",
-        "js",
-        "library",
-        "javascript plugins"
+        "lemonadejs modal",
+        "js modal",
+        "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^2.6.3",
-        "jsuites": "^4.15.1"
+        "lemonadejs": "^3.3.1"
     },
     "main": "dist/index.js",
-    "version": "1.2.0"
+    "version": "2.0.1"
 }