@innovastudio/contentbox 1.4.45 → 1.4.46

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -459,6 +459,12 @@ const prepareSvgIcons$1 = builder => {
                 <line x1="15" y1="16" x2="15" y2="20"></line>
             </symbol>
 
+            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
+                <path d="M20 4v5h-5"></path>
+            </symbol>
+
             </defs>
         </svg>`;
   const builderStuff = builder.builderStuff;
@@ -30761,10 +30767,10 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-image');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<img onload="imageLoaded(this)" src="${builder.opts.snippetPath}example.png" alt="" />`;
+      let html = `<img src="${builder.opts.snippetPath}example.png" alt="" />`;
 
       if (builder.opts.snippetSampleImage) {
-        html = `<img onload="imageLoaded(this)" src="${builder.opts.snippetSampleImage}" alt="" />`;
+        html = `<img src="${builder.opts.snippetSampleImage}" alt="" />`;
       }
 
       util.addContent(html, mode);
@@ -86594,7 +86600,10 @@ class Resize {
         // setTimeout(()=>{
         //     col.click();
         // },30);
+        //Trigger Change event
+
 
+        this.builder.opts.onChange();
       }
     });
   }
@@ -88937,11 +88946,8 @@ class ContentBuilder {
     window.selectImage = this.selectImage.bind(this);
     window.selectVideo = this.selectVideo.bind(this);
     window.selectAsset = this.selectAsset.bind(this);
-    window.imageLoaded = this.imageLoaded.bind(this); //this.imageLoaded;
-
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
-    this.win.imageLoaded = this.imageLoaded.bind(this); //this.imageLoaded;
   } // constructor
   // Convenience constructor, so that the plugin can be called directly using: ContentBuilder.run({ ... });
 
@@ -89929,10 +89935,6 @@ class ContentBuilder {
 
   saveForUndo(checkLater) {
     this.uo.saveForUndo(checkLater);
-  }
-
-  imageLoaded(obj) {
-    obj.removeAttribute('onload');
   } // Module related
 
 
@@ -93597,6 +93599,23 @@ class AnimateScroll {
         .is-modal.page-preview > div > div {
             transition: all 0.1s ease;
         }
+        .is-modal.page-preview .is-modal-refresh,
+        .is-modal.page-preview .is-modal-close {
+            background:transparent !important;
+            width:32px !important;
+            height:32px !important;
+            position:absolute !important;
+            box-shadow:none !important;
+        }
+        .is-modal.page-preview .is-modal-refresh {
+            top:2px;
+            right:34px;
+        }
+        .is-modal.page-preview .is-modal-close {
+            top:2px;
+            right:2px;
+        }
+
         .is-screen-1920 { width: 576px !important; }
         .is-screen-1440 { 
             width: 431px !important; 
@@ -93627,14 +93646,18 @@ class AnimateScroll {
         .is-screen-375 .preview-screen {
             width: 375px;height: 667px;transform: scale(0.446);
         }
+        .is-screen-375 .is-modal-bar > span {
+            display: none;
+        }
         </style>
-
-
         <div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-bar is-draggable" draggable=""> 
-                ${out('Live Preview')}
+                <span>${out('Live Preview')}</span>
+                <button class="is-modal-refresh" tabindex="-1" title="${out('Reload')}">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-reload"></use></svg>
+                </button>
                 <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
-                <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
             </div>
             <div style="position:relative;position:absolute;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;">
@@ -93642,7 +93665,7 @@ class AnimateScroll {
                     <iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>
                 </div>
             </div>
-            <div style="position:absolute;left:0;bottom:0;">
+            <div style="position:absolute;left:3px;bottom:3px;border-radius:3px;display:flex;overflow:hidden;">
                 <button class="is-modal-size" tabindex="-1" title="${out('Screen Sizes')}" style="width:30px;height:30px;">
                     <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#icon-devices"></use></svg>
                 </button>
@@ -93919,12 +93942,13 @@ class AnimateScroll {
                             <div class="div-pin-spacing" style="display:none">
                                 <div style="padding-top:10px;"><span>${out('Pin Spacing')}</span>: </div>
                                 <div class="flex-wrap" style="padding:5px 0 10px">
-                                    <button title="0" class="cmd-pin-space" data-value="0" style="width:50px">0</button>
-                                    <button title="20" class="cmd-pin-space" data-value="20" style="width:50px">20</button>
-                                    <button title="40" class="cmd-pin-space" data-value="40" style="width:50px">40</button>
-                                    <button title="60" class="cmd-pin-space" data-value="60" style="width:50px">60</button>
-                                    <button title="80" class="cmd-pin-space" data-value="80" style="display:none;width:50px">80</button>
-                                    <button title="100" class="cmd-pin-space" data-value="100" style="display:none;width:50px">100</button>
+                                    <button title="0" class="cmd-pin-space" data-value="" style="width:100px">${out('No Spacing')}</button>
+                                    <button title="0" class="cmd-pin-space" data-value="0" style="width:50px">100</button>
+                                    <button title="20" class="cmd-pin-space" data-value="20" style="width:50px">120</button>
+                                    <button title="40" class="cmd-pin-space" data-value="40" style="width:50px">140</button>
+                                    <button title="60" class="cmd-pin-space" data-value="60" style="display:none;width:50px">160</button>
+                                    <button title="80" class="cmd-pin-space" data-value="80" style="display:none;width:50px">180</button>
+                                    <button title="100" class="cmd-pin-space" data-value="100" style="display:none;width:50px">1100</button>
                                 </div>
                             </div>
                             <div class="flex-wrap" style="margin-top:10px;">
@@ -95770,14 +95794,14 @@ class AnimateScroll {
       this.builder.editor.saveForUndo();
 
       if (chkPinSection.checked) {
-        section.classList.add('section-pin');
-        section.classList.add('pin-space-20');
+        section.classList.add('section-pin'); // section.classList.add('pin-space-20');
+
         divPinSpacing.style.display = 'block';
         let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
         elms.forEach(elm => {
           elm.classList.remove('on');
         });
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="20"]');
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="0"]');
         btn.classList.add('on');
       } else {
         section.classList.remove('section-pin');
@@ -95794,11 +95818,13 @@ class AnimateScroll {
         if (!section) return;
         let val = btn.getAttribute('data-value');
         this.builder.editor.saveForUndo();
+        section.classList.remove('no-spacing');
         section.classList.remove('pin-space-20');
         section.classList.remove('pin-space-40');
         section.classList.remove('pin-space-60');
         section.classList.remove('pin-space-80');
         section.classList.remove('pin-space-100');
+        if (val === '') section.classList.add('no-spacing');
         if (val === '20') section.classList.add('pin-space-20');
         if (val === '40') section.classList.add('pin-space-40');
         if (val === '60') section.classList.add('pin-space-60');
@@ -95921,6 +95947,17 @@ class AnimateScroll {
       //     },1000);
       // };
 
+      iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+    });
+    const btnModalRefresh = modalPagePreview.querySelector('.is-modal-refresh');
+    btnModalRefresh.addEventListener('click', () => {
+      let html = this.builder.html();
+      localStorage.setItem('preview-html', html);
+      let mainCss = this.builder.mainCss();
+      localStorage.setItem('preview-maincss', mainCss);
+      let sectionCss = this.builder.sectionCss();
+      localStorage.setItem('preview-sectioncss', sectionCss);
+      const iframe = modalPagePreview.querySelector('iframe');
       iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
     }); // ---
     //Extend onPageContentClick 
@@ -96356,7 +96393,10 @@ class AnimateScroll {
         elm.classList.remove('on');
       });
 
-      if (activeSection.classList.contains('pin-space-20')) {
+      if (activeSection.classList.contains('no-spacing')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value=""]');
+        btn.classList.add('on');
+      } else if (activeSection.classList.contains('pin-space-20')) {
         let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="20"]');
         btn.classList.add('on');
       } else if (activeSection.classList.contains('pin-space-40')) {
@@ -100359,7 +100399,14 @@ class ContentBox {
     builderStuff.style.position = 'fixed';
     setTimeout(() => {
       builderStuff.style.position = '';
-    }, 1200);
+
+      if (this.wrapperEl.getBoundingClientRect().left < 0) {
+        builderStuff.style.position = 'fixed';
+        setTimeout(() => {
+          builderStuff.style.position = '';
+        }, 1500);
+      }
+    }, 1500);
     prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons) 
 
     this.sidebar = new SideBar(this);
@@ -101033,23 +101080,23 @@ class ContentBox {
             // Inside Container
             const box = target.closest('.is-box');
 
-            if (!target.closest('.is-tool') && !target.closest('.is-rowadd-tool')) {
-              if (box.classList.contains('box-select')) {
-                if (this.wrapperEl.classList.contains('is-container-edit')) {
-                  this.wrapperEl.classList.remove('is-container-edit');
-                  this.wrapperEl.classList.add('is-clean-edit');
+            if (box) {
+              if (!target.closest('.is-tool') && !target.closest('.is-rowadd-tool')) {
+                if (box.classList.contains('box-select')) {
+                  if (this.wrapperEl.classList.contains('is-container-edit')) {
+                    this.wrapperEl.classList.remove('is-container-edit');
+                    this.wrapperEl.classList.add('is-clean-edit');
+                  } else {
+                    this.wrapperEl.classList.add('is-container-edit');
+                    this.wrapperEl.classList.remove('is-clean-edit');
+                  }
                 } else {
                   this.wrapperEl.classList.add('is-container-edit');
                   this.wrapperEl.classList.remove('is-clean-edit');
                 }
-              } else {
-                this.wrapperEl.classList.add('is-container-edit');
-                this.wrapperEl.classList.remove('is-clean-edit');
-              }
-            }
+              } // clear
+
 
-            if (box) {
-              // clear
               const prevBox = this.doc.querySelector('.box-select');
               if (prevBox) prevBox.classList.remove('box-select'); // select