@innovastudio/contentbuilder 1.2.13 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.13",
+  "version": "1.2.16",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.css

@@ -121,29 +121,40 @@ button:focus {
     display: flex;
   }
 }
+/*
 .sortable-drag {
-  background: transparent;
-  outline: none !important;
-}
-.sortable-drag * {
-  opacity: 0;
-}
-.sortable-drag .is-row-tool {
-  opacity: 0;
+    background: transparent; // background:rgba(0,0,0,0.04);
+    outline:none !important;
+    * {
+        opacity:0;
+    }
+    .is-row-tool {
+        opacity:0;
+    }
 }
 
 .sortable-ghost {
-  background: rgba(204, 204, 204, 0.15);
-  width: 100%;
-  outline: none !important;
-}
-.sortable-ghost * {
-  outline: none !important;
-}
-.sortable-ghost .is-row-tool {
-  display: none !important;
+    background: $ui-sortable-ghost-color;
+    width: 100%;
+    outline: none !important;
+    * {
+        outline: none !important;
+    }
+    .is-row-tool {
+        display:none !important;
+    }
 }
 
+.sortable-drag::before {
+    content: ' ';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0; left:0;
+    background: rgba(0, 0, 0 , 0.03);
+    transform-origin: top left;
+}
+*/
 #_cbhtml .snippet-item {
   cursor: move !important;
 }

package/public/contentbuilder/contentbuilder.esm.js

@@ -4196,8 +4196,19 @@ class Util {
     dom.addClass(pop, 'deactive');
   }
 
+  clearAllEventListener(pop) {
+    for (let i = 0; i < 10; i++) {
+      pop.removeEventListener('keydown', this.handlePopKeyDown);
+      document.removeEventListener('click', this.handlePopClickOut);
+    }
+  }
+
   showPop(pop, cancelCallback, btn) {
     const dom = this.dom;
+    if (pop.style.display === 'flex') return; // important
+
+    this.clearAllEventListener(pop); // for safety of uncleared events as a result of closing without hidePop()
+
     pop.style.display = 'flex';
     dom.addClass(pop, 'active');
     pop.setAttribute('aria-hidden', false);
@@ -4206,37 +4217,40 @@ class Util {
       preventScroll: true
     });
 
-    const handleClickOut = e => {
+    this.handlePopClickOut = e => {
       if (!pop.contains(e.target) && !btn.contains(e.target)) {
         // click outside
         // hide
-        this.hidePop(pop);
-        pop.removeEventListener('keydown', handleKeyDown);
-        document.removeEventListener('click', handleClickOut);
+        this.hidePop(pop); // pop.removeEventListener('keydown', this.handlePopKeyDown);
+        // document.removeEventListener('click', this.handlePopClickOut);
+
         if (cancelCallback) cancelCallback();
       }
     };
 
-    const handleKeyDown = e => {
+    this.handlePopKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
         // hide
-        this.hidePop(pop);
-        pop.removeEventListener('keydown', handleKeyDown);
-        document.removeEventListener('click', handleClickOut);
+        this.hidePop(pop); // pop.removeEventListener('keydown', this.handlePopKeyDown);
+        // document.removeEventListener('click', this.handlePopClickOut);
+
         if (cancelCallback) cancelCallback();
       }
     };
 
-    pop.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('click', handleClickOut);
+    pop.addEventListener('keydown', this.handlePopKeyDown);
+    document.addEventListener('click', this.handlePopClickOut);
   }
 
   hidePop(pop) {
     const dom = this.dom;
     pop.style.display = '';
     dom.removeClass(pop, 'active');
-    pop.setAttribute('aria-hidden', true);
+    pop.setAttribute('aria-hidden', true); // pop.removeEventListener('keydown', this.handlePopKeyDown);
+    // document.removeEventListener('click', this.handlePopClickOut);
+
+    this.clearAllEventListener(pop);
   }
 
   setupTabKeys(div) {
@@ -6844,6 +6858,17 @@ class Util {
 
 }
 class Dom {
+  getScale(container) {
+    let matrix = window.getComputedStyle(container).transform;
+    let values = matrix.split('(')[1];
+    values = values.split(')')[0];
+    values = values.split(',');
+    let a = values[0];
+    let b = values[1];
+    let scale = Math.sqrt(a * a + b * b);
+    return scale;
+  }
+
   createElement(tag) {
     return document.createElement(tag);
   }
@@ -21575,12 +21600,12 @@ const renderSnippetPanel = builder => {
   let chromeAgent = userAgentString.indexOf('Chrome') > -1; 
   if ((chromeAgent) && (safariAgent)) safariAgent = false;
   */
+  // let safariAgent = false;
 
 
-  let safariAgent = false;
   let activeBuilderArea;
   new Sortable(snippetlist, {
-    forceFallback: safariAgent,
+    // forceFallback: safariAgent,
     group: {
       name: 'shared',
       pull: 'clone',
@@ -21589,6 +21614,19 @@ const renderSnippetPanel = builder => {
     },
     sort: false,
     animation: 150,
+    onChoose: () => {
+      // Make moving draggable item scaled & positioned correctly (due to zoom value)
+      const newCss = `
+            <style id="css-scale">
+                .sortable-drag::before {
+                    transform: scale(1);
+                }
+            </style>
+            `;
+      const oldCss = builder.contentStuff.querySelector('#css-scale');
+      if (oldCss) oldCss.parentNode.removeChild(oldCss);
+      builder.contentStuff.insertAdjacentHTML('afterbegin', newCss);
+    },
     onMove: () => {
       let emptyinfo = document.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
@@ -54917,37 +54955,30 @@ class ColumnTool {
 
                     <div style="padding:0;margin-top:25px;">
 
-                        <div style="padding-bottom:3px;">${util.out('Scale')}:</div>
+                        <div style="padding-bottom:3px;display:flex;">
+                            <span>${util.out('Scale')}:</span>
+                        </div>
                         <div style="padding-top:4px">
                             <input type="range" min="100" max="500" value="0" class="image-scale-slider is-rangeslider">
                         </div>
 
-                        <div style="display:none;padding-bottom:3px;padding-top: 20px;">${util.out('Scale')} (${util.out('Width')}):</div>
-                        <div style="display:none;padding-top:4px">
-                            <input type="range" min="100" max="500" value="100" class="image-container-width-slider is-rangeslider">
-                        </div>
-
-                        <div style="display:none;padding-bottom:3px;padding-top: 20px;">${util.out('Scale')} (${util.out('Height')}):</div>
-                        <div style="display:none;padding-top:4px">
-                            <input type="range" min="100" max="500" value="100" class="image-container-height-slider is-rangeslider">
-                        </div>
-
-                        <div style="padding-bottom:3px;padding-top: 20px;display:flex;justify-content:space-between;align-items:center;">
+                        <div style="padding-bottom:3px;padding-top: 20px;display:flex;">
                             <span>${util.out('Horizontal')}:</span>
-                            <button title="${util.out('Reset')}" class="image-hor-reset" style="display:flex;width:30px;height:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
                         </div>
                         <div style="padding-top:4px">
                             <input type="range" min="-150" max="150" value="0" class="image-hor-slider is-rangeslider">
                         </div>
 
-                        <div style="padding-bottom:3px;padding-top: 20px;display:flex;justify-content:space-between;align-items:center;">
+                        <div style="padding-bottom:3px;padding-top: 20px;display:flex;">
                             <span>${util.out('Vertical')}:</span>
-                            <button title="${util.out('Reset')}" class="image-vert-reset" style="display:flex;width:30px;height:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
                         </div>
                         <div style="padding-top:4px">
                             <input type="range" min="-150" max="150" value="0" class="image-vert-slider is-rangeslider">
                         </div>
 
+                        <div style="padding-bottom:3px;padding-top: 10px;display:flex;justify-content:right;align-items:center;">
+                            <button title="${util.out('Reset')}" class="image-reset" style="display:flex;width:30px;height:30px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                        </div>
                     </div>
 
                 </div>
@@ -55367,38 +55398,16 @@ class ColumnTool {
         let val = inpImageScaleSlider2.value;
 
         if (this.scaleWidth) {
-          cell.style.width = val + '%';
-          cell.style.height = '';
+          cell.style.width = val + '%'; // cell.style.height = ''; 
+
+          cell.style.height = val * 100 / inpImageScaleSlider2.min + '%';
         } else {
-          cell.style.height = val + '%';
-          cell.style.width = '';
-        }
-
-        cell.setAttribute('data-scale', val); // let cell = this.builder.elementSelected; 
-        // cell.style.backgroundSize = '';
-        // //val: 0 - 100
-        // let val = inpImageScaleSlider2.value;
-        // cell.setAttribute('data-scale', val);
-        // // vall => -100-100
-        // if(val!==0) {
-        //     // cell.style.width = 'unset';
-        //     // cell.style.height = 'unset';
-        //     cell.style.left = `-${val}vw`;
-        //     cell.style.right = `-${val}vw`;
-        //     cell.style.top = `-${val}vh`;
-        //     cell.style.bottom = `-${val}vh`;
-        // } else {
-        //     // cell.style.width = '';
-        //     // cell.style.height = '';
-        //     cell.style.left = '';
-        //     cell.style.right = '';
-        //     cell.style.top = '';
-        //     cell.style.bottom = '';
-        // }
-        // //val: 100 - 500
-        // let val = inpImageScaleSlider2.value;
-        // let cell = this.builder.elementSelected; //util.cellSelected();
-        // cell.style.backgroundSize = val + '%';
+          cell.style.height = val + '%'; // cell.style.width = '';
+
+          cell.style.width = val * 100 / inpImageScaleSlider2.min + '%';
+        }
+
+        cell.setAttribute('data-scale', val);
       };
 
       inpImageScaleSlider2.onchange = () => {
@@ -55438,31 +55447,12 @@ class ColumnTool {
       };
 
       inpImageHorSlider2.oninput = () => {
-        // let cell = this.builder.elementSelected;
-        // let normalWidth = (cell.parentNode.offsetWidth/window.innerWidth) * 100; // vw
-        // let scaleInc = parseFloat(inpImageScaleSlider2.value);
-        // const enlarge = (normalWidth + (2*scaleInc))/normalWidth;
-        // //val: -100 - 100
-        // let val = parseFloat(inpImageHorSlider2.value);
-        // cell.setAttribute('data-x', val);
-        // let currentWidth = cell.parentNode.offsetWidth*enlarge;
-        // currentWidth = (currentWidth/window.innerWidth) * 100; // vw
-        // let currentLeft = (currentWidth-normalWidth)/2; // vw
-        // let currentRight = (currentWidth-normalWidth)/2;
-        // const left = -currentLeft+val;
-        // const right = -currentRight-val;
-        // // cell.style.width = 'unset';
-        // cell.style.left = `${left}vw`;
-        // cell.style.right = `${right}vw`;
         let cell = this.builder.elementSelected; //val: -100 - 100
 
         let val = parseFloat(inpImageHorSlider2.value);
         cell.style.left = `${val}%`;
         cell.style.right = '';
-        cell.setAttribute('data-x', val); // //val: 0 - 100
-        // let val = inpImageHorSlider2.value;
-        // let cell = this.builder.elementSelected; //util.cellSelected();
-        // cell.style.backgroundPositionX = val + '%';
+        cell.setAttribute('data-x', val);
       };
 
       inpImageHorSlider2.onchange = () => {
@@ -55502,103 +55492,24 @@ class ColumnTool {
       };
 
       inpImageVertSlider2.oninput = () => {
-        // let cell = this.builder.elementSelected;
-        // let normalHeight = (cell.parentNode.offsetHeight/window.innerHeight) * 100; // vh
-        // let scaleInc = parseFloat(inpImageScaleSlider2.value);
-        // const enlarge = (normalHeight + (2*scaleInc))/normalHeight;
-        // //val: -100 - 100
-        // let val = parseFloat(inpImageVertSlider2.value);
-        // cell.setAttribute('data-y', val);
-        // let currentHeight = cell.parentNode.offsetHeight*enlarge;
-        // currentHeight = (currentHeight/window.innerHeight) * 100; // vh
-        // let currentTop = (currentHeight-normalHeight)/2; // vh
-        // let currentBottom = (currentHeight-normalHeight)/2;
-        // const top = -currentTop+val;
-        // const bottom = -currentBottom-val;
-        // // cell.style.height = 'unset';
-        // cell.style.top = `${top}vh`;
-        // cell.style.bottom = `${bottom}vh`;
         let cell = this.builder.elementSelected; //val: -100 - 100
 
         let val = parseFloat(inpImageVertSlider2.value);
         cell.style.top = `${val}%`;
         cell.style.bottom = '';
-        cell.setAttribute('data-y', val); // //val: 0 - 100
-        // let val = inpImageVertSlider2.value;
-        // let cell = this.builder.elementSelected; //util.cellSelected();
-        // cell.style.backgroundPositionY = val + '%';
+        cell.setAttribute('data-y', val);
       };
 
       inpImageVertSlider2.onchange = () => {
         //Trigger Change event
         this.builder.opts.onChange();
-      }; // Image Container Width
-
-
-      const inpImageConWidthSlider = imageAdjust2.querySelector('.image-container-width-slider');
-
-      inpImageConWidthSlider.onfocus = () => {
-        this.builder.uo.saveForUndo(true);
       };
 
-      inpImageConWidthSlider.oninput = () => {
-        let cell = this.builder.elementSelected; //val: 100 - 500
-
-        let val = parseFloat(inpImageConWidthSlider.value);
-        cell.setAttribute('data-con-w', val);
-        cell.style.width = `${val}%`;
-      };
-
-      inpImageConWidthSlider.onchange = () => {
-        this.builder.opts.onChange();
-      }; // Image Container Height
-
-
-      const inpImageConHeightSlider = imageAdjust2.querySelector('.image-container-height-slider');
-
-      inpImageConHeightSlider.onfocus = () => {
-        this.builder.uo.saveForUndo(true);
-      };
-
-      inpImageConHeightSlider.oninput = () => {
-        let cell = this.builder.elementSelected; //val: 100 - 500
-
-        let val = parseFloat(inpImageConHeightSlider.value);
-        cell.setAttribute('data-con-h', val);
-        cell.style.height = `${val}%`;
-      };
-
-      inpImageConHeightSlider.onchange = () => {
-        this.builder.opts.onChange();
-      };
-
-      const btnHorReset = imageAdjust2.querySelector('.image-hor-reset');
-      btnHorReset.addEventListener('click', () => {
+      const btnImageReset = imageAdjust2.querySelector('.image-reset');
+      btnImageReset.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cell = this.builder.elementSelected;
-        inpImageHorSlider2.value = 0; // cell.style.width = '';
-
-        cell.style.left = '';
-        cell.style.right = '';
-        cell.removeAttribute('data-x'); // // fix
-        // cell.style.backgroundPositionX = '';
-        // inpImageHorSlider2.value = 50;
-        //Trigger Change event
-
-        this.builder.opts.onChange();
-      });
-      const btnVertReset = imageAdjust2.querySelector('.image-vert-reset');
-      btnVertReset.addEventListener('click', () => {
-        this.builder.uo.saveForUndo();
-        let cell = this.builder.elementSelected;
-        inpImageVertSlider2.value = 0; // cell.style.height = '';
-
-        cell.style.top = '';
-        cell.style.bottom = '';
-        cell.removeAttribute('data-y'); // // fix
-        // cell.style.backgroundPositionY = '';
-        // inpImageVertSlider2.value = 60;
-        //Trigger Change event
+        this.resetImage(cell); //Trigger Change event
 
         this.builder.opts.onChange();
       }); // Row Enlarge (Currently not used)
@@ -56573,6 +56484,81 @@ class ColumnTool {
     if (btn) btn.setAttribute('data-focus', true);
   }
 
+  resetImage(elm) {
+    //Current value
+    const imageAdjust2 = this.imageAdjust2;
+    const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
+    const inpImageHorSlider = imageAdjust2.querySelector('.image-hor-slider');
+    const inpImageVertSlider = imageAdjust2.querySelector('.image-vert-slider');
+    let overlayDimension = {
+      width: elm.parentNode.offsetWidth,
+      height: elm.parentNode.offsetHeight
+    };
+    let dimension, image;
+    image = new Image();
+    image.src = elm.style.backgroundImage.replace(/"/g, '').replace(/url\(|\)$/ig, '');
+
+    image.onload = () => {
+      dimension = {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      };
+      this.dimension = dimension;
+
+      if (overlayDimension.width / overlayDimension.height <= dimension.width / dimension.height) {
+        this.scaleWidth = true;
+        this.scaleHeight = false; // let h = overlayDimension.height; //px
+
+        let w = overlayDimension.height * (dimension.width / dimension.height);
+        w = w / overlayDimension.width * 100; //%
+
+        if (!elm.style.width) {
+          elm.style.width = w + '%';
+          elm.style.height = '';
+        }
+
+        inpImageScaleSlider.min = w;
+        let val = -(w - 100) * 0.5;
+        inpImageHorSlider.value = val; //50%
+
+        elm.style.left = val + '%';
+        elm.setAttribute('data-x', val);
+        inpImageVertSlider.value = 0;
+        elm.style.top = '0%';
+        elm.setAttribute('data-y', 0);
+        inpImageScaleSlider.value = w;
+        elm.style.width = w + '%';
+        elm.setAttribute('data-scale', w);
+        elm.style.height = '100%'; //((w*this.dimension.height)/this.dimension.width) + '%';
+      } else {
+        this.scaleHeight = true;
+        this.scaleWidth = false; // let w = overlayDimension.width;
+
+        let h = overlayDimension.width * (dimension.height / dimension.width);
+        h = h / overlayDimension.height * 100; //%
+
+        if (!elm.style.height) {
+          elm.style.height = h + '%';
+          elm.style.width = '';
+        }
+
+        inpImageScaleSlider.min = h;
+        let val = -(h - 100) * 0.6;
+        inpImageVertSlider.value = val; //60%
+
+        elm.style.top = val + '%';
+        elm.setAttribute('data-y', val);
+        inpImageHorSlider.value = 0;
+        elm.style.left = '0%';
+        elm.setAttribute('data-x', 0);
+        inpImageScaleSlider.value = h;
+        elm.style.height = h + '%';
+        elm.setAttribute('data-scale', h);
+        elm.style.width = '100%'; //((h*this.dimension.width)/this.dimension.height) + '%';
+      }
+    };
+  }
+
   openImageAdjust2(elm, btn) {
     //Current value
     const imageAdjust2 = this.imageAdjust2;
@@ -56581,7 +56567,7 @@ class ColumnTool {
     const inpImageVertSlider = imageAdjust2.querySelector('.image-vert-slider');
     inpImageScaleSlider.value = 0;
     inpImageHorSlider.value = 0;
-    inpImageVertSlider.value = 0;
+    inpImageVertSlider.value = 15;
     const scale = elm.getAttribute('data-scale');
 
     if (scale) {
@@ -56613,7 +56599,8 @@ class ColumnTool {
       dimension = {
         width: image.naturalWidth,
         height: image.naturalHeight
-      }; // console.log(dimension)
+      };
+      this.dimension = dimension; // console.log(dimension)
 
       if (overlayDimension.width / overlayDimension.height <= dimension.width / dimension.height) {
         this.scaleWidth = true;
@@ -56628,6 +56615,19 @@ class ColumnTool {
         }
 
         inpImageScaleSlider.min = w;
+
+        if (!posX) {
+          inpImageHorSlider.value = -(w - 100) * 0.5; //50%
+
+          elm.style.left = -(w - 100) * 0.5 + '%';
+          inpImageVertSlider.value = 0;
+        }
+
+        const scale = elm.getAttribute('data-scale');
+
+        if (!scale) {
+          inpImageScaleSlider.value = w;
+        }
       } else {
         this.scaleHeight = true;
         this.scaleWidth = false; // let w = overlayDimension.width;
@@ -56641,6 +56641,19 @@ class ColumnTool {
         }
 
         inpImageScaleSlider.min = h;
+
+        if (!posY) {
+          inpImageVertSlider.value = -(h - 100) * 0.6; //60%
+
+          elm.style.top = -(h - 100) * 0.6 + '%';
+          inpImageHorSlider.value = 0;
+        }
+
+        const scale = elm.getAttribute('data-scale');
+
+        if (!scale) {
+          inpImageScaleSlider.value = h;
+        }
       }
     }; // const imageAdjust2 = this.imageAdjust2;
     // const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
@@ -69625,8 +69638,23 @@ class ContentBuilder {
           ['column sixth', 'column two-sixth'], ['column fifth', 'column two-fifth'], ['column fourth', 'column two-fourth'], ['column third', 'column two-third'], ['column half', 'column half'], ['column two-third', 'column third'], ['column two-fourth', 'column fourth'], ['column two-fifth', 'column fifth'], ['column two-sixth', 'column sixth']]];
         }
       }
+    } // Experimental for iframe
+
+
+    let doc;
+    if (this.iframeDocument) doc = this.iframeDocument;else doc = document;
+    this.doc = doc; // Content stuff
+
+    let contentStuff = doc.querySelector('.content-stuff');
+
+    if (!contentStuff) {
+      contentStuff = document.createElement('div');
+      contentStuff.className = 'content-stuff is-ui';
+      doc.body.appendChild(contentStuff);
     }
 
+    this.contentStuff = contentStuff;
+    this.addStuff();
     this.sortableObjects = [];
     const util = new Util(this); // General utilities
 
@@ -70164,12 +70192,32 @@ class ContentBuilder {
         scroll: true,
         // invertSwap: true, /* https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold */
         group: 'shared',
-        direction: 'dummy',
+        // direction: 'dummy',
         animation: 300,
         handle: '.row-handle',
         // swapThreshold: 0.1, // this cause drag drop snippet sometimes difficult
         // invertedSwapThreshold: 0.1,
         sort: true,
+        //new
+        swapThreshold: 0.5,
+        // & comment the direction setting above
+        onChoose: () => {
+          // Get zoom (scale) value
+          const area = this.doc.querySelector('.is-builder'); // get one of the builder area
+
+          const scale = dom.getScale(area); // Make moving draggable item scaled & positioned correctly (due to zoom value)
+
+          const newCss = `
+                    <style id="css-scale">
+                        .sortable-drag::before {
+                            transform: scale(${scale});
+                        }
+                    </style>
+                    `;
+          const oldCss = this.contentStuff.querySelector('#css-scale');
+          if (oldCss) oldCss.parentNode.removeChild(oldCss);
+          this.contentStuff.insertAdjacentHTML('afterbegin', newCss);
+        },
         onStart: () => {
           this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
 
@@ -72491,6 +72539,45 @@ class ContentBuilder {
     // return currentScript.replace(currentScriptFile, '');
   }
 
+  addStuff() {
+    const css = `
+        <style>
+        /* sortable */
+        .sortable-drag {
+            background: transparent;
+            outline:none !important;
+        }
+        .sortable-drag * {
+                opacity:0;
+        }
+        
+        .sortable-ghost {
+            background: rgba(0, 0, 0 , 0.03);
+            width: 100%;
+            outline: none !important;
+        }
+        .sortable-ghost * {
+                outline: none !important;
+
+        }
+        .sortable-ghost .is-row-tool {
+            display:none !important;
+        }
+        
+        .sortable-drag::before {
+            content: ' ';
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0; left:0;
+            background: rgba(0, 0, 0 , 0.03);
+            transform-origin: top left;
+        }
+        </style>
+        `;
+    this.contentStuff.insertAdjacentHTML('afterbegin', css);
+  }
+
 }
 //     var run = (opts = {}) => {
 //         return new ContentBuilder(opts);