@innovastudio/contentbox 1.4.6 → 1.4.8
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.
package/package.json
CHANGED
|
@@ -1152,22 +1152,17 @@ class SideBar {
|
|
|
1152
1152
|
});
|
|
1153
1153
|
let thumbWidth = '';
|
|
1154
1154
|
let thumbMargin = '';
|
|
1155
|
-
let thumbMaxHeight = '';
|
|
1156
1155
|
|
|
1157
1156
|
if (this.builder.templateThumbnailSize === 'small') {
|
|
1158
1157
|
thumbWidth = '250px';
|
|
1159
1158
|
thumbMargin = '30px 0 0 30px';
|
|
1160
|
-
thumbMaxHeight = '513px';
|
|
1161
1159
|
} else if (this.builder.templateThumbnailSize === 'medium') {
|
|
1162
1160
|
thumbWidth = '350px';
|
|
1163
1161
|
thumbMargin = '40px 0 0 40px';
|
|
1164
|
-
thumbMaxHeight = '214px';
|
|
1165
1162
|
} else {
|
|
1166
1163
|
thumbWidth = '450px'; // '500px';
|
|
1167
1164
|
|
|
1168
1165
|
thumbMargin = '50px 0 0 50px'; // '62px 0 0 60px';
|
|
1169
|
-
|
|
1170
|
-
thumbMaxHeight = '275'; // '305px'
|
|
1171
1166
|
}
|
|
1172
1167
|
|
|
1173
1168
|
let html = `
|
|
@@ -1235,7 +1230,6 @@ class SideBar {
|
|
|
1235
1230
|
.is-design-list > button {
|
|
1236
1231
|
position: relative;
|
|
1237
1232
|
width: ${thumbWidth};
|
|
1238
|
-
max-height: ${thumbMaxHeight};
|
|
1239
1233
|
overflow: hidden;
|
|
1240
1234
|
margin: ${thumbMargin};
|
|
1241
1235
|
cursor: pointer;
|
|
@@ -1346,19 +1340,75 @@ class SideBar {
|
|
|
1346
1340
|
align-items: flex-start;
|
|
1347
1341
|
padding: 20px 50px;
|
|
1348
1342
|
}
|
|
1343
|
+
|
|
1344
|
+
.spinner {
|
|
1345
|
+
-webkit-animation: rotator 1.4s linear infinite;
|
|
1346
|
+
animation: rotator 1.4s linear infinite;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
@-webkit-keyframes rotator {
|
|
1350
|
+
0% {
|
|
1351
|
+
transform: rotate(0deg);
|
|
1352
|
+
}
|
|
1353
|
+
100% {
|
|
1354
|
+
transform: rotate(270deg);
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
@keyframes rotator {
|
|
1359
|
+
0% {
|
|
1360
|
+
transform: rotate(0deg);
|
|
1361
|
+
}
|
|
1362
|
+
100% {
|
|
1363
|
+
transform: rotate(270deg);
|
|
1364
|
+
}
|
|
1365
|
+
}
|
|
1366
|
+
.path {
|
|
1367
|
+
stroke: #d9d9d9;
|
|
1368
|
+
stroke-dasharray: 187;
|
|
1369
|
+
stroke-dashoffset: 0;
|
|
1370
|
+
transform-origin: center;
|
|
1371
|
+
-webkit-animation: dash 1.4s ease-in-out infinite;
|
|
1372
|
+
animation: dash 1.4s ease-in-out infinite;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
@-webkit-keyframes dash {
|
|
1376
|
+
0% {
|
|
1377
|
+
stroke-dashoffset: 187;
|
|
1378
|
+
}
|
|
1379
|
+
50% {
|
|
1380
|
+
stroke-dashoffset: 46.75;
|
|
1381
|
+
transform: rotate(135deg);
|
|
1382
|
+
}
|
|
1383
|
+
100% {
|
|
1384
|
+
stroke-dashoffset: 187;
|
|
1385
|
+
transform: rotate(450deg);
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1388
|
+
@keyframes dash {
|
|
1389
|
+
0% {
|
|
1390
|
+
stroke-dashoffset: 187;
|
|
1391
|
+
}
|
|
1392
|
+
50% {
|
|
1393
|
+
stroke-dashoffset: 46.75;
|
|
1394
|
+
transform: rotate(135deg);
|
|
1395
|
+
}
|
|
1396
|
+
100% {
|
|
1397
|
+
stroke-dashoffset: 187;
|
|
1398
|
+
transform: rotate(450deg);
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1349
1401
|
</style>
|
|
1350
1402
|
</head>
|
|
1351
1403
|
<body style="touch-action: pan-y">`;
|
|
1352
1404
|
html += `
|
|
1353
1405
|
<div class="mega-menu">
|
|
1354
1406
|
<div class="is-waiting2">
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
<path fill="
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
</svg>
|
|
1361
|
-
</div>
|
|
1407
|
+
|
|
1408
|
+
<svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
|
1409
|
+
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
|
1410
|
+
</svg>
|
|
1411
|
+
|
|
1362
1412
|
</div>
|
|
1363
1413
|
|
|
1364
1414
|
<button class="close" tabindex="0"><svg style="width:40px;height:40px;flex:none;"><use xlink:href="#iconclose"></use></svg></button>
|
|
@@ -1374,13 +1424,11 @@ class SideBar {
|
|
|
1374
1424
|
</div>
|
|
1375
1425
|
|
|
1376
1426
|
<div class="is-waiting">
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
<path fill="
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
</svg>
|
|
1383
|
-
</div>
|
|
1427
|
+
|
|
1428
|
+
<svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
|
1429
|
+
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
|
1430
|
+
</svg>
|
|
1431
|
+
|
|
1384
1432
|
</div>
|
|
1385
1433
|
|
|
1386
1434
|
<svg width="0" height="0" style="position:absolute;display:none;">
|
|
@@ -1633,7 +1681,7 @@ class SideBar {
|
|
|
1633
1681
|
if (isSelected) {
|
|
1634
1682
|
|
|
1635
1683
|
let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat=""' + item.category + '">' +
|
|
1636
|
-
'<img class="lzy-img" src="data:image/png;base64,
|
|
1684
|
+
'<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 + '">' +
|
|
1637
1685
|
'<span class="is-overlay"></span>' +
|
|
1638
1686
|
'</button>';
|
|
1639
1687
|
|
|
@@ -1724,11 +1772,11 @@ class SideBar {
|
|
|
1724
1772
|
let catNum = 0;
|
|
1725
1773
|
template_list.forEach(gallery=>{
|
|
1726
1774
|
let categories = gallery.categories;
|
|
1727
|
-
let html = '<h2>'
|
|
1775
|
+
let html = '<h2>'+parent._cb.out(gallery.name)+'</h2><div class="cat' +catNum+ '"></div>';
|
|
1728
1776
|
menuContent.insertAdjacentHTML('beforeend', html);
|
|
1729
1777
|
const catList = menuContent.querySelector('.cat'+catNum);
|
|
1730
1778
|
categories.forEach(categoryItem=>{
|
|
1731
|
-
let html= '<button data-cat="'+categoryItem.id+'">'+categoryItem.name+'</button>';
|
|
1779
|
+
let html= '<button data-cat="'+categoryItem.id+'">'+parent._cb.out(categoryItem.name)+'</button>';
|
|
1732
1780
|
catList.insertAdjacentHTML('beforeend', html);
|
|
1733
1781
|
const btn = catList.querySelector('[data-cat="'+categoryItem.id+'"]');
|
|
1734
1782
|
btn.addEventListener('click', (e)=>{
|
|
@@ -1769,7 +1817,8 @@ class SideBar {
|
|
|
1769
1817
|
const btn = document.querySelector('[data-cat="0"]');
|
|
1770
1818
|
btn.classList.add('on');
|
|
1771
1819
|
|
|
1772
|
-
document.addEventListener('click', handleClick);
|
|
1820
|
+
document.addEventListener('click', handleClick);
|
|
1821
|
+
parent.document.addEventListener('click', handleClick);
|
|
1773
1822
|
}
|
|
1774
1823
|
|
|
1775
1824
|
const closeMegaMenu = () => {
|
|
@@ -1782,7 +1831,8 @@ class SideBar {
|
|
|
1782
1831
|
const btn = document.querySelector('[data-cat="0"]');
|
|
1783
1832
|
btn.classList.remove('on');
|
|
1784
1833
|
|
|
1785
|
-
document.removeEventListener('
|
|
1834
|
+
document.removeEventListener('click', handleClick);
|
|
1835
|
+
parent.document.removeEventListener('click', handleClick);
|
|
1786
1836
|
}
|
|
1787
1837
|
|
|
1788
1838
|
const renderResize = () => {
|
|
@@ -1822,9 +1872,9 @@ class SideBar {
|
|
|
1822
1872
|
let html = '';
|
|
1823
1873
|
const div = document.querySelector('.featured-categories');
|
|
1824
1874
|
featuredCategories.forEach(item=>{
|
|
1825
|
-
html += '<button data-cat="'+item.id+'">'+item.name+'</button>';
|
|
1875
|
+
html += '<button data-cat="'+item.id+'">'+parent._cb.out(item.name)+'</button>';
|
|
1826
1876
|
});
|
|
1827
|
-
html += '<button data-cat="0">All Categories</button>';
|
|
1877
|
+
html += '<button data-cat="0">'+parent._cb.out('All Categories')+'</button>';
|
|
1828
1878
|
div.insertAdjacentHTML('beforeend', html);
|
|
1829
1879
|
|
|
1830
1880
|
const menu = document.querySelector('.mega-menu');
|
|
@@ -1931,6 +1981,17 @@ class SideBar {
|
|
|
1931
1981
|
'background: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
1932
1982
|
'}' +
|
|
1933
1983
|
|
|
1984
|
+
'.is-waiting {' +
|
|
1985
|
+
'background: ' + parent._cb.styleSnippetBackground + ';' +
|
|
1986
|
+
'}' +
|
|
1987
|
+
'.is-waiting2 {' +
|
|
1988
|
+
'background-color: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
1989
|
+
'}' +
|
|
1990
|
+
|
|
1991
|
+
'.dark .path {' +
|
|
1992
|
+
'stroke: #b3b3b3;' +
|
|
1993
|
+
'}' +
|
|
1994
|
+
|
|
1934
1995
|
'/* Scrollbar for modal */' +
|
|
1935
1996
|
|
|
1936
1997
|
'/* Darker color, because background for snippet thumbnails is always light. */' +
|