@innovastudio/contentbox 1.5.25 → 1.5.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.25",
+  "version": "1.5.27",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -492,7 +492,7 @@ class Select$1 {
       dropDown.dispatchEvent(new Event('change'));
       toggler.focus();
       let elms = menu.children;
-      Array.from(elms).map(elm => {
+      Array.from(elms).forEach(elm => {
         elm.classList.remove('selected');
       });
       let optionselected = menu.querySelector('[data-value="' + val + '"]');
@@ -582,28 +582,28 @@ class SideBar {
       html += '<div class="is-sidebar is-area active"  style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
       var sideIndex = 0;
       this.builder.sidebarData.buttons.map(button => {
-        if (button.name == 'section') {
-          html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' +
+        if (button.name === 'section') {
+          html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' +
           '<svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg>' + '</button>';
-        } else if (button.name == 'snippet') {
-          html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
+        } else if (button.name === 'snippet') {
+          html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
           '<svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg>' + '</button>';
-        } else if (button.name == 'typography') {
+        } else if (button.name === 'typography') {
           if (this.builder.enableContentStyle) {
-            html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + button.title + '" title="' + button.title + '">' + // '<span style="">a</span>' +
+            html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<span style="">a</span>' +
             '<svg class="svg-icon"><use xlink:href="#icon-typography"></use></svg>' + '</button>';
           }
-        } else if (button.name == 'code') {
+        } else if (button.name === 'code') {
           if (this.builder.htmlSyntaxHighlighting) {
-            html += '<button class="is-sidebar-button" tabindex="-1" data-command="code" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg>' + '</button>';
+            html += '<button class="is-sidebar-button" tabindex="-1" data-command="code" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + '<svg class="svg-icon" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg>' + '</button>';
           } else {
-            html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSource" data-command="code" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg>' + '</button>';
+            html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSource" data-command="code" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + '<svg class="svg-icon" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg>' + '</button>';
           }
         } else {
           //custom buttons
           if (button.src) {
             var panelId = dom$n.uniqueId();
-            html += `<button class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${button.title}" title="${button.title}" data-src="${button.src}" data-refresh="${button.refresh ? 1 : 0}">${button.html}</button>`;
+            html += `<button class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${out(button.title)}" title="${out(button.title)}" data-src="${button.src}" data-refresh="${button.refresh ? 1 : 0}">${button.html}</button>`;
 
             if (!builderStuff.querySelector(`#${panelId}`)) {
               let customPanelHtml = `<div id="${panelId}" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${button.maxwidth ? button.maxwidth : '500px'};">
@@ -615,7 +615,7 @@ class SideBar {
               dom$n.appendHtml(builderStuff, customPanelHtml);
             }
           } else {
-            html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + button.content.substr(1) + '" data-title="' + button.title + '" title="' + button.title + '" data-refresh="' + (button.refresh ? 1 : 0) + '">' + button.html + '</button>';
+            html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + button.content.substr(1) + '" data-title="' + out(button.title) + '" title="' + out(button.title) + '" data-refresh="' + (button.refresh ? 1 : 0) + '">' + button.html + '</button>';
           }
         }
 
@@ -798,11 +798,11 @@ class SideBar {
           let cmd = btn.getAttribute('data-command');
 
           if (cmd) {
-            if (cmd == 'section') {
+            if (cmd === 'section') {
               this.viewIdeas();
             }
 
-            if (cmd == 'code') {
+            if (cmd === 'code') {
               if (this.builder.htmlSyntaxHighlighting) {
                 this.viewHtml();
               } else {
@@ -810,7 +810,7 @@ class SideBar {
               }
             }
 
-            if (cmd == 'typography') {
+            if (cmd === 'typography') {
               btn.setAttribute('data-applyto', 'page');
               builderStuff.querySelector('.typo-target-default').style.display = 'flex';
               builderStuff.querySelector('.typo-target-box').style.display = 'none';
@@ -1127,7 +1127,7 @@ class SideBar {
       let styles = jsonStyles.data.styles;
       let html = '';
 
-      if (catid == -1) {
+      if (parseInt(catid) === -1) {
         //show all
         for (let i = 0; i < styles.length; i++) {
           html += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '">' + '<div>[' + (i + 1) + '] ' + styles[i].caption + '</div>' + '<img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
@@ -1135,7 +1135,7 @@ class SideBar {
       } else {
         //show based on category
         for (let i = 0; i < styles.length; i++) {
-          if (catid == styles[i].category) {
+          if (parseInt(catid) === styles[i].category) {
             html += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '">' + '<div>[' + (i + 1) + '] ' + styles[i].caption + '</div>' + '<img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
           }
         }
@@ -1905,7 +1905,7 @@ class SideBar {
                         let snippetPathReplace = gallery.pathReplace;
         
                         //To Tailwind
-                        if (framework == 'tailwind') {
+                        if (framework === 'tailwind') {
                             html = html.replace(new RegExp(' container', 'g'), ' container');
                             
                             //html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
@@ -1924,7 +1924,7 @@ class SideBar {
                         }
                                     
                         //To Bootstrap
-                        if (framework == 'bootstrap') {
+                        if (framework === 'bootstrap') {
                             html = html.replace(new RegExp(' container', 'g'), ' container-fluid');
                             html = html.replace(new RegExp('row clearfix', 'g'), 'row');
                             html = html.replace(new RegExp('column full', 'g'), 'col-md-12');
@@ -1941,7 +1941,7 @@ class SideBar {
                         }`;
     html += `
                         //To Foundation
-                        if (framework == 'foundation') {
+                        if (framework === 'foundation') {
                             //html = html.replace(new RegExp(' container', 'g'), ' container');
                             html = html.replace(new RegExp('row clearfix', 'g'), 'row');
                             html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');
@@ -1958,7 +1958,7 @@ class SideBar {
                         }
         
                         //To UIKit
-                        if (framework == 'uikit') {
+                        if (framework === 'uikit') {
                             html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');
 
                             // html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');
@@ -1979,7 +1979,7 @@ class SideBar {
                         }
         
                         //To Material
-                        if (framework == 'material') {
+                        if (framework === 'material') {
                             html = html.replace(new RegExp(' container', 'g'), '');
                             
                             // html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');
@@ -3443,7 +3443,7 @@ class SideBar {
                     var contentClass = result[0].contentClass;
 
                     //To Tailwind
-                    if (framework == 'tailwind') {
+                    if (framework === 'tailwind') {
                         html = html.replace(new RegExp(' container', 'g'), ' container');
                         html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
                         html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
@@ -3458,7 +3458,7 @@ class SideBar {
                     }
                                 
                     //To Bootstrap
-                    if (framework == 'bootstrap') {
+                    if (framework === 'bootstrap') {
                         html = html.replace(new RegExp(' container', 'g'), ' container-fluid');
                         html = html.replace(new RegExp('row clearfix', 'g'), 'row');
                         html = html.replace(new RegExp('column full', 'g'), 'col-md-12');
@@ -3475,7 +3475,7 @@ class SideBar {
                     }
 
                     //To Foundation
-                    if (framework == 'foundation') {
+                    if (framework === 'foundation') {
                         //html = html.replace(new RegExp(' container', 'g'), ' container');
                         html = html.replace(new RegExp('row clearfix', 'g'), 'row');
                         html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');
@@ -3492,7 +3492,7 @@ class SideBar {
                     }
 
                     //To UIKit
-                    if (framework == 'uikit') {
+                    if (framework === 'uikit') {
                         html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');
                         html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');
                         html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');
@@ -3509,7 +3509,7 @@ class SideBar {
                     }
 
                     //To Material
-                    if (framework == 'material') {
+                    if (framework === 'material') {
                         html = html.replace(new RegExp(' container', 'g'), '');
                         html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');
                         html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');
@@ -4293,7 +4293,7 @@ class EditSection {
         let val = btn.getAttribute('data-value');
         const activeSection = this.builder.activeSection;
 
-        if (val == 'space') {
+        if (val === 'space') {
           dom$m.removeClass(activeSection, 'space-around');
         } else {
           dom$m.addClass(activeSection, 'space-around');
@@ -4318,11 +4318,11 @@ class EditSection {
         dom$m.removeClass(activeSection, 'stack-middle');
         dom$m.removeClass(activeSection, 'stack-bottom');
 
-        if (val == 'top') {
+        if (val === 'top') {
           dom$m.addClass(activeSection, 'stack-top');
-        } else if (val == 'middle') {
+        } else if (val === 'middle') {
           dom$m.addClass(activeSection, 'stack-middle');
-        } else if (val == 'bottom') {
+        } else if (val === 'bottom') {
           dom$m.addClass(activeSection, 'stack-bottom');
         }
 
@@ -4688,8 +4688,7 @@ class EditSection {
     let divVisibility = this.modalEditSection.querySelector('.div-visibility');
     let target = this.builder.editor.responsive.readTarget(divTarget);
     let valVisibility = this.builder.editor.responsive.getVisibility(section, target);
-    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // const divColsPerLine = this.modalEditSection.querySelector('.div-boxesperline');
-
+    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility);
     let btns = this.modalEditSection.querySelectorAll('.input-boxesperline');
     btns.forEach(btn => {
       btn.classList.remove('on');
@@ -4915,12 +4914,15 @@ class EditSection {
 
 
     this.realtimeVisibility(activeSection, true);
+    const divBoxesPerLine = modalEditSection.querySelector('.div-boxesperline');
     const divReverseBoxes = modalEditSection.querySelector('#divReverseBoxes');
 
     if (activeSection.querySelectorAll('.is-box').length > 1) {
       divReverseBoxes.style.display = 'flex';
+      divBoxesPerLine.style.display = 'flex';
     } else {
       divReverseBoxes.style.display = 'none';
+      divBoxesPerLine.style.display = 'none';
     }
   }
 
@@ -5224,7 +5226,7 @@ class EditSection {
     const activeSection = this.builder.activeSection;
     const divSectionSpaceSettings = this.modalEditSection.querySelector('.div-section-spacesettings');
 
-    if (s == '') {
+    if (s === '') {
       dom$m.removeClass(activeSection, 'box-space');
       dom$m.removeClass(activeSection, 'box-space-xxs');
       dom$m.removeClass(activeSection, 'box-space-sm');
@@ -5241,22 +5243,22 @@ class EditSection {
       dom$m.removeClass(activeSection, 'box-space-m');
       dom$m.removeClass(activeSection, 'box-space-lg');
       dom$m.addClass(activeSection, 'box-space-sm');
-    } else if (s == 'xxs') {
+    } else if (s === 'xxs') {
       dom$m.removeClass(activeSection, 'box-space-m');
       dom$m.removeClass(activeSection, 'box-space-sm');
       dom$m.removeClass(activeSection, 'box-space-lg');
       dom$m.addClass(activeSection, 'box-space-xxs');
-    } else if (s == 'm') {
+    } else if (s === 'm') {
       dom$m.removeClass(activeSection, 'box-space-xxs');
       dom$m.removeClass(activeSection, 'box-space-sm');
       dom$m.removeClass(activeSection, 'box-space-lg');
       dom$m.addClass(activeSection, 'box-space-m');
-    } else if (s == 'lg') {
+    } else if (s === 'lg') {
       dom$m.removeClass(activeSection, 'box-space-xxs');
       dom$m.removeClass(activeSection, 'box-space-sm');
       dom$m.removeClass(activeSection, 'box-space-m');
       dom$m.addClass(activeSection, 'box-space-lg');
-    } else if (s == 'default') {
+    } else if (s === 'default') {
       dom$m.removeClass(activeSection, 'box-space-xxs');
       dom$m.removeClass(activeSection, 'box-space-sm');
       dom$m.removeClass(activeSection, 'box-space-m');
@@ -108210,7 +108212,7 @@ class ContentBox {
 
     let exist = false;
 
-    let links = parent._cb.doc.getElementsByTagName('link');
+    let links = window.parent._cb.doc.getElementsByTagName('link');
 
     for (let i = 0; i < links.length; i++) {
       let src = links[i].href.toLowerCase();
@@ -109164,7 +109166,7 @@ class ContentBox {
           // make absolute
           const link = links[i].cloneNode();
           let imgUrl = link.href;
-          let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+          let urlBase = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
           imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
           link.href = imgUrl;
           arrLinks.push(link.outerHTML);
@@ -109206,7 +109208,7 @@ class ContentBox {
           // make absolute
           const link = links[i].cloneNode();
           let imgUrl = link.href;
-          let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+          let urlBase = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
           imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
           link.href = imgUrl;
           arrLinks.push(link.outerHTML);
@@ -109276,7 +109278,7 @@ class ContentBox {
       output = output.replaceAll('[%PATH%]', options.path);
     } else {
       let urlBase;
-      urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+      urlBase = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
       output = output.replaceAll('[%PATH%]', urlBase);
     } // Beautify