@innovastudio/contentbox 1.0.36 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.36",
+  "version": "1.0.40",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@ashthornton/asscroll": "^2.0.4",
-    "@innovastudio/contentbuilder": "^1.0.63",
+    "@innovastudio/contentbuilder": "^1.0.66",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -311,7 +311,7 @@ class SideBar {
     this.builderStuff = builderStuff;
 
     if (this.builder.useSidebar) {
-      html += '<div class="is-sidebar active"  style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity:opacity: 0.0001;">';
+      html += '<div class="is-sidebar active"  style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
       var sideIndex = 0;
       this.builder.sidebarData.buttons.map(button => {
         if (button.name == 'section') {
@@ -746,7 +746,7 @@ class SideBar {
         let elms = elementChildren(selection);
         elms.forEach(elm => {
           elm.addEventListener('click', () => {
-            this.builder.boxTypography(elm.getAttribute('data-classname'), elm.getAttribute('data-sectioncss'), elm.getAttribute('data-css'));
+            this.boxTypography(elm.getAttribute('data-classname'), elm.getAttribute('data-sectioncss'), elm.getAttribute('data-css'));
           });
         });
       }
@@ -1723,8 +1723,8 @@ class SideBar {
                 function applyParentStyles() {
                     var cssString = '' +
                         'body {' +
-                            'background: ${parent._cb.styleSnippetBackground};' +
-                            'color: ${parent._cb.styleSnippetColor};' +
+                            'background: ' + parent._cb.styleSnippetBackground + ';' +
+                            'color: ' + parent._cb.styleSnippetColor + ';' +
                             'margin: 0;' +
                         '}' +
                         
@@ -1793,7 +1793,7 @@ class SideBar {
                         '}' +
                 
                         'svg {' +
-                            'fill: ${parent._cb.styleSnippetColor};' +
+                            'fill: ' + parent._cb.styleSnippetColor + ';' +
                         '}' +
 
                         '.dark .is-design-list>div .is-overlay:after {' +
@@ -1806,45 +1806,45 @@ class SideBar {
                         '}' +
                 
                         '.is-category-list>div {' +
-                            'background: ${parent._cb.styleSnippetTabsBackground};' +
+                            'background: ' + parent._cb.styleSnippetTabsBackground + ';' +
                         '}' +
                         '.is-category-list>div:last-child {' +
                             'width:100%;' +
                         '}' +
                 
                         '.is-category-list a {' +
-                            'background: ${parent._cb.styleSnippetTabItemBackground};' +
-                            'color: ${parent._cb.styleSnippetTabItemColor};' +
+                            'background: ' + parent._cb.styleSnippetTabItemBackground + ';' +
+                            'color: ' + parent._cb.styleSnippetTabItemColor + ';' +
                             'transition: box-shadow ease 0.3s;' +
                         '}' +
                 
                         '.is-category-list a:hover {' +
-                            'background: ${parent._cb.styleSnippetTabItemBackgroundHover};' +
+                            'background: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +
                             'box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);' +
-                            'color: ${parent._cb.styleSnippetTabItemColor};' +
+                            'color: ' + parent._cb.styleSnippetTabItemColor + ';' +
                         '}' +
                 
                         '.is-category-list a.active {' +
-                            'background: ${parent._cb.styleSnippetTabItemBackgroundActive};' +
-                            'color: ${parent._cb.styleSnippetTabItemColor};' +
+                            'background: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +
+                            'color: ' + parent._cb.styleSnippetTabItemColor + ';' +
                             'cursor: default;' +
                         '}' +
 
                         '.is-more-categories {' +
-                            'background: ${parent._cb.styleSnippetMoreItemBackground};' +
+                            'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +
                         '}' +
                 
                         '.is-more-categories a {' +
-                            'background: ${parent._cb.styleSnippetMoreItemBackground};' +
-                            'color: ${parent._cb.styleSnippetMoreItemColor};' +
+                            'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +
+                            'color: ' + parent._cb.styleSnippetMoreItemColor + ';' +
                         '}' +
                 
                         '.is-more-categories a:hover {' +
-                            'background: ${parent._cb.styleSnippetMoreItemBackgroundHover};' +
+                            'background: ' + parent._cb.styleSnippetMoreItemBackgroundHover + ';' +
                         '}' +
                 
                         '.is-more-categories a.active {' +
-                           ' background: ${parent._cb.styleSnippetMoreItemBackgroundActive};' +
+                           ' background: ' + parent._cb.styleSnippetMoreItemBackgroundActive + ';' +
                         '}';
                     
                     let themestyle = document.querySelector('[data-theme-style]');
@@ -1854,7 +1854,7 @@ class SideBar {
                     style.setAttribute('data-theme-style','');
                     style.type = "text/css";
                     style.innerHTML = cssString;
-                    document.getElementsByTagName("head")[0].appendChild(style);
+                    document.head.appendChild(style);
 
                     if(parent._cb.styleDark) {
                         document.body.setAttribute('class', 'dark');
@@ -1869,7 +1869,7 @@ class SideBar {
                     }
                 }
 
-                applyParentStyles();
+                // applyParentStyles();
 
  
                 /*!
@@ -1884,6 +1884,8 @@ class SideBar {
 
                     document.querySelector('.is-category-list').style.opacity = 1;
                     document.querySelector('.is-design-list').style.opacity = 1;
+
+                    applyParentStyles();
                 });
             </script>
         </body>
@@ -2304,7 +2306,8 @@ class EditSection {
     activeSection.removeAttribute('data-bottom-top');
     activeSection.removeAttribute('data-300-bottom');
     activeSection.removeAttribute('data-400-bottom');
-    activeSection.removeAttribute('data-anim-start'); // activeSection.style.transform = '';
+    activeSection.removeAttribute('data-anim-start');
+    activeSection.style.transform = '';
 
     if (s === 'zoom-in') {
       activeSection.setAttribute('data-bottom-top', 'transform:translateX(0%) translateY(0%) scale(0.7)');
@@ -2338,7 +2341,8 @@ class EditSection {
     const activeSection = this.builder.activeSection;
     activeSection.removeAttribute('data-top-bottom');
     activeSection.removeAttribute('data-center');
-    activeSection.removeAttribute('data-anim-end'); // activeSection.style.transform = '';
+    activeSection.removeAttribute('data-anim-end');
+    activeSection.style.transform = '';
 
     if (s === 'zoom-in') {
       activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
@@ -19192,8 +19196,8 @@ class HtmlUtil {
     Array.prototype.forEach.call(emptystyles, emptystyle => {
       emptystyle.removeAttribute('style');
     });
-    dom$E.removeEmptyStyle(tmp);
-    dom$E.cleanEmptySpans(tmp);
+    dom$E.removeEmptyStyle(tmp); // dom.cleanEmptySpans(tmp);
+
     elms = tmp.querySelectorAll('[data-keep]');
     dom$E.removeAttributes(elms, 'data-keep'); //Cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
 
@@ -49352,6 +49356,10 @@ class Image {
             let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
             let iframe = modalImageSelect.querySelector('iframe');
 
+            if (this.builder.opts.assetRefresh) {
+              iframe.src = this.builder.opts.imageselect;
+            }
+
             if (iframe.src === 'about:blank') {
               iframe.src = this.builder.opts.imageselect;
             }
@@ -49374,6 +49382,10 @@ class Image {
             let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
             let iframe = modalImageSelect.querySelector('iframe');
 
+            if (this.builder.opts.assetRefresh) {
+              iframe.src = this.builder.opts.imageselect;
+            }
+
             if (iframe.src === 'about:blank') {
               iframe.src = this.builder.opts.imageselect;
             }
@@ -50061,6 +50073,10 @@ class Image {
           resize = false;
         }
 
+        if (this.builder.opts.maxEmbedImageWidth === -1) {
+          resize = false;
+        }
+
         if (!resize) {
           // NEW: this is to prevent using MegaPixImage (problem with some PNG. PNG doesn't need to resize, so no need to use MegaPixImage)
           let tmpCanvasNoCrop = document.getElementById('myTmpCanvasNoCrop');
@@ -51491,6 +51507,10 @@ class Hyperlink {
         } else {
           let modalFileSelect = this.builderStuff.querySelector('.is-modal.fileselect');
 
+          if (this.builder.opts.assetRefresh) {
+            modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
+          }
+
           if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
             modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
           }
@@ -51583,6 +51603,10 @@ class Hyperlink {
         } else {
           let modalFileSelect = this.builderStuff.querySelector('.is-modal.fileselect');
 
+          if (this.builder.opts.assetRefresh) {
+            modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
+          }
+
           if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
             modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
           }
@@ -53012,6 +53036,10 @@ class Video {
           let modalVideoSelect = builderStuff.querySelector('.is-modal.videoselect');
           let iframe = modalVideoSelect.querySelector('iframe');
 
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.videoSelect;
+          }
+
           if (iframe.src === 'about:blank') {
             iframe.src = this.builder.opts.videoSelect;
           }
@@ -63697,6 +63725,10 @@ class Rte {
           let modalImageSelect = this.builderStuff.querySelector('.is-modal.imageselect');
           let iframe = modalImageSelect.querySelector('iframe');
 
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.imageselect;
+          }
+
           if (iframe.src === 'about:blank') {
             iframe.src = this.builder.opts.imageselect;
           }
@@ -67693,6 +67725,8 @@ class ContentBuilder {
       imageSelect: '',
       fileSelect: '',
       videoSelect: '',
+      assetRefresh: true,
+      // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
       buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
       buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
@@ -74021,34 +74055,32 @@ class ContentBox {
       }
     }); // Hide tool on scrolling
 
+    /*
     let timeoutId;
-    window.addEventListener('scroll', this.doWindowScroll = () => {
-      if (this.controlHiddenOnScroll) {
-        let builderActive = document.querySelector('.builder-active');
-
-        if (builderActive) {
-          this.editor.util.clearActiveCell();
-          this.editor.util.clearControls();
-          this.controlHiddenOnScroll = false;
-        }
-      }
-
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        let hover = false;
-
-        if (this.activeSection) {
-          if (this.activeSection.matches(':hover')) {
-            hover = true;
-          }
-        }
-
-        if (!hover) {
-          let boxTool = document.querySelector('#divBoxTool');
-          boxTool.style.display = 'none';
+    window.addEventListener('scroll', this.doWindowScroll = () =>{
+         if(this.controlHiddenOnScroll) {
+            let builderActive = document.querySelector('.builder-active');
+            if(builderActive) {
+                this.editor.util.clearActiveCell();
+                this.editor.util.clearControls();
+                this.controlHiddenOnScroll = false;
+            }
         }
-      }, 30);
-    });
+         clearTimeout(timeoutId);
+        timeoutId = setTimeout( ()=> {
+             let hover=false;
+            if(this.activeSection) {
+                if(this.activeSection.matches(':hover')) {
+                    hover=true;
+                } 
+            }
+            if(!hover) {
+                let boxTool = document.querySelector('#divBoxTool');
+                boxTool.style.display = 'none';
+            }
+         }, 30); 
+     });
+    */
   } // init
 
 
@@ -74369,7 +74401,10 @@ class ContentBox {
       btn.style.color = this.editor.styleModalColor;
     });
     const sectionIframe = document.querySelector('#ifrIdeasPanel');
-    if (sectionIframe.contentWindow.applyParentStyles) sectionIframe.contentWindow.applyParentStyles();
+
+    if (sectionIframe.contentWindow.applyParentStyles) {
+      sectionIframe.contentWindow.applyParentStyles();
+    }
   }
 
   rePositionTool() {