@innovastudio/contentbox 1.4.2 → 1.4.3

package/public/contentbox/contentbox.esm.js

@@ -78403,22 +78403,20 @@ class Rte {
 
       this.builder.setZoomOnArea(); // hide tools
 
-      /*
-      let tools = this.builderStuff.querySelectorAll('.is-tool');
-      Array.prototype.forEach.call(tools, (tool) => {
-          tool.style.display = '';
+      let tools = this.builder.doc.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, tool => {
+        tool.style.display = '';
       });
-       let tool = this.builderStuff.querySelector('.is-column-tool');
+      let tool = this.builder.doc.querySelector('.is-column-tool');
       tool.style.display = 'none';
-       tools = this.builder.doc.querySelectorAll('.is-row-tool');
-      tools.forEach(tool=>{
-          tool.style.display = 'none';
+      tools = this.builder.doc.querySelectorAll('.is-row-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
       });
-       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-      tools.forEach(tool=>{
-          tool.style.opacity = 0;
+      tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool => {
+        tool.style.opacity = 0;
       });
-      */
 
       if (this.builder.onZoom) {
         let val = this.inpZoomSlider.value;
@@ -78440,23 +78438,27 @@ class Rte {
           });
         } // show & reposition
 
-        /*
+
         this.builder.elmTool.repositionElementTool();
-         let col = this.builder.activeCol;
-        let tool = this.builderStuff.querySelector('.is-column-tool');
+        let col = this.builder.activeCol;
+        let tool = this.builder.doc.querySelector('.is-column-tool');
         tool.style.display = '';
-        tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
-        tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
-         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
-        tools.forEach(tool=>{
-            tool.style.display = '';
+        tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+        tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        let tools = this.builder.doc.querySelectorAll('.is-row-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
         });
-         tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-        tools.forEach(tool=>{
-            tool.style.opacity = '';
+        tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+        tools.forEach(tool => {
+          tool.style.opacity = '';
         });
-        */
 
+        if (this.builder.onZoomEnd) {
+          let val = this.rteZoomSlider.value;
+          let scale = val / 100;
+          this.builder.onZoomEnd(scale);
+        }
 
         if (this.builder.onZoomEnd) {
           let val = this.inpZoomSlider.value;
@@ -79616,6 +79618,7 @@ class Rte {
             }
           }
 
+          if (this.builder.activeElement) this.builder.activeElement.style.letterSpacing = '';
           if (newClassName === classes.tracking_000) newClassName = ''; // clear for normal tracking
 
           dom.execCommandClass(newClassName, classes);
@@ -82256,6 +82259,7 @@ function isAChildOf(parent, child) {
 class Lightbox {
   constructor(builder) {
     this.builder = builder;
+    this.arrow = this.builder.lightboxArrow;
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     this.util = util;
@@ -82270,42 +82274,76 @@ class Lightbox {
     // } 
     // this.builderStuff = builderStuff;
 
-    this.id = this.makeid();
+    this.id = this.makeid(); // let html = `
+    //     <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;">
+    //             <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+    //             <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    //             </div>
+    //         </div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <svg width="0" height="0" style="position:absolute;display:none;">
+    //         <defs>
+    //             <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    //                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+    //             </symbol>
+    //         </defs>
+    //     </svg>
+    // `;
+
     let html = `
-            <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;">
-                    <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
-                    <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+                <div class="is-lightbox lightbox-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                    <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button">
+                        <svg><use xlink:href="#__${this.id}svgLightboxClose"></use></svg>
+                    </button>
+
+                    <div class="lightbox-content" style="width:100%;">
                     </div>
+
+                    <button class="cmd-lightbox-prev" title="${util.out('Previous')}" type="button" style="top:50%;left:3px;">
+                        <svg><use xlink:href="#__${this.id}svgLightboxLeft"></use></svg>
+                    </button>
+                    <button class="cmd-lightbox-next" title="${util.out('Next')}" type="button" style="top:50%;left:auto;right:3px">
+                        <svg><use xlink:href="#__${this.id}svgLightboxRight"></use></svg>
+                    </button>
                 </div>
-            </div>
-            <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <svg width="0" height="0" style="position:absolute;display:none;">
-                <defs>
-                    <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
-                    </symbol>
-                </defs>
-            </svg>
-        `;
+
+                <svg width="0" height="0" style="position:absolute;display:none;">
+                    <defs>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                        </symbol>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxLeft" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="15 6 9 12 15 18"></polyline>
+                        </symbol>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxRight" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="9 6 15 12 9 18"></polyline>
+                        </symbol>
+                    </defs>
+                </svg>
+            `;
     dom.appendHtml(this.builderStuff, html);
 
     const close = () => {
-      let lightbox = document.querySelector('.is-lightbox.active');
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
       dom.removeClass(lightbox, 'active');
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
       btnClose.style.opacity = 0;
@@ -82325,22 +82363,70 @@ class Lightbox {
       }, 300);
     };
 
-    const handleItemKeyDown = e => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    const prev = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          let prevIndex;
+          prevIndex = (currentIndex - 1) % list.length;
+
+          if (prevIndex === -1) {
+            prevIndex = list.length - 1;
+          }
+
+          this.openThen(list[prevIndex]);
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.focus();
+        }
+      });
+    };
+
+    const next = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          const nextIndex = (currentIndex + 1) % list.length;
+          this.openThen(list[nextIndex]);
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.focus();
+        }
+      });
+    };
 
+    const handleItemKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
         close();
-      } else if (e.which === 9 && !e.shiftKey) {
-        // tab key pressed
+        e.preventDefault();
+      }
+      /*else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed
         let lightbox = document.querySelector('.is-lightbox.active');
         const btnClose = lightbox.querySelector('.cmd-lightbox-close');
         btnClose.focus();
+        e.preventDefault();
+      }*/
+
+
+      if (this.arrow) {
+        if (e.which === 37 && !e.shiftKey) {
+          // left
+          prev();
+        }
+
+        if (e.which === 39 && !e.shiftKey) {
+          // right
+          next();
+        }
       }
     };
 
-    const lightboxes = this.builderStuff.querySelectorAll('.lightbox-externalvideo-edit,.lightbox-video-edit,.lightbox-image-edit');
+    const lightboxes = this.builderStuff.querySelectorAll('div.lightbox-edit');
     lightboxes.forEach(lightbox => {
       lightbox.addEventListener('keydown', handleItemKeyDown);
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
@@ -82358,6 +82444,32 @@ class Lightbox {
         e.preventDefault();
         e.stopImmediatePropagation();
       });
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      if (btnPrev) btnPrev.addEventListener('click', e => {
+        prev();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnPrev) btnPrev.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          prev();
+          e.preventDefault();
+        }
+      });
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      if (btnNext) btnNext.addEventListener('click', e => {
+        next();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnNext) btnNext.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          next();
+          e.preventDefault();
+        }
+      });
     }); // this.init();
   } //constructor
 
@@ -82413,21 +82525,89 @@ class Lightbox {
   */
 
 
+  openThen(item) {
+    if (item.type === 'image') {
+      this.programmatically = true;
+      this.openImage(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'video') {
+      this.programmatically = true;
+      this.openVideo(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'externalvideo') {
+      this.programmatically = true;
+      this.openExternalVideo(item.url, item.theme, item.color);
+    }
+  }
+
   openImage(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-image-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.add('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<img src="${url}">`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<img src="${url}">`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<img src="${url}">`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82439,34 +82619,82 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-video-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-video-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.add('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<video class="is-video-bg" playsinline controls autoplay width="100%">
-            <source src="${url}" type="video/mp4">
-        </video>`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<video playsinline controls autoplay width="100%">
+                <source src="${url}" type="video/mp4">
+            </video>`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<video playsinline controls autoplay width="100%">
+                    <source src="${url}" type="video/mp4">
+                </video>`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82478,29 +82706,65 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openExternalVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
+    }
+
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.add('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
 
     if (theme === 'light') {
@@ -82511,22 +82775,37 @@ class Lightbox {
       dom.removeClass(lightbox, 'light');
     }
 
-    const iframe = lightbox.querySelector('iframe');
-    url = this.getIframeVideoUrl(url);
-    if (url !== '') iframe.setAttribute('src', url);
-    lightbox.style.display = 'flex';
-    if (!window.frameElement) document.body.style.overflowY = 'hidden';
     const div = lightbox.querySelector('.lightbox-content');
-    div.style.width = div.offsetHeight * 16 / 9 + 'px';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
+
+    if (!this.programmatically) {
+      div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>`;
+      const iframe = lightbox.querySelector('iframe');
+      url = this.getIframeVideoUrl(url);
+      if (url !== '') iframe.setAttribute('src', url);
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
       setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
+        div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                    <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>`;
+        div.style.opacity = '1';
+        const iframe = lightbox.querySelector('iframe');
+        url = this.getIframeVideoUrl(url);
+        if (url !== '') iframe.setAttribute('src', url);
+      }, 200);
+    }
+
+    lightbox.style.display = 'flex';
+    if (!window.frameElement) document.body.style.overflowY = 'hidden'; // const div = lightbox.querySelector('.lightbox-content');
+    // div.style.width=((div.offsetHeight*16)/9) + 'px';
+
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   getIframeVideoUrl(src) {
@@ -82570,6 +82849,88 @@ class Lightbox {
     return text + text2;
   }
 
+  getList() {
+    const arrGallery = [];
+    let blockClickables = this.builder.doc.querySelectorAll('.block-click,.button-click,.is-lightbox');
+
+    if (this.parent) {
+      blockClickables = this.parent.querySelectorAll('.block-click,.button-click,.is-lightbox');
+    }
+
+    blockClickables.forEach(block => {
+      if (!this.parent) {
+        if (block.closest('[data-gallery')) return;
+      }
+
+      let url;
+      let extension;
+
+      if (block.tagName.toLowerCase() === 'a') {
+        url = block.getAttribute('href');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      } else if (block.getAttribute('data-modal-url')) {
+        url = block.getAttribute('data-modal-url');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      }
+
+      let theme = block.getAttribute('data-modal-theme');
+      if (!theme) theme = 'light';
+      const color = block.getAttribute('data-modal-color');
+
+      if (url) {
+        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
+          arrGallery.push({
+            type: 'image',
+            url: url,
+            theme: theme,
+            color: color
+          });
+        } else if (extension === 'mp4') {
+          arrGallery.push({
+            type: 'video',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        } else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
+          arrGallery.push({
+            type: 'externalvideo',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        }
+      }
+
+      if (block.getAttribute('data-modal-image')) {
+        url = block.getAttribute('data-modal-image');
+        arrGallery.push({
+          type: 'image',
+          url: url,
+          theme: theme,
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-video')) {
+        url = block.getAttribute('data-modal-video');
+        arrGallery.push({
+          type: 'video',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-externalvideo')) {
+        url = block.getAttribute('data-modal-externalvideo');
+        arrGallery.push({
+          type: 'externalvideo',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      }
+    });
+    return arrGallery;
+  }
+
 } //Lightbox
 
 class ShortcutInfo {
@@ -83189,6 +83550,13 @@ class Resize {
       pane: col,
       onResize: (width, height) => {
         this.builder.util.hideControls();
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
 
         if (width) {
           col.style.flex = 'none';
@@ -83212,16 +83580,29 @@ class Resize {
             // Adjust to max
             // percentage = (max / row.offsetWidth) * 100;
             // Or make others auto
-            let numOfCols = 1;
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
-              numOfCols++;
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
 
             if (numOfCols === 1) {
@@ -83251,6 +83632,14 @@ class Resize {
         }
       },
       resizeEnd: () => {
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
+
         if (col.style.width) {
           col.style.width = col.offsetWidth + 'px'; // change from % to px
 
@@ -83279,10 +83668,25 @@ class Resize {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
           } // /adjust others
           // New: Final fix (if column resized exceeds its max)
@@ -83336,12 +83740,11 @@ class Resize {
             item.style.height = '';
             item.style.minHeight = '';
           });
-        } // To position columnTool correctly, add delay.
-
+        } // // To position columnTool correctly, add delay.
+        // setTimeout(()=>{
+        //     col.click();
+        // },30);
 
-        setTimeout(() => {
-          col.click();
-        }, 30);
       }
     });
   }
@@ -84491,6 +84894,7 @@ class ContentBuilder {
       //set -1 for no max (use original image width)
       zoom: 1,
       useLightbox: false,
+      lightboxArrow: true,
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
 
@@ -85234,6 +85638,8 @@ class ContentBuilder {
             util.clearControls();
           }
         }
+
+        this.element.hyperlink.buttonEditor.hide();
       } // Button Modal
 
 
@@ -89411,6 +89817,7 @@ class ContentBox {
       }],
       disableConfig: false,
       useLightbox: true,
+      lightboxArrow: true,
       themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css'], ['#0088dc', 'colored', 'contentbuilder/themes/colored-blue.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue6.css'], ['#0a4d92', 'colored', 'contentbuilder/themes/colored-darkblue.css'], ['#96af16', 'colored', 'contentbuilder/themes/colored-green.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-orange.css'], ['#b92ea6', 'colored', 'contentbuilder/themes/colored-magenta.css'], ['#e73171', 'colored', 'contentbuilder/themes/colored-pink.css'], ['#782ec5', 'colored', 'contentbuilder/themes/colored-purple.css'], ['#ed2828', 'colored', 'contentbuilder/themes/colored-red.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow.css'], ['#13b34b', 'colored', 'contentbuilder/themes/colored-green4.css'], ['#333333', 'colored-dark', 'contentbuilder/themes/colored-dark.css'], ['#dbe5f5', 'light', 'contentbuilder/themes/light-blue.css'], ['#fbe6f2', 'light', 'contentbuilder/themes/light-pink.css'], ['#dcdaf3', 'light', 'contentbuilder/themes/light-purple.css'], ['#ffe9e0', 'light', 'contentbuilder/themes/light-red.css'], ['#fffae5', 'light', 'contentbuilder/themes/light-yellow.css'], ['#ddf3dc', 'light', 'contentbuilder/themes/light-green.css'], ['#c7ebfd', 'light', 'contentbuilder/themes/light-blue2.css'], ['#ffd5f2', 'light', 'contentbuilder/themes/light-pink2.css'], ['#eadafb', 'light', 'contentbuilder/themes/light-purple2.css'], ['#c5d4ff', 'light', 'contentbuilder/themes/light-blue3.css'], ['#ffefb1', 'light', 'contentbuilder/themes/light-yellow2.css'], ['#fefefe', 'light', 'contentbuilder/themes/light-gray3.css'], ['#e5e5e5', 'light', 'contentbuilder/themes/light-gray2.css'], ['#dadada', 'light', 'contentbuilder/themes/light-gray.css'], ['#3f4ec9', 'colored', 'contentbuilder/themes/colored-blue2.css'], ['#6779d9', 'colored', 'contentbuilder/themes/colored-blue4.css'], ['#10b9d7', 'colored', 'contentbuilder/themes/colored-blue3.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue5.css'], ['#e92f94', 'colored', 'contentbuilder/themes/colored-pink3.css'], ['#a761d9', 'colored', 'contentbuilder/themes/colored-purple2.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow2.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-red3.css'], ['#36b741', 'colored', 'contentbuilder/themes/colored-green2.css'], ['#00c17c', 'colored', 'contentbuilder/themes/colored-green3.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink2.css'], ['#ff6d13', 'colored', 'contentbuilder/themes/colored-orange2.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red2.css'], ['#646464', 'colored', 'contentbuilder/themes/colored-gray.css'], ['#3f4ec9', 'dark', 'contentbuilder/themes/dark-blue.css'], ['#0b4d92', 'dark', 'contentbuilder/themes/dark-blue2.css'], ['#006add', 'dark', 'contentbuilder/themes/dark-blue3.css'], ['#5f3ebf', 'dark', 'contentbuilder/themes/dark-purple.css'], ['#e92f69', 'dark', 'contentbuilder/themes/dark-pink.css'], ['#4c4c4c', 'dark', 'contentbuilder/themes/dark-gray.css'], ['#ed2828', 'dark', 'contentbuilder/themes/dark-red.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue8.css'], ['#ff7723', 'colored', 'contentbuilder/themes/colored-orange3.css'], ['#ff5722', 'colored', 'contentbuilder/themes/colored-red5.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red4.css'], ['#00bd79', 'colored', 'contentbuilder/themes/colored-green5.css'], ['#557ae9', 'colored', 'contentbuilder/themes/colored-blue7.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink4.css']],
       backgroundColor: '#f1f1f1',
       imageselect: '',
@@ -91924,6 +92331,7 @@ class ContentBox {
       //     }, 100);
       // },
       useLightbox: this.settings.useLightbox,
+      lightboxArrow: this.settings.lightboxArrow,
       themes: this.settings.themes,
       moduleConfig: this.settings.moduleConfig,
       onImageSelectClick: this.settings.onImageSelectClick,