@innovastudio/contentbox 1.4.4 → 1.4.5

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 +80 -7
  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.5",
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,9 @@ class SideBar {
1551
1603
  }
1552
1604
 
1553
1605
  const showDesigns = (catId) => {
1606
+
1607
+ const wait = document.querySelector('.is-waiting');
1608
+ wait.style.display = 'none';
1554
1609
 
1555
1610
  const designList = document.querySelector('.is-design-list');
1556
1611
  designList.style.opacity = 0;
@@ -1576,7 +1631,7 @@ class SideBar {
1576
1631
  if (isSelected) {
1577
1632
 
1578
1633
  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 + '">' +
1634
+ '<img class="lzy-img" src="data:image/png;base64,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" data-src="' + gallery.path + item.thumbnail + '">' +
1580
1635
  '<span class="is-overlay"></span>' +
1581
1636
  '</button>';
1582
1637
 
@@ -1655,6 +1710,9 @@ class SideBar {
1655
1710
 
1656
1711
  const renderMegaMenu = () => {
1657
1712
 
1713
+ const wait2 = document.querySelector('.is-waiting2');
1714
+ wait2.style.display = 'none';
1715
+
1658
1716
  const menu = document.querySelector('.mega-menu');
1659
1717
  const menuContent = document.querySelector('.mega-menu-content');
1660
1718
  menuContent.innerHTML = '';
@@ -1791,6 +1849,11 @@ class SideBar {
1791
1849
 
1792
1850
  renderFeaturedCategories();
1793
1851
 
1852
+ const wait = document.querySelector('.is-waiting');
1853
+ wait.style.display = 'flex';
1854
+ const wait2 = document.querySelector('.is-waiting2');
1855
+ wait2.style.display = 'flex';
1856
+
1794
1857
  renderMegaMenu();
1795
1858
 
1796
1859
  showDesigns(defaultCat); // If not ready (not loaded yet) will show empty
@@ -90629,7 +90692,7 @@ class ContentBox {
90629
90692
  designUrl1: 'https://.../assets/designs/basic.js',
90630
90693
  designUrl2: 'https://.../assets/designs/examples.js',
90631
90694
  designPath: 'https://.../assets/designs/',
90632
- designPathReplace: ['assets/', 'https://.../assets/'],
90695
+ designPathReplace: ['assets/', 'https://.../assets/'], // Only if needed
90633
90696
  */
90634
90697
  templates: [],
90635
90698
  // ver.5.3
@@ -90675,7 +90738,7 @@ class ContentBox {
90675
90738
  name: 'Photos'
90676
90739
  }],
90677
90740
  templateThumbnailSize: '',
90678
- //small, medium
90741
+ //small, medium, large or '' (empty => dynamic)
90679
90742
  // ContentBuilder
90680
90743
  scriptPath: '',
90681
90744
  snippetUrl: 'assets/minimalist-blocks/content.js',
@@ -91432,7 +91495,8 @@ class ContentBox {
91432
91495
  'category': 1,
91433
91496
  'default': false,
91434
91497
  'caption': 'Poppins & Lekton'
91435
- }, {
91498
+ }, // { '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' },
91499
+ {
91436
91500
  'css': 'basetype-raleway-neuton.css',
91437
91501
  'sectioncss': 'type-raleway-neuton.css',
91438
91502
  'classname': 'type-raleway-neuton',
@@ -93052,7 +93116,16 @@ class ContentBox {
93052
93116
  }];
93053
93117
 
93054
93118
  if (this.settings.templates.length !== 0 && this.settings.templateThumbnailSize === '') {
93055
- this.settings.templateThumbnailSize = 'large';
93119
+ // this.settings.templateThumbnailSize = 'large';
93120
+ let viewportWidth = document.body.clientWidth;
93121
+
93122
+ if (viewportWidth <= 1440) {
93123
+ this.settings.templateThumbnailSize = 'small';
93124
+ } else if (viewportWidth > 1440 && viewportWidth <= 1920) {
93125
+ this.settings.templateThumbnailSize = 'medium';
93126
+ } else {
93127
+ this.settings.templateThumbnailSize = 'large';
93128
+ }
93056
93129
  }
93057
93130
 
93058
93131
  if (this.settings.imageSelect !== '') {