@innovastudio/contentbox 1.4.57 → 1.4.59

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -4620,9 +4620,11 @@ class EditSection {
   }
 
   sectionBottom() {
-    const activeSection = this.builder.activeSection;
-    let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)'); // let first = nodes[0];
+    const activeSection = this.builder.activeSection; // let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)');
 
+    let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
+      return item.classList.contains('is-section');
+    });
     let last = nodes[nodes.length - 1];
     activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
 
@@ -11356,6 +11358,8 @@ class EditBox {
       btn.addEventListener('click', () => {
         let activeBox = this.builder.activeBox;
         let boxCentered = activeBox.querySelector('.is-box-centered');
+        if (!boxCentered) boxCentered = activeBox; // for simplified flex section .is-section > .is-container
+
         this.builder.editor.saveForUndo();
         let s = btn.getAttribute('data-value');
 
@@ -13176,6 +13180,7 @@ class EditBox {
   boxTextOpacity(s) {
     let activeBox = this.builder.activeBox;
     let cb = activeBox.querySelector('.is-box-centered');
+    if (!cb) cb = activeBox; // for simplified flex section
 
     if (s === '+') {
       if (dom$j.hasClass(cb, 'is-opacity-20')) {
@@ -30833,7 +30838,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div style="white-space: nowrap;">
+      let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
             </div>`;
 
@@ -30846,7 +30851,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div style="white-space: nowrap;">
+      let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 mt-2 mb-2 rounded tracking-50 uppercase py-2 size-14 px-6 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500 leading-relaxed">Get Started</a>
             </div>`;
@@ -97875,7 +97880,7 @@ class Timeline {
                 font-weight: 300 !important;
                 padding: 0 !important;
                 width: 36px !important;
-                height: 30px !important;
+                height: 29px !important;
                 text-align: center !important;
                 letter-spacing: 0px !important;
             }
@@ -98389,7 +98394,7 @@ class Timeline {
                             </td>
                         </tr>
                     </table>
-                    <div class="flex-wrap" style="padding: 0 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
+                    <div class="flex-wrap" style="padding: 3px 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
 
                         <div class="flex-wrap">
                             <div class="flex-wrap" style="margin-right:15px">
@@ -98404,7 +98409,7 @@ class Timeline {
                                     <option value="section">${out('Section')}</option>
                                 </select>
                             </div>
-                            <div class="flex-wrap" style="margin-right:30px">
+                            <div class="flex-wrap" style="margin-right:20px">
                                 <button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
                                     <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
                                 </button>
@@ -98433,26 +98438,45 @@ class Timeline {
                                 </div>
                                 <label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
                                     <input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0"> 
-                                    <span>${out('Overlap')}</span>.
+                                    <span>${out('Overlap')}</span>
                                 </label>
                                 <label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
                                     <input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0"> 
-                                    <span>${out('Widescreen')}</span>.
+                                    <span>${out('Widescreen')}</span>
                                 </label>
                             </div>
-
                         </div>
                         
                         <div class="flex-wrap" style="">
 
-                            <div class="flex-wrap" style="margin-right:20px">
+                            <div class="flex-wrap" style="flex-direction:column;margin-right:15px">
+                                <div style="font-size:10px;margin-top:-10px;margin-bottom:2px"><span>${out('Origin')}</span>:</div>
+                                <div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left top" title="${out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center top" title="${out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right top" title="${out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                    </div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left center" title="${out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
+                                        <button class="cmd-anim-origin on" style="width:25px;height:19px;" data-value="center" title="${out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right center" title="${out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
+                                    </div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left bottom" title="${out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center bottom" title="${out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right bottom" title="${out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="flex-wrap" style="margin-right:10px">
                                 <button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
                                 <button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
                             </div>
 
                             <button title="${out('Clear All')}" class="cmd-clear-timeline" style="height:34px;flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
                                 <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
-                                <span style="margin-left:7px">${out('Clear All')}</span>
                             </button>
                         </div>
 
@@ -98648,6 +98672,8 @@ class Timeline {
         btn.classList.add('on');
       } else {
         section.classList.remove('section-pin');
+        section.classList.remove('pin-space-lg');
+        section.classList.remove('pin-space-xl');
         divPinSpacing.style.display = 'none';
       } //Trigger Change event
 
@@ -98710,6 +98736,19 @@ class Timeline {
         this.builder.onChange();
       });
     });
+    const btnAnimOrigins = modalTimeline.querySelectorAll('.cmd-anim-origin');
+    btnAnimOrigins.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let elms = modalTimeline.querySelectorAll('.cmd-anim-origin');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.applyTimeline(); //Trigger Change event
+
+        this.builder.onChange();
+      });
+    });
     const btnDisableSmoothAnim = modalTimeline.querySelector('.cmd-disable-smoothanim');
     btnDisableSmoothAnim.addEventListener('click', () => {
       if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -98952,19 +98991,11 @@ class Timeline {
     this.inpOpacity_2500.value = '';
     this.inpOpacity_2600.value = '';
     this.inpOpacity_2700.value = '';
-    this.inpOpacity_2800.value = '';
-    const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
-    chkPinSection.checked = false;
-    const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
-    divPinSpacing.style.display = 'none';
-    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
-    btnDisableSmoothAnim.classList.remove('on');
-    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
-    btnHiddenOnStart.classList.remove('on');
-  }
+    this.inpOpacity_2800.value = ''; // const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
+    // chkPinSection.checked = false;
+    // const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
+    // divPinSpacing.style.display = 'none';
 
-  read() {
-    this.clearSettings();
     const activeSection = this.builder.activeSection;
 
     if (activeSection) {
@@ -99017,10 +99048,39 @@ class Timeline {
       }
     }
 
+    const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
+    btnAnimOrigins.forEach(btn => {
+      if (btn.getAttribute('data-value') === 'center') {
+        btn.classList.add('on');
+      } else {
+        btn.classList.remove('on');
+      }
+    });
+    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim.classList.remove('on');
+    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
+    btnHiddenOnStart.classList.remove('on');
+  }
+
+  read() {
+    this.clearSettings();
     let activeElement;
     let target = this.getTarget();
     activeElement = target.element;
     if (!activeElement) return;
+
+    if (activeElement.style.transformOrigin) {
+      let origin = activeElement.style.transformOrigin;
+      const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
+      btnAnimOrigins.forEach(btn => {
+        if (origin === btn.getAttribute('data-value')) {
+          btn.classList.add('on');
+        } else {
+          btn.classList.remove('on');
+        }
+      });
+    }
+
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (activeElement.hasAttribute('data-smooth-scrolling')) {
@@ -99607,6 +99667,13 @@ class Timeline {
     /* /mark device */
 
 
+    const btnAnimOrigin = this.modalTimeline.querySelector('.cmd-anim-origin.on');
+
+    if (btnAnimOrigin) {
+      let origin = btnAnimOrigin.getAttribute('data-value');
+      activeElement.style.transformOrigin = origin;
+    }
+
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -100232,6 +100299,7 @@ class ContentBox {
       zoom: 0.6,
       shortenHTML: true,
       advancedTimeline: false,
+      livePreviewOpen: false,
       contentStyleWithSample: false,
       contentSizes: [300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780, 800, 820, 840, 860, 880, 900, 920, 940, 960, 970, 980, 1000, 1020, 1040, 1050, 1060, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1220, 1240, 1260, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1620, 1640, 1660, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1820, 1840, 1860, 1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020, 2040, 2060, 2080, 2100, 2120, 2140, 2160, 2180, 2200, 2220, 2240, 2260, 2280, 2300, 2320, 2340, 2360, 2380, 2400, 2420, 2440, 2460, 2480, 2500, 2520, 2540, 2560, 2580, 2600, 2620, 2640, 2660, 2680, 2700],
       contentStyles: {
@@ -103205,6 +103273,10 @@ class ContentBox {
 
       if (localStorage.getItem('_livepreview') != null) {
         this.openPreview();
+      } else {
+        if (this.settings.livePreviewOpen) {
+          this.openPreview();
+        }
       }
 
       if (localStorage.getItem('_disableanimation') != null) {
@@ -104638,13 +104710,26 @@ class ContentBox {
       wrapper.style.opacity = '0';
     }
 
-    if (!this.editor) {
+    let waitSlider = false;
+
+    if (this.settings.slider === 'glide' || this.settings.slider === 'all') {
+      if (typeof this.win.Glide !== 'undefined') {
+        if (new this.win.Glide().mount) ; else {
+          waitSlider = true; // console.log('not ready');
+        }
+      } else {
+        waitSlider = true; // console.log('not loaded');
+      }
+    }
+
+    if (!this.editor || waitSlider) {
       // Wait for the ContentBuilder init complete
       setTimeout(() => {
         this.loadHtml(html);
       }, 100);
       return;
-    } // Render html content
+    } // console.log((new this.win.Glide).mount);
+    // Render html content
 
 
     let range = document.createRange();
@@ -104790,7 +104875,8 @@ class ContentBox {
     let html = this.html(); // this.builderStuff.parentNode.removeChild(this.builderStuff);
 
     this.builderStuff.innerHTML = '';
-    dom.removeClass(document.body, 'sidebar-active'); // Remove special css
+    dom.removeClass(document.body, 'sidebar-active');
+    document.body.removeAttribute('data-skrollrr-off'); // Remove special css
 
     const cbContentStyle = this.doc.querySelector('#_contentbox_css');
     if (cbContentStyle) cbContentStyle.parentNode.removeChild(cbContentStyle);