@innovastudio/contentbox 1.5.32 → 1.5.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.32",
+  "version": "1.5.33",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.23",
+    "@innovastudio/contentbuilder": "^1.4.24",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -12781,11 +12781,13 @@ class EditBox {
 
       activeModule.setAttribute('data-html', encodeURIComponent(hidModuleCode.value)); //Save Settings (original)
 
-      activeModule.setAttribute('data-settings', encodeURIComponent(hidModuleSettings.value)); //Render (programmatically)
+      activeModule.setAttribute('data-settings', encodeURIComponent(hidModuleSettings.value));
+      let html = hidModuleCode.value;
+      html = html.replace(/{id}/g, dom$l.uniqueId()); //Render (programmatically)
 
       let range = document.createRange();
       activeModule.innerHTML = '';
-      activeModule.appendChild(range.createContextualFragment(hidModuleCode.value)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
+      activeModule.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
       //Trigger Render event
 
       this.builder.settings.onRender(); //Trigger Change event
@@ -91584,7 +91586,89 @@ class LivePreview {
           }
         }
       } else {
-        iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        // ContentBox
+        // iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+
+        if (iframeDocument) {
+          if (iframeDocument.body.innerHTML === '') {
+            iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+          } else {
+            // sync. html
+            let html = localStorage.getItem('preview-html');
+            let wrapper = iframeDocument.querySelector('.is-wrapper');
+            wrapper.innerHTML = html; // sync. styles
+            // let mainCss = localStorage.getItem('preview-maincss'); 
+            // let sectionCss = localStorage.getItem('preview-sectioncss');
+
+            let elms = iframeDocument.querySelectorAll('link');
+            let links = this.builder.doc.getElementsByTagName('link');
+            Array.from(links).map(link => {
+              let href = link.href.toLowerCase();
+
+              if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
+                // check
+                let exist = false;
+                elms.forEach(elm => {
+                  let elmHref = elm.href.toLowerCase();
+
+                  if (elmHref) {
+                    if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
+                      if (href === elmHref) {
+                        exist = true;
+                      }
+                    }
+                  }
+                });
+
+                if (!exist) {
+                  // clone is needed, otherwise, parent resource may dissapear when loading on iframe
+                  const clone = link.cloneNode(true);
+                  iframeDocument.head.appendChild(clone); // ADD
+                }
+              }
+            });
+            elms.forEach(elm => {
+              let href = elm.href.toLowerCase();
+
+              if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
+                // check
+                let exist = false;
+                Array.from(links).map(link => {
+                  let elmHref = link.href.toLowerCase();
+
+                  if (elmHref) {
+                    if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
+                      if (href === elmHref) {
+                        exist = true;
+                      }
+                    }
+                  }
+                });
+
+                if (!exist) {
+                  iframeDocument.head.removeChild(elm); // REMOVE
+                }
+              }
+            }); // reload box js
+
+            elms = iframeDocument.querySelectorAll('script');
+            elms.forEach(elm => {
+              let src = elm.getAttribute('src');
+
+              if (src) {
+                if (src.indexOf('box-flex.js') !== -1 || src.indexOf('box.js') !== -1) {
+                  elm.parentElement.removeChild(elm);
+                  let scriptElm = document.createElement('script');
+                  scriptElm.setAttribute('src', src);
+                  iframeDocument.body.appendChild(scriptElm);
+                }
+              }
+            });
+          }
+        } else {
+          iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        }
       }
 
       iframe.onload = () => {
@@ -99823,14 +99907,12 @@ class AnimateScroll {
         this.clickContent();
       }, 30);
     }; //Extend onChange
+    // let old2 = this.builder.settings.onChange;
+    // this.builder.settings.onChange = ()=>{
+    //     old2.call(this);
+    //     this.builder.editor.livePreview.previewRefresh();
+    // };
 
-
-    let old2 = this.builder.settings.onChange;
-
-    this.builder.settings.onChange = () => {
-      old2.call(this);
-      this.builder.editor.livePreview.previewRefresh();
-    };
   }
 
   openPreview() {