@innovastudio/contentbuilder 1.0.89 → 1.0.90

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -7659,6 +7659,18 @@ class Dom {
     if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
       return;
     }
+  }
+
+  addCssClass(elm, className, classes) {
+    this.removeCssClasses(elm, classes);
+    this.addClass(elm, className);
+  }
+
+  removeCssClasses(elm, classes) {
+    for (let i = 0; i < Object.keys(classes).length; i++) {
+      const item = Object.values(classes)[i];
+      this.removeClass(elm, item);
+    }
   } // Clean HTML stuff
 
 
@@ -13382,6 +13394,7 @@ class HtmlUtil {
         elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
+          if (elm.closest('a')) return;
 
           if (elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
             decor = true;
@@ -49992,7 +50005,7 @@ class ColumnTool {
                                 <button title="y" class="input-cell-padding-pos" data-command="y" style="width:50px">y</button>
                             </div>
 
-                            <div class="div-content-padding" style="flex-flow:wrap">
+                            <div class="div-content-padding" style="flex-flow:wrap;margin-top:7px">
                                 <div style="display:flex;flex-flow:wrap;${this.builder.useCssClasses ? 'display:none' : ''}">
                                     <button title="0" class="input-cell-padding" data-command="0">0</button>
                                     <button title="10" class="input-cell-padding" data-command="10">10</button>
@@ -50036,22 +50049,28 @@ class ColumnTool {
                             </div>
 
                             <div style="padding-top:20px;padding-bottom:3px;">${util.out('Content Alignment')}:</div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="topleft" title="${util.out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="topcenter" title="${util.out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="topright" topright="${util.out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                            </div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="centerleft" title="${util.out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="center" title="${util.out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="centerright" title="${util.out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
-                            </div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="bottomleft" title="${util.out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="bottomcenter" title="${util.out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="bottomright" title="${util.out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                            <div style="display:flex;align-items: flex-end;">
+                                <div style="width:120px">
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="topleft" title="${util.out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="topcenter" title="${util.out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="topright" topright="${util.out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                    </div>
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="centerleft" title="${util.out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="center" title="${util.out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="centerright" title="${util.out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
+                                    </div>
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="bottomleft" title="${util.out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="bottomcenter" title="${util.out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="bottomright" title="${util.out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                    </div>
+                                </div>
+                                <div>
+                                    <button title="${util.out('Clear')}" class="cmd-content-pos" data-pos=""><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>
-
                         </div>
 
                         <div id="divCellClick" class="is-tab-content" data-group="cellsettings">
@@ -50958,65 +50977,152 @@ class ColumnTool {
           this.builder.uo.saveForUndo();
           let val = elm.getAttribute('data-pos');
           let cell = util.cellSelected();
-          cell.style.display = 'flex';
-          cell.style.flexDirection = 'column';
-          let ns = this.cellSettings.querySelectorAll('.cmd-content-pos');
-          Array.prototype.forEach.call(ns, n => {
+          const btns = this.cellSettings.querySelectorAll('.cmd-content-pos');
+          Array.prototype.forEach.call(btns, n => {
             dom$l.removeClass(n, 'on');
           });
 
-          if (val === 'topleft') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+          if (this.builder.useCssClasses) {
+            if (val !== '') {
+              let classes = this.builder.cssClasses.display;
+              dom$l.addCssClass(cell, classes.flex, classes);
+              classes = this.builder.cssClasses.flexDirection;
+              dom$l.addCssClass(cell, classes.column, classes);
+
+              if (val === 'topleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'topcenter') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'topcenter') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'topright') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'topright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'centerleft') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'centerleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'center') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'center') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'centerright') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'centerright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomleft') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'bottomleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomcenter') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'bottomcenter') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomright') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
+              if (val === 'bottomright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
+            } else {
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.display);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.flexDirection);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.justifyContent);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.alignItems);
+            }
+          } else {
+            cell.style.display = 'flex';
+            cell.style.flexDirection = 'column';
+
+            if (val === 'topleft') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'topcenter') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'topright') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'centerleft') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'center') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'centerright') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomleft') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomcenter') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomright') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
           } //Trigger Change event
 
 
@@ -57583,6 +57689,62 @@ class Preferences {
 
 }
 
+class ColorClassPicker {
+  constructor(opts = {}) {
+    let defaults = {
+      onPick: function () {},
+      color: '',
+      colors: ['bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900', 'bg-red-50', 'bg-red-100', 'bg-red-200', 'bg-red-300', 'bg-red-400', 'bg-red-500', 'bg-red-600', 'bg-red-700', 'bg-red-800', 'bg-red-900', 'bg-orange-50', 'bg-orange-100', 'bg-orange-200', 'bg-orange-300', 'bg-orange-400', 'bg-orange-500', 'bg-orange-600', 'bg-orange-700', 'bg-orange-800', 'bg-orange-900', 'bg-amber-50', 'bg-amber-100', 'bg-amber-200', 'bg-amber-300', 'bg-amber-400', 'bg-amber-500', 'bg-amber-600', 'bg-amber-700', 'bg-amber-800', 'bg-amber-900', 'bg-yellow-50', 'bg-yellow-100', 'bg-yellow-200', 'bg-yellow-300', 'bg-yellow-400', 'bg-yellow-500', 'bg-yellow-600', 'bg-yellow-700', 'bg-yellow-800', 'bg-yellow-900', 'bg-lime-50', 'bg-lime-100', 'bg-lime-200', 'bg-lime-300', 'bg-lime-400', 'bg-lime-500', 'bg-lime-600', 'bg-lime-700', 'bg-lime-800', 'bg-lime-900', 'bg-green-50', 'bg-green-100', 'bg-green-200', 'bg-green-300', 'bg-green-400', 'bg-green-500', 'bg-green-600', 'bg-green-700', 'bg-green-800', 'bg-green-900', 'bg-emerald-50', 'bg-emerald-100', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-400', 'bg-emerald-500', 'bg-emerald-600', 'bg-emerald-700', 'bg-emerald-800', 'bg-emerald-900', 'bg-teal-50', 'bg-teal-100', 'bg-teal-200', 'bg-teal-300', 'bg-teal-400', 'bg-teal-500', 'bg-teal-600', 'bg-teal-700', 'bg-teal-800', 'bg-teal-900', 'bg-cyan-50', 'bg-cyan-100', 'bg-cyan-200', 'bg-cyan-300', 'bg-cyan-400', 'bg-cyan-500', 'bg-cyan-600', 'bg-cyan-700', 'bg-cyan-800', 'bg-cyan-900', 'bg-sky-50', 'bg-sky-100', 'bg-sky-200', 'bg-sky-300', 'bg-sky-400', 'bg-sky-500', 'bg-sky-600', 'bg-sky-700', 'bg-sky-800', 'bg-sky-900', 'bg-blue-50', 'bg-blue-100', 'bg-blue-200', 'bg-blue-300', 'bg-blue-400', 'bg-blue-500', 'bg-blue-600', 'bg-blue-700', 'bg-blue-800', 'bg-blue-900', 'bg-indigo-50', 'bg-indigo-100', 'bg-indigo-200', 'bg-indigo-300', 'bg-indigo-400', 'bg-indigo-500', 'bg-indigo-600', 'bg-indigo-700', 'bg-indigo-800', 'bg-indigo-900', 'bg-violet-50', 'bg-violet-100', 'bg-violet-200', 'bg-violet-300', 'bg-violet-400', 'bg-violet-500', 'bg-violet-600', 'bg-violet-700', 'bg-violet-800', 'bg-violet-900', 'bg-purple-50', 'bg-purple-100', 'bg-purple-200', 'bg-purple-300', 'bg-purple-400', 'bg-purple-500', 'bg-purple-600', 'bg-purple-700', 'bg-purple-800', 'bg-purple-900', 'bg-fuchsia-50', 'bg-fuchsia-100', 'bg-fuchsia-200', 'bg-fuchsia-300', 'bg-fuchsia-400', 'bg-fuchsia-500', 'bg-fuchsia-600', 'bg-fuchsia-700', 'bg-fuchsia-800', 'bg-fuchsia-900', 'bg-pink-50', 'bg-pink-100', 'bg-pink-200', 'bg-pink-300', 'bg-pink-400', 'bg-pink-500', 'bg-pink-600', 'bg-pink-700', 'bg-pink-800', 'bg-pink-900', 'bg-rose-50', 'bg-rose-100', 'bg-rose-200', 'bg-rose-300', 'bg-rose-400', 'bg-rose-500', 'bg-rose-600', 'bg-rose-700', 'bg-rose-800', 'bg-rose-900'],
+      renderOn: '',
+      stuffPlacement: '#_cbhtml',
+      lang: []
+    };
+    this.opts = Object.assign(this, defaults, opts);
+    let builderStuff = document.querySelector(this.opts.stuffPlacement);
+
+    if (!builderStuff) {
+      builderStuff = document.createElement('div');
+      builderStuff.id = '_cbhtml';
+      builderStuff.className = 'is-ui';
+      document.body.appendChild(builderStuff);
+    }
+
+    this.builderStuff = builderStuff;
+    const modal = new Modal({
+      stuffPlacement: this.opts.stuffPlacement
+    });
+    this.modal = modal;
+    let pickcolor = document.querySelector('.pickcolorclass');
+
+    if (!pickcolor) {
+      let html = `<div class="is-modal pickcolorclass">
+                <div class="is-modal-content" style="padding: 12px;max-width:1000px;">
+                    <div class="is-modal-bar is-draggable"></div>
+                    <div>
+                        <div class="color-list clearfix"></div>
+
+                    </div>
+                </div>
+            </div>`;
+      builderStuff.insertAdjacentHTML('beforeend', html);
+      pickcolor = document.querySelector('.pickcolorclass');
+    }
+
+    const divList = pickcolor.querySelector('.color-list');
+    let s = '';
+
+    for (let i = 0; i < this.opts.colors.length; i++) {
+      let className = this.opts.colors[i];
+      s += `<div class="${className}" style="width:60px;height:30px;"></div>`;
+    }
+
+    s = `<div style="display:flex;flex-flow:wrap;width:450px;height:300px;flex-direction:column;">${s}</div>`;
+    divList.innerHTML = s;
+    this.modal.show(pickcolor, false, null, false);
+  }
+
+}
+
 const dom$5 = new Dom();
 
 class Rte {
@@ -63205,6 +63367,38 @@ class ContentBuilder {
         extend: {
           superscript: 'sup',
           subscript: 'sub'
+        },
+        display: {
+          flex: 'flex',
+          block: 'block',
+          inline: 'inline',
+          inline_block: 'inline-block'
+        },
+        flexDirection: {
+          row: 'flex-row',
+          column: 'flex-col',
+          row_reverse: 'flex-row-reverse',
+          column_reverse: 'flex-col-reverse'
+        },
+        flexWrap: {
+          wrap: 'flex-wrap',
+          nowrap: 'flex-nowrap',
+          wrap_reverse: 'flex-wrap-reverse'
+        },
+        justifyContent: {
+          start: 'justify-start',
+          end: 'justify-end',
+          center: 'justify-center',
+          between: 'justify-between',
+          around: 'justify-around',
+          evenly: 'justify-evenly'
+        },
+        alignItems: {
+          start: 'items-start',
+          end: 'items-end',
+          center: 'items-center',
+          baseline: 'items-baseline',
+          stretch: 'items-stretch'
         }
       },
       useCssClasses: false
@@ -64056,6 +64250,10 @@ class ContentBuilder {
     new Dropdown(element, opts);
   }
 
+  colorClassPicker() {
+    return new ColorClassPicker();
+  }
+
   destroy() {
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);