@innovastudio/contentbuilder 1.5.204 → 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.204",
+  "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

@@ -48835,7 +48835,7 @@ class ButtonEditor {
     }
 
     // Build style and attributes based on type
-    if (type === 'outline') {
+    if (type === 'outline2') {
       // Outline button
       const borderClass = borderColor ? '' : 'border-current hover:border-current';
       classes += ` ${borderClass}`;
@@ -48845,6 +48845,31 @@ class ButtonEditor {
       return {
         html: `<a href="${href}" role="button" class="${classes}"${styleAttr ? ' ' + styleAttr : ''}>${text}</a>`
       };
+    } else if (type === 'outline') {
+      // Solid button with background
+      classes += ' border-current hover:border-transparent';
+      let html = '<a\n';
+      html += `  href="${href}"\n`;
+      html += '  role="button"\n';
+      html += `  class="${classes}"\n`;
+      if (color || bg) {
+        const styles = [];
+        if (color) styles.push(`color: ${color}`);
+        if (bg) styles.push(`background-color: ${bg}`);
+        html += `  style="${styles.join('; ')};"`;
+      }
+      if (bg && hoverBg) {
+        html += `\n  data-bg="${bg}"`;
+        html += `\n  data-hover-bg="${hoverBg}"`;
+        html += '\n  onmouseover="if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');"';
+        html += '\n  onmouseout="if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\';"';
+      }
+      html += '>\n';
+      html += `  ${text}\n`;
+      html += '</a>';
+      return {
+        html
+      };
     } else if (type === 'solid') {
       // Solid button with background
       classes += ' border-transparent hover:border-transparent';
@@ -48887,7 +48912,11 @@ class ButtonEditor {
     }, {
       type: 'outline',
       shape: 'rounded',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -48908,7 +48937,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -49025,7 +49055,11 @@ class ButtonEditor {
     }, {
       type: 'outline',
       shape: 'slightly-rounded',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49046,7 +49080,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49163,7 +49198,11 @@ class ButtonEditor {
     }, {
       type: 'outline',
       shape: 'square',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'square',
@@ -49184,7 +49223,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'square',
@@ -49303,7 +49343,11 @@ class ButtonEditor {
       type: 'outline',
       shape: 'rounded',
       size: 'small',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -49327,7 +49371,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -49449,7 +49494,11 @@ class ButtonEditor {
       type: 'outline',
       shape: 'slightly-rounded',
       size: 'small',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49473,7 +49522,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49595,7 +49645,11 @@ class ButtonEditor {
       type: 'outline',
       shape: 'rounded',
       size: 'large',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -49619,7 +49673,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'rounded',
@@ -49741,7 +49796,11 @@ class ButtonEditor {
       type: 'outline',
       shape: 'slightly-rounded',
       size: 'large',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49765,7 +49824,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'slightly-rounded',
@@ -49887,7 +49947,11 @@ class ButtonEditor {
       type: 'outline',
       shape: 'square',
       size: 'large',
-      text: 'Read More'
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'rgb(24, 24, 27)',
+      customClasses: 'hover:text-white'
     }, {
       type: 'solid',
       shape: 'square',
@@ -49911,7 +49975,8 @@ class ButtonEditor {
       text: 'Read More',
       color: 'rgb(250, 250, 250)',
       bg: 'transparent',
-      hoverBg: 'transparent'
+      hoverBg: '#fff',
+      customClasses: 'hover:text-black'
     }, {
       type: 'solid',
       shape: 'square',
@@ -70769,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
@@ -70790,6 +70856,7 @@ class Rte {
 
       // setZoomOnArea
       this.builder.setZoomOnArea();
+      showTools();
     });
 
     // Zoom Modal
@@ -100462,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 };