@innovastudio/contentbuilder 1.0.60 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -38,7 +38,6 @@ button:focus {
 }
 
 .is-builder {
-  transition: all ease 0.3s;
   transform-origin: top;
 }
 .is-builder > div > div:focus {
@@ -2061,7 +2060,6 @@ button:focus {
 #_cbhtml .is-modal.columnsettings .cell-bgimage-preview,
 .is-ui .is-modal.columnsettings .cell-bgimage-preview {
   max-width: 120px;
-  max-height: 120px;
 }
 #_cbhtml .is-modal.columnsettings .cell-bgimage-preview img,
 .is-ui .is-modal.columnsettings .cell-bgimage-preview img {
@@ -2748,6 +2746,17 @@ button:focus {
   letter-spacing: 1px;
   padding: 0;
 }
+#_cbhtml label.label-checkbox,
+.is-ui label.label-checkbox {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+#_cbhtml label.label-checkbox input,
+.is-ui label.label-checkbox input {
+  margin: 0;
+  margin-right: 5px;
+}
 #_cbhtml .is-rangeslider,
 .is-ui .is-rangeslider {
   -webkit-appearance: none;

package/public/contentbuilder/contentbuilder.esm.js

@@ -2396,6 +2396,7 @@ class Util {
                             on = true;
                         }
                     }
+                    /*
                     if(on) {
                         parent._cb.clearFont();
                     } else {
@@ -2406,6 +2407,13 @@ class Util {
                         //parent._cb.applyFont(fontfamily, fontstyle, provider);
                         parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
                     }
+                    */
+                    var provider = elm.getAttribute('data-provider');
+                    var fontfamily = elm.getAttribute('data-font-family');
+                    var fontstyle = elm.getAttribute('data-font-style');
+                    var fontdisplay = elm.getAttribute('data-font-display');
+                    //parent._cb.applyFont(fontfamily, fontstyle, provider);
+                    parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
 
                 });
             }
@@ -2597,6 +2605,7 @@ class Util {
                             on = true;
                         }
                     }
+                    /*
                     if(on) {
                         parent._cb.clearFont();
                     } else {
@@ -2607,6 +2616,13 @@ class Util {
                         //parent._cb.applyFont(fontfamily, fontstyle, provider);
                         parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
                     }
+                    */
+                    var provider = elm.getAttribute('data-provider');
+                    var fontfamily = elm.getAttribute('data-font-family');
+                    var fontstyle = elm.getAttribute('data-font-style');
+                    var fontdisplay = elm.getAttribute('data-font-display');
+                    //parent._cb.applyFont(fontfamily, fontstyle, provider);
+                    parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
 
                 });
             }
@@ -2716,6 +2732,16 @@ class Dom {
     return children;
   }
 
+  getElementOffset(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+
   parentsHasClass(element, classname) {
     while (element) {
       // if(classname==='is-side') console.log(element.nodeName); // NOTE: click on svg can still returns undefined in IE11
@@ -2925,40 +2951,45 @@ class Dom {
   }
 
   textSelection() {
+    /*
     try {
-      var elm;
-      var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
-
-      if (curr.nodeType === 3) {
-        // text node
-        elm = curr.parentNode;
-
-        if (this.parentsHasClass(elm, 'is-builder')) {
-          return elm;
+        var elm;
+        var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
+        if (curr.nodeType === 3) {  // text node
+            elm = curr.parentNode;
+            if(this.parentsHasClass(elm, 'is-builder')) {
+                return elm;
+            }
+            else {
+                return false;  
+            } 
         } else {
-          return false;
-        }
-      } else {
-        elm = curr;
-        var nodeName = elm.nodeName.toLowerCase();
-
-        if (nodeName === 'i' && elm.innerHTML === '') {
-          //icon
-          if (this.parentsHasClass(elm, 'is-builder')) {
-            return elm;
-          }
-        } // Check if a block (because when placing cursor using arrow keys on empty block, nodeType=1 not 3)
-
-
-        if (nodeName === 'p' || nodeName === 'h1' || nodeName === 'h2' || nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5' || nodeName === 'h6' || nodeName === 'li' || nodeName === 'pre' || nodeName === 'blockquote') {
-          return elm;
+            elm = curr;
+            var nodeName = elm.nodeName.toLowerCase();
+            if(nodeName === 'i' && elm.innerHTML === '') { //icon
+                if(this.parentsHasClass(elm, 'is-builder')) {
+                    return elm;
+                }
+            }
+            
+            // Check if a block (because when placing cursor using arrow keys on empty block, nodeType=1 not 3)
+            if(nodeName === 'p' || nodeName === 'h1' || nodeName === 'h2'
+            || nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5'
+            || nodeName === 'h6' || nodeName === 'li' || nodeName === 'pre'
+            || nodeName === 'blockquote') {
+                return elm;
+            }
+            return false;
         }
-
-        return false;
-      }
     } catch (e) {
-      return false;
+        return false;
     }
+    */
+    const selection = this.getSelection();
+    const anchorNode = selection.anchorNode;
+    if (!anchorNode) return false;
+    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+    return container;
   }
 
   getStyle(element, property) {
@@ -3010,7 +3041,347 @@ class Dom {
       }
     }
   } // ---
+  // execCommand replacement
+
+
+  execCommand(action, value, callback) {
+    const selection = this.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+
+    if (anchorNode) {
+      const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+      const sameSelection = container && container.innerText === selection.toString();
+      let newElement;
+
+      if (sameSelection || selection.toString().trim() === '') {
+        newElement = this.updateSelection(action, value, container);
+      } else {
+        newElement = this.replaceSelection(action, value, selection, container);
+      }
+
+      if (callback) callback(true, newElement);
+    } else {
+      if (callback) callback(false);
+    }
+  }
+
+  updateSelection(action, value, container) {
+    // container.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
+    container.style[action] = this.getStyleValue(container, action, value); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
+
+    this.checkStyleIfSameAsParent(container, action);
+    this.cleanChildren(action, container); // this.cleanUnusedSpan(container);
+
+    return container;
+  }
+
+  replaceSelection(action, value, selection, container) {
+    const range = selection.getRangeAt(0);
+    const fragment = range.extractContents();
+    const span = this.createSpan(container, action, value);
+    span.appendChild(fragment);
+    this.cleanChildren(action, span); // this.cleanUnusedSpan(span);
+
+    range.insertNode(span);
+    selection.selectAllChildren(span); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
+
+    this.checkStyleIfSameAsParent(span, action);
+    return span;
+  }
+
+  checkStyleIfSameAsParent(element, action) {
+    if (element.parentNode) {
+      if (element.parentNode.style[action] === element.style[action] || window.getComputedStyle(element.parentNode, null).getPropertyValue(action) === element.style[action]) {
+        element.style[action] = '';
+
+        if (element.getAttribute('style') === '' || element.style === null) {
+          element.removeAttribute('style');
+        } // let unused = ( element.attributes.length === 0 || (element.attributes.length === 1 && element.hasAttribute('data-keep')));
+        // if (element.nodeName.toLowerCase() === 'span' && unused) {
+        //     const text = document.createTextNode(element.textContent);
+        //     element.parentElement.replaceChild(text, element);
+        // }
+
+      }
+    }
+  }
+
+  createSpan(container, action, value) {
+    const span = document.createElement('span'); // span.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
+
+    span.style[action] = this.getStyleValue(container, action, value);
+    return span;
+  }
+
+  findParentStyle(node, action) {
+    if (node.nodeName.toUpperCase() === 'HTML' || node.nodeName.toUpperCase() === 'BODY') {
+      return null;
+    }
+
+    if (!node.parentNode) {
+      return null;
+    }
+
+    const hasStyle = node.style[action] !== null && node.style[action] !== undefined && node.style[action] !== '';
+
+    if (hasStyle) {
+      return node;
+    }
+
+    this.findParentStyle(node.parentNode, action);
+  }
+
+  getStyleValue(container, action, value) {
+    if (action === 'font-weight' || action === 'font-style' || action === 'text-decoration' || action === 'text-transform') {
+      // Toggle
+      // let currentValue = window.getComputedStyle(container, null).getPropertyValue(action);
+      let parent = this.findParentStyle(container, action);
+      let currentValue;
+
+      if (parent) {
+        currentValue = parent.style[action];
+      }
+
+      if (value === currentValue) {
+        //toggle here
+        // value = 'initial'; // the problem with initial is that it is always refer to font-weight: 400 (won;t work for custom 300 for normal paragraph)
+        // so we'll do the test first, to find the actuat initial value
+        container.style[action] = ''; // test
+
+        let initialValue = window.getComputedStyle(container, null).getPropertyValue(action); // get the actual initial value
+        // console.log('initial:' +initialValue);
+
+        container.style[action] = currentValue; //return back from test
+
+        value = initialValue;
+      }
+    }
+
+    return value;
+  }
+
+  getSelection() {
+    if (window && window.getSelection) {
+      return window.getSelection();
+    } else if (document && document.getSelection) {
+      return document.getSelection();
+    } else if (document && document.selection) {
+      return document.selection.createRange().text;
+    }
+
+    return null;
+  }
+
+  cleanChildren(action, span) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with same style rule
+
+
+    const children = Array.from(span.children).filter(element => {
+      return element.style[action] !== undefined && element.style[action.style] !== '';
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        element.style[action] = '';
+
+        if (element.getAttribute('style') === '' || element.style === null) {
+          element.removeAttribute('style');
+        }
+      });
+    } // Deeper childrens
+
+
+    const cleanChildrenChildren = Array.from(span.children).map(element => {
+      return this.cleanChildren(action, element);
+    });
+
+    if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
+      return;
+    }
+  } // Clean HTML stuff
+
+
+  removeEmptyStyle(area) {
+    if (!area.hasChildNodes()) {
+      return;
+    }
+
+    const children = Array.from(area.children).filter(element => {
+      return element.getAttribute('style');
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        if (element.getAttribute('style').trim() === '' || element.style === null) {
+          element.removeAttribute('style');
+        }
+      });
+    } // Deeper childrens
+
+
+    const removeEmptyStyleChildren = Array.from(area.children).map(element => {
+      return this.removeEmptyStyle(element);
+    });
+
+    if (!removeEmptyStyleChildren || removeEmptyStyleChildren.length <= 0) {
+      return;
+    }
+  }
+
+  cleanEmptySpans(area) {
+    let spans = area.querySelectorAll('span');
+    const filter = Array.prototype.filter;
+    let children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    }); // Remove empty spans
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        element.outerHTML = element.innerHTML;
+      });
+    } // Remove spans which have empty content
+
+
+    spans = area.querySelectorAll('span');
+    filter.call(spans, element => {
+      if (element.innerHTML === '') {
+        element.parentNode.removeChild(element);
+      }
+    }); // Recheck
+
+    spans = area.querySelectorAll('span');
+    children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    });
+
+    if (children && children.length > 0) {
+      this.cleanEmptySpans(area);
+    } else {
+      return;
+    }
+  } // Font Size stuff
+
+
+  cleanClassSize(span, className) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with same style rule
+
+
+    const children = Array.from(span.children).filter(element => {
+      return this.hasClass(element, className);
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        this.removeClass(element, className);
+      });
+    } // Deeper childrens
+
+
+    const cleanClassSizeChildren = Array.from(span.children).map(element => {
+      return this.cleanClassSize(element, className);
+    });
+
+    if (!cleanClassSizeChildren || cleanClassSizeChildren.length <= 0) {
+      return;
+    }
+  } // Remove Format stuff
+
+
+  removeFormat() {
+    const selection = this.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+    if (!anchorNode) return;
+    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+    const sameSelection = container && container.innerText === selection.toString();
+
+    if (sameSelection || selection.toString().trim() === '') {
+      this.cleanElement(container);
+    } else {
+      this.cleanSelection(selection);
+    }
+  }
+
+  cleanElement(elm) {
+    elm.style.fontWeight = '';
+    elm.style.fontStyle = '';
+    elm.style.textDecoration = '';
+    elm.style.textTransform = '';
+    elm.style.fontFamily = '';
+    elm.style.fontSize = '';
+    elm.style.color = '';
+    elm.style.backgroundColor = '';
+    elm.classList.forEach(item => {
+      if (item.indexOf('size-') !== -1) {
+        this.removeClass(elm, item);
+      }
+    });
+    let elms = elm.querySelectorAll('*');
+    elms.forEach(elm => {
+      elm.style.fontWeight = '';
+      elm.style.fontStyle = '';
+      elm.style.textDecoration = '';
+      elm.style.textTransform = '';
+      elm.style.fontFamily = '';
+      elm.style.fontSize = '';
+      elm.style.color = '';
+      elm.style.backgroundColor = '';
+      elm.classList.forEach(item => {
+        if (item.indexOf('size-') !== -1) {
+          this.removeClass(elm, item);
+        }
+      });
+    });
+    this.cleanUnusedSpan(elm); // causes lost selection
+  }
 
+  cleanSelection(selection) {
+    const range = selection.getRangeAt(0);
+    const fragment = range.extractContents();
+    const span = document.createElement('span');
+    span.appendChild(fragment);
+    range.insertNode(span);
+    selection.selectAllChildren(span);
+    this.cleanElement(span);
+  }
+
+  cleanUnusedSpan(span) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with no style
+
+
+    const children = Array.from(span.children).filter(element => {
+      if (element.getAttribute('style') === '' || element.style === null) {
+        element.removeAttribute('style');
+      }
+
+      let unused = element.attributes.length === 0 || element.attributes.length === 1 && element.hasAttribute('data-keep');
+      return element.nodeName.toLowerCase() === 'span' && unused;
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        const text = document.createTextNode(element.textContent);
+        element.parentElement.replaceChild(text, element);
+      });
+      return;
+    } // Deeper childrens
+
+
+    const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
+      return this.cleanUnusedSpan(element);
+    });
+
+    if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+      return;
+    }
+  }
 
 }
 
@@ -8702,6 +9073,8 @@ class HtmlUtil {
     dom$E.removeAttributes(elms, 'draggable');
     elms = tmp.querySelectorAll('[data-animated]');
     dom$E.removeAttributes(elms, 'data-animated');
+    elms = tmp.querySelectorAll('[data-saveforundo]');
+    dom$E.removeAttributes(elms, 'data-saveforundo');
     elms = tmp.querySelectorAll('[hidesnippetaddtool]');
     dom$E.removeAttributes(elms, 'hidesnippetaddtool');
     elms = tmp.querySelectorAll('[gray]');
@@ -8747,6 +9120,8 @@ class HtmlUtil {
     Array.prototype.forEach.call(emptystyles, emptystyle => {
       emptystyle.removeAttribute('style');
     });
+    dom$E.removeEmptyStyle(tmp);
+    dom$E.cleanEmptySpans(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
     dom$E.removeAttributes(elms, 'data-keep'); //Cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
 
@@ -44940,6 +45315,10 @@ 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:20px;">
+                                <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="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
                             <div style="display: none;">
                                 <button title="${util.out('Normal')}" class="input-row-enlarge" data-command="0" style="margin-right:1px;">${util.out('Normal')}</button>
@@ -45603,6 +45982,22 @@ class ColumnTool {
           this.builder.opts.onChange();
         });
       });
+      const chkCellGrayscale = cellSettings.querySelector('.chk-cell-grayscale');
+      dom$l.addEventListener(chkCellGrayscale, 'click', () => {
+        this.builder.uo.saveForUndo();
+        let cell = util.cellSelected();
+
+        if (chkCellGrayscale.checked) {
+          cell.style.filter = 'grayscale(1)';
+        } else {
+          if (cell.style.filter) {
+            cell.style.filter = cell.style.filter.replace('grayscale(1)', '');
+          }
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      });
       elms = cellSettings.querySelectorAll('.input-cell-height');
       Array.prototype.forEach.call(elms, elm => {
         dom$l.addEventListener(elm, 'click', () => {
@@ -45954,6 +46349,15 @@ class ColumnTool {
       dom$l.addClass(btn, 'on');
     }
 
+    const chkCellGrayscale = this.cellSettings.querySelector('.chk-cell-grayscale');
+    chkCellGrayscale.checked = false;
+
+    if (cell.style.filter) {
+      if (cell.style.filter.indexOf('grayscale') !== -1) {
+        chkCellGrayscale.checked = true;
+      }
+    }
+
     elms = this.cellSettings.querySelectorAll('.input-cell-height');
     Array.prototype.forEach.call(elms, elm => {
       dom$l.removeClass(elm, 'on');
@@ -57332,7 +57736,8 @@ class ContentBuilder {
           ['#ed2828','dark','contentbuilder/themes/dark-red.css'],
       ],
       */
-      colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700]
+      colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700] // maxColumns: 6,
+
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
     this.opts = Object.assign(this, defaults, opts);
@@ -57427,7 +57832,7 @@ class ContentBuilder {
           // DEFAULT: Built-in simple css grid
           this.opts.row = 'row clearfix';
           this.opts.cols = ['column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
-          this.opts.colequal = [['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
+          this.opts.colequal = [['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
           this.opts.colsizes = [//needed for columns in which the size increment is not constant.
           [//increment for 3 columns
           ['column third', 'column third', 'column third'], ['column half', 'column fourth', 'column fourth']], [//increment for 2 columns
@@ -59304,7 +59709,30 @@ class ContentBuilder {
     } // Show Lock Indicator
 
 
-    this.colTool.showHideLockIndicator(col);
+    this.colTool.showHideLockIndicator(col); // Check if last row, make sure the Row Add Tool visible
+
+    const tool = row.querySelector('.is-rowadd-tool');
+    const tollAddButton = tool.querySelector('button');
+    tollAddButton.style.marginTop = '';
+    const children = Array.from(row.parentNode.children).filter(element => {
+      return element.nodeName.toLowerCase() === 'div';
+    });
+
+    if (children && children.length > 0) {
+      let lastChild = children[children.length - 1];
+
+      if (row === lastChild) {
+        const section = row.parentNode.parentNode;
+        const sectionOffset = dom.getElementOffset(section);
+        let h1 = sectionOffset.top + sectionOffset.height;
+        const rowOffset = dom.getElementOffset(row);
+        let h2 = rowOffset.top + rowOffset.height;
+
+        if (h1 - h2 < 19) {
+          tollAddButton.style.marginTop = '-14px';
+        }
+      }
+    }
   }
 
   handleCellKeypress(e) {