@innovastudio/contentbox 1.6.166 → 1.6.168

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.166",
+  "version": "1.6.168",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.164",
+    "@innovastudio/contentbuilder": "^1.5.166",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -12381,7 +12381,7 @@ class SettingsUIGenerator$1 {
       groupElement.className = 'cb-settings-group';
       const groupTitle = document.createElement('h3');
       groupTitle.className = 'cb-settings-group-title';
-      groupTitle.style.cssText = 'font-size: 17px;font-weight: 500;';
+      groupTitle.style.cssText = 'font-size: 16px;font-weight: 400;';
       groupTitle.textContent = group.label;
       groupElement.appendChild(groupTitle);
       group.fields.forEach(fieldKey => {
@@ -13812,41 +13812,43 @@ class PanelBox {
                 </div>
             </div>
 
-            <div class="flex">
-                <div class="mr-8">
-                    <div class="label mt-3">${out('Background Color')}:</div>
-                    <div class="group">
-                        <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+            <div class="box-bg-settings">
+                <div class="flex">
+                    <div class="mr-8">
+                        <div class="label mt-3">${out('Background Color')}:</div>
+                        <div class="group">
+                            <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+                        </div>
                     </div>
-                </div>
-                <div>
-                    <div class="label mt-3">${out('Gradient')}:</div>
-                    <div class="group">
-                        <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                    <div>
+                        <div class="label mt-3">${out('Gradient')}:</div>
+                        <div class="group">
+                            <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="label mt-3">${out('Background Image')}:</div>
+                <div class="label mt-3">${out('Background Image')}:</div>
 
-            <div class="asset-preview"></div>
+                <div class="asset-preview"></div>
 
-            <div class="imagesource mt-1 mb-1">
-                <input type="text" class="inp-src">
-            </div>
+                <div class="imagesource mt-1 mb-1">
+                    <input type="text" class="inp-src">
+                </div>
 
-            <div class="group mt-2">
-                <input class="inp-file" type="file" accept="image/*" style="display:none"/>
-                <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
-                <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
-                <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
-                <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
-            </div>
+                <div class="group mt-2">
+                    <input class="inp-file" type="file" accept="image/*" style="display:none"/>
+                    <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
+                    <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
+                    <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
+                    <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
 
-            <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
-                <input type="checkbox" class="chk-grayscale" />
-                <span>${out('Grayscale')}</span>
-            </label>
+                <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
+                    <input type="checkbox" class="chk-grayscale" />
+                    <span>${out('Grayscale')}</span>
+                </label>
+            </div>
 
             <div class="defaulttextcolor">
                 <div class="label mt-3">${out('Text Color')}:</div>
@@ -13886,6 +13888,12 @@ class PanelBox {
 
         </div>
 
+        <div class="submain box-plugin-settings panel-plugin">
+
+            <hr style="width: 100%;border-bottom: #ededed 2px solid;margin-top: 20px;">
+
+        </div>
+
         <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="boxcontent1">
             ${out('Content')}
             <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
@@ -15264,9 +15272,158 @@ class PanelBox {
       chkAutoLayout.checked = true;
     } else {
       chkAutoLayout.checked = false;
+    } // PLUGIN SETTINGS
+
+
+    const divPluginSettings = panel.querySelector('.box-plugin-settings');
+    this.divPluginSettings = divPluginSettings;
+    const runtime = this.builder.win.builderRuntime; // Reset (can be changed by renderPluginSettings)
+
+    const divBgSettings = this.panel.querySelector('.box-bg-settings');
+    divBgSettings.style.display = '';
+    this.divBgSettings = divBgSettings;
+    const divPanelTitle = this.panel.parentNode.querySelector('.part-title');
+    divPanelTitle.style.display = '';
+    this.divPanelTitle = divPanelTitle;
+
+    if (overlayContent && runtime) {
+      const currentElement = overlayContent.querySelector('[data-cb-type]');
+
+      if (currentElement) {
+        divPluginSettings.style.display = '';
+        this.renderPluginSettings(currentElement);
+      } else {
+        divPluginSettings.style.display = 'none';
+      }
+    } else {
+      divPluginSettings.style.display = 'none';
     }
   }
 
+  renderPluginSettings(currentElement) {
+    this.currentElement = currentElement;
+    this.generator = null;
+    this.currentForm = null;
+    const divPluginSettings = this.divPluginSettings;
+    divPluginSettings.innerHTML = '';
+    const runtime = this.builder.win.builderRuntime;
+    const pluginName = currentElement.getAttribute('data-cb-type');
+    const plugin = runtime.getPlugin(pluginName);
+    if (!plugin) return;
+    let displayName = out(plugin.displayName || plugin.name);
+
+    if (plugin.contentbox) {
+      if (!plugin.contentbox.bg) {
+        this.divBgSettings.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.text) {
+        this.divDefaultTextColor.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.title) {
+        this.divPanelTitle.style.display = 'none';
+      }
+    }
+
+    const divTitle = document.createElement('h3');
+    divTitle.style.cssText = 'font-family: sans-serif;font-weight: 300;font-size: 20px;margin: 0 0 12px;';
+    divTitle.innerText = displayName;
+    divPluginSettings.appendChild(divTitle);
+    this.generator = new SettingsUIGenerator$1(runtime, this.builder);
+    const hasContentEditor = plugin && plugin.editor && plugin.editor.openContentEditor;
+
+    if (hasContentEditor) {
+      // Get original content for the editor to work with
+      const originalContent = currentElement.getAttribute('data-cb-original-content'); // Create a temporary element for editing (so editor can manipulate it)
+
+      let editableClone = document.querySelector('.editable-clone');
+      if (editableClone) editableClone.remove(); // editableClone = document.createElement('div');
+
+      editableClone = currentElement.cloneNode(false);
+      editableClone.innerHTML = originalContent;
+      editableClone.className = 'editable-clone';
+      editableClone.style.display = 'none'; // Hidden, just for editing
+
+      document.body.appendChild(editableClone);
+      const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
+
+      const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
+        this.builder.editor.saveForUndo(); // Add index for sortable grid (for easy reorder)
+
+        let grid = editableClone.querySelector('.grid-sortable');
+
+        if (!grid) {
+          if (currentElement.classList.contains('grid-sortable')) {
+            grid = editableClone;
+          }
+        }
+
+        if (grid) {
+          Array.from(grid.children).forEach((child, index) => {
+            if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
+          });
+        } //----
+        // Store edited content from clone
+
+
+        currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
+        // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
+
+        const getChangedDataAttributes = (el1, el2) => {
+          const changed = [];
+
+          for (const key of Object.keys(el1.dataset)) {
+            if (key in el2.dataset && el1.dataset[key] !== el2.dataset[key]) {
+              changed.push(key);
+            }
+          }
+
+          return changed;
+        };
+
+        const changedAttributes = getChangedDataAttributes(originalElement, editableClone);
+        changedAttributes.forEach(attrName => {
+          // console.log(attrName)
+          // console.log(editableClone.dataset[attrName])
+          currentElement.dataset[attrName] = editableClone.dataset[attrName];
+        }); // -------
+
+        currentElement.innerHTML = editableClone.innerHTML; // Update current content
+        // Remove temporary clone
+
+        editableClone.remove(); // Reinitialize plugin with new content
+
+        await runtime.reinitialize(currentElement.parentElement);
+        this.builder.onChange();
+        this.builder.editor.hideElementTools();
+        this.builder.makeSortable(currentElement.parentElement);
+      });
+      divPluginSettings.appendChild(editorUI);
+    } // Generate form
+
+
+    this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
+      this.builder.editor.saveForUndo();
+      this.applyChanges(runtime);
+    });
+    divPluginSettings.appendChild(this.currentForm);
+  }
+
+  async applyChanges(runtime) {
+    if (!this.currentElement || !this.currentForm) return; // 1. Get form values
+
+    const values = this.generator.getFormValues(this.currentForm); // 2. Apply to element attributes
+
+    this.generator.applyValues(this.currentElement, values); // 3. Reinitialize component
+
+    const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
+    await runtime.reinitialize(container);
+    this.builder.onChange(); // console.log('Settings applied and component reinitialized');
+
+    this.builder.makeSortable(container);
+  }
+
   getStateTargeted() {
     let activeBox = this.builder.controlpanel.activeBox;
     if (!activeBox) return;
@@ -26224,7 +26381,8 @@ class ControlPanel {
     this.panelRow = controlPanel.querySelector('.panel-row');
     this.panelContainer = controlPanel.querySelector('.panel-container');
     this.panelBlock = controlPanel.querySelector('.panel-block');
-    this.panelBox = controlPanel.querySelector('.panel-box');
+    this.panelBox = controlPanel.querySelector('.panel-box'); // also has .panel-plugin inside
+
     this.panelSection = controlPanel.querySelector('.panel-section');
     this.breadcrumb = controlPanel.querySelector('.part-breadcrumb');
     this.title = controlPanel.querySelector('.part-title');
@@ -26271,8 +26429,14 @@ class ControlPanel {
 
     this.builder.onPageContentClick = e => {
       if (old) old.call(this);
-      if (this.builder.controlPanel && !document.body.classList.contains('controlpanel')) this.open();
-      if (document.body.classList.contains('controlpanel')) this.clickContent(e);
+
+      if (this.builder.controlPanel && !document.body.classList.contains('controlpanel')) {
+        //if previously close, open
+        this.open();
+      } else {
+        // if already open
+        if (document.body.classList.contains('controlpanel')) this.clickContent(e);
+      }
     };
 
     const btnClose = controlPanel.querySelector('.btn-close');
@@ -32371,6 +32535,7 @@ class Util$1 {
   }
 
   hideModal(modal) {
+    if (!modal) return;
     this.builder.doc.activeElement.blur();
     document.activeElement.blur();
     // this.builder.doc.body.focus(); 
@@ -32840,7 +33005,9 @@ class Util$1 {
 
     // Reinit after drag drop block
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
-    this.builder.makeSortable(this.builder.doc);
+    setTimeout(() => {
+      this.builder.makeSortable(this.builder.doc);
+    }, 400);
   }
 
   // https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
@@ -32933,7 +33100,11 @@ class Util$1 {
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
-      this.builder.makeSortable(rowElement);
+
+      // this.builder.makeSortable(rowElement); // cause other sortable not working
+      setTimeout(() => {
+        this.builder.makeSortable(this.builder.doc);
+      }, 400);
     } else if (bSnippet) {
       if (noedit) {
         this.addContent(html, mode, 'data-noedit');
@@ -33107,7 +33278,9 @@ class Util$1 {
       this.builder.doc.querySelectorAll('.dummy-module').forEach(module => {
         module.classList.remove('dummy-module');
       });
-      this.builder.makeSortable(this.builder.doc);
+      setTimeout(() => {
+        this.builder.makeSortable(this.builder.doc);
+      }, 400);
 
       // Change to row selection
       rowElement.className = rowElement.className.replace('row-outline', '');
@@ -33325,6 +33498,11 @@ class Util$1 {
     }
   }
 
+  clearModals() {
+    const builderStuff = this.builder.builderStuff;
+    let modal = builderStuff.querySelector('.pluginsettings.active');
+    this.hideModal(modal);
+  }
   clearControls() {
     const dom = this.dom;
     const builderStuff = this.builder.builderStuff;
@@ -43688,6 +43866,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(cellElement);
+    this.builder.makeSortable(cellElement);
   }
   removeColumn() {
     let util = this.util;
@@ -44470,6 +44649,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(rowElement);
+    this.builder.makeSortable(rowElement);
   }
 }
 class RowTool$1 {
@@ -81188,6 +81368,7 @@ class RowTool {
         const grid = new Grid(this.builder);
         grid.removeColumn();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
       let btnGridEditor = rowtool.querySelector('.row-grideditor');
@@ -81298,6 +81479,7 @@ class RowTool {
       if (elm) dom.addEventListener(elm, 'click', () => {
         this.grid.removeRow();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
     }
@@ -120695,6 +120877,9 @@ class BlockModal {
     new Tabs({
       element: modal
     });
+    new Draggable$2({
+      selector: '.is-modal.editblock .is-draggable'
+    });
   } // constructor
 
   getPage() {
@@ -125179,8 +125364,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
               let newRow = newRows[0]; // get first added row
               if (newRow.children.length > 0) {
                 const newCol = newRow.children[0];
+                const isPlugin = newCol.querySelector('[data-cb-type]');
                 if (newCol.children.length > 0) {
-                  newCol.children[0].click(); // Focus on first element
+                  if (isPlugin) {
+                    setTimeout(() => {
+                      // give time for plugin to render (apply style) => for correct elm tool position
+                      newCol.children[0].click();
+                    }, 400);
+                  } else {
+                    newCol.children[0].click(); // Focus on first element
+                  }
                 }
               }
             }
@@ -125281,7 +125474,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         });
       });
     });
-    this.makeSortable(this.doc);
+    setTimeout(() => {
+      this.makeSortable(this.doc);
+    }, 400);
     this.doc.querySelectorAll('.dummy-module').forEach(module => {
       module.classList.remove('dummy-module');
     });
@@ -126946,6 +127141,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.rte.viewZoom();
   }
   async loadSnippets(source, snippetOpen) {
+    this.snippetUrl = source;
     if (this.preview) return;
     if (this.opts.snippetList === '#divSnippetList') {
       let snippetPanel = document.querySelector(this.opts.snippetList);