@innovastudio/contentbox 1.6.48 → 1.6.50

package/public/contentbox/contentbox.esm.js

@@ -1159,8 +1159,7 @@ class SideBar {
           this.closeSidebar(); // Close all modeless dialogs
 
           if (this.builder.editbox) this.builder.editbox.close();
-          if (this.builder.editsection) this.builder.editsection.close();
-          this.builder.animateScroll.close(); // Close anim side panel
+          if (this.builder.editsection) this.builder.editsection.close(); // this.builder.animateScroll.close(); // Close anim side panel
 
           if (toggle) return;
           let panelId = btn.getAttribute('data-content');
@@ -13095,18 +13094,20 @@ class PanelBox {
             </div>
 
             <div class="div-boxcanvas">
-                <div class="breakpoint-list"></div>
 
                 <div class="adjustboxheight">
                     <div class="label mt-3">${out('Height')}:</div>
-                    <div class="group">
+                    <div class="group" style="margin-top:5px">
+                        <button title="${out('Lock')}" data-boxheight="set" style="width:75px">${out('Lock')}</button>
                         <button title="${out('Decrease')}" data-boxheight="-"><svg><use xlink:href="#icon-minus"></use></svg></button>
                         <button title="${out('Increase')}" data-boxheight="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
                         <button title="${out('Clear')}" data-boxheight=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
                 </div>
 
-                <label class="label checkbox mt-3">
+                <div class="breakpoint-list"></div>
+
+                <label class="label checkbox mt-4" style="margin-bottom:15px">
                     <input type="checkbox" class="chk-auto-layout" />
                     <span>${out('Auto Layout on Mobile')}</span>
                 </label>
@@ -13539,6 +13540,8 @@ class PanelBox {
           newHeight = currentHeight + 50;
         } else if (s === '-') {
           newHeight = currentHeight - 50;
+        } else if (s === 'set') {
+          newHeight = currentHeight;
         } else {
           newHeight = '';
         }
@@ -13556,7 +13559,14 @@ class PanelBox {
             box.removeAttribute('data--h-' + breakpoint);
           } else {
             box.removeAttribute('data--h', newHeight);
-          }
+          } // const attributes = box.attributes;
+          // for (let i = 0; i < attributes.length; i++) {
+          //     const attributeName = attributes[i].name;
+          //     if (attributeName.includes('data--h-')) {
+          //         box.removeAttribute(attributeName);
+          //     }
+          // }
+
 
           box.style.height = '';
         }
@@ -13920,6 +13930,9 @@ class PanelBox {
       if (attributeName.includes('data--h-')) {
         let val = attributeName.replace('data--h-', '');
         if (!breakpoints.includes(val)) breakpoints.push(val);
+      } else if (attributeName === 'data--h') {
+        let val = 'default';
+        if (!breakpoints.includes(val)) breakpoints.push(val);
       }
     }
 
@@ -13933,7 +13946,7 @@ class PanelBox {
     for (let i = 0; i < attributes.length; i++) {
       const attributeName = attributes[i].name;
 
-      if (attributeName.includes('data--h-')) {
+      if (attributeName.includes('data--h')) {
         attributesToRemove.push(attributeName);
       }
     }
@@ -13952,19 +13965,22 @@ class PanelBox {
     if (!activeBox) return;
     const breakpoints = this.getBreakpoints(activeBox);
     breakpoints.forEach(item => {
-      s += `<button data-breakpoint="${item}" style="width:60px">${item}px</button>`;
+      if (item === 'default') {
+        s += `<button data-breakpoint="1920" style="width:60px">${out('default')}</button>`;
+      } else {
+        s += `<button data-breakpoint="${item}" style="width:60px">${item}px</button>`;
+      }
     });
 
     if (s !== '') {
       this.breakpointList.innerHTML = `
 
-            <div class="label">${out('Breakpoints')}:</div>
+            <!--<div class="label mt-1">${out('Breakpoints')}:</div>-->
 
             <div class="flex">
                 <div class="mr-2">
                     <div class="group breakpoint-buttons" style="width:auto;display:inline-flex;max-width:135px">
                         ${s}
-                        <button data-breakpoint="1920" style="width:60px">${out('default')}</button>
                     </div>
                 </div>
                 <div>
@@ -15560,8 +15576,17 @@ class PanelBlock {
 
   blockOverlay() {
     let block = this.builder.controlpanel.activeBlock;
-    if (!block) return false;
-    let blockOverlay = block.querySelector('.is-block-overlay');
+    if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
+
+    let children = block.children;
+    let blockOverlay = null;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].classList.contains('is-block-overlay')) {
+        blockOverlay = children[i];
+        break;
+      }
+    }
 
     if (!blockOverlay) {
       block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
@@ -17531,13 +17556,25 @@ class PanelColumn {
         activeColumn.classList.add('xs-hidden');
       } else if (target === 'sm') {
         activeColumn.classList.add('sm-hidden');
-        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        activeColumn.classList.add('xs-hidden');
       } else if (target === 'md') {
         activeColumn.classList.add('md-hidden');
-        activeColumn.parentNode.classList.add('md-autofit');
+        activeColumn.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        activeColumn.classList.add('sm-hidden');
+        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.classList.add('xs-hidden');
       } else if (target === '') {
         activeColumn.classList.add('desktop-hidden');
-        activeColumn.parentNode.classList.add('desktop-autofit');
+        activeColumn.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        activeColumn.classList.add('md-hidden');
+        activeColumn.parentNode.classList.add('md-autofit');
+        activeColumn.classList.add('sm-hidden');
+        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.classList.add('xs-hidden');
       }
     }
 
@@ -17881,6 +17918,23 @@ class PanelRow {
         let screenMode = this.builder.screenMode;
         if (screenMode === 'desktop') prefix = 'desktop-items-';else if (screenMode === 'tablet-landscape') prefix = 'md-items-';else if (screenMode === 'tablet') prefix = 'sm-items-';else if (screenMode === 'mobile') prefix = 'xs-items-';
 
+        if (this.builder.doc.body.hasAttribute('data-breakpoint')) {
+          const breakpoint = this.builder.doc.body.getAttribute('data-breakpoint');
+
+          if (breakpoint <= 760) {
+            prefix = 'xs-items-';
+          } else if (760 < breakpoint && breakpoint <= 970) {
+            prefix = 'sm-items-';
+          } else if (970 < breakpoint && breakpoint <= 1280) {
+            prefix = 'md-items-';
+          } else if (1280 < breakpoint && breakpoint <= 1920) {
+            prefix = 'desktop-items-';
+          } else {
+            // 1920<breakpoint
+            prefix = 'desktop-items-';
+          }
+        }
+
         for (let j = 1; j <= 6; j++) {
           activeRow.classList.remove(prefix + j);
         }
@@ -18144,13 +18198,25 @@ class PanelRow {
         activeRow.classList.add('xs-hidden');
       } else if (target === 'sm') {
         activeRow.classList.add('sm-hidden');
-        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        activeRow.classList.add('xs-hidden');
       } else if (target === 'md') {
         activeRow.classList.add('md-hidden');
-        activeRow.parentNode.classList.add('md-autofit');
+        activeRow.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        activeRow.classList.add('sm-hidden');
+        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.classList.add('xs-hidden');
       } else if (target === '') {
         activeRow.classList.add('desktop-hidden');
-        activeRow.parentNode.classList.add('desktop-autofit');
+        activeRow.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        activeRow.classList.add('md-hidden');
+        activeRow.parentNode.classList.add('md-autofit');
+        activeRow.classList.add('sm-hidden');
+        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.classList.add('xs-hidden');
       }
     }
 
@@ -22307,7 +22373,6 @@ class BlockOptions {
 
             <div class="panel-pop unit-1" tabIndex="-1" aria-hidden="true">
                 <button title="px">px</button>
-                <button title="px">%</button>
                 <button title="vw">vw</button>
                 <button title="vw">vh</button>
                 <button title="em">em</button>
@@ -22487,8 +22552,17 @@ class BlockOptions {
 
   blockOverlay() {
     let block = this.builder.controlpanel.activeBlock;
-    if (!block) return false;
-    let blockOverlay = block.querySelector('.is-block-overlay');
+    if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
+
+    let children = block.children;
+    let blockOverlay = null;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].classList.contains('is-block-overlay')) {
+        blockOverlay = children[i];
+        break;
+      }
+    }
 
     if (!blockOverlay) {
       block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
@@ -23881,38 +23955,45 @@ class Element$2 {
   }
 
   parseStyle(element, property) {
-    const styleValue = element.style[property];
-    const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
-
-    if (property === 'line-height') {
-      // line-height can have no unit, ex: 1, 1.4, etc
-      if (match) {
-        const numericValue = match[1];
-        const unit = match[2];
-        return {
-          value: numericValue,
-          unit
-        };
-      } else {
-        return {
-          value: styleValue,
-          unit: ''
-        };
-      }
-    } else {
-      if (match) {
-        const numericValue = match[1];
-        const unit = match[2];
-        return {
-          value: numericValue,
-          unit
-        };
+    try {
+      const styleValue = element.style[property];
+      const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
+
+      if (property === 'line-height') {
+        // line-height can have no unit, ex: 1, 1.4, etc
+        if (match) {
+          const numericValue = match[1];
+          const unit = match[2];
+          return {
+            value: numericValue,
+            unit
+          };
+        } else {
+          return {
+            value: styleValue,
+            unit: ''
+          };
+        }
       } else {
-        return {
-          value: '',
-          unit: 'px'
-        };
+        if (match) {
+          const numericValue = match[1];
+          const unit = match[2];
+          return {
+            value: numericValue,
+            unit
+          };
+        } else {
+          return {
+            value: '',
+            unit: 'px'
+          };
+        }
       }
+    } catch (e) {
+      return {
+        value: '',
+        unit: 'px'
+      };
     }
   }
 
@@ -24111,13 +24192,25 @@ class Element$2 {
         elm.classList.add('xs-hidden');
       } else if (target === 'sm') {
         elm.classList.add('sm-hidden');
-        elm.parentNode.classList.add('sm-autofit');
+        elm.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        elm.classList.add('xs-hidden');
       } else if (target === 'md') {
         elm.classList.add('md-hidden');
-        elm.parentNode.classList.add('md-autofit');
+        elm.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        elm.classList.add('sm-hidden');
+        elm.parentNode.classList.add('sm-autofit');
+        elm.classList.add('xs-hidden');
       } else if (target === '') {
         elm.classList.add('desktop-hidden');
-        elm.parentNode.classList.add('desktop-autofit');
+        elm.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        elm.classList.add('md-hidden');
+        elm.parentNode.classList.add('md-autofit');
+        elm.classList.add('sm-hidden');
+        elm.parentNode.classList.add('sm-autofit');
+        elm.classList.add('xs-hidden');
       }
     }
 
@@ -24238,16 +24331,19 @@ class Shadow {
     });
     const btnCleanShadow = dialog.querySelector('.btn-clean-shadow');
     btnCleanShadow.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
       let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
 
       if (elm) {
         elm.style.boxShadow = '';
+        this.builder.controlpanel.objDialogElement.refresh();
       } else {
         elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
         if (elm) elm.style.boxShadow = '';
+        this.getState();
       }
 
-      this.builder.controlpanel.objDialogElement.refresh();
+      this.builder.onChange();
     }); // Adjustments
 
     const inpAdjustX = dialog.querySelector('.inp-shadow-x');
@@ -107680,10 +107776,14 @@ class Common {
   applyPercentage(block) {
     const zoom = this.zoom;
     const rect = this.getRect(block);
-    const container = block.closest('.box-canvas');
+    let container = block.closest('.box-canvas');
+    if (block.parentNode.closest(this.selector)) {
+      // block is in  group
+      container = block.parentNode.closest(this.selector);
+    }
     const containerRect = this.getRect(container); // if container has top/left
 
-    this.horizontalRulerTop = container.querySelector('.h-ruler-top');
+    this.horizontalRulerTop = container.querySelector('.h-ruler-top'); // no rulers in group
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
     this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
     this.verticalRulerLeft = container.querySelector('.v-ruler-left');
@@ -107695,10 +107795,10 @@ class Common {
     let bottomTouched = false;
     let leftTouched = false;
     let rightTouched = false;
-    if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
-    if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
-    if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
-    if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
+    if (this.horizontalRulerTop && this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
+    if (this.horizontalRulerBottom && this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
+    if (this.verticalRulerLeft && this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
+    if (this.verticalRulerRight && this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
     let isChildBlock = false;
     if (block.parentNode.matches(this.selector)) {
       // child block
@@ -107777,10 +107877,10 @@ class Common {
 
     // reset
     setTimeout(() => {
-      this.horizontalRulerTop.removeAttribute('data-topTouched');
-      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
-      this.verticalRulerLeft.removeAttribute('data-leftTouched');
-      this.verticalRulerRight.removeAttribute('data-rightTouched');
+      if (this.horizontalRulerTop) this.horizontalRulerTop.removeAttribute('data-topTouched');
+      if (this.horizontalRulerBottom) this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      if (this.verticalRulerLeft) this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      if (this.verticalRulerRight) this.verticalRulerRight.removeAttribute('data-rightTouched');
     }, 10);
   }
   applyPixels(block) {
@@ -108278,6 +108378,8 @@ class Ruler {
     this.rulerRight = null;
   }
   updateRulers(block) {
+    if (block.parentNode.closest(this.selector)) return; // block is in  group
+
     const container = block.closest('.box-canvas');
     this.horizontalRulerTop = container.querySelector('.h-ruler-top');
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
@@ -108302,6 +108404,8 @@ class Ruler {
     this.rulerRight = null;
     this.elements = container.querySelectorAll(this.selector);
     this.elements.forEach(element => {
+      if (element.parentNode.closest(this.selector)) return; // block is in  group
+
       if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
 
       if (block.contains(element)) return; // In case of group moving
@@ -108980,7 +109084,6 @@ class Resizable {
     }
 
     this.target = event.target.parentNode; // block
-
     this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
     event.preventDefault();
     event.stopPropagation();
@@ -108999,6 +109102,8 @@ class Resizable {
         this.startX = touch.clientX;
         this.startY = touch.clientY;
       }
+      this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
+      if (this.clonedTarget) this.clonedTarget.style.transition = '';
 
       //Initial
       this.initialWidth = parseFloat(getComputedStyle(this.target).width);
@@ -109485,6 +109590,7 @@ class Draggable {
       const y = startY - rect.top + containerRect.top;
       target.setAttribute('data-startx', x);
       target.setAttribute('data-starty', y);
+      target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
 
       // reset (from applyPercentage bottomTouched)
       if (target.style.bottom) {
@@ -109561,33 +109667,35 @@ class Draggable {
   updateBlockStyle(target) {
     // Block placement should must not 50% outside the container
     const container = target.closest('.box-canvas');
-    let containerHeight = container.offsetHeight;
-    let containerWidth = container.offsetWidth;
-    /*
-    if(target.offsetTop + target.offsetHeight>=containerHeight) {
-        target.style.top = containerHeight-target.offsetHeight +'px';
-    }
-    if(target.offsetTop<=0) {
+    if (!target.parentNode.closest('.is-group')) {
+      let containerHeight = container.offsetHeight;
+      let containerWidth = container.offsetWidth;
+      /*
+      if(target.offsetTop + target.offsetHeight>=containerHeight) {
+          target.style.top = containerHeight-target.offsetHeight +'px';
+      }
+      if(target.offsetTop<=0) {
+          target.style.top = '0px';
+      }
+      if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
+          target.style.left = (containerWidth-target.offsetWidth) +'px';
+      }
+      if(target.offsetLeft<=0) {
+          target.style.left = '0px';
+      }
+      */
+      if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
         target.style.top = '0px';
-    }
-    if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
-        target.style.left = (containerWidth-target.offsetWidth) +'px';
-    }
-    if(target.offsetLeft<=0) {
+      }
+      if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
+        target.style.top = containerHeight - target.offsetHeight + 'px';
+      }
+      if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
         target.style.left = '0px';
-    }
-    */
-    if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
-      target.style.top = '0px';
-    }
-    if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
-      target.style.top = containerHeight - target.offsetHeight + 'px';
-    }
-    if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
-      target.style.left = '0px';
-    }
-    if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
-      target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
+      if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
+        target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
     }
 
     // Replace with ruler's alignment
@@ -113959,6 +114067,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           let clonedDiv = block.cloneNode(true);
           clonedDiv.style.top = '20%';
           clonedDiv.style.left = '20%';
+          clonedDiv.style.transform = ''; // clear anim
+          clonedDiv.style.transition = '';
+          clonedDiv.style.opacity = '';
           if (builder) {
             const cloneBuilder = clonedDiv.querySelector(this.container);
             cloneBuilder.innerHTML = '';
@@ -113968,7 +114079,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             this.applyBehaviorOn(cloneBuilder);
             cloneBuilder.click();
           } else {
-            block.parentNode.appendChild(clonedDiv);
+            box.appendChild(clonedDiv);
           }
           block.classList.remove('active');
           this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
@@ -119029,6 +119140,23 @@ class AnimateScroll {
     this.builderStuff = builderStuff;
     let html = `
         <style>
+
+        .is-modal.animatescroll {
+            width: 370px !important; 
+            height: 85vh !important; 
+            top: 10vh !important; 
+            bottom: auto !important; 
+            left: auto !important; 
+            right: 90px !important; 
+            z-index: 10002 !important; 
+            font-size: 12px;
+            max-height: 1006px;
+        }
+        .animatescroll .is-modal-bar {
+            font-size: 12px !important;
+        }
+
+
         #_cbhtml .is-side.animatescroll, 
         .is-ui .is-side.animatescroll {
             width: 370px;
@@ -119075,7 +119203,7 @@ class AnimateScroll {
             position: absolute;
             top: 0;
             box-sizing: border-box;
-            border-top: transparent 245px solid !important;
+            border-top: transparent 208px solid !important;
         }
         #divEnterAnim, #divLeaveAnim, #divAnimSettings {
             border-top: transparent 55px solid !important;
@@ -119163,7 +119291,7 @@ class AnimateScroll {
         }
 
         .div-anim-settings,.div-wizard-settings{
-            height: calc(100vh - 34px)
+            height: 100%;
         }
         .div-wizard-settings{
             padding: 10px 15px 0 18px !important;
@@ -119174,19 +119302,23 @@ class AnimateScroll {
         }
         </style>
 
-        <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-
-            <div class="side-title">${out('Animation')}</div>
-
-            <button tabindex="-1" title="${out('Close')}" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+        <div class="is-modal is-modal-content animatescroll keep-selection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+        <div class="is-modal-bar is-draggable" draggable=""> 
+            <span>${out('Animation')}</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>
+        </div>
+        <div style="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
 
-            <button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:64px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
+            <button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:30px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
            
             <div class="div-anim-settings" style="display:none">
             
                 <div class="div-anim-apply-to" style="padding:18px 10px 22px 18px;z-index:2;position:relative;">
                     <div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
-                    <div class="flex-wrap">
+                    <div class="flex-wrap" style="height:70px">
+                        <button title="${out('Block')}" class="cmd-target on" data-command="target" data-value="block">${out('Block')}</button>
                         <button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element">${out('Element')}</button>
                         <button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column">${out('Column')}</button>
                         <button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row">${out('Row')}</button>
@@ -119961,7 +120093,7 @@ class AnimateScroll {
                     </button>
                 </div>
 
-                <div class="anim-preset-list" style="height: calc(100vh - 97px);
+                <div class="anim-preset-list" style="height: calc(100% - 63px);
                 overflow: auto;
                 width: 347px;">
                     <div style="display:flex;
@@ -120015,14 +120147,15 @@ class AnimateScroll {
 
         </div>
         `;
-    dom$2.appendHtml(builderStuff, html);
-    const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
+    dom$2.appendHtml(builderStuff, html); // const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
+
+    const modalAnimateScroll = builderStuff.querySelector('.is-modal.animatescroll');
     this.modalAnimateScroll = modalAnimateScroll;
     const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
     this.divEnterAnim = divEnterAnim;
     const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
     this.divLeaveAnim = divLeaveAnim;
-    const btnClose = modalAnimateScroll.querySelector('.is-side-close');
+    const btnClose = modalAnimateScroll.querySelector('.is-modal-close');
     btnClose.addEventListener('click', () => {
       this.close();
     });
@@ -121514,7 +121647,7 @@ class AnimateScroll {
     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 = section.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');
@@ -121549,20 +121682,21 @@ class AnimateScroll {
       elm.removeAttribute('data-hidden-onstart');
       elm.style.transform = '';
       elm.style.transition = '';
-      elm.style.opacity = ''; // console.log(elm)
+      elm.style.opacity = '';
+      this.restart(); // console.log(elm)
     });
     elms = section.querySelectorAll('.is-animated');
     elms.forEach(elm => {
       // if(elm.classList.contains('is-overlay-bg')) return;
       this.cleanupBasic(elm);
       this.cleanupDelay(elm);
-    });
-    setTimeout(() => {
-      // if (this.builder.win.skrollrr) {
-      //     this.builder.win.skrollrr.refresh();
-      // }
-      this.restart();
-    }, 30); // Refresh
+    }); // setTimeout(()=>{
+    //     // if (this.builder.win.skrollrr) {
+    //     //     this.builder.win.skrollrr.refresh();
+    //     // }
+    //     this.restart();
+    // },30);
+    // Refresh
 
     this.builder.settings.onRender();
   }
@@ -121617,9 +121751,28 @@ class AnimateScroll {
     const addPreset = box => {
       let index = start;
       const chkPresetAnimOnce = this.modalAnimateScroll.querySelector('#chkPresetAnimOnce');
-      const rows = box.querySelectorAll('.is-container > div');
-      rows.forEach(row => {
-        const cols = this.builder.editor.dom.elementChildren(row);
+      const rows = box.querySelectorAll('.is-container > div, .is-block .is-block-overlay');
+      rows.forEach(elm => {
+        if (elm.classList.contains('is-block-overlay') && !elm.closest('clone')) {
+          if (elm.querySelector('.is-container')) return;
+          elm.style.transition = 'none';
+          elm.classList.add('is-animated');
+
+          if (chkPresetAnimOnce.checked) {
+            elm.classList.add('once');
+          } else {
+            elm.classList.remove('once');
+          } // elm.classList.add('is-fadeInUp');
+          // process(elm, index);
+
+
+          elm.classList.add(presetName);
+          if (index !== 0) elm.classList.add(`delay-${index * delay}ms`);
+          elm.classList.remove('is-inview');
+          index++;
+        }
+
+        const cols = this.builder.editor.dom.elementChildren(elm);
         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);
@@ -121639,8 +121792,8 @@ class AnimateScroll {
           if (index !== 0) col.classList.add(`delay-${index * delay}ms`);
           col.classList.remove('is-inview');
           index++;
-        }); // row.setAttribute('data-bottom-top', 'transform: translateY(125px)');
-        // row.setAttribute('data-center', 'transform: translateY(0px)');
+        }); // elm.setAttribute('data-bottom-top', 'transform: translateY(125px)');
+        // elm.setAttribute('data-center', 'transform: translateY(0px)');
       });
       start++;
     };
@@ -121692,6 +121845,12 @@ class AnimateScroll {
   }
 
   restart() {
+    if (this.builder.controlpanel.activeBlock && this.builder.editor.activeElement) {
+      // cannot handle editable block
+      if (this.builder.win.pageReRender) this.builder.win.pageReRender();
+      return;
+    }
+
     this.noRead = true; // Save selection
 
     let target = this.getTarget();
@@ -121700,6 +121859,7 @@ class AnimateScroll {
     if (this.builder.editor.activeElement) this.builder.editor.activeElement.setAttribute('data-save-element', '1');
     if (this.builder.activeBox) this.builder.activeBox.setAttribute('data-save-box', '1');
     if (this.builder.activeSection) this.builder.activeSection.setAttribute('data-save-section', '1');
+    if (this.builder.controlpanel.activeBlock) this.builder.controlpanel.activeBlock.setAttribute('data-save-block', '1');
     this.builder.markScrollTarget(this.builder.activeSection); //--- Same as undo/redo process ---
 
     const wrapper = this.builder.wrapperEl;
@@ -121775,6 +121935,14 @@ class AnimateScroll {
       this.builder.activeSection = section;
     }
 
+    let block = this.builder.doc.querySelector('[data-save-block]');
+
+    if (block) {
+      block.classList.add('active');
+      block.removeAttribute('data-save-block');
+      this.builder.controlpanel.activeBlock = block;
+    }
+
     setTimeout(() => {
       this.noRead = false;
     }, 100);
@@ -121835,10 +122003,34 @@ class AnimateScroll {
   }
 
   clickContent() {
+    // Show hide buttons
+    let btns = this.modalAnimateScroll.querySelectorAll('.cmd-target');
+    btns.forEach(btn => btn.style.display = 'none');
+    let activeElement = this.builder.editor.inspectedElement;
+    let block = this.getBlock();
+    btns.forEach(btn => {
+      if (block) {
+        let s = btn.getAttribute('data-value');
+
+        if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          btn.style.display = '';
+        }
+      } else if (activeElement) {
+        let s = btn.getAttribute('data-value');
+
+        if (s !== 'block') {
+          btn.style.display = '';
+        }
+      } else {
+        let s = btn.getAttribute('data-value');
+
+        if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          btn.style.display = '';
+        }
+      }
+    });
     let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
-    elms.forEach(elm => {
-      elm.classList.remove('on');
-    }); // Dynamically choose target based on selected element
+    elms.forEach(elm => elm.classList.remove('on')); // Dynamically choose target based on selected element
 
     let currentTarget = this.readTarget();
 
@@ -121867,11 +122059,23 @@ class AnimateScroll {
       } else if (currentTarget.name === 'section') {
         const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=section]');
         btn.classList.add('on');
+      } else if (currentTarget.name === 'block') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
+        btn.classList.add('on');
       }
     } else {
-      // no animation on the selected element
-      const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
-      btn.classList.add('on');
+      // let block = this.getBlock();
+      if (block) {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
+        btn.classList.add('on');
+      } else if (activeElement) {
+        // no animation on the selected element
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
+        btn.classList.add('on');
+      } else {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=box]');
+        btn.classList.add('on');
+      }
     }
 
     this.read();
@@ -123228,17 +123432,41 @@ class AnimateScroll {
       if (section) activeElement = section;
     }
 
+    if (target === 'block') {
+      const block = this.getBlock();
+      if (block) activeElement = block;
+    }
+
     return {
       'element': activeElement ? activeElement : false,
       'name': target ? target : false
     };
   }
 
+  getBlock() {
+    let block = this.builder.doc.querySelector('.is-block.active');
+    if (!block) return false;
+
+    if (block.classList.contains('editable')) {
+      return false;
+    } else {
+      return block;
+    }
+  }
+
   readTarget(s) {
     if (!s) {
       // element (inspectedElement first)
       let activeElement = this.builder.editor.inspectedElement; // if(!activeElement) return false;
 
+      let block = this.getBlock(); // if(block && !activeElement) {
+      //     return this.readTarget('block');
+      // }
+
+      if (block) {
+        return this.readTarget('block');
+      }
+
       if (!activeElement) {
         return this.readTarget('bg');
       }
@@ -123282,6 +123510,10 @@ class AnimateScroll {
     } else {
       let activeElement;
 
+      if (s === 'block') {
+        activeElement = this.getBlock();
+      }
+
       if (s === 'element') {
         activeElement = this.builder.editor.activeElement;
       }
@@ -123323,6 +123555,7 @@ class AnimateScroll {
       }
 
       if (!activeElement) {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -123367,6 +123600,7 @@ class AnimateScroll {
           'name': s
         };
       } else {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -123461,6 +123695,7 @@ class AnimateScroll {
     if (modalEditBox) modalEditBox.style.display = '';
     const modalEditSection = this.builderStuff.querySelector('.editsection');
     if (modalEditSection) modalEditSection.style.display = '';
+    localStorage.setItem('_animationmodal', '1');
   }
 
   close() {
@@ -123468,6 +123703,7 @@ class AnimateScroll {
 
     this.builder.doc.body.classList.remove('selection-only');
     document.body.classList.remove('selection-only');
+    localStorage.removeItem('_animationmodal');
   }
 
 }
@@ -124112,6 +124348,7 @@ class Timeline {
                             <div class="flex-wrap">
                                 <div class="flex-wrap" style="margin-right:15px;width: 120px;">
                                     <select class="input-target">
+                                        <option value="block">${out('Block')}</option>
                                         <option value="element">${out('Element')}</option>
                                         <option value="column">${out('Column')}</option>
                                         <option value="row">${out('Row')}</option>
@@ -124677,9 +124914,40 @@ class Timeline {
   }
 
   clickContent() {
-    let inpTarget = this.modalTimeline.querySelector('.input-target');
-    inpTarget.value = 'element'; // default
-    // Dynamically choose target based on selected element
+    let inpTarget = this.modalTimeline.querySelector('.input-target'); // inpTarget.value = 'element'; // default
+    // Show/hide target options
+
+    let options = inpTarget.querySelectorAll('option');
+    options.forEach(opt => opt.style.display = 'none');
+    let activeElement = this.builder.editor.inspectedElement;
+    let block = this.getBlock();
+    options.forEach(opt => {
+      if (block) {
+        let s = opt.getAttribute('value');
+
+        if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'block'; // default
+      } else if (activeElement) {
+        let s = opt.getAttribute('value');
+
+        if (s !== 'block') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'element'; // default
+      } else {
+        let s = opt.getAttribute('value');
+
+        if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'box'; // default
+      }
+    }); // Dynamically choose target based on selected element
 
     let currentTarget = this.readTarget();
 
@@ -124700,12 +124968,17 @@ class Timeline {
         inpTarget.value = 'box';
       } else if (currentTarget.name === 'section') {
         inpTarget.value = 'section';
-      }
+      } else if (currentTarget.name === 'block') {
+        inpTarget.value = 'block';
+      } // this.read();
 
-      this.read();
-    } else {
-      this.clearSettings();
     }
+    /*else {
+      this.clearSettings();
+    }*/
+
+
+    this.read();
   }
 
   clearSettings() {
@@ -125900,16 +126173,39 @@ class Timeline {
       if (section) activeElement = section;
     }
 
+    if (target === 'block') {
+      const block = this.getBlock();
+      if (block) activeElement = block;
+    }
+
     return {
       'element': activeElement ? activeElement : false,
       'name': target ? target : false
     };
   }
 
+  getBlock() {
+    let block = this.builder.doc.querySelector('.is-block.active');
+    if (!block) return false;
+
+    if (block.classList.contains('editable')) {
+      return false;
+    } else {
+      return block;
+    }
+  }
+
   readTarget(s) {
     if (!s) {
       // element (inspectedElement first)
       let activeElement = this.builder.editor.inspectedElement;
+      let block = this.getBlock(); // if(block && !activeElement) {
+      //     return this.readTarget('block');
+      // }
+
+      if (block) {
+        return this.readTarget('block');
+      }
 
       if (!activeElement) {
         return this.readTarget('bg');
@@ -125946,6 +126242,10 @@ class Timeline {
     } else {
       let activeElement;
 
+      if (s === 'block') {
+        activeElement = this.getBlock();
+      }
+
       if (s === 'element') {
         activeElement = this.builder.editor.activeElement;
       }
@@ -125987,6 +126287,7 @@ class Timeline {
       }
 
       if (!activeElement) {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -126023,6 +126324,7 @@ class Timeline {
           'name': s
         };
       } else {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -134307,11 +134609,20 @@ class Section {
       if (target === 'xs') {
         section.classList.add('xs-hidden');
       } else if (target === 'sm') {
-        section.classList.add('sm-hidden');
+        section.classList.add('sm-hidden'); // hide all others smaller than tablet portrait
+
+        section.classList.add('xs-hidden');
       } else if (target === 'md') {
-        section.classList.add('md-hidden');
+        section.classList.add('md-hidden'); // hide all others smaller than tablet landscape
+
+        section.classList.add('sm-hidden');
+        section.classList.add('xs-hidden');
       } else if (target === '') {
-        section.classList.add('desktop-hidden');
+        section.classList.add('desktop-hidden'); // hide all others smaller than desktop
+
+        section.classList.add('md-hidden');
+        section.classList.add('sm-hidden');
+        section.classList.add('xs-hidden');
       }
     }
 
@@ -145491,7 +145802,7 @@ class IframePanel {
 
     if (hasPin) {
       setTimeout(() => {
-        this.builder.scrollToMarkedTarget(); // This runs pageReRender()
+        this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
       }, 300);
     } // Sync with external buttons
 
@@ -145549,7 +145860,7 @@ class IframePanel {
 
     if (hasPin) {
       setTimeout(() => {
-        this.builder.scrollToMarkedTarget(); // This runs pageReRender()
+        this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
       }, 300);
     } // Sync with external buttons
 
@@ -150400,6 +150711,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             z-index:1;
         }
 
+        /* Group color */
+        .block-active,
+        .is-group.active {
+            background-color: #81ffd538;
+        }
+        .block-active .is-block {
+            outline: #51e1b2a3 2px solid;
+            outline-offset: 2px;
+        }
 
         i.bi, i.icon { display: inline-flex; }
 
@@ -151253,6 +151573,23 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     }, 300);
     if (this.eb) this.eb.refresh(); // freeform
+
+    if (localStorage.getItem('_animationmodal') != null) {
+      const box = this.wrapperEl.querySelector('.is-box');
+      const section = this.wrapperEl.querySelector('.is-section');
+
+      if (box) {
+        box.classList.add('box-select');
+        this.activeBox = box;
+      }
+
+      if (section) {
+        section.classList.add('section-select');
+        this.activeSection = section;
+      }
+
+      this.animateScroll.edit();
+    }
   } // pageSetup
 
 
@@ -152901,8 +153238,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     if (element) element.classList.add('scroll-target');
   }
 
-  scrollToMarkedTarget() {
-    if (this.win.pageReRender) this.win.pageReRender();
+  scrollToMarkedTarget(reRender = true) {
+    // used by: addIdea, section.js, iframerpanel.js (reRender=false, during resize)
+    if (this.win.pageReRender && reRender) {
+      this.win.pageReRender();
+    }
+
     let scrollTarget = this.doc.querySelector('.scroll-target');
 
     if (scrollTarget) {