@innovastudio/contentbox 1.5.43 → 1.5.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.43",
+  "version": "1.5.45",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.31",
+    "@innovastudio/contentbuilder": "^1.4.33",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -1396,6 +1396,8 @@ class SideBar {
                 url: '${item.url}',
                 path: '${item.path}',
                 pathReplace: '${item.pathReplace}',
+                ${Object.prototype.hasOwnProperty.call(item, 'numbering') ? `numbering: ${item.numbering},` : 'numbering:false,'}
+                ${Object.prototype.hasOwnProperty.call(item, 'showNumberOnHover') ? `showNumberOnHover: ${item.showNumberOnHover},` : 'showNumberOnHover:false,'}
             },`;
     });
     let sTemplates = '';
@@ -1404,6 +1406,8 @@ class SideBar {
                 url: '${item.url}',
                 path: '${item.path}',
                 pathReplace: '${item.pathReplace}',
+                ${Object.prototype.hasOwnProperty.call(item, 'numbering') ? `numbering: ${item.numbering},` : 'numbering:false,'}
+                ${Object.prototype.hasOwnProperty.call(item, 'showNumberOnHover') ? `showNumberOnHover: ${item.showNumberOnHover},` : 'showNumberOnHover:false,'}
             },`;
     });
     let sDefaultCategory = `{
@@ -1684,6 +1688,23 @@ class SideBar {
                     }
                 }
 
+                .is-number {
+                    opacity: 0;
+                    position: absolute;
+                    top: 3px;
+                    right: 3px;
+                    color: #444;
+                    padding: 3px 6px;
+                    background: rgb(255 255 255);
+                    border-radius: 500px;
+                    transition: all 0.3s ease;
+                }
+                .is-number.show {
+                    opacity: 1;
+                }
+                .is-design-list > button:hover .is-number {
+                    opacity: 1;
+                }
 
 
 
@@ -2069,6 +2090,11 @@ class SideBar {
         
                 template_list.forEach(gallery=>{
                     let designs = gallery.designs;
+
+                    let numbering = gallery.numbering;
+                    let showNumberOnHover = gallery.showNumberOnHover;
+                    let numberCount = 0;
+
                     designs.forEach(item=>{
                         let isSelected = false;
                         let catSplit = item.category.split(',');
@@ -2081,10 +2107,13 @@ class SideBar {
                         item.id = nIndex; //Give id
         
                         if (isSelected) {
-        
+
+                            numberCount++;
+
                             let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat=""' + item.category + '">' +
                                 '<img class="lzy-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAYAAAAjZdWPAAAEDmlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPpu5syskzoPUpqaSDv41lLRsUtGE2uj+ZbNt3CyTbLRBkMns3Z1pJjPj/KRpKT4UQRDBqOCT4P9bwSchaqvtiy2itFCiBIMo+ND6R6HSFwnruTOzu5O4a73L3PnmnO9+595z7t4LkLgsW5beJQIsGq4t5dPis8fmxMQ6dMF90A190C0rjpUqlSYBG+PCv9rt7yDG3tf2t/f/Z+uuUEcBiN2F2Kw4yiLiZQD+FcWyXYAEQfvICddi+AnEO2ycIOISw7UAVxieD/Cyz5mRMohfRSwoqoz+xNuIB+cj9loEB3Pw2448NaitKSLLRck2q5pOI9O9g/t/tkXda8Tbg0+PszB9FN8DuPaXKnKW4YcQn1Xk3HSIry5ps8UQ/2W5aQnxIwBdu7yFcgrxPsRjVXu8HOh0qao30cArp9SZZxDfg3h1wTzKxu5E/LUxX5wKdX5SnAzmDx4A4OIqLbB69yMesE1pKojLjVdoNsfyiPi45hZmAn3uLWdpOtfQOaVmikEs7ovj8hFWpz7EV6mel0L9Xy23FMYlPYZenAx0yDB1/PX6dledmQjikjkXCxqMJS9WtfFCyH9XtSekEF+2dH+P4tzITduTygGfv58a5VCTH5PtXD7EFZiNyUDBhHnsFTBgE0SQIA9pfFtgo6cKGuhooeilaKH41eDs38Ip+f4At1Rq/sjr6NEwQqb/I/DQqsLvaFUjvAx+eWirddAJZnAj1DFJL0mSg/gcIpPkMBkhoyCSJ8lTZIxk0TpKDjXHliJzZPO50dR5ASNSnzeLvIvod0HG/mdkmOC0z8VKnzcQ2M/Yz2vKldduXjp9bleLu0ZWn7vWc+l0JGcaai10yNrUnXLP/8Jf59ewX+c3Wgz+B34Df+vbVrc16zTMVgp9um9bxEfzPU5kPqUtVWxhs6OiWTVW+gIfywB9uXi7CGcGW/zk98k/kmvJ95IfJn/j3uQ+4c5zn3Kfcd+AyF3gLnJfcl9xH3OfR2rUee80a+6vo7EK5mmXUdyfQlrYLTwoZIU9wsPCZEtP6BWGhAlhL3p2N6sTjRdduwbHsG9kq32sgBepc+xurLPW4T9URpYGJ3ym4+8zA05u44QjST8ZIoVtu3qE7fWmdn5LPdqvgcZz8Ww8BWJ8X3w0PhQ/wnCDGd+LvlHs8dRy6bLLDuKMaZ20tZrqisPJ5ONiCq8yKhYM5cCgKOu66Lsc0aYOtZdo5QCwezI4wm9J/v0X23mlZXOfBjj8Jzv3WrY5D+CsA9D7aMs2gGfjve8ArD6mePZSeCfEYt8CONWDw8FXTxrPqx/r9Vt4biXeANh8vV7/+/16ffMD1N8AuKD/A/8leAvFY9bLAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAtoAMABAAAAAEAAAAaAAAAAHZhQ/wAAABcSURBVFgJ7dLBCcAwEANBx/337IQUsK/FcLD3FQgx9nO+W8NuD9v7z230rVdLOmkQ6HsAjholrXJCWdKAo0ZJq5xQljTgqFHSKieUJQ04apS0ygllSQOOGo2UfgEpPQQwSb0YngAAAABJRU5ErkJggg==" data-src="' + gallery.path + item.thumbnail + '">' +
                                 '<span class="is-overlay"></span>' +
+                                (numbering? (showNumberOnHover?'<div class="is-number">'+(numberCount+'').padStart(3, '0')+'</div>':'<div class="is-number show">'+(numberCount+'').padStart(3, '0')+'</div>') :'') +
                             '</button>';
                             
                             if(item.type === 'glide' || item.type === 'slick') {
@@ -2379,6 +2408,8 @@ class SideBar {
                 templateAdded.path = template.path;
                 templateAdded.pathReplace = template.pathReplace;
                 templateAdded.designId = designId;
+                templateAdded.numbering = template.numbering;
+                templateAdded.showNumberOnHover = template.showNumberOnHover;
                 // console.log(templateAdded);
         
                 renderMegaMenu();
@@ -4807,6 +4838,7 @@ class EditSection {
     });
     if (dom$m.hasClass(activeSection, 'is-section-100')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="100"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-90')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="90"]'), 'on');
+    if (dom$m.hasClass(activeSection, 'is-section-85')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="85"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-80')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="80"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-75')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="75"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-70')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="70"]'), 'on');
@@ -4816,6 +4848,8 @@ class EditSection {
     if (dom$m.hasClass(activeSection, 'is-section-30')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="30"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-25')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="25"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-20')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="20"]'), 'on');
+    if (dom$m.hasClass(activeSection, 'is-section-15')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="15"]'), 'on');
+    if (dom$m.hasClass(activeSection, 'is-section-10')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="10"]'), 'on');
     if (dom$m.hasClass(activeSection, 'is-section-auto')) dom$m.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="0"]'), 'on');
     btns = modalEditSection.querySelectorAll('.cmd-section-anim-start');
     btns.forEach(btn => {
@@ -5201,6 +5235,8 @@ class EditSection {
     const activeSection = this.builder.activeSection;
     activeSection.style.height = '';
     dom$m.removeClass(activeSection, 'is-section-auto');
+    dom$m.removeClass(activeSection, 'is-section-10');
+    dom$m.removeClass(activeSection, 'is-section-15');
     dom$m.removeClass(activeSection, 'is-section-20');
     dom$m.removeClass(activeSection, 'is-section-25');
     dom$m.removeClass(activeSection, 'is-section-30');
@@ -5210,6 +5246,7 @@ class EditSection {
     dom$m.removeClass(activeSection, 'is-section-70');
     dom$m.removeClass(activeSection, 'is-section-75');
     dom$m.removeClass(activeSection, 'is-section-80');
+    dom$m.removeClass(activeSection, 'is-section-85');
     dom$m.removeClass(activeSection, 'is-section-90');
     dom$m.removeClass(activeSection, 'is-section-100');
 
@@ -91827,12 +91864,16 @@ class LivePreview {
   resizePreview(size) {
     let modal = this.modal;
     let util = this.util;
+    modal.classList.remove('is-screen-1920');
     modal.classList.remove('is-screen-1440');
     modal.classList.remove('is-screen-1920');
     modal.classList.remove('is-screen-1024');
     modal.classList.remove('is-screen-768');
     modal.classList.remove('is-screen-375');
     const infoDevice = modal.querySelector('.is-modal-device');
+    const previewScreen = modal.querySelector('.preview-screen');
+    previewScreen.style.transition = 'none';
+    previewScreen.style.opacity = '0';
 
     if (size === 1440) {
       modal.classList.add('is-screen-1440');
@@ -91840,7 +91881,6 @@ class LivePreview {
       infoDevice.setAttribute('title', util.out('Laptop'));
       infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
     } else if (size === 1024) {
-      modal.classList.remove('is-screen-1440');
       modal.classList.add('is-screen-1024');
       infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
       localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
@@ -91863,6 +91903,10 @@ class LivePreview {
     }
 
     this.previewRefresh(true);
+    setTimeout(() => {
+      previewScreen.style.opacity = '';
+      previewScreen.style.transition = '';
+    }, 100);
   }
 
   previewRefresh(disableOnContentLoad, hardReload) {
@@ -91881,20 +91925,26 @@ class LivePreview {
             let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
             if (iframeDocument) {
-              if (iframeDocument.body.innerHTML === '') {
+              if (!iframeDocument.body) {
                 iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
               } else {
-                // sync. html
-                let html = this.builder.html();
-                let container = iframeDocument.querySelector('.container');
-                if (!container) container = iframeDocument.querySelector('.is-container');
-
-                if (container) {
-                  container.innerHTML = html;
-                } else {
+                if (iframeDocument.body.innerHTML === '') {
                   iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+                } else {
+                  // sync. html
+                  let html = this.builder.html();
+                  let container = iframeDocument.querySelector('.container');
+                  if (!container) container = iframeDocument.querySelector('.is-container');
+
+                  if (container) {
+                    container.innerHTML = html;
+                  } else {
+                    iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+                  }
                 }
               }
+            } else {
+              iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
             }
           }
         } else {
@@ -91920,80 +91970,84 @@ class LivePreview {
           let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
           if (iframeDocument) {
-            if (iframeDocument.body.innerHTML === '') {
+            if (!iframeDocument.body) {
               iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
             } else {
-              // sync. html
-              let html = localStorage.getItem('preview-html');
-              let wrapper = iframeDocument.querySelector('.is-wrapper');
-              wrapper.innerHTML = html; // sync. styles
-              // let mainCss = localStorage.getItem('preview-maincss'); 
-              // let sectionCss = localStorage.getItem('preview-sectioncss');
-
-              let elms = iframeDocument.querySelectorAll('link');
-              let links = this.builder.doc.getElementsByTagName('link');
-              Array.from(links).map(link => {
-                let href = link.href.toLowerCase();
-
-                if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
-                  // check
-                  let exist = false;
-                  elms.forEach(elm => {
-                    let elmHref = elm.href.toLowerCase();
-
-                    if (elmHref) {
-                      if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
-                        if (href === elmHref) {
-                          exist = true;
+              if (iframeDocument.body.innerHTML === '') {
+                iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+              } else {
+                // sync. html
+                let html = localStorage.getItem('preview-html');
+                let wrapper = iframeDocument.querySelector('.is-wrapper');
+                wrapper.innerHTML = html; // sync. styles
+                // let mainCss = localStorage.getItem('preview-maincss'); 
+                // let sectionCss = localStorage.getItem('preview-sectioncss');
+
+                let elms = iframeDocument.querySelectorAll('link');
+                let links = this.builder.doc.getElementsByTagName('link');
+                Array.from(links).map(link => {
+                  let href = link.href.toLowerCase();
+
+                  if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
+                    // check
+                    let exist = false;
+                    elms.forEach(elm => {
+                      let elmHref = elm.href.toLowerCase();
+
+                      if (elmHref) {
+                        if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
+                          if (href === elmHref) {
+                            exist = true;
+                          }
                         }
                       }
-                    }
-                  });
+                    });
 
-                  if (!exist) {
-                    // clone is needed, otherwise, parent resource may dissapear when loading on iframe
-                    const clone = link.cloneNode(true);
-                    iframeDocument.head.appendChild(clone); // ADD
+                    if (!exist) {
+                      // clone is needed, otherwise, parent resource may dissapear when loading on iframe
+                      const clone = link.cloneNode(true);
+                      iframeDocument.head.appendChild(clone); // ADD
+                    }
                   }
-                }
-              });
-              elms.forEach(elm => {
-                let href = elm.href.toLowerCase();
-
-                if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
-                  // check
-                  let exist = false;
-                  Array.from(links).map(link => {
-                    let elmHref = link.href.toLowerCase();
-
-                    if (elmHref) {
-                      if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
-                        if (href === elmHref) {
-                          exist = true;
+                });
+                elms.forEach(elm => {
+                  let href = elm.href.toLowerCase();
+
+                  if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
+                    // check
+                    let exist = false;
+                    Array.from(links).map(link => {
+                      let elmHref = link.href.toLowerCase();
+
+                      if (elmHref) {
+                        if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
+                          if (href === elmHref) {
+                            exist = true;
+                          }
                         }
                       }
-                    }
-                  });
+                    });
 
-                  if (!exist) {
-                    iframeDocument.head.removeChild(elm); // REMOVE
+                    if (!exist) {
+                      iframeDocument.head.removeChild(elm); // REMOVE
+                    }
                   }
-                }
-              }); // reload box js
-
-              elms = iframeDocument.querySelectorAll('script');
-              elms.forEach(elm => {
-                let src = elm.getAttribute('src');
-
-                if (src) {
-                  if (src.indexOf('box-flex.js') !== -1 || src.indexOf('box.js') !== -1) {
-                    elm.parentElement.removeChild(elm);
-                    let scriptElm = document.createElement('script');
-                    scriptElm.setAttribute('src', src);
-                    iframeDocument.body.appendChild(scriptElm);
+                }); // reload box js
+
+                elms = iframeDocument.querySelectorAll('script');
+                elms.forEach(elm => {
+                  let src = elm.getAttribute('src');
+
+                  if (src) {
+                    if (src.indexOf('box-flex.js') !== -1 || src.indexOf('box.js') !== -1) {
+                      elm.parentElement.removeChild(elm);
+                      let scriptElm = document.createElement('script');
+                      scriptElm.setAttribute('src', src);
+                      iframeDocument.body.appendChild(scriptElm);
+                    }
                   }
-                }
-              });
+                });
+              }
             }
           } else {
             iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);