@innovastudio/contentbox 1.5.33 → 1.5.35

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -73112,6 +73112,7 @@ class ColumnTool {
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const dom = this.builder.dom;
     this.dom = dom;
     let columnMore = builderStuff.querySelector('.is-pop.columnmore');
@@ -73220,9 +73221,6 @@ class ColumnTool {
                                 <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
                                     <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
                                 </button>
-                                <!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
-                                    <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-device-laptop"></use></svg>
-                                </button>-->
                                 <button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
                                     <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
                                 </button>
@@ -73413,6 +73411,21 @@ class ColumnTool {
 
                     <div style="padding:0;margin-top:25px;">
 
+                        <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                            <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                            </button>
+                            <button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                            </button>
+                        </div>
+
                         <div style="padding-bottom:3px;">${util.out('Scale')}:</div>
                         <div style="padding-top:4px">
                             <input type="range" min="100" max="500" value="0" class="image-scale-slider is-rangeslider">
@@ -75031,6 +75044,25 @@ class ColumnTool {
         btnHidden.classList.add('on'); //Trigger Change event
 
         this.builder.opts.onChange();
+      }); // Responsive Image Adjust
+
+      btns = this.imageAdjust.querySelectorAll('.input-device');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let elms = this.imageAdjust.querySelectorAll('.input-device');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          const modal = builderStuff.querySelector('.is-modal.content-preview');
+
+          if (!modal.classList.contains('active')) {
+            this.builder.openPreview();
+          }
+
+          this.realtimeImageAdjust();
+          this.readImageAdjust(this.builder.elementSelected, this.useTarget);
+        });
       });
     }
 
@@ -75298,9 +75330,8 @@ class ColumnTool {
     if (btn) btn.setAttribute('data-focus', true);
   }
 
-  openImageAdjust(elm, btn, useTarget) {
-    if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
-
+  readImageAdjust(elm, useTarget) {
+    //Current value
     const imageAdjust = this.imageAdjust;
     const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
     const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
@@ -75308,6 +75339,7 @@ class ColumnTool {
     inpImageScaleSlider.value = 100;
     inpImageHorSlider.value = 0;
     inpImageVertSlider.value = 0;
+    inpImageScaleSlider.disabled = false;
 
     if (useTarget) {
       inpImageHorSlider.value = 50;
@@ -75386,16 +75418,79 @@ class ColumnTool {
     } //elementSelected
 
 
-    this.builder.elementSelected = elm; //Show modal
+    this.builder.elementSelected = elm;
+  }
+
+  openImageAdjust(elm, btn, useTarget) {
+    if (useTarget) this.useTarget = true;else this.useTarget = false;
+    const divTarget = this.imageAdjust.querySelector('.div-target');
+
+    if (useTarget) {
+      divTarget.style.display = 'flex';
+    } else {
+      divTarget.style.display = 'none';
+    }
+
+    const modal = this.builderStuff.querySelector('.is-modal.content-preview');
+    let elms = this.imageAdjust.querySelectorAll('.input-device');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
 
-    imageAdjust.style.zIndex = '10005';
-    this.util.showModal(imageAdjust, false, () => {
+    if (!modal.classList.contains('active')) {
+      this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+    }
+
+    this.readImageAdjust(elm, useTarget); //Show modal
+
+    this.imageAdjust.style.zIndex = '10005';
+    this.util.showModal(this.imageAdjust, false, () => {
       if (btn) {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
     });
     if (btn) btn.setAttribute('data-focus', true);
+    this.realtimeImageAdjust(true);
+  }
+
+  realtimeImageAdjust(initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.imageAdjust.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.imageAdjust.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.imageAdjust.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.imageAdjust.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
+    let divTarget = this.imageAdjust.querySelector('.div-target');
+    let target = this.builder.responsive.readTarget(divTarget); // Live Preview Sync
+
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
+    }
   }
 
   resetImage(elm) {
@@ -91578,7 +91673,28 @@ class LivePreview {
       if (!this.builder.doc.querySelector('.is-wrapper')) {
         // ContentBuilder
         if (this.builder.previewURL) {
-          iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+          if (this.builder.livePreviewAlwaysReload) {
+            iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+          } else {
+            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 = 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 {
           try {
             this.writeHtml(iframe);
@@ -91587,87 +91703,90 @@ class LivePreview {
         }
       } else {
         // ContentBox
-        // iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
-        let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+        if (this.builder.livePreviewAlwaysReload) {
+          iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        } else {
+          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 (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
+                  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
+              }); // 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);
+              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);
           }
-        } else {
-          iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
         }
       }
 
@@ -91803,6 +91922,7 @@ class ContentBuilder {
       // onPreviewClose: ()=>{},
       previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
       livePreviewOpen: false,
+      livePreviewAlwaysReload: false,
       scriptPath: '',
       // Deprecated
       // Old way:
@@ -104516,7 +104636,9 @@ class ContentBox {
       zoom: 0.6,
       shortenHTML: true,
       advancedTimeline: true,
+      previewStyle: 'top:auto;bottom:30px;left:90px;right:auto;',
       livePreviewOpen: false,
+      livePreviewAlwaysReload: false,
       sectionTemplate: `
             <div class="is-section is-box is-section-100 type-poppins">
                 <div class="is-overlay"></div>
@@ -107032,8 +107154,9 @@ class ContentBox {
           this.scrollSync(iframe);
         }, 1000);
       },
-      previewStyle: 'top:auto;bottom:30px;left:90px;right:auto;',
-      livePreviewOpen: false,
+      previewStyle: this.settings.previewStyle,
+      livePreviewOpen: this.settings.livePreviewOpen,
+      livePreviewAlwaysReload: this.settings.livePreviewAlwaysReload,
       iframe: this.settings.iframe,
       imageAdjust: 1,
       // ContentBuilder