@innovastudio/contentbox 1.6.17 → 1.6.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
-  "type": "module",
-  "version": "1.6.17",
+  "type":"module",
+  "version": "1.6.18",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.137",
+    "@innovastudio/contentbuilder": "^1.4.140",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -1,4 +1,9 @@
 /* IFRAME */
+.is-content-view.desktop-lg {
+  width: 1920px;
+  height: 1080px;
+  transform: scale(0.74);
+}
 .is-content-view.desktop {
   width: 1366px;
   height: 853px;
@@ -18,6 +23,12 @@
 
 /* large screen*/
 @media all and (min-width: 1920px) {
+  .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.74);
+  }
+
   .is-content-view.desktop {
     width: 1366px;
     height: 853px;
@@ -41,24 +52,14 @@
     height: 844px;
     transform: scale(0.98);
   }
-
-  body.topspace .is-content-view.desktop {
-    transform: scale(0.92);
-  }
-
-  body.topspace .is-content-view.tablet-landscape {
-    transform: scale(0.94);
-  }
-
-  body.topspace .is-content-view.tablet {
-    transform: scale(0.76);
-  }
-
-  body.topspace .is-content-view.mobile {
-    transform: scale(0.94);
-  }
 }
 @media all and (min-width: 1940px) {
+  .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.84);
+  }
+
   .is-content-view.desktop {
     width: 1620px;
     height: 1012px;
@@ -84,12 +85,24 @@
   }
 }
 @media all and (min-width: 2000px) {
+  .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.88);
+  }
+
   .is-content-view.desktop {
     width: 1730px;
     height: 1080px;
     transform: scale(1);
   }
 
+  body.topspace .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.84);
+  }
+
   body.topspace .is-content-view.desktop {
     width: 1620px;
     height: 1012px;
@@ -100,6 +113,9 @@
   .is-content-view {
     transform: scale(0.89);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
   .is-content-view.tablet {
     transform: scale(0.75);
   }
@@ -107,7 +123,9 @@
   body.topspace .is-content-view {
     transform: scale(0.83);
   }
-
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
   body.topspace .is-content-view.tablet {
     transform: scale(0.7);
   }
@@ -116,82 +134,136 @@
   .is-content-view {
     transform: scale(0.86);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.6);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.8);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.6);
+  }
 }
 @media all and (max-width: 1520px) {
   .is-content-view {
     transform: scale(0.86);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.6);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.8);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.59);
+  }
 }
 @media all and (max-width: 1450px) {
   .is-content-view {
     transform: scale(0.86);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.59);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.8);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.6);
+  }
 }
 @media all and (max-width: 1390px) {
   .is-content-view {
     transform: scale(0.84);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.57);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.78);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.57);
+  }
 }
 @media all and (max-width: 1330px) {
   .is-content-view {
     transform: scale(0.8);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.52);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.74);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.52);
+  }
 }
 @media all and (max-width: 1270px) {
   .is-content-view {
     transform: scale(0.76);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.34);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.7);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.34);
+  }
 }
 @media all and (max-width: 1210px) {
   .is-content-view {
     transform: scale(0.72);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.3);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.66);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.3);
+  }
 }
 @media all and (max-width: 1150px) {
   .is-content-view {
     transform: scale(0.68);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.24);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.62);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.24);
+  }
 }
 @media all and (max-width: 1090px) {
   .is-content-view {
     transform: scale(0.64);
   }
+  .is-content-view.desktop-lg {
+    transform: scale(0.2);
+  }
 
   body.topspace .is-content-view {
     transform: scale(0.58);
   }
+  body.topspace .is-content-view.desktop-lg {
+    transform: scale(0.2);
+  }
 }
 @media all and (max-width: 1024px) {
   .is-content-view {
@@ -250,6 +322,11 @@
 body.controlpanel .is-content-view {
   margin-right: 290px;
 }
+body.controlpanel .is-content-view.desktop-lg {
+  width: 1920px;
+  height: 1080px;
+  transform: scale(0.7);
+}
 body.controlpanel .is-content-view.desktop {
   width: 1366px;
   height: 853px;
@@ -267,6 +344,11 @@ body.controlpanel .is-content-view.mobile {
   height: 844px;
 }
 @media all and (min-width: 1920px) {
+  body.controlpanel .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.74);
+  }
   body.controlpanel .is-content-view.desktop {
     width: 1366px;
     height: 853px;
@@ -287,20 +369,13 @@ body.controlpanel .is-content-view.mobile {
     height: 844px;
     transform: scale(0.98);
   }
-  body.controlpanel.topspace .is-content-view.desktop {
-    transform: scale(0.92);
-  }
-  body.controlpanel.topspace .is-content-view.tablet-landscape {
-    transform: scale(0.94);
-  }
-  body.controlpanel.topspace .is-content-view.tablet {
-    transform: scale(0.76);
-  }
-  body.controlpanel.topspace .is-content-view.mobile {
-    transform: scale(0.94);
-  }
 }
 @media all and (min-width: 1940px) {
+  body.controlpanel .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.78);
+  }
   body.controlpanel .is-content-view.desktop {
     width: 1520px;
     height: 949px;
@@ -323,6 +398,11 @@ body.controlpanel .is-content-view.mobile {
   }
 }
 @media all and (min-width: 2080px) {
+  body.controlpanel .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.85);
+  }
   body.controlpanel .is-content-view.desktop {
     width: 1620px;
     height: 1012px;
@@ -333,6 +413,11 @@ body.controlpanel .is-content-view.mobile {
   }
 }
 @media all and (min-width: 2250px) {
+  body.controlpanel .is-content-view.desktop-lg {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(0.88);
+  }
   body.controlpanel .is-content-view.desktop {
     width: 1730px;
     height: 1080px;
@@ -348,28 +433,46 @@ body.controlpanel .is-content-view.mobile {
   body.controlpanel .is-content-view {
     transform: scale(0.95);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.66);
+  }
   body.controlpanel .is-content-view.tablet {
     transform: scale(0.7);
   }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.9);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.68);
+  }
 }
 @media all and (max-width: 1730px) {
   body.controlpanel .is-content-view {
     transform: scale(0.9);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.85);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
 }
 @media all and (max-width: 1680px) {
   body.controlpanel .is-content-view {
     transform: scale(0.88);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.83);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.62);
+  }
   body.controlpanel.topspace .is-content-view.tablet {
     transform: scale(0.7);
   }
@@ -378,93 +481,113 @@ body.controlpanel .is-content-view.mobile {
   body.controlpanel .is-content-view {
     transform: scale(0.8);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.58);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.75);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.58);
+  }
 }
 @media all and (max-width: 1520px) {
   body.controlpanel .is-content-view {
     transform: scale(0.75);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.54);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.7);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.54);
+  }
 }
 @media all and (max-width: 1450px) {
   body.controlpanel .is-content-view {
     transform: scale(0.7);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.5);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.65);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.5);
+  }
 }
 @media all and (max-width: 1375px) {
   body.controlpanel .is-content-view {
     transform: scale(0.63);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.46);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.58);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.46);
+  }
 }
 @media all and (max-width: 1300px) {
   body.controlpanel .is-content-view {
     transform: scale(0.6);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.42);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.55);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.42);
+  }
 }
 @media all and (max-width: 1235px) {
   body.controlpanel .is-content-view {
     transform: scale(0.55);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.38);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.5);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.38);
+  }
 }
 @media all and (max-width: 1175px) {
   body.controlpanel .is-content-view {
     transform: scale(0.5);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.34);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.45);
   }
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.34);
+  }
 }
 @media all and (max-width: 1090px) {
   body.controlpanel .is-content-view {
     transform: scale(0.45);
   }
+  body.controlpanel .is-content-view.desktop-lg {
+    transform: scale(0.3);
+  }
   body.controlpanel.topspace .is-content-view {
     transform: scale(0.4);
   }
-}
-
-.is-content-view.fullview {
-  width: 100vw !important;
-  height: 100vh !important;
-  transform: none !important;
-  margin: 0 !important;
-}
-.is-content-view.fullview > div {
-  display: none;
-}
-.is-content-view.fullview iframe {
-  position: fixed;
-  top: 0;
-  left: 61px;
-  width: calc(100vw - 61px);
-  height: 100vh;
-}
-
-body.controlpanel .is-content-view.fullview > div {
-  display: none;
-}
-body.controlpanel .is-content-view.fullview iframe {
-  position: fixed;
-  top: 0;
-  left: 61px;
-  width: calc(100vw - 351px);
-  height: 100vh;
+  body.controlpanel.topspace .is-content-view.desktop-lg {
+    transform: scale(0.3);
+  }
 }
 
 /* /IFRAME */
@@ -989,7 +1112,8 @@ body.controlpanel .is-wrapper {
   justify-content: center;
 }
 .builder-ui .is-controlpanel .panel-image .asset-preview img,
-.builder-ui .is-controlpanel .panel-box .asset-preview img {
+.builder-ui .is-controlpanel .panel-box .asset-preview img,
+.builder-ui .is-controlpanel .panel-block .asset-preview img {
   max-width: 130px;
   max-height: 130px;
 }
@@ -1563,11 +1687,6 @@ body.topspace.controlpanel {
     }
 }
 */
-body.topspace .is-content-view.fullview iframe {
-  height: calc(100vh - var(--topspace));
-  top: var(--topspace);
-}
-
 body.topspace .is-sidebar {
   height: calc(100vh - var(--topspace)) !important;
   top: var(--topspace) !important;
@@ -2666,3 +2785,103 @@ body.frame-center.controlpanel .is-content-view {
 }
 
 */
+/* Full View */
+/* 
+.is-content-view {
+    &.fullview {
+        width:100vw !important;
+        height:100vh !important;
+        transform:none !important;
+        margin:0 !important;
+        & > div { display:none}
+        iframe {
+            position: fixed;
+            top: 0;
+            left: 61px;
+            width: calc(100vw - 61px);
+            height: 100vh;
+        }
+    }
+}
+body.controlpanel {
+    .is-content-view {
+        &.fullview {
+            & > div { display:none}
+            iframe {
+                position: fixed;
+                top: 0;
+                left: 61px;
+                width: calc(100vw - 351px);
+                height: 100vh;
+            }
+        }
+    }
+}
+*/
+body.fullview.topspace .is-content-view.fullview iframe {
+  height: calc(100vh - var(--topspace));
+}
+
+body.fullview.frame-center #editPanel {
+  left: 61px !important;
+  right: 0px !important;
+  transition: all 0.3s ease;
+}
+
+body.fullview.controlpanel.frame-center #editPanel {
+  left: 61px !important;
+  right: 290px !important;
+  height: 100vh !important;
+  width: unset !important;
+}
+
+body.fullview.topspace .is-content-view {
+  width: 100%;
+  margin-top: var(--topspace) !important;
+  height: calc(100vh - var(--topspace)) !important;
+  transform: scale(1);
+}
+
+body.fullview.controlpanel.topspace .is-content-view {
+  width: 100%;
+  margin-top: var(--topspace) !important;
+  height: calc(100vh - var(--topspace)) !important;
+  margin-right: 0;
+  transform: scale(1);
+}
+
+body.fullview.topspace .is-content-view > div:first-child {
+  display: none !important;
+}
+
+body.fullview.topspace .is-content-view iframe {
+  height: 100%;
+}
+
+/* Iframe Resizer */
+.iframe-resizer {
+  position: absolute !important;
+  width: 2px;
+  height: 100% !important;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  cursor: ew-resize;
+  display: block !important;
+}
+
+.resizer-overlay {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100% !important;
+  display: none;
+  background-color: rgba(255, 255, 255, 0.0000001);
+  z-index: 2;
+  cursor: ew-resize;
+}
+
+.is-content-view.transition-none {
+  transition: none !important;
+}