@innovastudio/contentbox 1.5.5 → 1.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.9",
+    "@innovastudio/contentbuilder": "^1.4.10",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -4043,8 +4043,17 @@ class EditSection {
                 ` + '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + `
+                    <div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
+                    <div style="padding-top:3px;display:flex;">
+                        <button title="${out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                        </button>
+                        <button title="${out('Tablet (Portrait)')}" class="input-breakpoint on" data-value="sm" style="width:40px;height:25px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                        </button>
+                    </div>
                     
-                    <div class="is-separator-" style="margin-top:30px"></div>
+                    <div class="is-separator" style="margin-top:20px"></div>
                          
                     <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
                         <button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
@@ -4442,9 +4451,33 @@ class EditSection {
         section.removeAttribute('id');
         info.innerHTML = '';
       }
+    }); // Breakpoint
+
+    let btns = modalEditSection.querySelectorAll('.input-breakpoint');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let section = this.builder.activeSection;
+        if (!section) return;
+        this.builder.editor.saveForUndo();
+        let elms = modalEditSection.querySelectorAll('.input-breakpoint');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        let target = btn.getAttribute('data-value');
+
+        if (target === 'sm') {
+          section.classList.remove('md-wrap');
+        } else if (target === 'md') {
+          section.classList.add('md-wrap');
+        } //Trigger Change event
+
+
+        this.builder.onChange();
+      });
     }); // Section Visibility
 
-    let btns = modalEditSection.querySelectorAll('.input-device');
+    btns = modalEditSection.querySelectorAll('.input-device');
     btns.forEach(btn => {
       btn.addEventListener('click', () => {
         let section = this.builder.activeSection;
@@ -4712,6 +4745,16 @@ class EditSection {
 
 
     this.realtimeVisibility(activeSection);
+    btns = modalEditSection.querySelectorAll('.input-breakpoint');
+    btns.forEach(btn => {
+      dom$m.removeClass(btn, 'on');
+    });
+
+    if (activeSection.classList.contains('md-wrap')) {
+      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="md"]'), 'on');
+    } else {
+      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
+    }
   }
 
   close() {
@@ -63781,7 +63824,7 @@ class Image$1 {
                 </div>
 
                 <div class="is-modal imageselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                    <div style="max-width:800px;height:80%;padding:0;">
+                    <div style="max-width:${this.builder.imageSelectWidth};height:${this.builder.imageSelectHeight};padding:0;">
                         <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                     </div>
                 </div>
@@ -66718,7 +66761,7 @@ class Hyperlink {
             </div>
             
             <div class="is-modal fileselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width:800px;height:80%;padding:0;">
+                <div class="is-modal-content" style="max-width:${this.builder.fileSelectWidth};height:${this.builder.fileSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -68840,7 +68883,7 @@ class Video {
             </div>
 
             <div class="is-modal videoselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:800px;height:80%;padding:0;">
+                <div style="max-width:${this.builder.videoSelectWidth};height:${this.builder.videoSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -69077,7 +69120,7 @@ class Audio {
             </div>
 
             <div class="is-modal audioselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:800px;height:80%;padding:0;">
+                <div style="max-width:${this.builder.audioSelectWidth};height:${this.builder.audioSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -90897,6 +90940,16 @@ class ContentBuilder {
       audioSelect: '',
       mediaSelect: '',
       // NEW: for image & video
+      imageSelectWidth: '1024px',
+      imageSelectHeight: '80vh',
+      fileSelectWidth: '1024px',
+      fileSelectHeight: '80vh',
+      videoSelectWidth: '1024px',
+      videoSelectHeight: '80vh',
+      audioSelectWidth: '1024px',
+      audioSelectHeight: '80vh',
+      mediaSelectWidth: '1024px',
+      mediaSelectHeight: '80vh',
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],