@innovastudio/contentbuilder 1.5.205 → 1.5.206

package/index.d.ts

@@ -351,5 +351,7 @@ declare class ContentBuilder {
         prompt: string,
         options?: Record<string, any>
     ): Promise<string>;
+
+    applyDragDropBlocks(snippetList: HTMLElement): void;
 }
 export default ContentBuilder;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.205",
+  "version": "1.5.206",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -177,8 +177,6 @@ button:focus-visible {
   left: 0;
   background: rgba(0, 0, 0, 0.03);
   transform-origin: top left;
-  left: 10%;
-  top: -35%;
 }
 
 #_cbhtml .snippet-item {

package/public/contentbuilder/contentbuilder.esm.js

@@ -70834,6 +70834,7 @@ class Rte {
     // Reset Zoom
     const btnResetZoom = builderStuff.querySelector('.reset-zoom');
     btnResetZoom.addEventListener('click', () => {
+      hideTools();
       this.rteZoomSlider.value = 100;
       this.builder.opts.zoom = 1;
       localStorage.setItem('_zoom', 1); // Save
@@ -70855,6 +70856,7 @@ class Rte {
 
       // setZoomOnArea
       this.builder.setZoomOnArea();
+      showTools();
     });
 
     // Zoom Modal
@@ -100527,6 +100529,146 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
       plugin.setAttribute('data-cb-original-content', newHTML);
     }
   }
+  applyDragDropBlocks(snippetlist) {
+    if (!this.iframeDragDrop) new Sortable(snippetlist, {
+      // forceFallback: safariAgent,
+      group: {
+        name: 'shared',
+        pull: 'clone',
+        put: false // Do not allow items to be put into this list
+      },
+
+      sort: false,
+      animation: 150,
+      onChoose: evt => {
+        // Adjust temmporary
+        const newCss = `
+                <style id="css-scale">
+                    .sortable-ghost {
+                        height: 50px;
+                    }
+                    .sortable-ghost * {
+                        display: none
+                    }
+                </style>
+                `;
+        this.itemHeight = evt.item.offsetHeight;
+        if (this.iframe) {
+          const oldCss = this.contentStuff.querySelector('#css-scale');
+          if (oldCss) oldCss.parentNode.removeChild(oldCss);
+          this.contentStuff.insertAdjacentHTML('afterbegin', newCss);
+        } else {
+          const oldCss = this.builderStuff.querySelector('#css-scale');
+          if (oldCss) oldCss.parentNode.removeChild(oldCss);
+          this.builderStuff.insertAdjacentHTML('afterbegin', newCss);
+        }
+        this.uo.saveForUndo(true); // Must be called before sectionDropSetup() to prevent saving extra 'block-dummy' helpers.
+
+        this.sectionDropSetup();
+        this.util.clearPops();
+        this.hideElementTools();
+      },
+      onClone: evt => {
+        // fix broken image on cloned element
+        var cloneEl = evt.clone;
+        let img = cloneEl.querySelector('img');
+        img.style.opacity = 0.0001;
+        cloneEl.style.height = this.itemHeight + 'px';
+        let timestamp = new Date().getTime();
+        let separator = img.src.includes('?') ? '&' : '?';
+        img.src = img.src + separator + timestamp;
+        img.style.opacity = '';
+      },
+      onMove: () => {
+        let emptyinfo = this.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
+        // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
+        if (emptyinfo) emptyinfo.style.display = 'none';
+
+        // if(this.sortableOnPage) if(evt.related.getBoundingClientRect().top<0 ||
+        //     evt.related.getBoundingClientRect().top>window.innerHeight) {
+        //     return false;
+        // }
+
+        // to prevent flicker caused by snippet panel above wrapper (see contentthis.js sectionDropSetup)
+        if (this.page && this.page === '.is-wrapper') {
+          const wrapper = this.doc.querySelector(this.page);
+          if (wrapper) wrapper.style.marginLeft = '';
+        }
+      },
+      onSort: evt => {
+        if (!this.canvas) return;
+        let snippetX = evt.originalEvent.clientX;
+        let snippetY = evt.originalEvent.clientY;
+        const block = this.doc.querySelector('[data-new-dummy]');
+        if (block) {
+          const docContainer = block.parentNode;
+          const rectContainer = docContainer.getBoundingClientRect();
+          block.offsetWidth / 2;
+          let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
+          let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
+          if (y < 0) y = 15; // if block is not fully loaded, block height may be incorrect (y can be negative). Adjust to 15%.
+          block.style.top = y + '%';
+          block.style.left = x + '%';
+          block.removeAttribute('data-new-dummy');
+        }
+      },
+      onStart: () => {
+        // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
+        this.activeBuilderArea = null;
+        const area = this.doc.querySelector('.builder-active');
+        if (area) {
+          this.activeBuilderArea = area;
+          this.activeBuilderArea.classList.remove('builder-active');
+        }
+
+        // this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change => commented (moved to onChoose). 
+
+        let elm = document.querySelector('.is-sidebar-overlay');
+        if (elm) elm.style.display = 'none'; // LATER: ContentBox
+      },
+
+      onEnd: () => {
+        let elm = document.querySelector('.is-sidebar-overlay');
+        if (elm) elm.style.display = 'block'; // LATER: ContentBox
+        this.util.checkEmpty(); // In case container is still empty (drag drop snippet cancelled)
+
+        let emptyinfo = this.doc.querySelector('.row-add-initial');
+        if (emptyinfo) emptyinfo.style.display = '';
+
+        // Return back the .builder-active
+        if (this.activeBuilderArea) {
+          this.activeBuilderArea.classList.add('builder-active');
+        }
+      },
+      onUnchoose: () => {
+        setTimeout(() => {
+          // Give time for onAdd to finish
+          // Destroy placed in onUnchoose in case a snippet is just clicked (no drag/drop) so that onAdd is not triggered.
+          // destroy
+          if (this.sortableOnCanvas) {
+            this.sortableOnCanvas.forEach(obj => {
+              if (obj) {
+                obj.destroy();
+              }
+            });
+            this.sortableOnCanvas = [];
+          }
+          if (this.sortableOnPage) {
+            this.sortableOnPage.destroy();
+            this.sortableOnPage = null;
+          }
+          let dummies = this.doc.querySelectorAll('.block-dummy');
+          dummies.forEach(elm => elm.parentNode.removeChild(elm));
+
+          // to prevent flicker caused by snippet panel above wrapper (see contentthis.js sectionDropSetup)
+          if (this.page && this.page === '.is-wrapper') {
+            const wrapper = this.doc.querySelector(this.page);
+            if (wrapper) wrapper.style.marginLeft = '';
+          }
+        }, 10);
+      }
+    });
+  }
 }
 
 export { ContentBuilder as default };