@innovastudio/contentbox 1.3.19 → 1.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.3.19",
+  "version": "1.3.22",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.2.15",
+    "@innovastudio/contentbuilder": "^1.2.18",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -2612,7 +2612,7 @@ class EditSection {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
-    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
+    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
     html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div class="div-section-bgcolor" style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
@@ -15431,7 +15431,7 @@ class Util {
     let html = '';
     html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-content" style="padding-bottom:20px;">
-                <p>${message}</p>
+                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                 <button title="${this.out('Delete')}" class="input-ok classic focus-warning">${this.out('Delete')}</button>
             </div>
         </div>`;
@@ -15439,7 +15439,7 @@ class Util {
     if (yesno) {
       html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content" style="padding-bottom:20px;">
-                    <p>${message}</p>
+                    <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                     <button title="${this.out('Cancel')}" class="input-cancel classic-secondary">${this.out('Cancel')}</button>
                     <button title="${yestext}" class="input-ok classic-primary">${yestext}</button>
                 </div>
@@ -15519,8 +15519,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);
@@ -15529,37 +15540,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) {
@@ -18167,6 +18181,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);
   }
@@ -32898,12 +32923,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',
@@ -32912,6 +32937,18 @@ 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);
@@ -64211,7 +64248,7 @@ class Modal {
   confirm(message, callback, animated) {
     let html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-content" style="padding-bottom:20px;">
-                <p>${message}</p>
+                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                 <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
             </div>
         </div>`;
@@ -80923,8 +80960,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
 
@@ -81462,12 +81514,40 @@ 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
+          let scale;
+
+          if (this.opts.page !== '') {
+            const wrapper = this.doc.querySelector(this.opts.page);
+            scale = dom$L.getScale(wrapper);
+          } else {
+            const area = this.doc.querySelector('.is-builder'); // get one of the builder area
+
+            scale = dom$L.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 
 
@@ -83789,6 +83869,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 pace = {exports: {}};