@innovastudio/contentbuilder 1.4.31 → 1.4.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.31",
+  "version": "1.4.33",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -77435,12 +77435,16 @@ class LivePreview {
   resizePreview(size) {
     let modal = this.modal;
     let util = this.util;
+    modal.classList.remove('is-screen-1920');
     modal.classList.remove('is-screen-1440');
     modal.classList.remove('is-screen-1920');
     modal.classList.remove('is-screen-1024');
     modal.classList.remove('is-screen-768');
     modal.classList.remove('is-screen-375');
     const infoDevice = modal.querySelector('.is-modal-device');
+    const previewScreen = modal.querySelector('.preview-screen');
+    previewScreen.style.transition = 'none';
+    previewScreen.style.opacity = '0';
 
     if (size === 1440) {
       modal.classList.add('is-screen-1440');
@@ -77448,7 +77452,6 @@ class LivePreview {
       infoDevice.setAttribute('title', util.out('Laptop'));
       infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
     } else if (size === 1024) {
-      modal.classList.remove('is-screen-1440');
       modal.classList.add('is-screen-1024');
       infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
       localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
@@ -77471,6 +77474,10 @@ class LivePreview {
     }
 
     this.previewRefresh(true);
+    setTimeout(() => {
+      previewScreen.style.opacity = '';
+      previewScreen.style.transition = '';
+    }, 100);
   }
 
   previewRefresh(disableOnContentLoad, hardReload) {
@@ -77489,20 +77496,26 @@ class LivePreview {
             let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
             if (iframeDocument) {
-              if (iframeDocument.body.innerHTML === '') {
+              if (!iframeDocument.body) {
                 iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
               } else {
-                // sync. html
-                let html = this.builder.html();
-                let container = iframeDocument.querySelector('.container');
-                if (!container) container = iframeDocument.querySelector('.is-container');
-
-                if (container) {
-                  container.innerHTML = html;
-                } else {
+                if (iframeDocument.body.innerHTML === '') {
                   iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+                } else {
+                  // sync. html
+                  let html = this.builder.html();
+                  let container = iframeDocument.querySelector('.container');
+                  if (!container) container = iframeDocument.querySelector('.is-container');
+
+                  if (container) {
+                    container.innerHTML = html;
+                  } else {
+                    iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+                  }
                 }
               }
+            } else {
+              iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
             }
           }
         } else {
@@ -77528,80 +77541,84 @@ class LivePreview {
           let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
           if (iframeDocument) {
-            if (iframeDocument.body.innerHTML === '') {
+            if (!iframeDocument.body) {
               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 (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
+                    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;
+                });
+                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
+                    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);
+                }); // 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);