@innovastudio/contentbox 1.5.32 → 1.5.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.32",
+  "version": "1.5.34",
   "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.26",
     "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
@@ -73110,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');
@@ -73218,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>
@@ -73411,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">
@@ -75029,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);
+        });
       });
     }
 
@@ -75296,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');
@@ -75306,6 +75339,7 @@ class ColumnTool {
     inpImageScaleSlider.value = 100;
     inpImageHorSlider.value = 0;
     inpImageVertSlider.value = 0;
+    inpImageScaleSlider.disabled = false;
 
     if (useTarget) {
       inpImageHorSlider.value = 50;
@@ -75384,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';
+    }
 
-    imageAdjust.style.zIndex = '10005';
-    this.util.showModal(imageAdjust, false, () => {
+    const modal = this.builderStuff.querySelector('.is-modal.content-preview');
+    let elms = this.imageAdjust.querySelectorAll('.input-device');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+
+    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) {
@@ -91576,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);
@@ -91584,7 +91702,92 @@ class LivePreview {
           }
         }
       } else {
-        iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        // ContentBox
+        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 (!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 = () => {
@@ -91719,6 +91922,7 @@ class ContentBuilder {
       // onPreviewClose: ()=>{},
       previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
       livePreviewOpen: false,
+      livePreviewAlwaysReload: false,
       scriptPath: '',
       // Deprecated
       // Old way:
@@ -99823,14 +100027,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() {