@lemonadejs/modal 3.2.0 → 3.3.0

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');
 }
 
@@ -435,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';
@@ -513,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
@@ -757,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 = '';
         }
 
+        // 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/package.json

@@ -17,5 +17,5 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.2.0"
+    "version": "3.3.0"
 }