@innovastudio/contentbox 1.4.4 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/public/contentbox/contentbox.esm.js +85 -8
  3. package/public/contentbox/contentbox.min.js +9 -9
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
3
  "type": "module",
4
- "version": "1.4.4",
4
+ "version": "1.4.6",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
package/public/contentbox/contentbox.esm.js CHANGED
@@ -1152,17 +1152,22 @@ class SideBar {
1152
1152
  });
1153
1153
  let thumbWidth = '';
1154
1154
  let thumbMargin = '';
1155
+ let thumbMaxHeight = '';
1155
1156
 
1156
1157
  if (this.builder.templateThumbnailSize === 'small') {
1157
1158
  thumbWidth = '250px';
1158
1159
  thumbMargin = '30px 0 0 30px';
1160
+ thumbMaxHeight = '513px';
1159
1161
  } else if (this.builder.templateThumbnailSize === 'medium') {
1160
1162
  thumbWidth = '350px';
1161
1163
  thumbMargin = '40px 0 0 40px';
1164
+ thumbMaxHeight = '214px';
1162
1165
  } else {
1163
1166
  thumbWidth = '450px'; // '500px';
1164
1167
 
1165
1168
  thumbMargin = '50px 0 0 50px'; // '62px 0 0 60px';
1169
+
1170
+ thumbMaxHeight = '275'; // '305px'
1166
1171
  }
1167
1172
 
1168
1173
  let html = `
@@ -1229,7 +1234,8 @@ class SideBar {
1229
1234
  }
1230
1235
  .is-design-list > button {
1231
1236
  position: relative;
1232
- width: ${thumbWidth};;
1237
+ width: ${thumbWidth};
1238
+ max-height: ${thumbMaxHeight};
1233
1239
  overflow: hidden;
1234
1240
  margin: ${thumbMargin};
1235
1241
  cursor: pointer;
@@ -1288,6 +1294,7 @@ class SideBar {
1288
1294
  box-sizing: border-box;
1289
1295
  transition: all 300ms ease;
1290
1296
  min-width:400px;
1297
+ min-height: 200px;
1291
1298
  /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */
1292
1299
  }
1293
1300
  .mega-menu.active {
@@ -1313,11 +1320,47 @@ class SideBar {
1313
1320
  align-items: center;
1314
1321
  border-radius: 2px;;
1315
1322
  }
1323
+
1324
+ .is-waiting {
1325
+ position: fixed;
1326
+ top: 0px;
1327
+ left: 0px;
1328
+ border-top: transparent 88px solid;
1329
+ width: 100%;
1330
+ height: 100%;
1331
+ background-color: #fff;
1332
+ display: flex;
1333
+ justify-content: flex-start;
1334
+ align-items: flex-start;
1335
+ padding: 50px
1336
+ }
1337
+ .is-waiting2 {
1338
+ position: absolute;
1339
+ top: 0px;
1340
+ left: 0px;
1341
+ width: 100%;
1342
+ height: 100%;
1343
+ background-color: #f5f5f5;
1344
+ display: flex;
1345
+ justify-content: flex-start;
1346
+ align-items: flex-start;
1347
+ padding: 20px 50px;
1348
+ }
1316
1349
  </style>
1317
1350
  </head>
1318
1351
  <body style="touch-action: pan-y">`;
1319
1352
  html += `
1320
1353
  <div class="mega-menu">
1354
+ <div class="is-waiting2">
1355
+ <div style="color:rgba(125, 125, 125, 0.5)" class="loader loader--style2" title="1">
1356
+ <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
1357
+ <path fill="currentColor" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
1358
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.7s" repeatCount="indefinite"></animateTransform>
1359
+ </path>
1360
+ </svg>
1361
+ </div>
1362
+ </div>
1363
+
1321
1364
  <button class="close" tabindex="0"><svg style="width:40px;height:40px;flex:none;"><use xlink:href="#iconclose"></use></svg></button>
1322
1365
 
1323
1366
  <div class="mega-menu-content">
@@ -1329,7 +1372,16 @@ class SideBar {
1329
1372
 
1330
1373
  <div class="is-design-list">
1331
1374
  </div>
1332
-
1375
+
1376
+ <div class="is-waiting">
1377
+ <div style="color:rgba(125, 125, 125, 0.5)" class="loader loader--style2" title="1">
1378
+ <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
1379
+ <path fill="currentColor" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
1380
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.7s" repeatCount="indefinite"></animateTransform>
1381
+ </path>
1382
+ </svg>
1383
+ </div>
1384
+ </div>
1333
1385
 
1334
1386
  <svg width="0" height="0" style="position:absolute;display:none;">
1335
1387
  <defs>
@@ -1551,6 +1603,11 @@ class SideBar {
1551
1603
  }
1552
1604
 
1553
1605
  const showDesigns = (catId) => {
1606
+
1607
+ if(template_list.length>0) {
1608
+ const wait = document.querySelector('.is-waiting');
1609
+ wait.style.display = 'none';
1610
+ }
1554
1611
 
1555
1612
  const designList = document.querySelector('.is-design-list');
1556
1613
  designList.style.opacity = 0;
@@ -1576,7 +1633,7 @@ class SideBar {
1576
1633
  if (isSelected) {
1577
1634
 
1578
1635
  let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat=""' + item.category + '">' +
1579
- '<img class="lzy-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" data-src="' + gallery.path + item.thumbnail + '">' +
1636
+ '<img class="lzy-img" src="data:image/png;base64,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" data-src="' + gallery.path + item.thumbnail + '">' +
1580
1637
  '<span class="is-overlay"></span>' +
1581
1638
  '</button>';
1582
1639
 
@@ -1654,7 +1711,12 @@ class SideBar {
1654
1711
  }
1655
1712
 
1656
1713
  const renderMegaMenu = () => {
1657
-
1714
+
1715
+ if(template_list.length>0) {
1716
+ const wait2 = document.querySelector('.is-waiting2');
1717
+ wait2.style.display = 'none';
1718
+ }
1719
+
1658
1720
  const menu = document.querySelector('.mega-menu');
1659
1721
  const menuContent = document.querySelector('.mega-menu-content');
1660
1722
  menuContent.innerHTML = '';
@@ -1791,6 +1853,11 @@ class SideBar {
1791
1853
 
1792
1854
  renderFeaturedCategories();
1793
1855
 
1856
+ const wait = document.querySelector('.is-waiting');
1857
+ wait.style.display = 'flex';
1858
+ const wait2 = document.querySelector('.is-waiting2');
1859
+ wait2.style.display = 'flex';
1860
+
1794
1861
  renderMegaMenu();
1795
1862
 
1796
1863
  showDesigns(defaultCat); // If not ready (not loaded yet) will show empty
@@ -90629,7 +90696,7 @@ class ContentBox {
90629
90696
  designUrl1: 'https://.../assets/designs/basic.js',
90630
90697
  designUrl2: 'https://.../assets/designs/examples.js',
90631
90698
  designPath: 'https://.../assets/designs/',
90632
- designPathReplace: ['assets/', 'https://.../assets/'],
90699
+ designPathReplace: ['assets/', 'https://.../assets/'], // Only if needed
90633
90700
  */
90634
90701
  templates: [],
90635
90702
  // ver.5.3
@@ -90675,7 +90742,7 @@ class ContentBox {
90675
90742
  name: 'Photos'
90676
90743
  }],
90677
90744
  templateThumbnailSize: '',
90678
- //small, medium
90745
+ //small, medium, large or '' (empty => dynamic)
90679
90746
  // ContentBuilder
90680
90747
  scriptPath: '',
90681
90748
  snippetUrl: 'assets/minimalist-blocks/content.js',
@@ -91432,7 +91499,8 @@ class ContentBox {
91432
91499
  'category': 1,
91433
91500
  'default': false,
91434
91501
  'caption': 'Poppins & Lekton'
91435
- }, {
91502
+ }, // { 'css': 'basetype-poppins-lekton-v2.css', 'sectioncss': 'type-poppins-lekton-v2.css', 'classname': 'type-poppins-lekton-v2', 'img': '099.png', 'category': 1, 'default': false, 'caption': 'Poppins & Lekton v2' },
91503
+ {
91436
91504
  'css': 'basetype-raleway-neuton.css',
91437
91505
  'sectioncss': 'type-raleway-neuton.css',
91438
91506
  'classname': 'type-raleway-neuton',
@@ -93052,7 +93120,16 @@ class ContentBox {
93052
93120
  }];
93053
93121
 
93054
93122
  if (this.settings.templates.length !== 0 && this.settings.templateThumbnailSize === '') {
93055
- this.settings.templateThumbnailSize = 'large';
93123
+ // this.settings.templateThumbnailSize = 'large';
93124
+ let viewportWidth = document.body.clientWidth;
93125
+
93126
+ if (viewportWidth <= 1440) {
93127
+ this.settings.templateThumbnailSize = 'small';
93128
+ } else if (viewportWidth > 1440 && viewportWidth <= 1920) {
93129
+ this.settings.templateThumbnailSize = 'medium';
93130
+ } else {
93131
+ this.settings.templateThumbnailSize = 'large';
93132
+ }
93056
93133
  }
93057
93134
 
93058
93135
  if (this.settings.imageSelect !== '') {