@innovastudio/contentbox 1.6.156 → 1.6.158

package/index.d.ts

@@ -374,6 +374,11 @@ interface ContentBoxOptions {
     exampleAudioUrl?: string;
     saveResults?: boolean;
     //---
+
+    autoSaveDelay?: number;
+    maxAutoSaveInterval?: number;
+    minAutoSaveInterval?: number;
+    autoSave?: () => void | Promise<void>;
 }
 
 interface OpenModalOptions {

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -1391,10 +1391,14 @@ class SideBar {
       dom$l.removeClass(elm, 'active');
     });
     builderStuff.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
-      dom$l.removeClass(elm, 'active');
-      elm.setAttribute('aria-hidden', true);
+      dom$l.removeClass(elm, 'active'); // elm.setAttribute('aria-hidden', true);
+
       setTimeout(() => {
         elm.style.display = ''; //hide
+
+        setTimeout(() => {
+          elm.setAttribute('aria-hidden', true);
+        }, 50);
       }, 300);
     }); // this.builder.animateScroll.close();
   }
@@ -25779,16 +25783,30 @@ class ControlPanel {
         this.builder.iframePanel.setScreenMode('desktop');
       }
     } else if (this.builder.iframeSrc && this.builder.controlPanel) {
-      const controlPanel = this.controlPanel;
-      const btnToggleDevice = controlPanel.querySelector('.btn-toggledevice');
+      // const controlPanel = this.controlPanel;
+      // const btnToggleDevice = controlPanel.querySelector('.btn-toggledevice');
+      // const screenMode = this.builder.screenMode;
+      // if(screenMode!=='fullview') {
+      //     this.builder.iframePanel.setScreenMode('fullview');
+      //     btnToggleDevice.classList.remove('on');
+      // } else {
+      //     this.builder.iframePanel.setScreenMode('desktop');
+      //     btnToggleDevice.classList.add('on');
+      // }
       const screenMode = this.builder.screenMode;
 
-      if (screenMode !== 'fullview') {
-        this.builder.iframePanel.setScreenMode('fullview');
-        btnToggleDevice.classList.remove('on');
-      } else {
+      if (screenMode === 'desktop-lg') {
         this.builder.iframePanel.setScreenMode('desktop');
-        btnToggleDevice.classList.add('on');
+      } else if (screenMode === 'desktop') {
+        this.builder.iframePanel.setScreenMode('tablet-landscape');
+      } else if (screenMode === 'tablet-landscape') {
+        this.builder.iframePanel.setScreenMode('tablet');
+      } else if (screenMode === 'tablet') {
+        this.builder.iframePanel.setScreenMode('mobile');
+      } else if (screenMode === 'mobile') {
+        this.builder.iframePanel.setScreenMode('fullview');
+      } else if (screenMode === 'fullview') {
+        this.builder.iframePanel.setScreenMode('desktop-lg');
       }
     }
   }
@@ -126116,6 +126134,11 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     this.elmTool.hide();
   }
   typing() {
+    // Lightweight: Just mark content changed for auto-save
+    if (this.opts.onType) {
+      this.opts.onType();
+    }
+
     // console.log('typing');
     if (this.timeoutId) clearTimeout(this.timeoutId);
     this.timeoutId = setTimeout(() => {
@@ -154490,18 +154513,16 @@ class IframePanel {
       tool.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
       const btn = tool.querySelector(`[data-command="${screenMode}"]`);
       if (btn) btn.classList.add('active'); // set on/off toggle device button
-
-      if (this.builder.controlpanel) {
-        const btnToggleDevice = this.builder.controlpanel.controlPanel.querySelector('.btn-toggledevice');
-
-        if (btnToggleDevice) {
-          if (screenMode !== 'fullview') {
-            btnToggleDevice.classList.add('on');
-          } else {
-            btnToggleDevice.classList.remove('on');
-          }
-        }
-      }
+      // if(this.builder.controlpanel) {
+      //     const btnToggleDevice = this.builder.controlpanel.controlPanel.querySelector('.btn-toggledevice');
+      //     if(btnToggleDevice) {
+      //         if(screenMode!=='fullview') {
+      //             btnToggleDevice.classList.add('on');
+      //         } else {
+      //             btnToggleDevice.classList.remove('on');
+      //         }
+      //     }
+      // }
 
       this.loadIframe();
       let btns = tool.querySelectorAll('button');
@@ -154676,19 +154697,17 @@ class IframePanel {
     }
 
     if (screenMode !== 'fullview') tool.querySelector(`button[data-command="${screenMode}"]`).classList.add('active'); // set on/off toggle device button
-
-    if (this.builder.controlpanel) {
-      const btnToggleDevice = this.builder.controlpanel.controlPanel.querySelector('.btn-toggledevice');
-
-      if (btnToggleDevice) {
-        if (screenMode !== 'fullview') {
-          btnToggleDevice.classList.add('on');
-        } else {
-          btnToggleDevice.classList.remove('on');
-        }
-      }
-    } // Refresh Part 2
-
+    // if(this.builder.controlpanel) {
+    //     const btnToggleDevice = this.builder.controlpanel.controlPanel.querySelector('.btn-toggledevice');
+    //     if(btnToggleDevice) {
+    //         if(screenMode!=='fullview') {
+    //             btnToggleDevice.classList.add('on');
+    //         } else {
+    //             btnToggleDevice.classList.remove('on');
+    //         }
+    //     }
+    // }
+    // Refresh Part 2
 
     if (hasPin) {
       setTimeout(() => {
@@ -161170,8 +161189,13 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
       let old2 = this.settings.onChange;
 
-      this.settings.onChange = () => {
-        old2.call(this);
+      this.settings.onChange = (...args) => {
+        // Accept all arguments
+        // Call original onChange with all arguments
+        if (old2) old2.apply(this, args); // Use apply to pass arguments
+        // Trigger auto-save
+
+        this.markContentChanged();
         setTimeout(() => {
           // this.quickPosTool();
           this.editor.livePreview.previewRefresh();
@@ -161401,16 +161425,184 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }, this);
     } else {
       initialStart();
+    } // ---- AUTO-SAVE ----
+    // Auto-save timing configuration
+
+
+    this.autoSaveDelay = settings.autoSaveDelay || 3000; // Wait 3s after pause before saving
+
+    this.maxAutoSaveInterval = settings.maxAutoSaveInterval || 30000; // Force save every 30s during continuous editing
+
+    this.minAutoSaveInterval = settings.minAutoSaveInterval || 5000; // Minimum 5s between saves (rate limit)
+    // Auto-save callback function
+
+    this.autoSave = settings.autoSave; // Auto-save state
+
+    this.autoSaveTimeoutId = null; // Debounce timer
+
+    this.maxIntervalCheckerId = null; // Background checker for max interval
+
+    this.previousHash = null; // Last saved content hash
+
+    this.lastSaveTime = 0; // Timestamp of last save
+
+    this.pendingChanges = false; // Flag for unsaved changes
+
+    this.isSaving = false; // Prevent concurrent saves
+    // Start auto-save if configured
+
+    if (this.autoSave && typeof this.autoSave === 'function') {
+      this.initAutoSave();
     }
   } // constructor
+  // ---- AUTO-SAVE ----
+  // Initialize auto-save system
+
+
+  initAutoSave() {
+    this.startMaxIntervalChecker();
+  } // Start background checker to enforce max interval
+
+
+  startMaxIntervalChecker() {
+    this.maxIntervalCheckerId = setInterval(() => {
+      // Only check if there are pending changes and not currently saving
+      if (this.pendingChanges && !this.isSaving) {
+        const now = Date.now();
+        const timeSinceLastSave = now - this.lastSaveTime; // Force save if max interval exceeded
+
+        if (timeSinceLastSave >= this.maxAutoSaveInterval) {
+          // console.log('Max interval reached - forcing save');
+          this.performAutoSave();
+        }
+      }
+    }, 1000); // Check every second
+  } // Mark content as changed and schedule auto-save
+
+
+  markContentChanged() {
+    // Skip if auto-save not configured
+    if (!this.autoSave) return; // Mark that changes exist
+
+    this.pendingChanges = true; // Initialize lastSaveTime on first change
+
+    if (this.lastSaveTime === 0) {
+      this.lastSaveTime = Date.now();
+    }
+
+    const now = Date.now();
+    const timeSinceLastSave = now - this.lastSaveTime; // Clear any pending scheduled save
+
+    if (this.autoSaveTimeoutId) {
+      clearTimeout(this.autoSaveTimeoutId);
+    } // Scenario 1: Max interval reached - save immediately
+
+
+    if (timeSinceLastSave >= this.maxAutoSaveInterval && !this.isSaving) {
+      this.performAutoSave();
+    } // Scenario 2: Min interval passed - schedule debounced save
+    else if (timeSinceLastSave >= this.minAutoSaveInterval) {
+      this.autoSaveTimeoutId = setTimeout(() => {
+        this.performAutoSave();
+      }, this.autoSaveDelay);
+    } // Scenario 3: Too soon - schedule for later
+    else {
+      const delayUntilNextSave = this.minAutoSaveInterval - timeSinceLastSave;
+      this.autoSaveTimeoutId = setTimeout(() => {
+        if (this.pendingChanges) {
+          this.performAutoSave();
+        }
+      }, delayUntilNextSave + this.autoSaveDelay);
+    }
+  } // Execute auto-save with change detection
+
+
+  async performAutoSave() {
+    // Prevent concurrent saves
+    if (this.isSaving) return; // Get current content hash (lightweight check)
+
+    const htmlLight = this.htmlCheck();
+    const currentHash = this.simpleHash(htmlLight); // Only save if content actually changed
+
+    if (this.previousHash !== currentHash) {
+      this.isSaving = true;
+
+      try {
+        // Call the save function
+        await this.autoSave(); // console.log('Content auto-saved successfully.');
+        // Update tracking state
+
+        this.previousHash = currentHash;
+        this.lastSaveTime = Date.now();
+        this.pendingChanges = false;
+      } catch (error) {// console.error('Auto-save failed:', error);
+        // Keep pendingChanges = true to retry later
+      } finally {
+        this.isSaving = false;
+      }
+    } else {
+      // No actual changes detected
+      this.pendingChanges = false;
+    }
+  } // Generate hash for efficient change detection
+
+
+  simpleHash(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char; // hash * 31 + char
+
+      hash = hash & hash; // Convert to 32-bit integer
+    }
+
+    return hash;
+  } // Manually trigger save (useful for "Save" button)
+
+
+  async saveNow() {
+    if (this.pendingChanges && !this.isSaving) {
+      await this.performAutoSave();
+    }
+  } //----
 
 
   isNewV2() {
     return this.wrapperEl.classList.contains('box-v2');
   }
 
+  loadFonts() {
+    let contentStylePath = this.settings.contentStylePath;
+    const wrapper = this.wrapperEl;
+    const sections = wrapper.querySelectorAll('.is-section');
+    sections.forEach(section => {
+      section.classList.forEach(item => {
+        if (item.indexOf('type-') !== -1) {
+          const contentClass = item;
+          const contentCss = item + '.css'; //Add css
+
+          let exist = false;
+          let links = this.doc.getElementsByTagName('link');
+
+          for (let i = 0; i < links.length; i++) {
+            let src = links[i].href.toLowerCase();
+            if (src.indexOf(contentCss.toLowerCase()) !== -1) exist = true;
+          }
+
+          if (!exist) {
+            this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+          }
+        }
+      });
+    });
+  }
+
   editorSetup() {
     this.editor = new ContentBuilder({
+      onType: () => {
+        this.markContentChanged();
+      },
       quickAddButtons: this.settings.quickAddButtons,
       assetManagerBasePath: this.settings.assetManagerBasePath || '',
       assetAbsoluteBasePath: this.settings.assetAbsoluteBasePath || '',
@@ -161535,6 +161727,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       sectionTemplate: this.settings.sectionTemplate,
       formTemplate: this.settings.formTemplate,
       onBlockSectionAdd: () => {
+        this.loadFonts();
         this.pageSetup();
       },
       onBlockCanvasAdd: () => {
@@ -165304,7 +165497,23 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   }
 
   destroy() {
-    // let html = this.html();
+    // Save any pending changes before destroying
+    if (this.pendingChanges && !this.isSaving) {
+      this.performAutoSave();
+    } // Clear debounce timer
+
+
+    if (this.autoSaveTimeoutId) {
+      clearTimeout(this.autoSaveTimeoutId);
+      this.autoSaveTimeoutId = null;
+    } // Clear background checker
+
+
+    if (this.maxIntervalCheckerId) {
+      clearInterval(this.maxIntervalCheckerId);
+      this.maxIntervalCheckerId = null;
+    }
+
     if (this.resizeObserver) this.resizeObserver.disconnect();
     const elmStyleEditPanel = document.querySelector('#_style_editpanel');
     if (elmStyleEditPanel) elmStyleEditPanel.remove(elmStyleEditPanel);