@innovastudio/contentbox 1.6.92 → 1.6.93

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.92",
+  "version": "1.6.93",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -54,7 +54,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.79",
+    "@innovastudio/contentbuilder": "^1.5.81",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -72811,28 +72811,33 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-          const handleImageToolClickOut = e => {
-            let elm = e.target;
-            if (!elm) return;
-            if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
-              // click outside
-
-              // hide
-              this.hideImageTool();
-              document.removeEventListener('click', handleImageToolClickOut);
-              if (this.builder.iframeDocument) {
-                this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+
+          /*
+          const handleImageToolClickOut = e =>{
+              let elm = e.target;
+              if(!elm) return;
+              if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && 
+                  !elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
+                  !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
+                  !elm.closest('img')) { // click outside
+                  
+                  // hide
+                  this.hideImageTool();
+                   document.removeEventListener('click', handleImageToolClickOut);
+                  if(this.builder.iframeDocument) {
+                      this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+                  }
+                  this.builder.handleImageToolClickOut_=false;
               }
-              this.builder.handleImageToolClickOut_ = false;
-            }
           };
-          if (!this.builder.handleImageToolClickOut_) {
-            document.addEventListener('click', handleImageToolClickOut);
-            if (this.builder.iframeDocument) {
-              this.builder.doc.addEventListener('click', handleImageToolClickOut);
-            }
-            this.builder.handleImageToolClickOut_ = true;
+          if(!this.builder.handleImageToolClickOut_) {
+              document.addEventListener('click', handleImageToolClickOut);
+              if(this.builder.iframeDocument) {
+                  this.builder.doc.addEventListener('click', handleImageToolClickOut);
+              }
+              this.builder.handleImageToolClickOut_=true;
           }
+          */
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';
@@ -72846,6 +72851,28 @@ class Image$1 {
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox) movControlBox.style.display = 'none';
         }
+        const handleImageToolClickOut = e => {
+          let elm = e.target;
+          if (!elm) return;
+          if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
+            // click outside
+
+            // hide
+            this.hideImageTool();
+            document.removeEventListener('click', handleImageToolClickOut);
+            if (this.builder.iframeDocument) {
+              this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+            }
+            this.builder.handleImageToolClickOut_ = false;
+          }
+        };
+        if (!this.builder.handleImageToolClickOut_) {
+          document.addEventListener('click', handleImageToolClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.addEventListener('click', handleImageToolClickOut);
+          }
+          this.builder.handleImageToolClickOut_ = true;
+        }
         if (this.builder.canvas) ; else {
           let prog = false;
           if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
@@ -77771,8 +77798,8 @@ class RowTool {
     const builderStuff = this.builder.builderStuff;
     let rowtool = row.querySelector('.is-row-tool');
     if (!rowtool) {
-      let html = `<div class="is-tool is-row-tool">
-                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
+      let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
+                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
                 <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
@@ -89945,6 +89972,10 @@ class ColorPicker {
       const poppicker = builderStuff.querySelector('.pop-picker');
       poppicker.style.display = 'flex';
       poppicker.style.opacity = 0;
+      if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines 
+      else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
+      else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
+
       const pickr = Pickr.create({
         el: '._pop-colpick',
         theme: 'nano',
@@ -93833,6 +93864,10 @@ class Rte {
     btnRteColor.forEach(btn => {
       btn.addEventListener('click', () => {
         const pop = this.rteColorPicker;
+        const numOfColors = this.builder.colors.length;
+        if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
+        else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
+
         if (!dom.hasClass(pop, 'active')) {
           this.util.showRtePop(pop, () => {
             const top = btn.getBoundingClientRect().top;
@@ -108513,8 +108548,6 @@ Important: Do not change the 'div.is-container' element!
   }
 }
 
-// import RecordRTC  from 'recordrtc';
-// import Recorder from 'opus-recorder'; // Using Recorder
 const dom$i = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -108862,6 +108895,9 @@ class Dictation {
     dom$i.appendHtml(builderStuff, html);
     const modalCommand = builderStuff.querySelector('.page-command');
     this.modalCommand = modalCommand;
+    new Draggable$2({
+      selector: '.is-modal.page-command .is-draggable'
+    });
     const modalCommandList = builderStuff.querySelector('.commandlist');
     this.modalCommandList = modalCommandList;
     const modalConfig = builderStuff.querySelector('.commandconfig');
@@ -115343,6 +115379,8 @@ class Editable {
     this.handleEditStart = this.handleEditStart.bind(this);
     this.handleMouseClick = this.handleMouseClick.bind(this);
     this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
     this.setup();
   }
   setup() {
@@ -115351,6 +115389,7 @@ class Editable {
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
   refresh() {
@@ -115358,23 +115397,49 @@ class Editable {
     this.elements.forEach(element => {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     });
     this.elements.forEach(element => {
       element.addEventListener('dblclick', this.handleEditStart);
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
+  handleMouseDown(event) {
+    const currentTarget = event.currentTarget;
+    this.lastClickTime = false;
+    if (!currentTarget.classList.contains('active')) return;
+    if (currentTarget.classList.contains('editable')) return;
+    currentTarget.addEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    this.lastClickTime = now;
+  }
+  handleMouseUp(event) {
+    if (!this.lastClickTime) return;
+    const currentTarget = event.currentTarget;
+    currentTarget.removeEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    const lastClickTime = this.lastClickTime || now;
+    const timeDiff = now - lastClickTime;
+    if (timeDiff < 300 && timeDiff > 0) {
+      // Less than 300ms since the last touch, enable editing
+      this.handleEditStart(event);
+    }
+    this.lastClickTime = now;
+  }
   destroy(element) {
     if (element) {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     } else {
       this.elements = this.doc.querySelectorAll(this.selector);
       this.elements.forEach(element => {
         element.removeEventListener('dblclick', this.handleEditStart);
         element.removeEventListener('touchstart', this.handleTouchStart);
+        element.removeEventListener('mousedown', this.handleMouseDown);
       });
     }
   }
@@ -115687,6 +115752,8 @@ class EditableBlocks {
     target.style.zIndex = newZIndex;
   }
   selectStart(block) {
+    if (block.classList.contains('editable')) return; // do not proceed if in editing mode
+
     if (block.classList.contains('is-shape')) return; // do not clone if block is shape
 
     if (!this.clone) return;
@@ -117898,6 +117965,7 @@ class ContentBuilder {
       outlineMode: '',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       elementTool: true,
       elementHighlight: true,
@@ -120671,7 +120739,118 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     //     let outlineStyle = localStorage.getItem('_outlinestyle');
     //     this.preferences.setOutlineStyle(outlineStyle);
     // } 
-    if (this.preferences) this.preferences.initBuilder(builder);
+    if (this.preferences) this.preferences.initBuilder(builder);else {
+      const setColumnTool = hidecolumntool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        if (hidecolumntool) {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.setAttribute('hidecolumntool', '');
+          });
+        } else {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.removeAttribute('hidecolumntool');
+          });
+        }
+      };
+      setColumnTool(!this.columnTool);
+      const setElementTool = hideelementtool => {
+        const builderStuff = this.builderStuff;
+        if (hideelementtool) {
+          builderStuff.setAttribute('hideelementtool', '');
+        } else {
+          builderStuff.removeAttribute('hideelementtool', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (hideelementtool) {
+            contentStuff.setAttribute('hideelementtool', '');
+          } else {
+            contentStuff.removeAttribute('hideelementtool', '');
+          }
+        }
+      };
+      setElementTool(!this.elementTool);
+      const setOutline = hideoutline => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideoutline) {
+            builder.setAttribute('hideoutline', '');
+          } else {
+            builder.removeAttribute('hideoutline');
+          }
+        });
+      };
+      setOutline(!this.rowcolOutline);
+      const setOutlineStyle = outlineStyle => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (outlineStyle === 'grayoutline') {
+            builder.setAttribute('grayoutline', '');
+          } else {
+            builder.removeAttribute('grayoutline');
+          }
+        });
+      };
+      setOutlineStyle(this.outlineStyle);
+      const setElementHighlight = hideelementhighlight => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideelementhighlight) {
+            builder.setAttribute('hideelementhighlight', '');
+          } else {
+            builder.removeAttribute('hideelementhighlight', '');
+          }
+        });
+      };
+      setElementHighlight(!this.elementHighlight);
+      const setToolStyle = toolStyle => {
+        const builderStuff = this.builderStuff;
+        if (toolStyle === 'gray') {
+          builderStuff.setAttribute('gray', '');
+        } else {
+          builderStuff.removeAttribute('gray', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (toolStyle === 'gray') {
+            contentStuff.setAttribute('gray', '');
+          } else {
+            contentStuff.removeAttribute('gray', '');
+          }
+        }
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (toolStyle === 'gray') {
+            builder.setAttribute('gray', '');
+          } else {
+            builder.removeAttribute('gray');
+          }
+        });
+      };
+      setToolStyle(this.toolStyle);
+      const setSnippetAddTool = hidesnippetaddtool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hidesnippetaddtool) {
+            builder.setAttribute('hidesnippetaddtool', '');
+          } else {
+            builder.removeAttribute('hidesnippetaddtool', '');
+          }
+        });
+      };
+      setSnippetAddTool(!this.snippetAddTool);
+      const setRowToolPosition = rowTool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (rowTool === 'right') {
+            builder.removeAttribute('leftrowtool');
+          } else {
+            builder.setAttribute('leftrowtool', '');
+          }
+        });
+      };
+      setRowToolPosition(this.rowTool);
+    }
 
     // Apply behavior on each row
     const rows = this.dom.elementChildren(builder);
@@ -122940,8 +123119,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 512;
-    const height = 512;
+    const width = this.ai_width; //768;
+    const height = this.ai_height; //512;
     const img = new Image();
     img.src = src;
     img.crossOrigin = 'anonymous';
@@ -122973,6 +123152,47 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       callback(result.url);
     };
   }
+  getOrientation(width, height) {
+    const aspectRatio = width / height;
+    const predefinedRatios = [{
+      ratio: '1:1',
+      value: 1 / 1
+    }, {
+      ratio: '4:5',
+      value: 4 / 5
+    }, {
+      ratio: '2:3',
+      value: 2 / 3
+    }, {
+      ratio: '9:16',
+      value: 9 / 16
+    }, {
+      ratio: '4:7',
+      value: 4 / 7
+    }, {
+      ratio: '5:4',
+      value: 5 / 4
+    }, {
+      ratio: '3:2',
+      value: 3 / 2
+    }, {
+      ratio: '16:9',
+      value: 16 / 9
+    }, {
+      ratio: '7:4',
+      value: 7 / 4
+    }];
+    let closestRatio = predefinedRatios[0].ratio;
+    let smallestDifference = Math.abs(aspectRatio - predefinedRatios[0].value);
+    for (let i = 1; i < predefinedRatios.length; i++) {
+      const difference = Math.abs(aspectRatio - predefinedRatios[i].value);
+      if (difference < smallestDifference) {
+        smallestDifference = difference;
+        closestRatio = predefinedRatios[i].ratio;
+      }
+    }
+    return closestRatio;
+  }
   async generateImage(prompt, callback) {
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
@@ -122982,12 +123202,82 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     let steps = this.imageSteps || 25;
     let guidance = this.imageGuidance || 7.5;
     let scheduler = this.imageScheduler || 'dpmsolver++';
+    let width = 768;
+    let height = 512;
+    if (this.activeImage) {
+      // check selected image dimension
+      const activeImage = this.activeImage;
+      const w = activeImage.offsetWidth;
+      const h = activeImage.offsetHeight;
+      const ratio = this.getOrientation(w, h);
+      if (model === 'flux-schnell') {
+        if (ratio === '1:1') {
+          width = 1024;
+          height = 1024;
+        } else if (ratio === '4:5') {
+          width = 768;
+          height = 960;
+        } else if (ratio === '2:3') {
+          width = 768;
+          height = 1152;
+        } else if (ratio === '9:16') {
+          width = 720;
+          height = 1280;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 960;
+          height = 768;
+        } else if (ratio === '3:2') {
+          width = 1152;
+          height = 768;
+        } else if (ratio === '16:9') {
+          width = 1280;
+          height = 720;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      } else {
+        if (ratio === '1:1') {
+          width = 512;
+          height = 512;
+        } else if (ratio === '4:5') {
+          width = 512;
+          height = 640;
+        } else if (ratio === '2:3') {
+          width = 512;
+          height = 768;
+        } else if (ratio === '9:16') {
+          width = 576;
+          height = 1024;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 640;
+          height = 512;
+        } else if (ratio === '3:2') {
+          width = 768;
+          height = 512;
+        } else if (ratio === '16:9') {
+          width = 1024;
+          height = 576;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      }
+    }
+    this.ai_width = width;
+    this.ai_height = height;
     const messages = {
       model,
       prompt: prompt,
       negative_prompt,
-      width: 512,
-      height: 512,
+      width: this.ai_width,
+      height: this.ai_height,
       steps,
       guidance,
       scheduler,
@@ -123013,10 +123303,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         return;
       }
       const imageUrl = result.url;
-      if (this.imageAutoUpscale) {
-        this.upscaleImage(imageUrl, callback);
-      } else {
+      if (this.activeImage) {
+        // selectable image on content doesn't need tp be upscaled
         callback(imageUrl);
+      } else {
+        if (this.imageAutoUpscale) {
+          this.upscaleImage(imageUrl, callback);
+        } else {
+          callback(imageUrl);
+        }
       }
     } catch (error) {
       if (error.name === 'AbortError') ; else {
@@ -155041,6 +155336,7 @@ class ContentBox {
       rowTool: 'right',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       mobileSimpleEdit: false,
       clearPreferences: false,
@@ -158597,6 +158893,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       rowTool: this.settings.rowTool,
       toolStyle: this.settings.toolStyle,
       outlineStyle: this.settings.outlineStyle,
+      rowHandle: this.settings.rowHandle,
       snippetAddTool: this.settings.snippetAddTool,
       mobileSimpleEdit: this.settings.mobileSimpleEdit,
       clearPreferences: this.settings.clearPreferences,