@innovastudio/contentbuilder 1.3.80 → 1.3.81

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.80",
+  "version": "1.3.81",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -107,7 +107,7 @@ button:focus-visible {
   }
 }
 
-@media (min-width: 970px) {
+@media (min-width: 971px) {
   .is-builder > div {
     display: flex;
   }
@@ -1884,6 +1884,13 @@ button:focus-visible {
   background: rgba(255, 255, 255, 0.2);
   border: rgba(0, 0, 0, 0.09) 1px solid !important;
 }
+#_cbhtml .is-modal .is-separator,
+.is-ui .is-modal .is-separator {
+  width: 100%;
+  border-top: #f0f0f0 1px solid;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 #_cbhtml .is-modal .form-upload-larger.please-wait svg,
 .is-ui .is-modal .form-upload-larger.please-wait svg {
   transform: scale(1, 1);
@@ -1979,6 +1986,11 @@ button:focus-visible {
   padding: 0;
   border: none;
 }
+#_cbhtml .is-modal div.is-draggable > span,
+.is-ui .is-modal div.is-draggable > span {
+  pointer-events: none;
+  user-select: none;
+}
 #_cbhtml .is-modal div.is-modal-bar,
 .is-ui .is-modal div.is-modal-bar {
   position: absolute;

package/public/contentbuilder/contentbuilder.esm.js

@@ -4508,6 +4508,7 @@ class Util {
     Array.prototype.forEach.call(subblocks, subblock => {
       if (col.getAttribute('data-html-' + i)) {
         subblock.innerHTML = decodeURIComponent(col.getAttribute('data-html-' + i));
+        subblock.contentEditable = true;
       }
 
       i++;
@@ -14996,6 +14997,7 @@ class HtmlUtil {
       let index = 1;
       let subblocks = block.querySelectorAll('[data-subblock]');
       Array.prototype.forEach.call(subblocks, subblock => {
+        if (subblock.closest('.glide__slide--clone')) return;
         let html = subblock.innerHTML;
         block.setAttribute('data-html-' + index, encodeURIComponent(html));
         index++;
@@ -15823,6 +15825,47 @@ const prepareSvgIcons = builder => {
             <symbol viewBox="0 0 512 512" id="ion-volume-medium">
                 <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
             </symbol>
+
+
+
+            <symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <rect x="13" y="8" width="8" height="12" rx="1"></rect>
+                <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
+                <line x1="16" y1="9" x2="18" y2="9"></line>
+            </symbol>  
+            <symbol id="icon-device-desktop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <rect x="3" y="4" width="18" height="12" rx="1"></rect>
+                <line x1="7" y1="20" x2="17" y2="20"></line>
+                <line x1="9" y1="16" x2="9" y2="20"></line>
+                <line x1="15" y1="16" x2="15" y2="20"></line>
+            </symbol>
+            <symbol id="icon-device-mobile" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <rect x="6" y="3" width="12" height="18" rx="2"></rect>
+                <line x1="11" y1="4" x2="13" y2="4"></line>
+                <line x1="12" y1="17" x2="12" y2="17.01"></line>
+            </symbol>
+            <symbol id="icon-device-laptop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="3" y1="19" x2="21" y2="19"></line>
+                <rect x="5" y="6" width="14" height="10" rx="1"></rect>
+            </symbol>
+            <symbol id="icon-device-tablet" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <rect x="5" y="3" width="14" height="18" rx="1"></rect>
+                <circle cx="12" cy="17" r="1"></circle>
+            </symbol>
+
+            <symbol id="icon-eye" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0m13 0c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
+            </symbol>
+            <symbol id="icon-eye-off" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9.88 9.878a3 3 0 1 0 4.243 4.242m.581 -3.42a3.012 3.012 0 0 0 -1.45 -1.426m-3.877 -3.913a9.469 9.469 0 0 1 2.623 -.361c4 0 7.333 2.333 10 7c-.778 1.362 -1.613 2.524 -2.504 3.489m-2.138 1.859c-1.629 1.101 -3.415 1.652 -5.358 1.652c-4 0 -7.333 -2.333 -10 -7c1.374 -2.404 2.924 -4.189 4.652 -5.354m-3.652 -3.646l18 18"></path>
+            </symbol>
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -53282,7 +53325,7 @@ class Module {
         var moduleDesc = module.getAttribute('data-module-desc');
 
         if (moduleDesc) {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out(moduleDesc) + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
                     <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
                     </button>`;
         } else {
@@ -53611,9 +53654,10 @@ class Code {
           viewhtml = this.builderStuff.querySelector('.viewhtml');
         }
 
-        let textarea = viewhtml.querySelector('textarea');
-        let beautify = JsBeautify.html;
-        html = beautify(html);
+        let textarea = viewhtml.querySelector('textarea'); // Commented, to prevent {id} get formatted.
+        // let beautify = JsBeautify.html;
+        // html = beautify(html);
+
         textarea.value = html;
         this.htmlUtil.view('code');
       });
@@ -57450,13 +57494,39 @@ class ColumnTool {
                                 <button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
                             </div>
 
-                            <div style="padding-top:30px;">
+                            <div style="padding:30px 0 10px;">
                                 <label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
                             </div>
 
-                            <div style="padding:20px 0 10px;">
+                            <div style="display:none;padding:20px 0 10px;">
                                 <label class="label-cell-hideonmobile label-checkbox" for="chkHideColumnOnMobile"><input id="chkHideColumnOnMobile" class="chk-cell-hideonmobile" type="checkbox" /> ${util.out('Hide Column on Mobile')}</label>
                             </div>
+
+                            <div class="is-separator"></div>
+                         
+                            <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                                <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                                </button>
+                                <button title="${util.out('Tablet')}" class="input-device" 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>
+                                <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                                </button>
+                            </div>
+
+                            <div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
+                            <div class="div-visibility" style="display:flex;">
+                                <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
+                                    <span>${util.out('Visible')}</span>
+                                </button>
+                                <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
+                                    <span>${util.out('Hidden')}</span>
+                                </button>
+                            </div>
                             
                             <!--
                             <div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
@@ -59066,6 +59136,58 @@ class ColumnTool {
         if (!cell) return;
         if (inpClickSrc.value === '') return;
         this.builder.openMedia(cell);
+      }); // Responsive Visibility
+
+      let btns = this.cellSettings.querySelectorAll('.input-device');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let cell = this.util.cellSelected();
+          if (!cell) return;
+          let elms = this.cellSettings.querySelectorAll('.input-device');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          this.realtimeVisibility(cell);
+        });
+      });
+      let btnVisible = this.cellSettings.querySelector('.input-visible');
+      let btnHidden = this.cellSettings.querySelector('.input-hidden');
+      btnVisible.addEventListener('click', () => {
+        let cell = this.util.cellSelected();
+        if (!cell) return;
+        cell.classList.remove('hideonmobile');
+        let divTarget = this.cellSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          cell.classList.remove('xs-hidden');
+        } else if (target === 'sm') {
+          cell.classList.remove('sm-hidden');
+        } else if (target === '') {
+          cell.classList.remove('desktop-hidden');
+        }
+
+        btnVisible.classList.add('on');
+        btnHidden.classList.remove('on');
+      });
+      btnHidden.addEventListener('click', () => {
+        let cell = this.util.cellSelected();
+        if (!cell) return;
+        cell.classList.remove('hideonmobile');
+        let divTarget = this.cellSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          cell.classList.add('xs-hidden');
+        } else if (target === 'sm') {
+          cell.classList.add('sm-hidden');
+        } else if (target === '') {
+          cell.classList.add('desktop-hidden');
+        }
+
+        btnVisible.classList.remove('on');
+        btnHidden.classList.add('on');
       });
     }
 
@@ -59256,6 +59378,16 @@ class ColumnTool {
       let btn = this.cellSettings.querySelector('.cmd-content-pos[data-pos="bottomright"');
       dom.addClass(btn, 'on');
     }
+
+    this.realtimeVisibility(cell);
+  }
+
+  realtimeVisibility(cell) {
+    let divTarget = this.cellSettings.querySelector('.div-target');
+    let divVisibility = this.cellSettings.querySelector('.div-visibility');
+    let target = this.builder.responsive.readTarget(divTarget);
+    let valVisibility = this.builder.responsive.getVisibility(cell, target);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility);
   }
 
   openImagePicker(currentUrl, callback, btn) {
@@ -60671,17 +60803,19 @@ class ElementSpacingStyles {
                     </select>
                 </div>
             </div>
-            
-            <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
-            
-            <div class="is-settings" style="width:100%;">
-                <div>
-                    <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
+
+            <div style="display:none">
+                <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
+                
+                <div class="is-settings" style="width:100%;">
+                    <div>
+                        <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
+                    </div>
                 </div>
-            </div>
-            <div class="is-settings" style="margin-top:0;width:100%;">
-                <div>
-                    <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
+                <div class="is-settings" style="margin-top:0;width:100%;">
+                    <div>
+                        <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
+                    </div>
                 </div>
             </div>
         `;
@@ -64781,6 +64915,11 @@ class ElementTool {
         if (ok) {
           this.builder.uo.saveForUndo();
           let elm = this.builder.activeElement;
+          let subblock = false;
+
+          if (elm.closest('.is-subblock')) {
+            subblock = true;
+          }
           /*
           if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
               // Level 1
@@ -64806,6 +64945,7 @@ class ElementTool {
           }
           */
 
+
           elm.parentNode.removeChild(elm);
           this.elementTool.style.display = 'none';
           let cell = this.builder.activeCol;
@@ -64836,7 +64976,21 @@ class ElementTool {
               subblock.innerHTML = '<div class="spacer height-40" contentEditable="false"></div>';
             }
           });
-          util.clearControls(); //Trigger Change event
+          util.clearControls();
+
+          if (subblock) {
+            let block = this.builder.activeCol;
+            let subblocks = block.querySelectorAll('[data-subblock]');
+            var index = 1;
+            Array.prototype.forEach.call(subblocks, subblock => {
+              if (subblock.closest('.glide__slide--clone')) return;
+              let html = subblock.innerHTML;
+              block.setAttribute('data-html-' + index, encodeURIComponent(html));
+              index++;
+            });
+            util.refreshModuleLayout(block);
+          } //Trigger Change event
+
 
           this.builder.opts.onChange();
         }
@@ -69676,7 +69830,8 @@ class Rte {
       // Column contains custom code.
       customcode = true;
 
-      if (dom.parentsHasAttribute(elm, 'data-subblock')) {
+      if (elm.closest('.is-subblock')) {
+        // dom.parentsHasAttribute(elm, 'data-subblock')
         subblock = true;
       }
     }
@@ -69702,7 +69857,7 @@ class Rte {
           this.showAlignButtons();
           this.positionToolbar();
         }
-      } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html')) {
+      } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html') && !subblock) {
         //|| col===elm
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
@@ -73139,6 +73294,7 @@ class Resizeable {
 
     const onDown = e => {
       calc(e);
+      if (e.target.closest('.glide__arrows')) return false;
       const isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
       clicked = {
         x: x,
@@ -74828,6 +74984,54 @@ class MediaPicker {
 
 }
 
+class Responsive {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+  }
+
+  getVisibility(elm, target) {
+    if (target === 'xs') return !elm.classList.contains('xs-hidden');
+    if (target === 'sm') return !elm.classList.contains('sm-hidden');
+    if (target === '') return !elm.classList.contains('desktop-hidden');
+  }
+
+  setVisibility(visibility, elm, target) {
+    if (target === 'xs') {
+      if (visibility) elm.classList.remove('xs-hidden');else elm.classList.add('xs-hidden');
+    }
+
+    if (target === 'sm') {
+      if (visibility) elm.classList.remove('sm-hidden');else elm.classList.add('sm-hidden');
+    }
+
+    if (target === '') {
+      if (visibility) elm.classList.remove('desktop-hidden');else elm.classList.add('desktop-hidden');
+    }
+  }
+
+  readTarget(area) {
+    const inp = area.querySelector('.input-device.on');
+    return inp.getAttribute('data-value');
+  }
+
+  showVisibility(area, visibility) {
+    if (visibility) {
+      area.querySelector('.input-visible').classList.add('on');
+      area.querySelector('.input-hidden').classList.remove('on');
+    } else {
+      area.querySelector('.input-visible').classList.remove('on');
+      area.querySelector('.input-hidden').classList.add('on');
+    }
+  }
+
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -75546,11 +75750,15 @@ class ContentBuilder {
 
     this.win = win;
     this.doc = doc;
+    this.doc.body.classList.add('data-editor');
     const dom = new Dom(this);
     this.dom = dom;
     const util = new Util(this); // General utilities
 
-    this.util = util; // Content stuff
+    this.util = util;
+    const responsive = new Responsive(this); // General utilities
+
+    this.responsive = responsive; // Content stuff
 
     if (this.iframe) {
       let contentStuff = doc.querySelector('.content-stuff');
@@ -75712,7 +75920,8 @@ class ContentBuilder {
           k = false;
       let m = false,
           n = false,
-          o = false;
+          o = false,
+          p = false;
       let isSpecialElement = false;
       let element = target;
 
@@ -75720,6 +75929,7 @@ class ContentBuilder {
         if (!element.tagName) break;
         if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
         if (this.dom.hasClass(element, 'is-builder')) a = true;
+        if (this.dom.hasClass(element, 'is-subblock')) p = true;
         if (this.dom.hasClass(element, 'is-modal')) b = true;
         if (this.dom.hasClass(element, 'is-side') || this.dom.hasClass(element, 'is-sidebar')) c = true;
         if (this.dom.hasClass(element, 'is-pop')) d = true;
@@ -75786,7 +75996,7 @@ class ContentBuilder {
         }
       }
 
-      if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
+      if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
         if (!this.dom.getSelected()) {
           // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
@@ -76508,6 +76718,7 @@ class ContentBuilder {
   }
 
   destroy() {
+    this.doc.body.classList.remove('data-editor');
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);
     document.removeEventListener('mousedown', this.doDocumentMousedown, false);