@innovastudio/contentbox 1.4.55 → 1.4.57

package/public/contentbox/contentbox.esm.js

@@ -737,6 +737,8 @@ class SideBar {
     const btnEditTimeline = this.pageQuickSettings.querySelector('.cmd-timeline-edit');
     if (btnEditTimeline) btnEditTimeline.addEventListener('click', () => {
       this.builder.timeline.edit();
+      const pop = this.builder.sidebar.pageQuickSettings;
+      this.builder.editor.util.hidePop(pop);
     });
 
     if (this.builder.useSidebar) {
@@ -4579,6 +4581,7 @@ class EditSection {
       activeSection.parentNode.insertBefore(activeSection, currPrev); //Trigger Render event
 
       this.builder.settings.onRender();
+      this.builder.refreshAnim();
       this.builder.scrollTo(activeSection, 600);
     }
   }
@@ -4598,6 +4601,7 @@ class EditSection {
       activeSection.parentNode.insertBefore(currNext, activeSection); //Trigger Render event
 
       this.builder.settings.onRender();
+      this.builder.refreshAnim();
       this.builder.scrollTo(activeSection, 600);
     }
 
@@ -4611,6 +4615,7 @@ class EditSection {
     activeSection.parentNode.insertBefore(activeSection, refSection); //Trigger Render event
 
     this.builder.settings.onRender();
+    this.builder.refreshAnim();
     this.builder.scrollTo(activeSection, 600);
   }
 
@@ -4622,6 +4627,7 @@ class EditSection {
     activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
 
     this.builder.settings.onRender();
+    this.builder.refreshAnim();
     this.builder.scrollTo(activeSection, 600);
   }
 
@@ -4676,6 +4682,7 @@ class EditSection {
     }); //Trigger Render event
 
     this.builder.settings.onRender();
+    this.builder.refreshAnim();
     this.builder.hideModal(this.modalEditSection);
     this.builder.scrollTo(section, 600); // Change
 
@@ -4794,7 +4801,8 @@ class EditSection {
     } //Trigger Render event
 
 
-    this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 100);
+    this.builder.settings.onRender();
+    this.builder.refreshAnim(); // this.builder.scrollTo(activeSection, 100);
   }
 
   boxSpacing(s) {
@@ -63686,7 +63694,8 @@ class Image$1 {
           let basename = '';
 
           if (img.src.indexOf('base64') === -1) {
-            let filename = img.src.substring(img.src.lastIndexOf('/') + 1);
+            let src = img.getAttribute('src');
+            let filename = src.substring(src.lastIndexOf('/') + 1);
             basename = dom.baseName(filename);
           } else {
             basename = dom.baseName(img.getAttribute('data-filename'));
@@ -90769,11 +90778,10 @@ class ContentBuilder {
       this.dom.addClass(row, 'row-outline');
     } //this.getState();
     // Call onContentClick to indicate click on editable content (eg. for plugin usage)
+    // if (!col.hasAttribute('data-html')) {
 
 
-    if (!col.hasAttribute('data-html')) {
-      if (this.opts.onContentClick) this.opts.onContentClick(e);
-    }
+    if (this.opts.onContentClick) this.opts.onContentClick(e); // }
 
     this.element.click(col, e);
     this.colTool.click(col);
@@ -90917,8 +90925,10 @@ class ContentBuilder {
       } // Enable resizable on click
 
 
-      this.resize = new Resize(col, this);
-      this.resize.enable();
+      if (!col.classList.contains('noresize')) {
+        this.resize = new Resize(col, this);
+        this.resize.enable();
+      }
     }
   }
 
@@ -93967,13 +93977,15 @@ 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="" 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>
+
+                                    <button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:34px;">${out('MD')}</button>
+                                    <button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:34px;">${out('LG')}</button>
+                                    <button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:34px;">${out('XL')}</button>
+                                
+                                    <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>.
+                                    </label>
                                 </div>
                             </div>
                             <div class="flex-wrap" style="margin-top:10px;">
@@ -95820,14 +95832,13 @@ 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');
         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="0"]');
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
         btn.classList.add('on');
       } else {
         section.classList.remove('section-pin');
@@ -95835,6 +95846,22 @@ class AnimateScroll {
       } //Trigger Change event
 
 
+      this.builder.onChange();
+    });
+    const chkPinOverlap = modalAnimateScroll.querySelector('#chkPinOverlap');
+    chkPinOverlap.addEventListener('click', () => {
+      const section = this.builder.activeSection;
+      if (!section) return;
+      this.builder.editor.saveForUndo();
+
+      if (chkPinOverlap.checked) {
+        section.classList.add('pin-overlap');
+      } else {
+        section.classList.remove('pin-overlap');
+        section.classList.remove('no-spacing'); // backward compatible (clean old)
+      } //Trigger Change event
+
+
       this.builder.onChange();
     });
     const btnPinSpacing = divPinSpacing.querySelectorAll('.cmd-pin-space');
@@ -95843,19 +95870,16 @@ class AnimateScroll {
         const section = this.builder.activeSection;
         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');
-        if (val === '80') section.classList.add('pin-space-80');
-        if (val === '100') section.classList.add('pin-space-100');
+        this.builder.editor.saveForUndo(); // section.classList.remove('pin-space-20'); // backward compatible (cleanup)
+        // section.classList.remove('pin-space-40');
+        // section.classList.remove('pin-space-60');
+        // section.classList.remove('pin-space-80');
+        // section.classList.remove('pin-space-100');
+
+        section.classList.remove('pin-space-lg');
+        section.classList.remove('pin-space-xl');
+        if (val === 'lg') section.classList.add('pin-space-lg');
+        if (val === 'xl') section.classList.add('pin-space-xl');
         let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
         elms.forEach(elm => {
           elm.classList.remove('on');
@@ -95899,12 +95923,15 @@ class AnimateScroll {
     chkLivePreview.addEventListener(this.builder.isTouchSupport ? 'touchstart' : 'click', () => {
       if (chkLivePreview.checked) {
         this.builder.doc.body.removeAttribute('data-skrollrr-off');
+        localStorage.removeItem('_disableanimation');
       } else {
         this.builder.doc.body.setAttribute('data-skrollrr-off', 'true');
 
         if (this.builder.win.skrollrr) {
           this.builder.win.skrollrr.refresh(); // remove lax if data-skrollrr-off=true
         }
+
+        localStorage.setItem('_disableanimation', '1');
       }
 
       this.refreshPage();
@@ -96021,8 +96048,7 @@ class AnimateScroll {
         let mainCss = this.builder.mainCss();
         localStorage.setItem('preview-maincss', mainCss);
         let sectionCss = this.builder.sectionCss();
-        localStorage.setItem('preview-sectioncss', sectionCss); // this.adjustMarginBottom();
-
+        localStorage.setItem('preview-sectioncss', sectionCss);
         modalPagePreview.querySelector('iframe').src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
       }
     };
@@ -96064,27 +96090,6 @@ class AnimateScroll {
     } catch (e) {// Do Nothing
     }
   }
-  /*
-  adjustMarginBottom() {
-      let n = 100;
-      let pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-20');
-      n += 20 * pins.length;
-      pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-40');
-      n += 40 * pins.length;
-      pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-60');
-      n += 60 * pins.length;
-      pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-80');
-      n += 80 * pins.length;
-      pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-100');
-      n += 100 * pins.length;
-       if(this.builder.wrapperEl.querySelector('.section-pin')) {
-          this.builder.wrapperEl.style.marginBottom = n + 'vh';
-      } else {
-          this.builder.wrapperEl.style.marginBottom = '';
-      }
-  }
-  */
-
 
   openPreview() {
     const modalPagePreview = this.builderStuff.querySelector('.is-modal.page-preview');
@@ -96098,7 +96103,7 @@ class AnimateScroll {
     modalPagePreview.classList.add('active');
     btnOpenPreviewWindow.classList.add('on');
     const iframe = modalPagePreview.querySelector('iframe');
-    iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000); // this.adjustMarginBottom();
+    iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
 
     if (localStorage.getItem('_livepreviewscreen') != null) {
       modalPagePreview.classList.remove('is-screen-1920');
@@ -96429,28 +96434,29 @@ class AnimateScroll {
         elm.classList.remove('on');
       });
 
-      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')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="40"]');
+      if (activeSection.classList.contains('pin-space-lg')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="lg"]');
         btn.classList.add('on');
-      } else if (activeSection.classList.contains('pin-space-60')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="60"]');
-        btn.classList.add('on');
-      } else if (activeSection.classList.contains('pin-space-80')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="80"]');
-        btn.classList.add('on');
-      } else if (activeSection.classList.contains('pin-space-100')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="100"]');
+      } else if (activeSection.classList.contains('pin-space-xl')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="xl"]');
         btn.classList.add('on');
       } else {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="0"]');
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
         btn.classList.add('on');
       }
+
+      const chkPinOverlap = this.modalAnimateScroll.querySelector('#chkPinOverlap');
+
+      if (activeSection.classList.contains('pin-overlap')) {
+        chkPinOverlap.checked = true;
+      } else {
+        chkPinOverlap.checked = false;
+
+        if (activeSection.classList.contains('no-spacing')) {
+          // backward compatible
+          chkPinOverlap.checked = true;
+        }
+      }
     }
 
     let activeElement;
@@ -98421,11 +98427,15 @@ class Timeline {
                             </div>
                             <div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
                                 <div class="flex-wrap">
-                                    <button title="0" class="cmd-pin-space" data-value="" style="padding-left:15px;padding-right:15px;height:34px;">${out('No Spacing')}</button>
-                                    <button title="0" class="cmd-pin-space" data-value="medium" style="padding-left:15px;padding-right:15px;height:34px;">${out('Medium')}</button>
-                                    <button title="20" class="cmd-pin-space" data-value="large" style="padding-left:15px;padding-right:15px;height:34px;">${out('Large')}</button>
+                                    <button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:34px;">${out('MD')}</button>
+                                    <button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:34px;">${out('LG')}</button>
+                                    <button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:34px;">${out('XL')}</button>
                                 </div>
-                                <label for="chkPinDesktopOnly" style="margin:0;display:flex;">
+                                <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>.
+                                </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>.
                                 </label>
@@ -98634,7 +98644,7 @@ class Timeline {
         elms.forEach(elm => {
           elm.classList.remove('on');
         });
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
         btn.classList.add('on');
       } else {
         section.classList.remove('section-pin');
@@ -98657,6 +98667,22 @@ class Timeline {
       } //Trigger Change event
 
 
+      this.builder.onChange();
+    });
+    const chkPinOverlap = modalTimeline.querySelector('#chkPinOverlap');
+    chkPinOverlap.addEventListener('click', () => {
+      const section = this.builder.activeSection;
+      if (!section) return;
+      this.builder.editor.saveForUndo();
+
+      if (chkPinOverlap.checked) {
+        section.classList.add('pin-overlap');
+      } else {
+        section.classList.remove('pin-overlap');
+        section.classList.remove('no-spacing'); // backward compatible (clean old)
+      } //Trigger Change event
+
+
       this.builder.onChange();
     });
     const btnPinSpacing = divPinSpacing.querySelectorAll('.cmd-pin-space');
@@ -98665,16 +98691,16 @@ class Timeline {
         const section = this.builder.activeSection;
         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');
-        section.classList.remove('pin-space-large');
-        if (val === '') section.classList.add('no-spacing');
-        if (val === 'large') section.classList.add('pin-space-large');
+        this.builder.editor.saveForUndo(); // section.classList.remove('pin-space-20'); // backward compatible (cleanup)
+        // section.classList.remove('pin-space-40');
+        // section.classList.remove('pin-space-60');
+        // section.classList.remove('pin-space-80');
+        // section.classList.remove('pin-space-100');
+
+        section.classList.remove('pin-space-lg');
+        section.classList.remove('pin-space-xl');
+        if (val === 'lg') section.classList.add('pin-space-lg');
+        if (val === 'xl') section.classList.add('pin-space-xl');
         let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
         elms.forEach(elm => {
           elm.classList.remove('on');
@@ -98927,14 +98953,18 @@ class Timeline {
     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');
   }
 
   read() {
     this.clearSettings();
-    let activeElement;
-    let target = this.getTarget();
-    activeElement = target.element;
-    if (!activeElement) return;
     const activeSection = this.builder.activeSection;
 
     if (activeSection) {
@@ -98957,23 +98987,40 @@ class Timeline {
         chkPinDesktopOnly.checked = false;
       }
 
+      const chkPinOverlap = this.modalTimeline.querySelector('#chkPinOverlap');
+
+      if (activeSection.classList.contains('pin-overlap')) {
+        chkPinOverlap.checked = true;
+      } else {
+        chkPinOverlap.checked = false;
+
+        if (activeSection.classList.contains('no-spacing')) {
+          // backward compatible
+          chkPinOverlap.checked = true;
+        }
+      }
+
       let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
       elms.forEach(elm => {
         elm.classList.remove('on');
       });
 
-      if (activeSection.classList.contains('no-spacing')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value=""]');
+      if (activeSection.classList.contains('pin-space-lg')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="lg"]');
         btn.classList.add('on');
-      } else if (activeSection.classList.contains('pin-space-large')) {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="large"]');
+      } else if (activeSection.classList.contains('pin-space-xl')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="xl"]');
         btn.classList.add('on');
       } else {
-        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
         btn.classList.add('on');
       }
     }
 
+    let activeElement;
+    let target = this.getTarget();
+    activeElement = target.element;
+    if (!activeElement) return;
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (activeElement.hasAttribute('data-smooth-scrolling')) {
@@ -99507,6 +99554,59 @@ class Timeline {
     activeElement.style.transform = '';
     activeElement.style.transition = '';
     activeElement.style.opacity = '';
+    /* mark device */
+
+    /*
+        xs:  Mobile: <= 414 (iPhone XR)
+        sm:  Tablet Portrait: <= 768 (iPad Mini 768x1024) => <=970
+        md:  Tablet Landscape: <= 1180 (iPad Air 1180x820)
+        lg:  Laptop: <= 1440
+        xl:  Desktop: <= 1920
+        xxl: Desktop: > 1920
+    */
+    // let XS = false;
+
+    if (activeElement.hasAttribute('data-xs-t') || activeElement.hasAttribute('data-xs-t-100') || activeElement.hasAttribute('data-xs-t-200') || activeElement.hasAttribute('data-xs-t-300') || activeElement.hasAttribute('data-xs-t-400') || activeElement.hasAttribute('data-xs-t-500') || activeElement.hasAttribute('data-xs-t-600') || activeElement.hasAttribute('data-xs-t-700') || activeElement.hasAttribute('data-xs-t-800') || activeElement.hasAttribute('data-xs-t-900') || activeElement.hasAttribute('data-xs-t-1000') || activeElement.hasAttribute('data-xs-t-1100') || activeElement.hasAttribute('data-xs-t-1200') || activeElement.hasAttribute('data-xs-t-1300') || activeElement.hasAttribute('data-xs-t-1400') || activeElement.hasAttribute('data-xs-t-1500') || activeElement.hasAttribute('data-xs-t-1600') || activeElement.hasAttribute('data-xs-t-1700') || activeElement.hasAttribute('data-xs-t-1800') || activeElement.hasAttribute('data-xs-t-1900') || activeElement.hasAttribute('data-xs-t-2000') || activeElement.hasAttribute('data-xs-t-2100') || activeElement.hasAttribute('data-xs-t-2200') || activeElement.hasAttribute('data-xs-t-2300') || activeElement.hasAttribute('data-xs-t-2400') || activeElement.hasAttribute('data-xs-t-2500') || activeElement.hasAttribute('data-xs-t-2600') || activeElement.hasAttribute('data-xs-t-2700') || activeElement.hasAttribute('data-xs-t-2800')) {
+      // XS = true;
+      activeElement.setAttribute('data-xs', '');
+    } else {
+      activeElement.removeAttribute('data-xs');
+    } // let SM = false;
+
+
+    if (activeElement.hasAttribute('data-sm-t') || activeElement.hasAttribute('data-sm-t-100') || activeElement.hasAttribute('data-sm-t-200') || activeElement.hasAttribute('data-sm-t-300') || activeElement.hasAttribute('data-sm-t-400') || activeElement.hasAttribute('data-sm-t-500') || activeElement.hasAttribute('data-sm-t-600') || activeElement.hasAttribute('data-sm-t-700') || activeElement.hasAttribute('data-sm-t-800') || activeElement.hasAttribute('data-sm-t-900') || activeElement.hasAttribute('data-sm-t-1000') || activeElement.hasAttribute('data-sm-t-1100') || activeElement.hasAttribute('data-sm-t-1200') || activeElement.hasAttribute('data-sm-t-1300') || activeElement.hasAttribute('data-sm-t-1400') || activeElement.hasAttribute('data-sm-t-1500') || activeElement.hasAttribute('data-sm-t-1600') || activeElement.hasAttribute('data-sm-t-1700') || activeElement.hasAttribute('data-sm-t-1800') || activeElement.hasAttribute('data-sm-t-1900') || activeElement.hasAttribute('data-sm-t-2000') || activeElement.hasAttribute('data-sm-t-2100') || activeElement.hasAttribute('data-sm-t-2200') || activeElement.hasAttribute('data-sm-t-2300') || activeElement.hasAttribute('data-sm-t-2400') || activeElement.hasAttribute('data-sm-t-2500') || activeElement.hasAttribute('data-sm-t-2600') || activeElement.hasAttribute('data-sm-t-2700') || activeElement.hasAttribute('data-sm-t-2800')) {
+      // SM = true;
+      activeElement.setAttribute('data-sm', '');
+    } else {
+      activeElement.removeAttribute('data-sm');
+    } // let MD = false;
+
+
+    if (activeElement.hasAttribute('data-md-t') || activeElement.hasAttribute('data-md-t-100') || activeElement.hasAttribute('data-md-t-200') || activeElement.hasAttribute('data-md-t-300') || activeElement.hasAttribute('data-md-t-400') || activeElement.hasAttribute('data-md-t-500') || activeElement.hasAttribute('data-md-t-600') || activeElement.hasAttribute('data-md-t-700') || activeElement.hasAttribute('data-md-t-800') || activeElement.hasAttribute('data-md-t-900') || activeElement.hasAttribute('data-md-t-1000') || activeElement.hasAttribute('data-md-t-1100') || activeElement.hasAttribute('data-md-t-1200') || activeElement.hasAttribute('data-md-t-1300') || activeElement.hasAttribute('data-md-t-1400') || activeElement.hasAttribute('data-md-t-1500') || activeElement.hasAttribute('data-md-t-1600') || activeElement.hasAttribute('data-md-t-1700') || activeElement.hasAttribute('data-md-t-1800') || activeElement.hasAttribute('data-md-t-1900') || activeElement.hasAttribute('data-md-t-2000') || activeElement.hasAttribute('data-md-t-2100') || activeElement.hasAttribute('data-md-t-2200') || activeElement.hasAttribute('data-md-t-2300') || activeElement.hasAttribute('data-md-t-2400') || activeElement.hasAttribute('data-md-t-2500') || activeElement.hasAttribute('data-md-t-2600') || activeElement.hasAttribute('data-md-t-2700') || activeElement.hasAttribute('data-md-t-2800')) {
+      // MD = true;
+      activeElement.setAttribute('data-md', '');
+    } else {
+      activeElement.removeAttribute('data-md');
+    } // let LG = false;
+
+
+    if (activeElement.hasAttribute('data-lg-t') || activeElement.hasAttribute('data-lg-t-100') || activeElement.hasAttribute('data-lg-t-200') || activeElement.hasAttribute('data-lg-t-300') || activeElement.hasAttribute('data-lg-t-400') || activeElement.hasAttribute('data-lg-t-500') || activeElement.hasAttribute('data-lg-t-600') || activeElement.hasAttribute('data-lg-t-700') || activeElement.hasAttribute('data-lg-t-800') || activeElement.hasAttribute('data-lg-t-900') || activeElement.hasAttribute('data-lg-t-1000') || activeElement.hasAttribute('data-lg-t-1100') || activeElement.hasAttribute('data-lg-t-1200') || activeElement.hasAttribute('data-lg-t-1300') || activeElement.hasAttribute('data-lg-t-1400') || activeElement.hasAttribute('data-lg-t-1500') || activeElement.hasAttribute('data-lg-t-1600') || activeElement.hasAttribute('data-lg-t-1700') || activeElement.hasAttribute('data-lg-t-1800') || activeElement.hasAttribute('data-lg-t-1900') || activeElement.hasAttribute('data-lg-t-2000') || activeElement.hasAttribute('data-lg-t-2100') || activeElement.hasAttribute('data-lg-t-2200') || activeElement.hasAttribute('data-lg-t-2300') || activeElement.hasAttribute('data-lg-t-2400') || activeElement.hasAttribute('data-lg-t-2500') || activeElement.hasAttribute('data-lg-t-2600') || activeElement.hasAttribute('data-lg-t-2700') || activeElement.hasAttribute('data-lg-t-2800')) {
+      // LG = true;
+      activeElement.setAttribute('data-lg', '');
+    } else {
+      activeElement.removeAttribute('data-lg');
+    } // let XL = false;
+
+
+    if (activeElement.hasAttribute('data-xl-t') || activeElement.hasAttribute('data-xl-t-100') || activeElement.hasAttribute('data-xl-t-200') || activeElement.hasAttribute('data-xl-t-300') || activeElement.hasAttribute('data-xl-t-400') || activeElement.hasAttribute('data-xl-t-500') || activeElement.hasAttribute('data-xl-t-600') || activeElement.hasAttribute('data-xl-t-700') || activeElement.hasAttribute('data-xl-t-800') || activeElement.hasAttribute('data-xl-t-900') || activeElement.hasAttribute('data-xl-t-1000') || activeElement.hasAttribute('data-xl-t-1100') || activeElement.hasAttribute('data-xl-t-1200') || activeElement.hasAttribute('data-xl-t-1300') || activeElement.hasAttribute('data-xl-t-1400') || activeElement.hasAttribute('data-xl-t-1500') || activeElement.hasAttribute('data-xl-t-1600') || activeElement.hasAttribute('data-xl-t-1700') || activeElement.hasAttribute('data-xl-t-1800') || activeElement.hasAttribute('data-xl-t-1900') || activeElement.hasAttribute('data-xl-t-2000') || activeElement.hasAttribute('data-xl-t-2100') || activeElement.hasAttribute('data-xl-t-2200') || activeElement.hasAttribute('data-xl-t-2300') || activeElement.hasAttribute('data-xl-t-2400') || activeElement.hasAttribute('data-xl-t-2500') || activeElement.hasAttribute('data-xl-t-2600') || activeElement.hasAttribute('data-xl-t-2700') || activeElement.hasAttribute('data-xl-t-2800')) {
+      // XL = true;
+      activeElement.setAttribute('data-xl', '');
+    } else {
+      activeElement.removeAttribute('data-xl');
+    }
+    /* /mark device */
+
+
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -99702,7 +99802,27 @@ class Timeline {
         return this.readTarget('bg');
       }
 
-      if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
+      let css1, css2, css3; // enter start
+
+      css1 = activeElement.getAttribute('data-bottom-top');
+      if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+
+      css2 = activeElement.getAttribute('data-top-bottom'); // }
+      // timeline 
+
+      css3 = activeElement.getAttribute('data-in');
+      if (!css3) css3 = activeElement.getAttribute('data-in-150');
+      if (!css3) css3 = activeElement.getAttribute('data-in-300');
+      if (!css3) css3 = activeElement.getAttribute('data-cen--150');
+      if (!css3) css3 = activeElement.getAttribute('data-cen');
+      if (!css3) css3 = activeElement.getAttribute('data-cen-150');
+      if (!css3) css3 = activeElement.getAttribute('data-out--300');
+      if (!css3) css3 = activeElement.getAttribute('data-out--150');
+      if (!css3) css3 = activeElement.getAttribute('data-out');
+
+      if (css1 || css2 || css3 || activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
         return {
           'element': activeElement,
           'name': 'inspectedElement'
@@ -99764,7 +99884,27 @@ class Timeline {
         if (s === 'section') return false;
       }
 
-      if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
+      let css1, css2, css3; // enter start
+
+      css1 = activeElement.getAttribute('data-bottom-top');
+      if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+
+      css2 = activeElement.getAttribute('data-top-bottom'); // }
+      // timeline 
+
+      css3 = activeElement.getAttribute('data-in');
+      if (!css3) css3 = activeElement.getAttribute('data-in-150');
+      if (!css3) css3 = activeElement.getAttribute('data-in-300');
+      if (!css3) css3 = activeElement.getAttribute('data-cen--150');
+      if (!css3) css3 = activeElement.getAttribute('data-cen');
+      if (!css3) css3 = activeElement.getAttribute('data-cen-150');
+      if (!css3) css3 = activeElement.getAttribute('data-out--300');
+      if (!css3) css3 = activeElement.getAttribute('data-out--150');
+      if (!css3) css3 = activeElement.getAttribute('data-out');
+
+      if (css1 || css2 || css3 || activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
         return {
           'element': activeElement,
           'name': s
@@ -99826,6 +99966,7 @@ class Timeline {
     modalEditBox.style.display = '';
     const modalEditSection = this.builderStuff.querySelector('.editsection');
     modalEditSection.style.display = '';
+    localStorage.setItem('_timelinewindow', '1');
   }
 
   close() {
@@ -99833,6 +99974,7 @@ class Timeline {
 
     this.builder.doc.body.classList.remove('selection-only');
     document.body.classList.remove('selection-only');
+    localStorage.removeItem('_timelinewindow');
   }
 
 }
@@ -99879,6 +100021,7 @@ class ContentBox {
       enableContentStyle: true,
       disableStaticSection: false,
       framework: '',
+      imageRenameOnEdit: true,
       // Old Template System:
       designUrl1: 'assets/designs/basic.js',
       designUrl2: 'assets/designs/examples.js',
@@ -102535,6 +102678,7 @@ class ContentBox {
       snippetPathReplace: this.settings.snippetPathReplace,
       maxColumns: this.settings.maxColumns,
       maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
+      imageRenameOnEdit: this.settings.imageRenameOnEdit,
       onSectionAdd: () => {
         this.pageSetup();
       },
@@ -103056,11 +103200,22 @@ class ContentBox {
       // setTimeout(()=>{
       //     pageOverlay.parentNode.removeChild(pageOverlay);
       // }, 10);
+      // Remember UI
 
 
       if (localStorage.getItem('_livepreview') != null) {
         this.openPreview();
       }
+
+      if (localStorage.getItem('_disableanimation') != null) {
+        this.doc.body.setAttribute('data-skrollrr-off', 'true');
+        const chkLivePreview = this.sidebar.pageQuickSettings.querySelector('.cmd-live-preview');
+        chkLivePreview.checked = false;
+      }
+
+      if (localStorage.getItem('_timelinewindow') != null) {
+        this.timeline.edit();
+      }
     }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
 
     let showProgress = false;
@@ -103148,6 +103303,13 @@ class ContentBox {
           let controlBox = this.doc.querySelector('.moveable-control-box');
           if (controlBox) controlBox.style.display = 'none';
         }
+
+        if (this.editor.activeElement.closest('.scroll-y')) {
+          this.doc.body.classList.add('temporary-hide-tools');
+          if (this.editor.moveable) this.editor.moveable.updateRect();
+          let controlBox = this.doc.querySelector('.moveable-control-box');
+          if (controlBox) controlBox.style.display = 'none';
+        }
       }
     }); // Add document Click event
 
@@ -103580,6 +103742,16 @@ class ContentBox {
         if (controlBox) controlBox.style.display = 'none';
       });
     }
+
+    let scrollY = section.querySelectorAll('.scroll-y');
+    scrollY.forEach(elm => {
+      elm.addEventListener('scroll', () => {
+        this.doc.body.classList.add('temporary-hide-tools');
+        if (this.editor.moveable) this.editor.moveable.updateRect();
+        let controlBox = this.doc.querySelector('.moveable-control-box');
+        if (controlBox) controlBox.style.display = 'none';
+      });
+    });
   }
 
   boxSetup(box) {