@innovastudio/contentbox 1.5.39 → 1.5.41

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.39",
+  "version": "1.5.41",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -98758,8 +98758,9 @@ class AnimateScroll {
         this.builder.editor.saveForUndo();
         let activeCol = this.builder.editor.activeCol;
         if (activeCol) section = activeCol.closest('.is-section');
-        let elms;
-        elms = section.querySelectorAll('*');
+        let elms; // elms = section.querySelectorAll('*');
+
+        elms = document.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
         elms.forEach(elm => {
           elm.removeAttribute('data-center');
           elm.removeAttribute('data-center-top');
@@ -98798,24 +98799,9 @@ class AnimateScroll {
         });
         elms = section.querySelectorAll('.is-animated');
         elms.forEach(elm => {
-          if (elm.classList.contains('is-overlay-bg')) return;
-          elm.classList.remove('is-animated');
-          elm.classList.remove('once');
-          elm.classList.remove('is-fadeIn');
-          elm.classList.remove('is-fadeInUp');
-          elm.classList.remove('is-fadeInDown');
-          elm.classList.remove('is-fadeInLeft');
-          elm.classList.remove('is-fadeInRight');
-          elm.classList.remove('is-zoomIn');
-          elm.classList.remove('is-zoomOut');
-          elm.classList.remove('is-slideInUp');
-          elm.classList.remove('is-slideInDown');
-          elm.classList.remove('is-slideInLeft');
-          elm.classList.remove('is-slideInRight');
-          elm.classList.remove('is-flipInX');
-          elm.classList.remove('is-flipInY');
-          elm.classList.remove('is-pulse');
-          elm.classList.remove('is-bounceIn');
+          // if(elm.classList.contains('is-overlay-bg')) return;
+          this.cleanupBasic(elm);
+          this.cleanupDelay(elm);
         }); // clear
 
         this.clearSettings(); // set default
@@ -98859,23 +98845,8 @@ class AnimateScroll {
       elms = section.querySelectorAll('.is-animated');
       elms.forEach(elm => {
         if (elm.classList.contains('is-overlay-bg')) return;
-        elm.classList.remove('is-animated');
-        elm.classList.remove('once');
-        elm.classList.remove('is-fadeIn');
-        elm.classList.remove('is-fadeInUp');
-        elm.classList.remove('is-fadeInDown');
-        elm.classList.remove('is-fadeInLeft');
-        elm.classList.remove('is-fadeInRight');
-        elm.classList.remove('is-zoomIn');
-        elm.classList.remove('is-zoomOut');
-        elm.classList.remove('is-slideInUp');
-        elm.classList.remove('is-slideInDown');
-        elm.classList.remove('is-slideInLeft');
-        elm.classList.remove('is-slideInRight');
-        elm.classList.remove('is-flipInX');
-        elm.classList.remove('is-flipInY');
-        elm.classList.remove('is-pulse');
-        elm.classList.remove('is-bounceIn');
+        this.cleanupBasic(elm);
+        this.cleanupDelay(elm);
       }); // Refresh
 
       this.builder.settings.onRender(); //Trigger Change event
@@ -98891,23 +98862,8 @@ class AnimateScroll {
       let elms = section.querySelectorAll('.is-animated');
       elms.forEach(elm => {
         if (elm.classList.contains('is-overlay-bg')) return;
-        elm.classList.remove('is-animated');
-        elm.classList.remove('once');
-        elm.classList.remove('is-fadeIn');
-        elm.classList.remove('is-fadeInUp');
-        elm.classList.remove('is-fadeInDown');
-        elm.classList.remove('is-fadeInLeft');
-        elm.classList.remove('is-fadeInRight');
-        elm.classList.remove('is-zoomIn');
-        elm.classList.remove('is-zoomOut');
-        elm.classList.remove('is-slideInUp');
-        elm.classList.remove('is-slideInDown');
-        elm.classList.remove('is-slideInLeft');
-        elm.classList.remove('is-slideInRight');
-        elm.classList.remove('is-flipInX');
-        elm.classList.remove('is-flipInY');
-        elm.classList.remove('is-pulse');
-        elm.classList.remove('is-bounceIn');
+        this.cleanupBasic(elm);
+        this.cleanupDelay(elm);
       });
       let start = 0;
       let boxes = section.querySelectorAll('.is-box');
@@ -98919,9 +98875,9 @@ class AnimateScroll {
           const cols = this.builder.editor.dom.elementChildren(row);
           cols.forEach(col => {
             if (col.innerText.trim() === '' && !col.querySelector('img') && !col.querySelector('iframe') && !col.querySelector('video') && !col.querySelector('audio') && !col.querySelector('i')) return;
-            col.style.transition = 'none';
-            this.cleanupBasic(col);
-            this.cleanupDelay(col);
+            col.style.transition = 'none'; // this.cleanupBasic(col);
+            // this.cleanupDelay(col);
+
             col.classList.add('is-animated');
 
             if (chkPresetAnimOnce.checked) {
@@ -98942,20 +98898,25 @@ class AnimateScroll {
 
       this.builder.settings.onRender(); // Play
 
+      elms = section.querySelectorAll('.is-animated');
+      elms.forEach(elm => {
+        elm.style.opacity = '0';
+        elm.style.transition = 'none';
+      });
       setTimeout(() => {
         let elms = section.querySelectorAll('.is-animated');
         elms.forEach(elm => {
-          elm.style.transition = 'none';
           elm.classList.remove('is-inview');
         });
         setTimeout(() => {
           elms = section.querySelectorAll('.is-animated');
           elms.forEach(elm => {
+            elm.style.opacity = '';
             elm.style.transition = '';
             elm.classList.add('is-inview');
           });
         }, 30);
-      }, 100); //Trigger Change event
+      }, 200); //Trigger Change event
 
       this.builder.settings.onChange();
     };
@@ -101944,10 +101905,24 @@ class Timeline {
                 display: flex;
             }
             
+
+            .page-timeline .clear-more {
+                display: none;
+                position: absolute;
+                top: auto !important;
+                left: auto !important;
+                right: 19px !important;
+                bottom: 70px;
+                padding: 8px 20px 8px;
+                box-shadow: 3px 4px 10px 0px rgb(0 0 0 / 6%) !important;
+            }
+            .page-timeline .clear-more.active {
+                display: flex;
+            }
         </style>
         <div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-bar is-draggable" draggable=""> 
-                <span>${out('Timeline')}</span>
+                <span>${out('Animation Timeline Editor')}</span>
                 <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>
                 </button>
@@ -102492,7 +102467,7 @@ class Timeline {
                                     </button>
                                 </div>
                                 <div class="flex-wrap">
-                                    <button type="button" class="cmd-timeline-more" style="width:40px;height:34px;"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
+                                    <button type="button" title="${out('More')}" class="cmd-timeline-more" style="width:40px;height:34px;"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
                                 
                                     <!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:40px;height:34px;">
                                         <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
@@ -102536,9 +102511,19 @@ class Timeline {
                             </div>
                         </div>
                         <div class="flex-wrap" style="margin-top:8px;">
-                        <button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:30px;height:23px;flex: none;box-shadow: none !important;background: transparent !important;">
-                            <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
-                        </button>
+                            <button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:30px;height:23px;flex: none;box-shadow: none !important;background: transparent !important;">
+                                <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                            </button>
+                            <button title="${out('More')}" type="button" class="cmd-clear-more" style="width:30px;height:23px;">
+                                <svg class="is-icon-flex" style="width: 14px;height: 14px;"><use xlink:href="#ion-more"></use></svg>
+                            </button>
+                        </div>
+
+                        <div class="clear-more flex-wrap is-pop">
+                            <button title="${out('Clear All Animations in Section')}" class="cmd-clear-timeline-all" style="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 Animations in Section')}</span>
+                            </button>
                         </div>
                         
                         <div class="timeline-more flex-wrap is-pop">
@@ -102766,6 +102751,11 @@ class Timeline {
       const more = modalTimeline.querySelector('.timeline-more');
       this.builder.editor.util.showPop(more, false, btnTimelineMore);
     });
+    const btnClearMore = modalTimeline.querySelector('.cmd-clear-more');
+    btnClearMore.addEventListener('click', () => {
+      const more = modalTimeline.querySelector('.clear-more');
+      this.builder.editor.util.showPop(more, false, btnClearMore);
+    });
     const chkPinSection = modalTimeline.querySelector('#chkPinSection2');
     const divPinSpacing = modalTimeline.querySelector('.div-pin-spacing');
     chkPinSection.addEventListener('click', () => {
@@ -102902,6 +102892,71 @@ class Timeline {
 
       this.builder.settings.onChange();
     });
+    const btnClearTimelineAll = modalTimeline.querySelector('.cmd-clear-timeline-all'); // see animatescroll.js (.cmd-clear-anim-all)
+
+    btnClearTimelineAll.addEventListener('click', () => {
+      let section = this.builder.activeSection;
+      if (!section) return;
+      this.builder.editor.saveForUndo();
+      let activeCol = this.builder.editor.activeCol;
+      if (activeCol) section = activeCol.closest('.is-section');
+      let elms; // elms = section.querySelectorAll('*');
+
+      elms = document.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
+      elms.forEach(elm => {
+        elm.removeAttribute('data-center');
+        elm.removeAttribute('data-center-top');
+        elm.removeAttribute('data--50-bottom');
+        elm.removeAttribute('data--100-bottom');
+        elm.removeAttribute('data--150-bottom');
+        elm.removeAttribute('data--200-bottom');
+        elm.removeAttribute('data--300-bottom');
+        elm.removeAttribute('data--400-bottom');
+        elm.removeAttribute('data-bottom-top');
+        elm.removeAttribute('data-400-bottom');
+        elm.removeAttribute('data-300-bottom');
+        elm.removeAttribute('data-200-bottom');
+        elm.removeAttribute('data-150-bottom');
+        elm.removeAttribute('data-100-bottom');
+        elm.removeAttribute('data-50-bottom');
+        elm.removeAttribute('data-bottom');
+        elm.removeAttribute('data-center-bottom');
+        elm.removeAttribute('data-100-top');
+        elm.removeAttribute('data-50-top');
+        elm.removeAttribute('data-top');
+        elm.removeAttribute('data-top-bottom');
+        elm.removeAttribute('data-in');
+        elm.removeAttribute('data-in-150');
+        elm.removeAttribute('data-in-300');
+        elm.removeAttribute('data-cen--150');
+        elm.removeAttribute('data-cen');
+        elm.removeAttribute('data-cen-150');
+        elm.removeAttribute('data-out--300');
+        elm.removeAttribute('data-out--150');
+        elm.removeAttribute('data-out');
+        elm.removeAttribute('data-hidden-onstart');
+        this.cleanup(elm, true);
+        this.builder.animateScroll.cleanupDelay(elm); //extra
+
+        elm.style.transform = '';
+        elm.style.transition = '';
+        elm.style.opacity = '';
+        elm.style.transformOrigin = '';
+      });
+      elms = section.querySelectorAll('.is-animated');
+      elms.forEach(elm => {
+        // if(elm.classList.contains('is-overlay-bg')) return;
+        this.builder.animateScroll.cleanupBasic(elm);
+        this.builder.animateScroll.cleanupDelay(elm);
+      });
+      this.builder.animateScroll.refreshPage(); // Stable alternative to skrollrr.refresh()
+
+      this.read(); // Refresh
+
+      this.builder.settings.onRender(); //Trigger Change event
+
+      this.builder.settings.onChange();
+    });
     const chkTimelineDisableOnMobile = modalTimeline.querySelector('#chkTimelineDisableOnMobile');
     chkTimelineDisableOnMobile.addEventListener('click', () => {
       const section = this.builder.activeSection;
@@ -103835,11 +103890,11 @@ class Timeline {
     this.builder.settings.onChange();
   }
 
-  cleanup(activeElement) {
+  cleanup(activeElement, all) {
     let device = this.getDevice();
     activeElement.removeAttribute('data-hidden-onstart');
 
-    if (device === 'xs') {
+    if (all) {
       activeElement.removeAttribute('data-xs');
       activeElement.removeAttribute('data-xs-t');
       activeElement.removeAttribute('data-xs-t-100');
@@ -103870,7 +103925,6 @@ class Timeline {
       activeElement.removeAttribute('data-xs-t-2600');
       activeElement.removeAttribute('data-xs-t-2700');
       activeElement.removeAttribute('data-xs-t-2800');
-    } else if (device === 'sm') {
       activeElement.removeAttribute('data-sm');
       activeElement.removeAttribute('data-sm-t');
       activeElement.removeAttribute('data-sm-t-100');
@@ -103901,7 +103955,6 @@ class Timeline {
       activeElement.removeAttribute('data-sm-t-2600');
       activeElement.removeAttribute('data-sm-t-2700');
       activeElement.removeAttribute('data-sm-t-2800');
-    } else if (device === 'md') {
       activeElement.removeAttribute('data-md');
       activeElement.removeAttribute('data-md-t');
       activeElement.removeAttribute('data-md-t-100');
@@ -103932,7 +103985,6 @@ class Timeline {
       activeElement.removeAttribute('data-md-t-2600');
       activeElement.removeAttribute('data-md-t-2700');
       activeElement.removeAttribute('data-md-t-2800');
-    } else {
       activeElement.removeAttribute('data-t');
       activeElement.removeAttribute('data-t-100');
       activeElement.removeAttribute('data-t-200');
@@ -103962,6 +104014,131 @@ class Timeline {
       activeElement.removeAttribute('data-t-2600');
       activeElement.removeAttribute('data-t-2700');
       activeElement.removeAttribute('data-t-2800');
+    } else {
+      if (device === 'xs') {
+        activeElement.removeAttribute('data-xs');
+        activeElement.removeAttribute('data-xs-t');
+        activeElement.removeAttribute('data-xs-t-100');
+        activeElement.removeAttribute('data-xs-t-200');
+        activeElement.removeAttribute('data-xs-t-300');
+        activeElement.removeAttribute('data-xs-t-400');
+        activeElement.removeAttribute('data-xs-t-500');
+        activeElement.removeAttribute('data-xs-t-600');
+        activeElement.removeAttribute('data-xs-t-700');
+        activeElement.removeAttribute('data-xs-t-800');
+        activeElement.removeAttribute('data-xs-t-900');
+        activeElement.removeAttribute('data-xs-t-1000');
+        activeElement.removeAttribute('data-xs-t-1100');
+        activeElement.removeAttribute('data-xs-t-1200');
+        activeElement.removeAttribute('data-xs-t-1300');
+        activeElement.removeAttribute('data-xs-t-1400');
+        activeElement.removeAttribute('data-xs-t-1500');
+        activeElement.removeAttribute('data-xs-t-1600');
+        activeElement.removeAttribute('data-xs-t-1700');
+        activeElement.removeAttribute('data-xs-t-1800');
+        activeElement.removeAttribute('data-xs-t-1900');
+        activeElement.removeAttribute('data-xs-t-2000');
+        activeElement.removeAttribute('data-xs-t-2100');
+        activeElement.removeAttribute('data-xs-t-2200');
+        activeElement.removeAttribute('data-xs-t-2300');
+        activeElement.removeAttribute('data-xs-t-2400');
+        activeElement.removeAttribute('data-xs-t-2500');
+        activeElement.removeAttribute('data-xs-t-2600');
+        activeElement.removeAttribute('data-xs-t-2700');
+        activeElement.removeAttribute('data-xs-t-2800');
+      } else if (device === 'sm') {
+        activeElement.removeAttribute('data-sm');
+        activeElement.removeAttribute('data-sm-t');
+        activeElement.removeAttribute('data-sm-t-100');
+        activeElement.removeAttribute('data-sm-t-200');
+        activeElement.removeAttribute('data-sm-t-300');
+        activeElement.removeAttribute('data-sm-t-400');
+        activeElement.removeAttribute('data-sm-t-500');
+        activeElement.removeAttribute('data-sm-t-600');
+        activeElement.removeAttribute('data-sm-t-700');
+        activeElement.removeAttribute('data-sm-t-800');
+        activeElement.removeAttribute('data-sm-t-900');
+        activeElement.removeAttribute('data-sm-t-1000');
+        activeElement.removeAttribute('data-sm-t-1100');
+        activeElement.removeAttribute('data-sm-t-1200');
+        activeElement.removeAttribute('data-sm-t-1300');
+        activeElement.removeAttribute('data-sm-t-1400');
+        activeElement.removeAttribute('data-sm-t-1500');
+        activeElement.removeAttribute('data-sm-t-1600');
+        activeElement.removeAttribute('data-sm-t-1700');
+        activeElement.removeAttribute('data-sm-t-1800');
+        activeElement.removeAttribute('data-sm-t-1900');
+        activeElement.removeAttribute('data-sm-t-2000');
+        activeElement.removeAttribute('data-sm-t-2100');
+        activeElement.removeAttribute('data-sm-t-2200');
+        activeElement.removeAttribute('data-sm-t-2300');
+        activeElement.removeAttribute('data-sm-t-2400');
+        activeElement.removeAttribute('data-sm-t-2500');
+        activeElement.removeAttribute('data-sm-t-2600');
+        activeElement.removeAttribute('data-sm-t-2700');
+        activeElement.removeAttribute('data-sm-t-2800');
+      } else if (device === 'md') {
+        activeElement.removeAttribute('data-md');
+        activeElement.removeAttribute('data-md-t');
+        activeElement.removeAttribute('data-md-t-100');
+        activeElement.removeAttribute('data-md-t-200');
+        activeElement.removeAttribute('data-md-t-300');
+        activeElement.removeAttribute('data-md-t-400');
+        activeElement.removeAttribute('data-md-t-500');
+        activeElement.removeAttribute('data-md-t-600');
+        activeElement.removeAttribute('data-md-t-700');
+        activeElement.removeAttribute('data-md-t-800');
+        activeElement.removeAttribute('data-md-t-900');
+        activeElement.removeAttribute('data-md-t-1000');
+        activeElement.removeAttribute('data-md-t-1100');
+        activeElement.removeAttribute('data-md-t-1200');
+        activeElement.removeAttribute('data-md-t-1300');
+        activeElement.removeAttribute('data-md-t-1400');
+        activeElement.removeAttribute('data-md-t-1500');
+        activeElement.removeAttribute('data-md-t-1600');
+        activeElement.removeAttribute('data-md-t-1700');
+        activeElement.removeAttribute('data-md-t-1800');
+        activeElement.removeAttribute('data-md-t-1900');
+        activeElement.removeAttribute('data-md-t-2000');
+        activeElement.removeAttribute('data-md-t-2100');
+        activeElement.removeAttribute('data-md-t-2200');
+        activeElement.removeAttribute('data-md-t-2300');
+        activeElement.removeAttribute('data-md-t-2400');
+        activeElement.removeAttribute('data-md-t-2500');
+        activeElement.removeAttribute('data-md-t-2600');
+        activeElement.removeAttribute('data-md-t-2700');
+        activeElement.removeAttribute('data-md-t-2800');
+      } else {
+        activeElement.removeAttribute('data-t');
+        activeElement.removeAttribute('data-t-100');
+        activeElement.removeAttribute('data-t-200');
+        activeElement.removeAttribute('data-t-300');
+        activeElement.removeAttribute('data-t-400');
+        activeElement.removeAttribute('data-t-500');
+        activeElement.removeAttribute('data-t-600');
+        activeElement.removeAttribute('data-t-700');
+        activeElement.removeAttribute('data-t-800');
+        activeElement.removeAttribute('data-t-900');
+        activeElement.removeAttribute('data-t-1000');
+        activeElement.removeAttribute('data-t-1100');
+        activeElement.removeAttribute('data-t-1200');
+        activeElement.removeAttribute('data-t-1300');
+        activeElement.removeAttribute('data-t-1400');
+        activeElement.removeAttribute('data-t-1500');
+        activeElement.removeAttribute('data-t-1600');
+        activeElement.removeAttribute('data-t-1700');
+        activeElement.removeAttribute('data-t-1800');
+        activeElement.removeAttribute('data-t-1900');
+        activeElement.removeAttribute('data-t-2000');
+        activeElement.removeAttribute('data-t-2100');
+        activeElement.removeAttribute('data-t-2200');
+        activeElement.removeAttribute('data-t-2300');
+        activeElement.removeAttribute('data-t-2400');
+        activeElement.removeAttribute('data-t-2500');
+        activeElement.removeAttribute('data-t-2600');
+        activeElement.removeAttribute('data-t-2700');
+        activeElement.removeAttribute('data-t-2800');
+      }
     } // Cleanup from simple timeline panel