@innovastudio/contentbox 1.4.25 → 1.4.27
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.
|
@@ -446,7 +446,7 @@ class SideBar {
|
|
|
446
446
|
this.builderStuff = builderStuff;
|
|
447
447
|
|
|
448
448
|
if (this.builder.useSidebar) {
|
|
449
|
-
html += '<div class="is-sidebar active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
|
|
449
|
+
html += '<div class="is-sidebar is-area active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
|
|
450
450
|
var sideIndex = 0;
|
|
451
451
|
this.builder.sidebarData.buttons.map(button => {
|
|
452
452
|
if (button.name == 'section') {
|
|
@@ -490,7 +490,7 @@ class SideBar {
|
|
|
490
490
|
if (sideIndex == btn.pos) {
|
|
491
491
|
var panelId = dom$l.uniqueId();
|
|
492
492
|
html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
493
|
-
let panelHtml = '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
493
|
+
let panelHtml = '<div id="' + panelId + '" class="is-sidebar-content is-area-2nd ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
494
494
|
dom$l.appendHtml(builderStuff, panelHtml);
|
|
495
495
|
}
|
|
496
496
|
});
|
|
@@ -499,7 +499,7 @@ class SideBar {
|
|
|
499
499
|
sideIndex++;
|
|
500
500
|
});
|
|
501
501
|
html += '</div>';
|
|
502
|
-
html += '' + '<div id="divSidebarSections" class="is-sidebar-content ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
502
|
+
html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
503
503
|
} else {
|
|
504
504
|
html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
|
|
505
505
|
}
|
|
@@ -1272,6 +1272,9 @@ class SideBar {
|
|
|
1272
1272
|
transition: all 0.2s ease-in-out;
|
|
1273
1273
|
opacity: 0;
|
|
1274
1274
|
}
|
|
1275
|
+
.dark .is-design-list > button .is-overlay:after {
|
|
1276
|
+
opacity: 0.97;
|
|
1277
|
+
}
|
|
1275
1278
|
.is-design-list > button:hover .is-overlay:after {
|
|
1276
1279
|
opacity: 0.5;
|
|
1277
1280
|
}
|
|
@@ -1403,6 +1406,84 @@ class SideBar {
|
|
|
1403
1406
|
transform: rotate(450deg);
|
|
1404
1407
|
}
|
|
1405
1408
|
}
|
|
1409
|
+
|
|
1410
|
+
|
|
1411
|
+
|
|
1412
|
+
|
|
1413
|
+
body {
|
|
1414
|
+
margin: 0;
|
|
1415
|
+
}
|
|
1416
|
+
.dark .is-design-list > button {
|
|
1417
|
+
border: none;
|
|
1418
|
+
}
|
|
1419
|
+
.dark .path,
|
|
1420
|
+
.colored .path,
|
|
1421
|
+
.colored-dark .path {
|
|
1422
|
+
stroke: #b3b3b3;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* Scrollbar for modal */
|
|
1426
|
+
|
|
1427
|
+
/* Darker color, because background for snippet thumbnails is always light. */
|
|
1428
|
+
.dark * {
|
|
1429
|
+
scrollbar-width: thin;
|
|
1430
|
+
scrollbar-color: rgb(78 78 78 / 62%) auto;
|
|
1431
|
+
}
|
|
1432
|
+
.dark *::-webkit-scrollbar {
|
|
1433
|
+
width: 12px;
|
|
1434
|
+
}
|
|
1435
|
+
.dark *::-webkit-scrollbar-track {
|
|
1436
|
+
background: transparent;
|
|
1437
|
+
}
|
|
1438
|
+
.dark *::-webkit-scrollbar-thumb {
|
|
1439
|
+
background-color:rgb(78 78 78 / 62%);
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
.colored-dark * {
|
|
1443
|
+
scrollbar-width: thin;
|
|
1444
|
+
scrollbar-color: rgb(100, 100, 100) auto;
|
|
1445
|
+
}
|
|
1446
|
+
.colored-dark *::-webkit-scrollbar {
|
|
1447
|
+
width: 12px;
|
|
1448
|
+
}
|
|
1449
|
+
.colored-dark *::-webkit-scrollbar-track {
|
|
1450
|
+
background: transparent;
|
|
1451
|
+
}
|
|
1452
|
+
.colored-dark *::-webkit-scrollbar-thumb {
|
|
1453
|
+
background-color:rgb(100, 100, 100);
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.colored * {
|
|
1457
|
+
scrollbar-width: thin;
|
|
1458
|
+
scrollbar-color: rgba(0, 0, 0, 0.4) auto;
|
|
1459
|
+
}
|
|
1460
|
+
.colored *::-webkit-scrollbar {
|
|
1461
|
+
width: 12px;
|
|
1462
|
+
}
|
|
1463
|
+
.colored *::-webkit-scrollbar-track {
|
|
1464
|
+
background: transparent;
|
|
1465
|
+
}
|
|
1466
|
+
.colored *::-webkit-scrollbar-thumb {
|
|
1467
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
.light * {
|
|
1471
|
+
scrollbar-width: thin;
|
|
1472
|
+
scrollbar-color: rgba(0, 0, 0, 0.4) auto;
|
|
1473
|
+
}
|
|
1474
|
+
.light *::-webkit-scrollbar {
|
|
1475
|
+
width: 12px;
|
|
1476
|
+
}
|
|
1477
|
+
.light *::-webkit-scrollbar-track {
|
|
1478
|
+
background: transparent;
|
|
1479
|
+
}
|
|
1480
|
+
.light *::-webkit-scrollbar-thumb {
|
|
1481
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1484
|
+
.dark .is-design-list>div .is-overlay:after {
|
|
1485
|
+
background: rgb(78 78 78 / 13%);
|
|
1486
|
+
}
|
|
1406
1487
|
</style>
|
|
1407
1488
|
</head>
|
|
1408
1489
|
<body style="touch-action: pan-y">`;
|
|
@@ -1422,7 +1503,7 @@ class SideBar {
|
|
|
1422
1503
|
</div>
|
|
1423
1504
|
</div>
|
|
1424
1505
|
|
|
1425
|
-
<div class="featured-categories">
|
|
1506
|
+
<div class="featured-categories tabs">
|
|
1426
1507
|
</div>
|
|
1427
1508
|
|
|
1428
1509
|
<div class="is-design-list">
|
|
@@ -2022,107 +2103,57 @@ class SideBar {
|
|
|
2022
2103
|
// Style stuff
|
|
2023
2104
|
function applyParentStyles() {
|
|
2024
2105
|
var cssString = '' +
|
|
2025
|
-
'
|
|
2026
|
-
'
|
|
2027
|
-
'
|
|
2028
|
-
'
|
|
2106
|
+
'html {' +
|
|
2107
|
+
'--area-color: ' + parent._cb.styleModalColor + ';' +
|
|
2108
|
+
'--area-background: ' + parent._cb.styleModalBackground + ';' +
|
|
2109
|
+
'--area2-color: ' + parent._cb.styleSnippetColor + ';' +
|
|
2110
|
+
'--area2-background: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2111
|
+
'--tabs-background: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2112
|
+
'--tab-item-color: ' + parent._cb.styleSnippetTabItemColor + ';' +
|
|
2113
|
+
'--tab-item-background: ' + parent._cb.styleSnippetTabItemBackground + ';' +
|
|
2114
|
+
'--tab-item-active: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +
|
|
2115
|
+
'--tab-item-hover: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +
|
|
2116
|
+
'--mega-menu: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2117
|
+
'--is-waiting: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2118
|
+
'--is-waiting2: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2029
2119
|
'}' +
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
'background:
|
|
2033
|
-
'color: ' + parent._cb.styleSnippetTabItemColor + ';' +
|
|
2120
|
+
'.area2 {' +
|
|
2121
|
+
'color: var(--area2-color);' +
|
|
2122
|
+
'background: var(--area2-background);' +
|
|
2034
2123
|
'}' +
|
|
2035
|
-
'
|
|
2036
|
-
'
|
|
2124
|
+
'.area2 button {' +
|
|
2125
|
+
'color: var(--area2-color);' +
|
|
2037
2126
|
'}' +
|
|
2038
|
-
'.
|
|
2039
|
-
'
|
|
2127
|
+
'.area2 button svg{' +
|
|
2128
|
+
'fill: var(--area2-color);' +
|
|
2040
2129
|
'}' +
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
'border: transparent 1px solid;' +
|
|
2130
|
+
'.tabs {' +
|
|
2131
|
+
'background: var(--tabs-background);' +
|
|
2044
2132
|
'}' +
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
'background:
|
|
2048
|
-
'}' +
|
|
2049
|
-
|
|
2050
|
-
'.is-waiting {' +
|
|
2051
|
-
'background: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2133
|
+
'.tabs button, .mega-menu button {' +
|
|
2134
|
+
'color: var(--tab-item-color);' +
|
|
2135
|
+
'background: var(--tab-item-background);' +
|
|
2052
2136
|
'}' +
|
|
2053
|
-
'.
|
|
2054
|
-
'background
|
|
2137
|
+
'.tabs button.on, .mega-menu button.on {' +
|
|
2138
|
+
'background: var(--tab-item-active);' +
|
|
2055
2139
|
'}' +
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
'stroke: #b3b3b3;' +
|
|
2140
|
+
'.tabs button.on:hover, .mega-menu button.on:hover {' +
|
|
2141
|
+
'background: var(--tab-item-active);' +
|
|
2059
2142
|
'}' +
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
'/* Darker color, because background for snippet thumbnails is always light. */' +
|
|
2064
|
-
'.dark * {' +
|
|
2065
|
-
'scrollbar-width: thin;' +
|
|
2066
|
-
'scrollbar-color: rgb(78 78 78 / 62%) auto;' +
|
|
2067
|
-
'}' +
|
|
2068
|
-
'.dark *::-webkit-scrollbar {' +
|
|
2069
|
-
'width: 12px;' +
|
|
2070
|
-
'}' +
|
|
2071
|
-
'.dark *::-webkit-scrollbar-track {' +
|
|
2072
|
-
'background: transparent;' +
|
|
2073
|
-
'}' +
|
|
2074
|
-
'.dark *::-webkit-scrollbar-thumb {' +
|
|
2075
|
-
'background-color:rgb(78 78 78 / 62%);' +
|
|
2076
|
-
'}' +
|
|
2077
|
-
|
|
2078
|
-
'.colored-dark * {' +
|
|
2079
|
-
'scrollbar-width: thin;' +
|
|
2080
|
-
'scrollbar-color: rgb(100, 100, 100) auto;' +
|
|
2081
|
-
'}' +
|
|
2082
|
-
'.colored-dark *::-webkit-scrollbar {' +
|
|
2083
|
-
'width: 12px;' +
|
|
2084
|
-
'}' +
|
|
2085
|
-
'.colored-dark *::-webkit-scrollbar-track {' +
|
|
2086
|
-
'background: transparent;' +
|
|
2087
|
-
'}' +
|
|
2088
|
-
'.colored-dark *::-webkit-scrollbar-thumb {' +
|
|
2089
|
-
'background-color:rgb(100, 100, 100);' +
|
|
2090
|
-
'}' +
|
|
2091
|
-
|
|
2092
|
-
'.colored * {' +
|
|
2093
|
-
'scrollbar-width: thin;' +
|
|
2094
|
-
'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
|
|
2095
|
-
'}' +
|
|
2096
|
-
'.colored *::-webkit-scrollbar {' +
|
|
2097
|
-
'width: 12px;' +
|
|
2098
|
-
'}' +
|
|
2099
|
-
'.colored *::-webkit-scrollbar-track {' +
|
|
2100
|
-
'background: transparent;' +
|
|
2101
|
-
'}' +
|
|
2102
|
-
'.colored *::-webkit-scrollbar-thumb {' +
|
|
2103
|
-
'background-color: rgba(0, 0, 0, 0.4);' +
|
|
2104
|
-
'}' +
|
|
2105
|
-
|
|
2106
|
-
'.light * {' +
|
|
2107
|
-
'scrollbar-width: thin;' +
|
|
2108
|
-
'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
|
|
2143
|
+
'.tabs button:hover, .mega-menu button:hover {' +
|
|
2144
|
+
'background: var(--tab-item-hover);' +
|
|
2109
2145
|
'}' +
|
|
2110
|
-
'.
|
|
2111
|
-
'
|
|
2112
|
-
'}' +
|
|
2113
|
-
'.light *::-webkit-scrollbar-track {' +
|
|
2114
|
-
'background: transparent;' +
|
|
2146
|
+
'.mega-menu {' +
|
|
2147
|
+
'background: var(--mega-menu);' +
|
|
2115
2148
|
'}' +
|
|
2116
|
-
'.
|
|
2117
|
-
'background
|
|
2149
|
+
'.mega-menu button.close:hover {' +
|
|
2150
|
+
'background: var(--mega-menu);' +
|
|
2118
2151
|
'}' +
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
'fill: ' + parent._cb.styleSnippetColor + ';' +
|
|
2152
|
+
'.is-waiting {' +
|
|
2153
|
+
'background: var(--is-waiting);' +
|
|
2122
2154
|
'}' +
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
'background: rgb(78 78 78 / 13%);' +
|
|
2155
|
+
'.is-waiting2 {' +
|
|
2156
|
+
'background: var(--is-waiting2);' +
|
|
2126
2157
|
'}' +
|
|
2127
2158
|
'';
|
|
2128
2159
|
|
|
@@ -2146,6 +2177,8 @@ class SideBar {
|
|
|
2146
2177
|
} else {
|
|
2147
2178
|
document.body.setAttribute('class', '');
|
|
2148
2179
|
}
|
|
2180
|
+
|
|
2181
|
+
document.body.classList.add('area2');
|
|
2149
2182
|
}
|
|
2150
2183
|
</script>
|
|
2151
2184
|
</body>
|
|
@@ -17145,7 +17178,7 @@ class Util {
|
|
|
17145
17178
|
let c = cell.nextElementSibling;
|
|
17146
17179
|
|
|
17147
17180
|
if (c) {
|
|
17148
|
-
if (!dom.hasClass(c, 'is-row-tool') && !dom.hasClass(c, 'is-rowadd-tool') && !dom.hasClass(c, 'is-row-overlay')) {
|
|
17181
|
+
if (!dom.hasClass(c, 'is-row-tool') && !dom.hasClass(c, 'is-col-tool') && !dom.hasClass(c, 'is-rowadd-tool') && !dom.hasClass(c, 'is-row-overlay')) {
|
|
17149
17182
|
return c;
|
|
17150
17183
|
} else {
|
|
17151
17184
|
return null;
|
|
@@ -17594,18 +17627,18 @@ class Util {
|
|
|
17594
17627
|
|
|
17595
17628
|
Array.from(row.children).map(item => {
|
|
17596
17629
|
if (item.classList.contains('is-row-tool')) return;
|
|
17630
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
17597
17631
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
17598
17632
|
item.style.width = '';
|
|
17599
17633
|
item.style.flex = '';
|
|
17600
17634
|
});
|
|
17601
|
-
let num =
|
|
17635
|
+
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
17602
17636
|
|
|
17603
17637
|
if (row.querySelector('.is-row-overlay')) {
|
|
17604
|
-
num =
|
|
17638
|
+
num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
17605
17639
|
}
|
|
17606
17640
|
|
|
17607
|
-
const cellCount = row.childElementCount - num;
|
|
17608
|
-
|
|
17641
|
+
const cellCount = row.childElementCount - num;
|
|
17609
17642
|
const rowClass = this.builder.opts.row;
|
|
17610
17643
|
const colClass = this.builder.opts.cols;
|
|
17611
17644
|
const colEqual = this.builder.opts.colequal;
|
|
@@ -17613,7 +17646,7 @@ class Util {
|
|
|
17613
17646
|
if (colEqual.length > 0) {
|
|
17614
17647
|
const cols = dom.elementChildren(row);
|
|
17615
17648
|
cols.forEach(col => {
|
|
17616
|
-
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
|
|
17649
|
+
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
|
|
17617
17650
|
|
|
17618
17651
|
for (let i = 0; i <= colClass.length - 1; i++) {
|
|
17619
17652
|
dom.removeClass(col, colClass[i]);
|
|
@@ -17634,6 +17667,7 @@ class Util {
|
|
|
17634
17667
|
Array.from(row.children).map(item => {
|
|
17635
17668
|
if (item.classList.contains('is-row-tool')) return;
|
|
17636
17669
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
17670
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
17637
17671
|
|
|
17638
17672
|
if (item.getAttribute('data-module')) {
|
|
17639
17673
|
this.refreshModuleLayout(item);
|
|
@@ -17647,7 +17681,7 @@ class Util {
|
|
|
17647
17681
|
let n = 0;
|
|
17648
17682
|
const cols = dom.elementChildren(row);
|
|
17649
17683
|
cols.forEach(col => {
|
|
17650
|
-
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
|
|
17684
|
+
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
|
|
17651
17685
|
n++;
|
|
17652
17686
|
|
|
17653
17687
|
for (var i = 0; i <= colClass.length - 1; i++) {
|
|
@@ -17699,6 +17733,7 @@ class Util {
|
|
|
17699
17733
|
Array.from(row.children).map(item => {
|
|
17700
17734
|
if (item.classList.contains('is-row-tool')) return;
|
|
17701
17735
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
17736
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
17702
17737
|
|
|
17703
17738
|
if (item.getAttribute('data-module')) {
|
|
17704
17739
|
this.refreshModuleLayout(item);
|
|
@@ -17735,14 +17770,14 @@ class Util {
|
|
|
17735
17770
|
} //Limit up to 4 cells in a row
|
|
17736
17771
|
|
|
17737
17772
|
|
|
17738
|
-
let num =
|
|
17773
|
+
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
17739
17774
|
|
|
17740
17775
|
if (row.querySelector('.is-row-overlay')) {
|
|
17741
|
-
num =
|
|
17776
|
+
num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
17742
17777
|
}
|
|
17743
17778
|
|
|
17744
17779
|
if (row.childElementCount >= maxCols + num) {
|
|
17745
|
-
//+3 => includes is-row-tool, is-rowadd-tool & is-row-overlay
|
|
17780
|
+
//+3 => includes is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
17746
17781
|
alert(this.out('You have reached the maximum number of columns'));
|
|
17747
17782
|
return false;
|
|
17748
17783
|
}
|
|
@@ -17906,7 +17941,6 @@ class Util {
|
|
|
17906
17941
|
let bAddLast = false;
|
|
17907
17942
|
let cell;
|
|
17908
17943
|
let cellElement;
|
|
17909
|
-
let columnTool;
|
|
17910
17944
|
const builderStuff = this.builder.builderStuff;
|
|
17911
17945
|
let quickadd = builderStuff.querySelector('.quickadd');
|
|
17912
17946
|
const mode = quickadd.getAttribute('data-mode');
|
|
@@ -17972,9 +18006,9 @@ class Util {
|
|
|
17972
18006
|
cellElement.click(); //change active block to the newly created
|
|
17973
18007
|
// Change to row selection
|
|
17974
18008
|
|
|
17975
|
-
rowElement.className = rowElement.className.replace('row-outline', '');
|
|
17976
|
-
|
|
17977
|
-
|
|
18009
|
+
rowElement.className = rowElement.className.replace('row-outline', ''); //Hide Column tool (new!)
|
|
18010
|
+
|
|
18011
|
+
this.builder.util.hideColumnTool();
|
|
17978
18012
|
} else if (bSnippet) {
|
|
17979
18013
|
if (noedit) {
|
|
17980
18014
|
this.addContent(html, mode, 'data-noedit');
|
|
@@ -18020,14 +18054,14 @@ class Util {
|
|
|
18020
18054
|
|
|
18021
18055
|
|
|
18022
18056
|
if (row.querySelector('.is-row-overlay')) {
|
|
18023
|
-
if (row.childElementCount >= maxCols +
|
|
18024
|
-
//+
|
|
18057
|
+
if (row.childElementCount >= maxCols + 4) {
|
|
18058
|
+
//+4 => includes is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
18025
18059
|
alert(this.out('You have reached the maximum number of columns'));
|
|
18026
18060
|
return false;
|
|
18027
18061
|
}
|
|
18028
18062
|
} else {
|
|
18029
|
-
if (row.childElementCount >= maxCols +
|
|
18030
|
-
//+
|
|
18063
|
+
if (row.childElementCount >= maxCols + 3) {
|
|
18064
|
+
//+3 => includes is-row-tool, is-col-tool & is-rowadd-tool
|
|
18031
18065
|
alert(this.out('You have reached the maximum number of columns'));
|
|
18032
18066
|
return false;
|
|
18033
18067
|
}
|
|
@@ -18115,10 +18149,9 @@ class Util {
|
|
|
18115
18149
|
if (cellElement) cellElement.click(); //change active block to the newly created
|
|
18116
18150
|
// Change to row selection
|
|
18117
18151
|
|
|
18118
|
-
rowElement.className = rowElement.className.replace('row-outline', ''); //
|
|
18152
|
+
rowElement.className = rowElement.className.replace('row-outline', ''); //Hide Column tool (new!)
|
|
18119
18153
|
|
|
18120
|
-
|
|
18121
|
-
columnTool.className = columnTool.className.replace('active', '');
|
|
18154
|
+
this.builder.util.hideColumnTool();
|
|
18122
18155
|
}
|
|
18123
18156
|
|
|
18124
18157
|
if (this.builder.useCssClasses) {
|
|
@@ -18233,7 +18266,9 @@ class Util {
|
|
|
18233
18266
|
const builderStuff = this.builder.builderStuff;
|
|
18234
18267
|
let tools = builderStuff.querySelectorAll('.is-tool');
|
|
18235
18268
|
Array.prototype.forEach.call(tools, tool => {
|
|
18236
|
-
if
|
|
18269
|
+
// if(tool.classList.contains('is-row-tool')||
|
|
18270
|
+
// tool.classList.contains('is-column-tool')||
|
|
18271
|
+
// tool.classList.contains('is-element-tool')) return;
|
|
18237
18272
|
tool.style.display = '';
|
|
18238
18273
|
dom.removeClass(tool, 'active');
|
|
18239
18274
|
});
|
|
@@ -18805,27 +18840,59 @@ class Util {
|
|
|
18805
18840
|
} // Quick reposition column tool
|
|
18806
18841
|
|
|
18807
18842
|
|
|
18808
|
-
repositionColumnTool(
|
|
18809
|
-
let columnTool = this.builder.colTool.columnTool;
|
|
18810
|
-
if (!columnTool) return;
|
|
18843
|
+
repositionColumnTool() {
|
|
18811
18844
|
let col = this.builder.activeCol;
|
|
18812
18845
|
if (!col) return;
|
|
18846
|
+
let row = col.parentNode;
|
|
18847
|
+
|
|
18848
|
+
if (!col.parentNode) {
|
|
18849
|
+
// when column has just been deleted
|
|
18850
|
+
row = this.rowSelected();
|
|
18851
|
+
}
|
|
18852
|
+
|
|
18853
|
+
this.colTool = row.querySelector('.is-col-tool');
|
|
18854
|
+
|
|
18855
|
+
if (!col.parentNode) {
|
|
18856
|
+
// when column has just been deleted
|
|
18857
|
+
this.colTool.style.display = 'none';
|
|
18858
|
+
}
|
|
18813
18859
|
|
|
18814
|
-
if
|
|
18815
|
-
|
|
18860
|
+
this.colTool.style.left = col.offsetLeft + 'px'; // if columnMore is opened
|
|
18861
|
+
|
|
18862
|
+
const columnMore = this.builder.builderStuff.querySelector('.columnmore.active');
|
|
18863
|
+
|
|
18864
|
+
if (columnMore) {
|
|
18865
|
+
const btnCellMore = this.colTool.querySelector('.cell-more');
|
|
18866
|
+
columnMore.classList.add('transition1');
|
|
18816
18867
|
setTimeout(() => {
|
|
18817
|
-
|
|
18818
|
-
|
|
18868
|
+
let top, left;
|
|
18869
|
+
|
|
18870
|
+
if (!this.builder.iframe) {
|
|
18871
|
+
top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
|
|
18872
|
+
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
18873
|
+
} else {
|
|
18874
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
18875
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
18876
|
+
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
18877
|
+
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
18878
|
+
}
|
|
18879
|
+
|
|
18880
|
+
columnMore.style.top = top + 35 + 'px';
|
|
18881
|
+
columnMore.style.left = left - 7 + 'px';
|
|
18819
18882
|
setTimeout(() => {
|
|
18820
|
-
|
|
18821
|
-
},
|
|
18822
|
-
},
|
|
18823
|
-
} else {
|
|
18824
|
-
columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
|
|
18825
|
-
columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
|
|
18883
|
+
columnMore.classList.remove('transition1');
|
|
18884
|
+
}, 300);
|
|
18885
|
+
}, 30);
|
|
18826
18886
|
}
|
|
18827
18887
|
}
|
|
18828
18888
|
|
|
18889
|
+
hideColumnTool() {
|
|
18890
|
+
let tools = this.builder.doc.querySelectorAll('.is-col-tool');
|
|
18891
|
+
tools.forEach(tool => {
|
|
18892
|
+
tool.style.display = 'none';
|
|
18893
|
+
});
|
|
18894
|
+
}
|
|
18895
|
+
|
|
18829
18896
|
isTouchSupport() {
|
|
18830
18897
|
/*
|
|
18831
18898
|
if(('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
|
|
@@ -18891,6 +18958,124 @@ class Util {
|
|
|
18891
18958
|
}
|
|
18892
18959
|
|
|
18893
18960
|
getUIStyles() {
|
|
18961
|
+
const dom = this.dom;
|
|
18962
|
+
const html = `
|
|
18963
|
+
<input type="text" class="style-helper-input" style="display:none;">
|
|
18964
|
+
<label class="style-helper-label" style="display:none;"></label>
|
|
18965
|
+
<button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18966
|
+
<select class="style-helper-select" style="display:none;"><option value=""></option></select>
|
|
18967
|
+
|
|
18968
|
+
<div class="style-helper modal-color"></div>
|
|
18969
|
+
<div class="style-helper modal-background"></div>
|
|
18970
|
+
<div class="style-helper button-pickcolor-border"></div>
|
|
18971
|
+
<div class="style-helper button-pickcolor-background"></div>
|
|
18972
|
+
|
|
18973
|
+
<button class="style-helper base"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18974
|
+
<div class="style-helper base on"></div>
|
|
18975
|
+
<div class="style-helper base hover"></div>
|
|
18976
|
+
|
|
18977
|
+
<div class="style-helper snippet-color"></div>
|
|
18978
|
+
<div class="style-helper snippet-background"></div>
|
|
18979
|
+
<div class="style-helper snippet-tabs-background"></div>
|
|
18980
|
+
<div class="style-helper snippet-tab-item-background"></div>
|
|
18981
|
+
<div class="style-helper snippet-tab-item-background-active"></div>
|
|
18982
|
+
<div class="style-helper snippet-tab-item-background-hover"></div>
|
|
18983
|
+
<div class="style-helper snippet-tab-item-color"></div>
|
|
18984
|
+
|
|
18985
|
+
<div class="style-helper snippet-more-item-background"></div>
|
|
18986
|
+
<div class="style-helper snippet-more-item-background-active"></div>
|
|
18987
|
+
<div class="style-helper snippet-more-item-background-hover"></div>
|
|
18988
|
+
<div class="style-helper snippet-more-item-color"></div>
|
|
18989
|
+
|
|
18990
|
+
<div class="style-helper tabs-background"></div>
|
|
18991
|
+
<div class="style-helper tab-item-active-border-bottom"></div>
|
|
18992
|
+
<div class="style-helper tab-item-color"></div>
|
|
18993
|
+
<div class="style-helper tabs-more-background"></div>
|
|
18994
|
+
<div class="style-helper tabs-more-border"></div>
|
|
18995
|
+
<div class="style-helper tabs-more-item-color"></div>
|
|
18996
|
+
<div class="style-helper tabs-more-item-background-hover"></div>
|
|
18997
|
+
<div class="style-helper separator-color"></div>
|
|
18998
|
+
<div class="style-helper outline-color"></div>
|
|
18999
|
+
`;
|
|
19000
|
+
dom.appendHtml(this.builder.builderStuff, html); // new method
|
|
19001
|
+
|
|
19002
|
+
const getVal = (selector, rule) => {
|
|
19003
|
+
const stuff = this.builder.builderStuff.querySelector('.style-helper' + selector);
|
|
19004
|
+
return window.getComputedStyle(stuff, null).getPropertyValue(rule);
|
|
19005
|
+
};
|
|
19006
|
+
|
|
19007
|
+
const getSvgFill = () => {
|
|
19008
|
+
const btn = this.builder.builderStuff.querySelector('.style-helper.base');
|
|
19009
|
+
return window.getComputedStyle(btn.querySelector('svg'), null).getPropertyValue('fill');
|
|
19010
|
+
};
|
|
19011
|
+
|
|
19012
|
+
const inp = this.builder.builderStuff.querySelector('.style-helper-input');
|
|
19013
|
+
const lbl = this.builder.builderStuff.querySelector('.style-helper-label');
|
|
19014
|
+
const sel = this.builder.builderStuff.querySelector('.style-helper-select');
|
|
19015
|
+
const btnClassic = this.builder.builderStuff.querySelector('.style-helper-button-classic');
|
|
19016
|
+
this.builder.styleModalColor = getVal('.modal-color', 'background-color');
|
|
19017
|
+
this.builder.styleModalBackground = getVal('.modal-background', 'background-color');
|
|
19018
|
+
this.builder.styleButtonPickColorBorder = getVal('.button-pickcolor-border', 'border');
|
|
19019
|
+
this.builder.styleButtonPickColorBackground = getVal('.button-pickcolor-background', 'background-color');
|
|
19020
|
+
this.builder.styleToolBackground = getVal('.base', 'background-color');
|
|
19021
|
+
this.builder.styleButtonColor = getVal('.base', 'color');
|
|
19022
|
+
this.builder.styleButtonSvgFill = getSvgFill(); // this.builder.styleButtonBackgroundOn = getVal('.base.on', 'background-color');
|
|
19023
|
+
|
|
19024
|
+
this.builder.styleButtonBackgroundHover = getVal('.base.hover', 'background-color');
|
|
19025
|
+
this.builder.styleSnippetColor = getVal('.snippet-color', 'background-color');
|
|
19026
|
+
this.builder.styleSnippetBackground = getVal('.snippet-background', 'background-color');
|
|
19027
|
+
this.builder.styleSnippetTabsBackground = getVal('.snippet-tabs-background', 'background-color');
|
|
19028
|
+
this.builder.styleSnippetTabItemBackground = getVal('.snippet-tab-item-background', 'background-color');
|
|
19029
|
+
this.builder.styleSnippetTabItemBackgroundActive = getVal('.snippet-tab-item-background-active', 'background-color');
|
|
19030
|
+
this.builder.styleSnippetTabItemBackgroundHover = getVal('.snippet-tab-item-background-hover', 'background-color');
|
|
19031
|
+
this.builder.styleSnippetTabItemColor = getVal('.snippet-tab-item-color', 'background-color');
|
|
19032
|
+
this.builder.styleSnippetMoreItemBackground = getVal('.snippet-more-item-background', 'background-color');
|
|
19033
|
+
this.builder.styleSnippetMoreItemBackgroundActive = getVal('.snippet-more-item-background-active', 'background-color');
|
|
19034
|
+
this.builder.styleSnippetMoreItemBackgroundHover = getVal('.snippet-more-item-background-hover', 'background-color');
|
|
19035
|
+
this.builder.styleSnippetMoreItemColor = getVal('.snippet-more-item-color', 'background-color'); // Normal Tabs (ex. used in 'Symbol' plugin)
|
|
19036
|
+
|
|
19037
|
+
this.builder.styleTabsBackground = getVal('.tabs-background', 'background-color');
|
|
19038
|
+
this.builder.styleTabItemBorderBottomActive = getVal('.tab-item-active-border-bottom', 'border');
|
|
19039
|
+
this.builder.styleTabItemColor = getVal('.tab-item-color', 'background-color');
|
|
19040
|
+
this.builder.styleTabsMoreBackground = getVal('.tabs-more-background', 'background-color');
|
|
19041
|
+
this.builder.styleTabsMoreBorder = getVal('.tabs-more-border', 'border');
|
|
19042
|
+
this.builder.styleTabsMoreItemColor = getVal('.tabs-more-item-color', 'background-color');
|
|
19043
|
+
this.builder.styleTabsMoreBackgroundHover = getVal('.tabs-more-item-background-hover', 'background-color');
|
|
19044
|
+
this.builder.styleSeparatorColor = getVal('.separator-color', 'background-color');
|
|
19045
|
+
this.builder.styleOutlineColor = getVal('.outline-color', 'background-color'); // Select (ex. used in 'Button Editor' plugin, 'Slider' plugin, 'Slider Content' plugin)
|
|
19046
|
+
|
|
19047
|
+
this.builder.styleSelectBackground = window.getComputedStyle(sel, null).getPropertyValue('background-color');
|
|
19048
|
+
this.builder.styleSelectColor = window.getComputedStyle(sel, null).getPropertyValue('color');
|
|
19049
|
+
this.builder.styleSelectOptionBackground = window.getComputedStyle(sel.querySelector('option'), null).getPropertyValue('background-color'); // Input (ex. used in 'Search & Replace' plugin)
|
|
19050
|
+
|
|
19051
|
+
this.builder.styleInputBackground = window.getComputedStyle(inp, null).getPropertyValue('background-color');
|
|
19052
|
+
this.builder.styleInputBorderBottom = window.getComputedStyle(inp, null).getPropertyValue('border-bottom');
|
|
19053
|
+
this.builder.styleInputColor = window.getComputedStyle(inp, null).getPropertyValue('color'); // Label (ex. used in 'Search & Replace' plugin)
|
|
19054
|
+
|
|
19055
|
+
this.builder.styleLabelColor = window.getComputedStyle(lbl, null).getPropertyValue('color'); // Button Classic (ex. used in 'Search & Replace' plugin)
|
|
19056
|
+
|
|
19057
|
+
this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
|
|
19058
|
+
this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
|
|
19059
|
+
this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color');
|
|
19060
|
+
this.builder.styleDark = false;
|
|
19061
|
+
this.builder.styleColored = false;
|
|
19062
|
+
this.builder.styleColoredDark = false;
|
|
19063
|
+
this.builder.styleLight = false;
|
|
19064
|
+
|
|
19065
|
+
if (document.body.getAttribute('class')) {
|
|
19066
|
+
if (document.body.getAttribute('class').indexOf('colored-dark') !== -1) {
|
|
19067
|
+
this.builder.styleColoredDark = true;
|
|
19068
|
+
} else if (document.body.getAttribute('class').indexOf('dark') !== -1) {
|
|
19069
|
+
this.builder.styleDark = true;
|
|
19070
|
+
} else if (document.body.getAttribute('class').indexOf('colored') !== -1) {
|
|
19071
|
+
this.builder.styleColored = true;
|
|
19072
|
+
} else if (document.body.getAttribute('class').indexOf('light') !== -1) {
|
|
19073
|
+
this.builder.styleLight = true;
|
|
19074
|
+
}
|
|
19075
|
+
}
|
|
19076
|
+
}
|
|
19077
|
+
|
|
19078
|
+
getUIStyles_OLD() {
|
|
18894
19079
|
const dom = this.dom;
|
|
18895
19080
|
const html = `<button class="style-helper"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18896
19081
|
<input type="text" class="style-helper-input" style="display:none;">
|
|
@@ -19324,7 +19509,6 @@ class Util {
|
|
|
19324
19509
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${font_nunito}"></div>
|
|
19325
19510
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${font_old_standard_tt}"></div>
|
|
19326
19511
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${font_open_sans}"></div>
|
|
19327
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${font_open_sans_condensed}"></div>
|
|
19328
19512
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${font_oranienbaum}"></div>
|
|
19329
19513
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${font_oswald}"></div>
|
|
19330
19514
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${font_oxygen}"></div>
|
|
@@ -19546,7 +19730,6 @@ class Util {
|
|
|
19546
19730
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${path}nunito.png"></li>
|
|
19547
19731
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${path}old_standard_tt.png"></li>
|
|
19548
19732
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${path}open_sans.png"></li>
|
|
19549
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${path}open_sans_condensed.png"></li>
|
|
19550
19733
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${path}oranienbaum.png"></li>
|
|
19551
19734
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${path}oswald.png"></li>
|
|
19552
19735
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${path}oxygen.png"></li>
|
|
@@ -27783,10 +27966,7 @@ class HtmlUtil {
|
|
|
27783
27966
|
|
|
27784
27967
|
this.builder.cleanHtmlFormatting = false; //Change to row selection
|
|
27785
27968
|
|
|
27786
|
-
dom$h.removeClass(row, 'row-outline');
|
|
27787
|
-
|
|
27788
|
-
let columnTool = builderStuff.querySelector('.is-column-tool');
|
|
27789
|
-
dom$h.removeClass(columnTool, 'active');
|
|
27969
|
+
dom$h.removeClass(row, 'row-outline');
|
|
27790
27970
|
}
|
|
27791
27971
|
|
|
27792
27972
|
if (mode === 'full') {
|
|
@@ -28135,6 +28315,8 @@ class HtmlUtil {
|
|
|
28135
28315
|
dom$h.removeAttributes(elms, 'gray');
|
|
28136
28316
|
elms = tmp.querySelectorAll('[rowoutline]');
|
|
28137
28317
|
dom$h.removeAttributes(elms, 'rowoutline');
|
|
28318
|
+
elms = tmp.querySelectorAll('[hidecolumntool]');
|
|
28319
|
+
dom$h.removeAttributes(elms, 'hidecolumntool');
|
|
28138
28320
|
elms = tmp.querySelectorAll('[grayoutline]');
|
|
28139
28321
|
dom$h.removeAttributes(elms, 'grayoutline');
|
|
28140
28322
|
elms = tmp.querySelectorAll('[hideoutline]');
|
|
@@ -28150,6 +28332,7 @@ class HtmlUtil {
|
|
|
28150
28332
|
elms = tmp.querySelectorAll('[gridoutline]');
|
|
28151
28333
|
dom$h.removeAttributes(elms, 'gridoutline');
|
|
28152
28334
|
dom$h.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
|
28335
|
+
dom$h.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
|
28153
28336
|
dom$h.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
|
28154
28337
|
dom$h.removeElements(tmp.querySelectorAll('.ovl'));
|
|
28155
28338
|
dom$h.removeElements(tmp.querySelectorAll('.row-add-initial')); //Extra cleaning
|
|
@@ -28381,6 +28564,7 @@ class UndoRedo {
|
|
|
28381
28564
|
dom.removeAttributes(elms, 'data-click');
|
|
28382
28565
|
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
|
28383
28566
|
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
|
28567
|
+
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
|
28384
28568
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
|
28385
28569
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial')); //ContentBox
|
|
28386
28570
|
|
|
@@ -30355,12 +30539,10 @@ class Grid {
|
|
|
30355
30539
|
this.builderStuff = builderStuff;
|
|
30356
30540
|
const dom = this.builder.dom;
|
|
30357
30541
|
this.dom = dom;
|
|
30358
|
-
this.columnTool = new ColumnTool$1(builder);
|
|
30359
30542
|
this.rowTool = new RowTool$1(builder);
|
|
30360
30543
|
}
|
|
30361
30544
|
|
|
30362
30545
|
moveColumnPrevious() {
|
|
30363
|
-
let columnTool = this.columnTool;
|
|
30364
30546
|
let util = this.util;
|
|
30365
30547
|
const cell = util.cellSelected();
|
|
30366
30548
|
if (!cell) return;
|
|
@@ -30368,13 +30550,11 @@ class Grid {
|
|
|
30368
30550
|
if (cell.previousElementSibling) {
|
|
30369
30551
|
this.builder.uo.saveForUndo();
|
|
30370
30552
|
cell.parentElement.insertBefore(cell, cell.previousElementSibling);
|
|
30371
|
-
columnTool.position(cell);
|
|
30372
30553
|
this.builder.opts.onChange();
|
|
30373
30554
|
}
|
|
30374
30555
|
}
|
|
30375
30556
|
|
|
30376
30557
|
moveColumnNext() {
|
|
30377
|
-
let columnTool = this.columnTool;
|
|
30378
30558
|
let util = this.util;
|
|
30379
30559
|
const cell = util.cellSelected();
|
|
30380
30560
|
if (!cell) return;
|
|
@@ -30383,26 +30563,24 @@ class Grid {
|
|
|
30383
30563
|
if (cellnext) {
|
|
30384
30564
|
this.builder.uo.saveForUndo();
|
|
30385
30565
|
cell.parentElement.insertBefore(cellnext, cell);
|
|
30386
|
-
columnTool.position(cell);
|
|
30387
30566
|
this.builder.opts.onChange();
|
|
30388
30567
|
}
|
|
30389
30568
|
}
|
|
30390
30569
|
|
|
30391
30570
|
moveColumnUp() {
|
|
30392
30571
|
let builder = this.builder;
|
|
30393
|
-
let columnTool = this.columnTool;
|
|
30394
30572
|
let util = this.util;
|
|
30395
30573
|
const cell = util.cellSelected();
|
|
30396
30574
|
if (!cell) return;
|
|
30397
30575
|
let row = cell.parentNode;
|
|
30398
|
-
let num =
|
|
30576
|
+
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
30399
30577
|
|
|
30400
30578
|
if (row.querySelector('.is-row-overlay')) {
|
|
30401
|
-
num =
|
|
30579
|
+
num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
30402
30580
|
}
|
|
30403
30581
|
|
|
30404
30582
|
if (row.childElementCount - num === 1) {
|
|
30405
|
-
//-num => minus is-row-tool, is-rowadd-tool & is-row-overlay
|
|
30583
|
+
//-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
30406
30584
|
if (row.previousElementSibling) {
|
|
30407
30585
|
let maxCols = 4;
|
|
30408
30586
|
|
|
@@ -30415,7 +30593,6 @@ class Grid {
|
|
|
30415
30593
|
this.builder.uo.saveForUndo(); //Move row up
|
|
30416
30594
|
|
|
30417
30595
|
row.parentNode.insertBefore(row, row.previousElementSibling);
|
|
30418
|
-
columnTool.position(cell);
|
|
30419
30596
|
this.builder.opts.onChange();
|
|
30420
30597
|
return;
|
|
30421
30598
|
} else {
|
|
@@ -30425,7 +30602,10 @@ class Grid {
|
|
|
30425
30602
|
row.previousElementSibling.removeChild(tool); //remove next row tool
|
|
30426
30603
|
|
|
30427
30604
|
tool = row.previousElementSibling.querySelector('.is-rowadd-tool');
|
|
30428
|
-
row.previousElementSibling.removeChild(tool); //remove
|
|
30605
|
+
row.previousElementSibling.removeChild(tool); //remove
|
|
30606
|
+
|
|
30607
|
+
tool = row.previousElementSibling.querySelector('.is-col-tool');
|
|
30608
|
+
row.previousElementSibling.removeChild(tool); //remove
|
|
30429
30609
|
|
|
30430
30610
|
row.previousElementSibling.appendChild(cell); //add
|
|
30431
30611
|
|
|
@@ -30435,7 +30615,6 @@ class Grid {
|
|
|
30435
30615
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
|
30436
30616
|
builder.applyBehaviorOn(builderActive);
|
|
30437
30617
|
setTimeout(() => {
|
|
30438
|
-
columnTool.position(cell);
|
|
30439
30618
|
cell.click(); //refresh active cell/row
|
|
30440
30619
|
}, 30);
|
|
30441
30620
|
this.builder.opts.onChange();
|
|
@@ -30454,7 +30633,6 @@ class Grid {
|
|
|
30454
30633
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
|
30455
30634
|
builder.applyBehaviorOn(builderActive);
|
|
30456
30635
|
setTimeout(() => {
|
|
30457
|
-
columnTool.position(cell);
|
|
30458
30636
|
cell.click(); //refresh active cell/row
|
|
30459
30637
|
}, 30);
|
|
30460
30638
|
this.builder.opts.onChange();
|
|
@@ -30469,16 +30647,15 @@ class Grid {
|
|
|
30469
30647
|
|
|
30470
30648
|
moveColumnDown() {
|
|
30471
30649
|
let builder = this.builder;
|
|
30472
|
-
let columnTool = this.columnTool;
|
|
30473
30650
|
let util = this.util;
|
|
30474
30651
|
let dom = this.dom;
|
|
30475
30652
|
const cell = util.cellSelected();
|
|
30476
30653
|
if (!cell) return;
|
|
30477
30654
|
let row = cell.parentNode;
|
|
30478
|
-
let num =
|
|
30655
|
+
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
30479
30656
|
|
|
30480
30657
|
if (row.querySelector('.is-row-overlay')) {
|
|
30481
|
-
num =
|
|
30658
|
+
num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
30482
30659
|
}
|
|
30483
30660
|
|
|
30484
30661
|
if (row.childElementCount - num === 1) {
|
|
@@ -30495,7 +30672,6 @@ class Grid {
|
|
|
30495
30672
|
this.builder.uo.saveForUndo(); //Move row down
|
|
30496
30673
|
|
|
30497
30674
|
row.parentNode.insertBefore(row.nextElementSibling, row);
|
|
30498
|
-
columnTool.position(cell);
|
|
30499
30675
|
this.builder.opts.onChange();
|
|
30500
30676
|
return;
|
|
30501
30677
|
} else {
|
|
@@ -30505,7 +30681,10 @@ class Grid {
|
|
|
30505
30681
|
row.nextElementSibling.removeChild(tool); //remove next row tool
|
|
30506
30682
|
|
|
30507
30683
|
tool = row.nextElementSibling.querySelector('.is-rowadd-tool');
|
|
30508
|
-
row.nextElementSibling.removeChild(tool); //remove
|
|
30684
|
+
row.nextElementSibling.removeChild(tool); //remove
|
|
30685
|
+
|
|
30686
|
+
tool = row.nextElementSibling.querySelector('.is-col-tool');
|
|
30687
|
+
row.nextElementSibling.removeChild(tool); //remove
|
|
30509
30688
|
|
|
30510
30689
|
row.nextElementSibling.appendChild(cell); //add
|
|
30511
30690
|
|
|
@@ -30515,7 +30694,6 @@ class Grid {
|
|
|
30515
30694
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
|
30516
30695
|
builder.applyBehaviorOn(builderActive);
|
|
30517
30696
|
setTimeout(() => {
|
|
30518
|
-
columnTool.position(cell);
|
|
30519
30697
|
cell.click(); //refresh active cell/row
|
|
30520
30698
|
}, 30);
|
|
30521
30699
|
this.builder.opts.onChange();
|
|
@@ -30534,7 +30712,6 @@ class Grid {
|
|
|
30534
30712
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
|
30535
30713
|
builder.applyBehaviorOn(builderActive);
|
|
30536
30714
|
setTimeout(() => {
|
|
30537
|
-
columnTool.position(cell);
|
|
30538
30715
|
cell.click(); //refresh active cell/row
|
|
30539
30716
|
}, 30);
|
|
30540
30717
|
this.builder.opts.onChange();
|
|
@@ -30549,7 +30726,6 @@ class Grid {
|
|
|
30549
30726
|
|
|
30550
30727
|
duplicateColumn() {
|
|
30551
30728
|
let builder = this.builder;
|
|
30552
|
-
let columnTool = this.columnTool;
|
|
30553
30729
|
let util = this.util;
|
|
30554
30730
|
let dom = this.dom;
|
|
30555
30731
|
const cell = util.cellSelected();
|
|
@@ -30565,10 +30741,10 @@ class Grid {
|
|
|
30565
30741
|
}
|
|
30566
30742
|
|
|
30567
30743
|
let row = cell.parentNode;
|
|
30568
|
-
let num =
|
|
30744
|
+
let num = 3;
|
|
30569
30745
|
|
|
30570
30746
|
if (row.querySelector('.is-row-overlay')) {
|
|
30571
|
-
num =
|
|
30747
|
+
num = 4;
|
|
30572
30748
|
}
|
|
30573
30749
|
|
|
30574
30750
|
let maxCols = 4;
|
|
@@ -30578,7 +30754,6 @@ class Grid {
|
|
|
30578
30754
|
}
|
|
30579
30755
|
|
|
30580
30756
|
if (row.childElementCount >= maxCols + num) {
|
|
30581
|
-
//+2 => is-row-tool & is-rowadd-tool
|
|
30582
30757
|
alert(util.out('You have reached the maximum number of columns'));
|
|
30583
30758
|
return false;
|
|
30584
30759
|
}
|
|
@@ -30589,32 +30764,27 @@ class Grid {
|
|
|
30589
30764
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
|
30590
30765
|
builder.applyBehaviorOn(builderActive);
|
|
30591
30766
|
setTimeout(() => {
|
|
30592
|
-
columnTool.position(cell);
|
|
30593
30767
|
cell.click(); //refresh active cell/row
|
|
30594
30768
|
}, 30);
|
|
30595
30769
|
this.builder.opts.onChange();
|
|
30596
30770
|
}
|
|
30597
30771
|
|
|
30598
30772
|
removeColumn() {
|
|
30599
|
-
let columnTool = this.columnTool;
|
|
30600
30773
|
let util = this.util;
|
|
30601
30774
|
const cell = util.cellSelected();
|
|
30602
30775
|
if (!cell) return;
|
|
30603
30776
|
let row = cell.parentNode;
|
|
30604
|
-
let num =
|
|
30777
|
+
let num = 3;
|
|
30605
30778
|
|
|
30606
30779
|
if (row.querySelector('.is-row-overlay')) {
|
|
30607
|
-
num =
|
|
30780
|
+
num = 4;
|
|
30608
30781
|
}
|
|
30609
30782
|
|
|
30610
|
-
columnTool.hide(); //Hide Column tool
|
|
30611
|
-
|
|
30612
30783
|
util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
|
|
30613
30784
|
if (ok) {
|
|
30614
30785
|
this.builder.uo.saveForUndo();
|
|
30615
30786
|
|
|
30616
30787
|
if (row.childElementCount - num === 1) {
|
|
30617
|
-
//-2 => minus is-row-tool & is-rowadd-tool
|
|
30618
30788
|
row.parentNode.removeChild(row);
|
|
30619
30789
|
util.checkEmpty();
|
|
30620
30790
|
} else {
|
|
@@ -30624,18 +30794,12 @@ class Grid {
|
|
|
30624
30794
|
|
|
30625
30795
|
util.clearActiveCell();
|
|
30626
30796
|
this.builder.opts.onChange();
|
|
30627
|
-
} else {
|
|
30628
|
-
setTimeout(() => {
|
|
30629
|
-
// columnTool.position(cell);
|
|
30630
|
-
columnTool.show();
|
|
30631
|
-
}, 30);
|
|
30632
30797
|
}
|
|
30633
30798
|
});
|
|
30634
30799
|
}
|
|
30635
30800
|
|
|
30636
30801
|
increaseColumn() {
|
|
30637
30802
|
let builder = this.builder;
|
|
30638
|
-
let columnTool = this.columnTool;
|
|
30639
30803
|
let util = this.util;
|
|
30640
30804
|
let dom = this.dom;
|
|
30641
30805
|
const cell = util.cellSelected();
|
|
@@ -30672,7 +30836,6 @@ class Grid {
|
|
|
30672
30836
|
dom.addClass(cell, group[j + 1][0]);
|
|
30673
30837
|
dom.addClass(cellnext, group[j + 1][1]);
|
|
30674
30838
|
dom.addClass(cellnext2, group[j + 1][2]);
|
|
30675
|
-
columnTool.position(cell);
|
|
30676
30839
|
this.builder.opts.onChange();
|
|
30677
30840
|
return;
|
|
30678
30841
|
}
|
|
@@ -30694,7 +30857,6 @@ class Grid {
|
|
|
30694
30857
|
dom.removeClass(cellnext, group[j][1]);
|
|
30695
30858
|
dom.addClass(cell, group[j + 1][0]);
|
|
30696
30859
|
dom.addClass(cellnext, group[j + 1][1]);
|
|
30697
|
-
columnTool.position(cell);
|
|
30698
30860
|
this.builder.opts.onChange();
|
|
30699
30861
|
return;
|
|
30700
30862
|
}
|
|
@@ -30703,7 +30865,6 @@ class Grid {
|
|
|
30703
30865
|
}
|
|
30704
30866
|
}
|
|
30705
30867
|
|
|
30706
|
-
columnTool.position(cell);
|
|
30707
30868
|
return;
|
|
30708
30869
|
} //others (12 columns grid)
|
|
30709
30870
|
|
|
@@ -30791,7 +30952,6 @@ class Grid {
|
|
|
30791
30952
|
dom.addClass(cellnext, colClass[10]);
|
|
30792
30953
|
}
|
|
30793
30954
|
|
|
30794
|
-
columnTool.position(cell);
|
|
30795
30955
|
this.builder.opts.onChange();
|
|
30796
30956
|
}
|
|
30797
30957
|
}
|
|
@@ -30799,7 +30959,6 @@ class Grid {
|
|
|
30799
30959
|
|
|
30800
30960
|
decreaseColumn() {
|
|
30801
30961
|
let builder = this.builder;
|
|
30802
|
-
let columnTool = this.columnTool;
|
|
30803
30962
|
let util = this.util;
|
|
30804
30963
|
let dom = this.dom;
|
|
30805
30964
|
const cell = util.cellSelected();
|
|
@@ -30836,7 +30995,6 @@ class Grid {
|
|
|
30836
30995
|
dom.addClass(cell, group[j - 1][0]);
|
|
30837
30996
|
dom.addClass(cellnext, group[j - 1][1]);
|
|
30838
30997
|
dom.addClass(cellnext2, group[j - 1][2]);
|
|
30839
|
-
columnTool.position(cell);
|
|
30840
30998
|
this.builder.opts.onChange();
|
|
30841
30999
|
return;
|
|
30842
31000
|
}
|
|
@@ -30858,7 +31016,6 @@ class Grid {
|
|
|
30858
31016
|
dom.removeClass(cellnext, group[j][1]);
|
|
30859
31017
|
dom.addClass(cell, group[j - 1][0]);
|
|
30860
31018
|
dom.addClass(cellnext, group[j - 1][1]);
|
|
30861
|
-
columnTool.position(cell);
|
|
30862
31019
|
this.builder.opts.onChange();
|
|
30863
31020
|
return;
|
|
30864
31021
|
}
|
|
@@ -30867,7 +31024,6 @@ class Grid {
|
|
|
30867
31024
|
}
|
|
30868
31025
|
}
|
|
30869
31026
|
|
|
30870
|
-
columnTool.position(cell);
|
|
30871
31027
|
return;
|
|
30872
31028
|
} //others (12 columns grid)
|
|
30873
31029
|
// const rowClass = builder.opts.row; //row
|
|
@@ -30957,7 +31113,6 @@ class Grid {
|
|
|
30957
31113
|
dom.addClass(cellnext, colClass[11]);
|
|
30958
31114
|
}
|
|
30959
31115
|
|
|
30960
|
-
columnTool.position(cell);
|
|
30961
31116
|
this.builder.opts.onChange();
|
|
30962
31117
|
}
|
|
30963
31118
|
}
|
|
@@ -30966,7 +31121,6 @@ class Grid {
|
|
|
30966
31121
|
|
|
30967
31122
|
removeRow() {
|
|
30968
31123
|
// let builder = this.builder;
|
|
30969
|
-
// let columnTool = this.columnTool;
|
|
30970
31124
|
let util = this.util;
|
|
30971
31125
|
let dom = this.dom; // const cell = util.cellSelected();
|
|
30972
31126
|
// if(!cell) return;
|
|
@@ -30984,8 +31138,6 @@ class Grid {
|
|
|
30984
31138
|
if (!row) return; //Change to row selection
|
|
30985
31139
|
|
|
30986
31140
|
dom.removeClass(row, 'row-outline');
|
|
30987
|
-
this.columnTool.hide(); //Hide Column tool
|
|
30988
|
-
|
|
30989
31141
|
util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
|
|
30990
31142
|
// const cell = util.cellSelected();
|
|
30991
31143
|
// if(!cell) return;
|
|
@@ -31012,7 +31164,6 @@ class Grid {
|
|
|
31012
31164
|
|
|
31013
31165
|
moveRowUp() {
|
|
31014
31166
|
// let builder = this.builder;
|
|
31015
|
-
let columnTool = this.columnTool;
|
|
31016
31167
|
let util = this.util;
|
|
31017
31168
|
let dom = this.dom; // const cell = util.cellSelected();
|
|
31018
31169
|
// if(!cell) return;
|
|
@@ -31030,7 +31181,6 @@ class Grid {
|
|
|
31030
31181
|
if (!row) return; //Change to row selection
|
|
31031
31182
|
|
|
31032
31183
|
dom.removeClass(row, 'row-outline');
|
|
31033
|
-
columnTool.hide(); //Hide Column tool
|
|
31034
31184
|
|
|
31035
31185
|
if (row.previousElementSibling) {
|
|
31036
31186
|
this.builder.uo.saveForUndo();
|
|
@@ -31060,7 +31210,6 @@ class Grid {
|
|
|
31060
31210
|
|
|
31061
31211
|
moveRowDown() {
|
|
31062
31212
|
// let builder = this.builder;
|
|
31063
|
-
let columnTool = this.columnTool;
|
|
31064
31213
|
let util = this.util;
|
|
31065
31214
|
let dom = this.dom; // const cell = util.cellSelected();
|
|
31066
31215
|
// if(!cell) return;
|
|
@@ -31078,7 +31227,6 @@ class Grid {
|
|
|
31078
31227
|
if (!row) return; //Change to row selection
|
|
31079
31228
|
|
|
31080
31229
|
dom.removeClass(row, 'row-outline');
|
|
31081
|
-
columnTool.hide(); //Hide Column tool
|
|
31082
31230
|
|
|
31083
31231
|
if (row.nextElementSibling) {
|
|
31084
31232
|
this.builder.uo.saveForUndo();
|
|
@@ -31108,7 +31256,6 @@ class Grid {
|
|
|
31108
31256
|
|
|
31109
31257
|
duplicateRow() {
|
|
31110
31258
|
let builder = this.builder;
|
|
31111
|
-
let columnTool = this.columnTool;
|
|
31112
31259
|
let util = this.util;
|
|
31113
31260
|
let dom = this.dom; // const cell = util.cellSelected();
|
|
31114
31261
|
// if(!cell) return;
|
|
@@ -31126,12 +31273,11 @@ class Grid {
|
|
|
31126
31273
|
if (!row) return; //Change to row selection
|
|
31127
31274
|
|
|
31128
31275
|
dom.removeClass(row, 'row-outline');
|
|
31129
|
-
columnTool.hide(); //Hide Column tool
|
|
31130
|
-
|
|
31131
31276
|
this.builder.uo.saveForUndo(); //Clone row & cleanup attached tool & event
|
|
31132
31277
|
|
|
31133
31278
|
const rowElement = row.cloneNode(true);
|
|
31134
31279
|
rowElement.removeChild(rowElement.querySelector('.is-row-tool'));
|
|
31280
|
+
rowElement.removeChild(rowElement.querySelector('.is-col-tool'));
|
|
31135
31281
|
let cols = dom.elementChildren(rowElement);
|
|
31136
31282
|
cols.forEach(col => {
|
|
31137
31283
|
col.removeAttribute('data-click');
|
|
@@ -31153,22 +31299,6 @@ class Grid {
|
|
|
31153
31299
|
builder.applyBehaviorOn(builderActive);
|
|
31154
31300
|
this.rowTool.position(rowElement);
|
|
31155
31301
|
this.builder.opts.onChange();
|
|
31156
|
-
} // Utilities
|
|
31157
|
-
|
|
31158
|
-
|
|
31159
|
-
refreshColumnTool(cell) {
|
|
31160
|
-
let columnTool = this.columnTool;
|
|
31161
|
-
columnTool.position(cell);
|
|
31162
|
-
}
|
|
31163
|
-
|
|
31164
|
-
showColumnTool() {
|
|
31165
|
-
let columnTool = this.columnTool;
|
|
31166
|
-
columnTool.show();
|
|
31167
|
-
}
|
|
31168
|
-
|
|
31169
|
-
hideColumnTool() {
|
|
31170
|
-
let columnTool = this.columnTool;
|
|
31171
|
-
columnTool.hide();
|
|
31172
31302
|
}
|
|
31173
31303
|
|
|
31174
31304
|
}
|
|
@@ -31227,76 +31357,6 @@ class RowTool$1 {
|
|
|
31227
31357
|
|
|
31228
31358
|
}
|
|
31229
31359
|
|
|
31230
|
-
class ColumnTool$1 {
|
|
31231
|
-
constructor(builder) {
|
|
31232
|
-
this.builder = builder;
|
|
31233
|
-
const dom = this.builder.dom;
|
|
31234
|
-
this.dom = dom;
|
|
31235
|
-
}
|
|
31236
|
-
|
|
31237
|
-
position(col) {
|
|
31238
|
-
let dom = this.dom;
|
|
31239
|
-
const builderStuff = this.builder.builderStuff; // this.columnTool = builderStuff.querySelector('.is-column-tool');
|
|
31240
|
-
|
|
31241
|
-
if (!this.builder.iframe) {
|
|
31242
|
-
this.columnTool = builderStuff.querySelector('.is-column-tool');
|
|
31243
|
-
} else {
|
|
31244
|
-
this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
|
|
31245
|
-
}
|
|
31246
|
-
|
|
31247
|
-
this.columnMore = builderStuff.querySelector('.columnmore');
|
|
31248
|
-
dom.addClass(this.columnMore, 'transition1');
|
|
31249
|
-
setTimeout(() => {
|
|
31250
|
-
this.columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
|
|
31251
|
-
this.columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
|
|
31252
|
-
let top, left;
|
|
31253
|
-
|
|
31254
|
-
if (!this.builder.iframe) {
|
|
31255
|
-
top = parseInt(this.columnTool.style.top);
|
|
31256
|
-
left = parseInt(this.columnTool.style.left);
|
|
31257
|
-
} else {
|
|
31258
|
-
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
31259
|
-
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
31260
|
-
top = parseInt(this.columnTool.style.top) - this.builder.win.pageYOffset + adjY;
|
|
31261
|
-
left = parseInt(this.columnTool.style.left) - this.builder.win.pageXOffset + adjX;
|
|
31262
|
-
}
|
|
31263
|
-
|
|
31264
|
-
this.columnMore.style.top = top + 35 + 'px';
|
|
31265
|
-
this.columnMore.style.left = left + 19 + 'px';
|
|
31266
|
-
setTimeout(() => {
|
|
31267
|
-
dom.removeClass(this.columnMore, 'transition1');
|
|
31268
|
-
}, 300);
|
|
31269
|
-
}, 30);
|
|
31270
|
-
}
|
|
31271
|
-
|
|
31272
|
-
hide() {
|
|
31273
|
-
let dom = this.dom;
|
|
31274
|
-
const builderStuff = this.builder.builderStuff;
|
|
31275
|
-
|
|
31276
|
-
if (!this.builder.iframe) {
|
|
31277
|
-
this.columnTool = builderStuff.querySelector('.is-column-tool');
|
|
31278
|
-
} else {
|
|
31279
|
-
this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
|
|
31280
|
-
}
|
|
31281
|
-
|
|
31282
|
-
dom.removeClass(this.columnTool, 'active');
|
|
31283
|
-
}
|
|
31284
|
-
|
|
31285
|
-
show() {
|
|
31286
|
-
let dom = this.dom;
|
|
31287
|
-
const builderStuff = this.builder.builderStuff;
|
|
31288
|
-
|
|
31289
|
-
if (!this.builder.iframe) {
|
|
31290
|
-
this.columnTool = builderStuff.querySelector('.is-column-tool');
|
|
31291
|
-
} else {
|
|
31292
|
-
this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
|
|
31293
|
-
}
|
|
31294
|
-
|
|
31295
|
-
dom.addClass(this.columnTool, 'active');
|
|
31296
|
-
}
|
|
31297
|
-
|
|
31298
|
-
}
|
|
31299
|
-
|
|
31300
31360
|
/*
|
|
31301
31361
|
Draggable
|
|
31302
31362
|
Insipred by: https://www.kirupa.com/html5/drag.htm
|
|
@@ -62532,18 +62592,7 @@ class Image$1 {
|
|
|
62532
62592
|
document.selection.empty();
|
|
62533
62593
|
} else {
|
|
62534
62594
|
window.getSelection().removeAllRanges();
|
|
62535
|
-
} // Hide column tool
|
|
62536
|
-
|
|
62537
|
-
|
|
62538
|
-
let columnTool;
|
|
62539
|
-
|
|
62540
|
-
if (!this.builder.iframe) {
|
|
62541
|
-
columnTool = builderStuff.querySelector('.is-column-tool');
|
|
62542
|
-
} else {
|
|
62543
|
-
columnTool = contentStuff.querySelector('.is-column-tool');
|
|
62544
62595
|
}
|
|
62545
|
-
|
|
62546
|
-
dom.removeClass(columnTool, 'active');
|
|
62547
62596
|
}).on('resizeEnd', ({
|
|
62548
62597
|
target
|
|
62549
62598
|
}) => {
|
|
@@ -62588,17 +62637,7 @@ class Image$1 {
|
|
|
62588
62637
|
target.setAttribute('data-resized', 0);
|
|
62589
62638
|
}, 300); //Trigger Change event
|
|
62590
62639
|
|
|
62591
|
-
this.builder.opts.onChange();
|
|
62592
|
-
|
|
62593
|
-
let columnTool;
|
|
62594
|
-
|
|
62595
|
-
if (!this.builder.iframe) {
|
|
62596
|
-
columnTool = builderStuff.querySelector('.is-column-tool');
|
|
62597
|
-
} else {
|
|
62598
|
-
columnTool = contentStuff.querySelector('.is-column-tool');
|
|
62599
|
-
}
|
|
62600
|
-
|
|
62601
|
-
dom.addClass(columnTool, 'active');
|
|
62640
|
+
this.builder.opts.onChange();
|
|
62602
62641
|
});
|
|
62603
62642
|
document.querySelector('.moveable-control-box').style.display = 'none';
|
|
62604
62643
|
imageResizer.addEventListener('click', () => {
|
|
@@ -66450,6 +66489,7 @@ class Code {
|
|
|
66450
66489
|
elms = tmpbuilder.querySelectorAll('[data-module-active]');
|
|
66451
66490
|
dom.removeAttributes(elms, 'data-module-active');
|
|
66452
66491
|
dom.removeElements(tmpbuilder.querySelectorAll('.is-row-tool'));
|
|
66492
|
+
dom.removeElements(tmpbuilder.querySelectorAll('.is-col-tool'));
|
|
66453
66493
|
dom.removeElements(tmpbuilder.querySelectorAll('.is-rowadd-tool'));
|
|
66454
66494
|
dom.removeElements(tmpbuilder.querySelectorAll('.ovl'));
|
|
66455
66495
|
dom.removeElements(tmpbuilder.querySelectorAll('.row-add-initial'));
|
|
@@ -68047,7 +68087,9 @@ class RowTool {
|
|
|
68047
68087
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
68048
68088
|
this.grid.duplicateRow(); // this.rowMore.style.display = '';
|
|
68049
68089
|
|
|
68050
|
-
util.hidePop(rowMore);
|
|
68090
|
+
util.hidePop(rowMore); //Hide Column tool (new!)
|
|
68091
|
+
|
|
68092
|
+
util.hideColumnTool();
|
|
68051
68093
|
util.clearControls();
|
|
68052
68094
|
});
|
|
68053
68095
|
elm = rowMore.querySelector('.row-html');
|
|
@@ -68099,7 +68141,13 @@ class RowTool {
|
|
|
68099
68141
|
<button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
68100
68142
|
<button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
|
|
68101
68143
|
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
68102
|
-
</div
|
|
68144
|
+
</div>
|
|
68145
|
+
<div class="is-tool is-col-tool">
|
|
68146
|
+
<button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
|
|
68147
|
+
<button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
68148
|
+
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
68149
|
+
</div>
|
|
68150
|
+
`;
|
|
68103
68151
|
dom.appendHtml(row, html);
|
|
68104
68152
|
rowtool = row.querySelector('.is-row-tool'); // Prepare for tooltip
|
|
68105
68153
|
|
|
@@ -68113,6 +68161,109 @@ class RowTool {
|
|
|
68113
68161
|
this.builder.tooltip.set(elm, 5, 3, true);
|
|
68114
68162
|
}
|
|
68115
68163
|
});
|
|
68164
|
+
let coltool = row.querySelector('.is-col-tool'); // Prepare for tooltip
|
|
68165
|
+
|
|
68166
|
+
elms = coltool.querySelectorAll('[title]');
|
|
68167
|
+
Array.prototype.forEach.call(elms, elm => {
|
|
68168
|
+
elm.setAttribute('data-title', elm.getAttribute('title'));
|
|
68169
|
+
|
|
68170
|
+
if (!this.builder.iframe) {
|
|
68171
|
+
this.builder.tooltip.set(elm, 5, 3);
|
|
68172
|
+
} else {
|
|
68173
|
+
this.builder.tooltip.set(elm, 5, 3, true);
|
|
68174
|
+
}
|
|
68175
|
+
}); // Check for backward compatibility
|
|
68176
|
+
|
|
68177
|
+
let marginLeft = window.getComputedStyle(coltool, null).getPropertyValue('margin-left');
|
|
68178
|
+
|
|
68179
|
+
if (parseInt(marginLeft) === 0) {
|
|
68180
|
+
this.builder.backwardCompatible();
|
|
68181
|
+
}
|
|
68182
|
+
|
|
68183
|
+
const btnCellAdd = coltool.querySelector('.cell-add');
|
|
68184
|
+
if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
|
|
68185
|
+
let cell = util.cellSelected();
|
|
68186
|
+
if (!cell) return;
|
|
68187
|
+
let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
|
|
68188
|
+
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
68189
|
+
tabs.style.display = 'flex';
|
|
68190
|
+
let top, left;
|
|
68191
|
+
|
|
68192
|
+
if (!this.builder.iframe) {
|
|
68193
|
+
top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
|
|
68194
|
+
left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
|
|
68195
|
+
} else {
|
|
68196
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
68197
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
68198
|
+
top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
|
|
68199
|
+
left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
|
|
68200
|
+
} // quickadd.style.display = 'flex';
|
|
68201
|
+
|
|
68202
|
+
|
|
68203
|
+
util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
68204
|
+
//const h = quickadd.offsetHeight;
|
|
68205
|
+
|
|
68206
|
+
quickadd.style.top = top + 35 + 'px';
|
|
68207
|
+
quickadd.style.left = left + 'px';
|
|
68208
|
+
dom.removeClass(quickadd, 'arrow-bottom');
|
|
68209
|
+
dom.removeClass(quickadd, 'arrow-left');
|
|
68210
|
+
dom.removeClass(quickadd, 'arrow-right');
|
|
68211
|
+
dom.removeClass(quickadd, 'center');
|
|
68212
|
+
dom.removeClass(quickadd, 'right');
|
|
68213
|
+
dom.addClass(quickadd, 'arrow-top');
|
|
68214
|
+
dom.addClass(quickadd, 'left');
|
|
68215
|
+
let val = quickadd.querySelector('.active').getAttribute('data-value');
|
|
68216
|
+
|
|
68217
|
+
if (val === 'left') {
|
|
68218
|
+
quickadd.setAttribute('data-mode', 'cell-left');
|
|
68219
|
+
} else {
|
|
68220
|
+
quickadd.setAttribute('data-mode', 'cell-right');
|
|
68221
|
+
}
|
|
68222
|
+
});
|
|
68223
|
+
const btnCellMore = coltool.querySelector('.cell-more');
|
|
68224
|
+
if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
|
|
68225
|
+
let cell = util.cellSelected();
|
|
68226
|
+
if (!cell) return;
|
|
68227
|
+
let top, left;
|
|
68228
|
+
|
|
68229
|
+
if (!this.builder.iframe) {
|
|
68230
|
+
top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
|
|
68231
|
+
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
68232
|
+
} else {
|
|
68233
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
68234
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
68235
|
+
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
68236
|
+
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
68237
|
+
}
|
|
68238
|
+
|
|
68239
|
+
const columnMore = builderStuff.querySelector('.columnmore'); // columnMore.style.display = 'flex';
|
|
68240
|
+
|
|
68241
|
+
util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
68242
|
+
//const h = columnMore.offsetHeight;
|
|
68243
|
+
|
|
68244
|
+
columnMore.style.top = top + 35 + 'px';
|
|
68245
|
+
columnMore.style.left = left - 7 + 'px';
|
|
68246
|
+
dom.removeClass(columnMore, 'arrow-bottom');
|
|
68247
|
+
dom.removeClass(columnMore, 'arrow-left');
|
|
68248
|
+
dom.removeClass(columnMore, 'arrow-right');
|
|
68249
|
+
dom.removeClass(columnMore, 'center');
|
|
68250
|
+
dom.removeClass(columnMore, 'right');
|
|
68251
|
+
dom.addClass(columnMore, 'arrow-top');
|
|
68252
|
+
dom.addClass(columnMore, 'left');
|
|
68253
|
+
const btnCellLocking = columnMore.querySelector('.cell-locking');
|
|
68254
|
+
|
|
68255
|
+
if (cell.hasAttribute('data-noedit')) {
|
|
68256
|
+
dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
|
|
68257
|
+
} else {
|
|
68258
|
+
dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
|
|
68259
|
+
}
|
|
68260
|
+
});
|
|
68261
|
+
const btnCellRemove = coltool.querySelector('.cell-remove');
|
|
68262
|
+
if (btnCellRemove) dom.addEventListener(btnCellRemove, 'click', () => {
|
|
68263
|
+
const grid = new Grid(this.builder);
|
|
68264
|
+
grid.removeColumn();
|
|
68265
|
+
util.clearControls();
|
|
68266
|
+
});
|
|
68116
68267
|
let btnGridEditor = rowtool.querySelector('.row-grideditor');
|
|
68117
68268
|
if (btnGridEditor) dom.addEventListener(btnGridEditor, 'click', () => {
|
|
68118
68269
|
const grideditor = builderStuff.querySelector('.grideditor');
|
|
@@ -68173,10 +68324,9 @@ class RowTool {
|
|
|
68173
68324
|
|
|
68174
68325
|
if (!row) return; //Change to row selection
|
|
68175
68326
|
|
|
68176
|
-
dom.removeClass(row, 'row-outline'); //Hide Column tool
|
|
68327
|
+
dom.removeClass(row, 'row-outline'); //Hide Column tool (new!)
|
|
68177
68328
|
|
|
68178
|
-
|
|
68179
|
-
dom.removeClass(columnTool, 'active'); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
68329
|
+
util.hideColumnTool(); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
68180
68330
|
// const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
|
|
68181
68331
|
|
|
68182
68332
|
let top, left;
|
|
@@ -70110,8 +70260,7 @@ class ColumnTool {
|
|
|
70110
70260
|
this.util = util;
|
|
70111
70261
|
const dom = this.builder.dom;
|
|
70112
70262
|
this.dom = dom;
|
|
70113
|
-
let
|
|
70114
|
-
let columnMore;
|
|
70263
|
+
let columnMore = builderStuff.querySelector('.is-pop.columnmore');
|
|
70115
70264
|
let resizebutton = `
|
|
70116
70265
|
<button type="button" title="${util.out('Increase')}" class="cell-increase"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>
|
|
70117
70266
|
<button type="button" title="${util.out('Decrease')}" class="cell-decrease"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>
|
|
@@ -70122,8 +70271,10 @@ class ColumnTool {
|
|
|
70122
70271
|
<span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
|
|
70123
70272
|
</button>`;
|
|
70124
70273
|
|
|
70125
|
-
if (!
|
|
70126
|
-
|
|
70274
|
+
if (!columnMore) {
|
|
70275
|
+
// .is-column-tool here is not used anymore and is replaced with the one in rowtool.js
|
|
70276
|
+
let html = `
|
|
70277
|
+
<div class="is-tool is-column-tool">
|
|
70127
70278
|
<button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
|
|
70128
70279
|
<button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
70129
70280
|
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
@@ -70441,10 +70592,8 @@ class ColumnTool {
|
|
|
70441
70592
|
dom.appendHtml(builderStuff, html);
|
|
70442
70593
|
|
|
70443
70594
|
if (!this.builder.iframe) {
|
|
70444
|
-
columnTool = builderStuff.querySelector('.is-column-tool');
|
|
70445
70595
|
this.lockIndicator = builderStuff.querySelector('.is-locked-indicator');
|
|
70446
70596
|
} else {
|
|
70447
|
-
columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
|
|
70448
70597
|
this.lockIndicator = this.builder.contentStuff.querySelector('.is-locked-indicator');
|
|
70449
70598
|
}
|
|
70450
70599
|
|
|
@@ -70452,100 +70601,8 @@ class ColumnTool {
|
|
|
70452
70601
|
this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
|
|
70453
70602
|
this.divCellClick = builderStuff.querySelector('#divCellClick');
|
|
70454
70603
|
this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
|
|
70455
|
-
|
|
70456
|
-
|
|
70457
|
-
let elms = columnTool.querySelectorAll('[title]');
|
|
70458
|
-
Array.prototype.forEach.call(elms, elm => {
|
|
70459
|
-
elm.setAttribute('data-title', elm.getAttribute('title'));
|
|
70460
|
-
}); // elms = columnMore.querySelectorAll('[title]');
|
|
70461
|
-
// Array.prototype.forEach.call(elms, (elm) => {
|
|
70462
|
-
// elm.setAttribute('data-title',elm.getAttribute('title'));
|
|
70463
|
-
// });
|
|
70464
|
-
// Add column
|
|
70465
|
-
|
|
70466
|
-
let btnCellAdd = columnTool.querySelector('.cell-add');
|
|
70467
|
-
dom.addEventListener(btnCellAdd, 'click', () => {
|
|
70468
|
-
let cell = util.cellSelected();
|
|
70469
|
-
if (!cell) return;
|
|
70470
|
-
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
70471
|
-
tabs.style.display = 'flex';
|
|
70472
|
-
let top, left;
|
|
70473
|
-
|
|
70474
|
-
if (!this.builder.iframe) {
|
|
70475
|
-
top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
|
|
70476
|
-
left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
|
|
70477
|
-
} else {
|
|
70478
|
-
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
70479
|
-
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
70480
|
-
top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
|
|
70481
|
-
left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
|
|
70482
|
-
} // quickadd.style.display = 'flex';
|
|
70483
|
-
|
|
70484
|
-
|
|
70485
|
-
util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
70486
|
-
//const h = quickadd.offsetHeight;
|
|
70487
|
-
|
|
70488
|
-
quickadd.style.top = top + 35 + 'px';
|
|
70489
|
-
quickadd.style.left = left + 'px';
|
|
70490
|
-
dom.removeClass(quickadd, 'arrow-bottom');
|
|
70491
|
-
dom.removeClass(quickadd, 'arrow-left');
|
|
70492
|
-
dom.removeClass(quickadd, 'arrow-right');
|
|
70493
|
-
dom.removeClass(quickadd, 'center');
|
|
70494
|
-
dom.removeClass(quickadd, 'right');
|
|
70495
|
-
dom.addClass(quickadd, 'arrow-top');
|
|
70496
|
-
dom.addClass(quickadd, 'left');
|
|
70497
|
-
let val = quickadd.querySelector('.active').getAttribute('data-value');
|
|
70498
|
-
|
|
70499
|
-
if (val === 'left') {
|
|
70500
|
-
quickadd.setAttribute('data-mode', 'cell-left');
|
|
70501
|
-
} else {
|
|
70502
|
-
quickadd.setAttribute('data-mode', 'cell-right');
|
|
70503
|
-
}
|
|
70504
|
-
}); // More
|
|
70505
|
-
|
|
70506
|
-
const btnCellMore = columnTool.querySelector('.cell-more');
|
|
70507
|
-
dom.addEventListener(btnCellMore, 'click', () => {
|
|
70508
|
-
let cell = util.cellSelected();
|
|
70509
|
-
if (!cell) return;
|
|
70510
|
-
let top, left;
|
|
70511
|
-
|
|
70512
|
-
if (!this.builder.iframe) {
|
|
70513
|
-
top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
|
|
70514
|
-
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
70515
|
-
} else {
|
|
70516
|
-
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
70517
|
-
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
70518
|
-
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
70519
|
-
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
70520
|
-
} // columnMore.style.display = 'flex';
|
|
70521
|
-
|
|
70522
|
-
|
|
70523
|
-
util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
70524
|
-
//const h = columnMore.offsetHeight;
|
|
70525
|
-
|
|
70526
|
-
columnMore.style.top = top + 35 + 'px';
|
|
70527
|
-
columnMore.style.left = left - 7 + 'px';
|
|
70528
|
-
dom.removeClass(columnMore, 'arrow-bottom');
|
|
70529
|
-
dom.removeClass(columnMore, 'arrow-left');
|
|
70530
|
-
dom.removeClass(columnMore, 'arrow-right');
|
|
70531
|
-
dom.removeClass(columnMore, 'center');
|
|
70532
|
-
dom.removeClass(columnMore, 'right');
|
|
70533
|
-
dom.addClass(columnMore, 'arrow-top');
|
|
70534
|
-
dom.addClass(columnMore, 'left');
|
|
70535
|
-
const btnCellLocking = this.columnMore.querySelector('.cell-locking');
|
|
70536
|
-
|
|
70537
|
-
if (cell.hasAttribute('data-noedit')) {
|
|
70538
|
-
dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
|
|
70539
|
-
} else {
|
|
70540
|
-
dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
|
|
70541
|
-
}
|
|
70542
|
-
}); // Delete column
|
|
70543
|
-
|
|
70544
|
-
let elm = columnTool.querySelector('.cell-remove');
|
|
70545
|
-
dom.addEventListener(elm, 'click', () => {
|
|
70546
|
-
this.grid.removeColumn();
|
|
70547
|
-
util.clearControls();
|
|
70548
|
-
}); // Move Previous
|
|
70604
|
+
renderQuickAdd(builder);
|
|
70605
|
+
let elms, elm; // Move Previous
|
|
70549
70606
|
|
|
70550
70607
|
elm = columnMore.querySelector('.cell-prev');
|
|
70551
70608
|
dom.addEventListener(elm, 'click', () => {
|
|
@@ -70579,6 +70636,7 @@ class ColumnTool {
|
|
|
70579
70636
|
Array.from(row.children).map(item => {
|
|
70580
70637
|
if (item.classList.contains('is-row-tool')) return;
|
|
70581
70638
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70639
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70582
70640
|
if (item.style.width) needed = true;
|
|
70583
70641
|
});
|
|
70584
70642
|
|
|
@@ -70586,6 +70644,7 @@ class ColumnTool {
|
|
|
70586
70644
|
Array.from(row.children).map(item => {
|
|
70587
70645
|
if (item.classList.contains('is-row-tool')) return;
|
|
70588
70646
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70647
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70589
70648
|
item.style.width = '';
|
|
70590
70649
|
item.style.flex = '';
|
|
70591
70650
|
item.style.height = '';
|
|
@@ -70599,6 +70658,7 @@ class ColumnTool {
|
|
|
70599
70658
|
Array.from(cell.parentNode.children).map(item => {
|
|
70600
70659
|
if (item.classList.contains('is-row-tool')) return;
|
|
70601
70660
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70661
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70602
70662
|
|
|
70603
70663
|
if (item.getAttribute('data-module')) {
|
|
70604
70664
|
util.refreshModuleLayout(item);
|
|
@@ -70616,6 +70676,7 @@ class ColumnTool {
|
|
|
70616
70676
|
Array.from(row.children).map(item => {
|
|
70617
70677
|
if (item.classList.contains('is-row-tool')) return;
|
|
70618
70678
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70679
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70619
70680
|
if (item.style.width) needed = true;
|
|
70620
70681
|
});
|
|
70621
70682
|
|
|
@@ -70623,6 +70684,7 @@ class ColumnTool {
|
|
|
70623
70684
|
Array.from(row.children).map(item => {
|
|
70624
70685
|
if (item.classList.contains('is-row-tool')) return;
|
|
70625
70686
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70687
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70626
70688
|
item.style.width = '';
|
|
70627
70689
|
item.style.flex = '';
|
|
70628
70690
|
item.style.height = '';
|
|
@@ -70636,6 +70698,7 @@ class ColumnTool {
|
|
|
70636
70698
|
Array.from(cell.parentNode.children).map(item => {
|
|
70637
70699
|
if (item.classList.contains('is-row-tool')) return;
|
|
70638
70700
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
70701
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
70639
70702
|
|
|
70640
70703
|
if (item.getAttribute('data-module')) {
|
|
70641
70704
|
util.refreshModuleLayout(item);
|
|
@@ -71760,7 +71823,6 @@ class ColumnTool {
|
|
|
71760
71823
|
});
|
|
71761
71824
|
}
|
|
71762
71825
|
|
|
71763
|
-
this.columnTool = columnTool;
|
|
71764
71826
|
this.columnMore = columnMore;
|
|
71765
71827
|
}
|
|
71766
71828
|
|
|
@@ -72331,10 +72393,11 @@ class ColumnTool {
|
|
|
72331
72393
|
}
|
|
72332
72394
|
|
|
72333
72395
|
click(col) {
|
|
72334
|
-
const dom = this.dom;
|
|
72335
|
-
|
|
72336
|
-
this.columnTool
|
|
72337
|
-
this.columnTool.style.left = col.
|
|
72396
|
+
const dom = this.dom; //---- New Col Tool ----
|
|
72397
|
+
|
|
72398
|
+
this.columnTool = col.parentNode.querySelector('.is-col-tool');
|
|
72399
|
+
this.columnTool.style.left = col.offsetLeft + 'px'; //---- /New Col Tool ----
|
|
72400
|
+
|
|
72338
72401
|
const btnIncrease = this.columnMore.querySelector('.cell-increase');
|
|
72339
72402
|
const btnDecrease = this.columnMore.querySelector('.cell-decrease');
|
|
72340
72403
|
let nogrid = dom.parentsHasAttribute(col, 'nogrid');
|
|
@@ -72394,14 +72457,14 @@ class ColumnTool {
|
|
|
72394
72457
|
this.columnTool.querySelector('.cell-add').removeAttribute('disabled');
|
|
72395
72458
|
this.columnTool.querySelector('.cell-remove').removeAttribute('disabled');
|
|
72396
72459
|
let row = col.parentNode;
|
|
72397
|
-
let num =
|
|
72460
|
+
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
72398
72461
|
|
|
72399
72462
|
if (row.querySelector('.is-row-overlay')) {
|
|
72400
|
-
num =
|
|
72463
|
+
num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
72401
72464
|
}
|
|
72402
72465
|
|
|
72403
72466
|
if (row.childElementCount - num === 1) {
|
|
72404
|
-
//-num => minus is-row-tool, is-rowadd-tool & is-row-overlay
|
|
72467
|
+
//-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
72405
72468
|
this.columnMore.querySelector('.cell-prev').style.display = 'none';
|
|
72406
72469
|
this.columnMore.querySelector('.cell-next').style.display = 'none';
|
|
72407
72470
|
if (btnIncrease) btnIncrease.style.display = 'none';
|
|
@@ -72524,18 +72587,6 @@ class ColumnTool {
|
|
|
72524
72587
|
}
|
|
72525
72588
|
}
|
|
72526
72589
|
|
|
72527
|
-
refreshColumnTool(cell) {
|
|
72528
|
-
this.grid.refreshColumnTool(cell);
|
|
72529
|
-
}
|
|
72530
|
-
|
|
72531
|
-
showColumnTool(cell) {
|
|
72532
|
-
this.grid.showColumnTool(cell);
|
|
72533
|
-
}
|
|
72534
|
-
|
|
72535
|
-
hideColumnTool() {
|
|
72536
|
-
this.grid.hideColumnTool();
|
|
72537
|
-
}
|
|
72538
|
-
|
|
72539
72590
|
}
|
|
72540
72591
|
|
|
72541
72592
|
const dom$f = new Dom();
|
|
@@ -77452,18 +77503,13 @@ class ElementTool {
|
|
|
77452
77503
|
if (cell) {
|
|
77453
77504
|
let row = cell.parentNode;
|
|
77454
77505
|
|
|
77455
|
-
if (cell.childElementCount === 0 && row.childElementCount ===
|
|
77506
|
+
if (cell.childElementCount === 0 && row.childElementCount === 4) {
|
|
77507
|
+
// 4 => col + tools
|
|
77456
77508
|
row.parentNode.removeChild(row);
|
|
77457
|
-
let columnTool = builderStuff.querySelector('.is-column-tool'); // quick access
|
|
77458
|
-
|
|
77459
|
-
dom.removeClass(columnTool, 'active');
|
|
77460
77509
|
util.checkEmpty();
|
|
77461
77510
|
} else if (cell.childElementCount === 0) {
|
|
77462
77511
|
row.removeChild(cell);
|
|
77463
77512
|
util.fixLayout(row);
|
|
77464
|
-
let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
|
|
77465
|
-
|
|
77466
|
-
dom.removeClass(columnTool, 'active');
|
|
77467
77513
|
}
|
|
77468
77514
|
} // Add spacer to empty subblock
|
|
77469
77515
|
|
|
@@ -77673,10 +77719,11 @@ class ElementTool {
|
|
|
77673
77719
|
left = elmMore.getBoundingClientRect().left;
|
|
77674
77720
|
top = top + adjY;
|
|
77675
77721
|
left = left + adjX;
|
|
77676
|
-
}
|
|
77722
|
+
} // elementMore.style.display = 'flex';
|
|
77677
77723
|
|
|
77678
|
-
elementMore.style.display = 'flex'; // this.util.showPop(elementMore);
|
|
77679
77724
|
|
|
77725
|
+
const btnMore = elementTool.querySelector('.elm-more');
|
|
77726
|
+
this.util.showPop(elementMore, false, btnMore);
|
|
77680
77727
|
const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
77681
77728
|
|
|
77682
77729
|
const h = elementMore.offsetHeight;
|
|
@@ -78572,22 +78619,16 @@ class Preferences {
|
|
|
78572
78619
|
}
|
|
78573
78620
|
|
|
78574
78621
|
setColumnTool(hidecolumntool) {
|
|
78575
|
-
const
|
|
78622
|
+
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
|
78576
78623
|
|
|
78577
78624
|
if (hidecolumntool) {
|
|
78578
|
-
|
|
78625
|
+
Array.prototype.forEach.call(builders, builder => {
|
|
78626
|
+
builder.setAttribute('hidecolumntool', '');
|
|
78627
|
+
});
|
|
78579
78628
|
} else {
|
|
78580
|
-
|
|
78581
|
-
|
|
78582
|
-
|
|
78583
|
-
if (this.builder.iframe) {
|
|
78584
|
-
const contentStuff = this.builder.contentStuff;
|
|
78585
|
-
|
|
78586
|
-
if (hidecolumntool) {
|
|
78587
|
-
contentStuff.setAttribute('hidecolumntool', '');
|
|
78588
|
-
} else {
|
|
78589
|
-
contentStuff.removeAttribute('hidecolumntool', '');
|
|
78590
|
-
}
|
|
78629
|
+
Array.prototype.forEach.call(builders, builder => {
|
|
78630
|
+
builder.removeAttribute('hidecolumntool');
|
|
78631
|
+
});
|
|
78591
78632
|
}
|
|
78592
78633
|
}
|
|
78593
78634
|
|
|
@@ -80234,12 +80275,14 @@ class Rte {
|
|
|
80234
80275
|
Array.prototype.forEach.call(tools, tool => {
|
|
80235
80276
|
tool.style.display = '';
|
|
80236
80277
|
});
|
|
80237
|
-
let tool = this.builder.doc.querySelector('.is-column-tool');
|
|
80238
|
-
tool.style.display = 'none';
|
|
80239
80278
|
tools = this.builder.doc.querySelectorAll('.is-row-tool');
|
|
80240
80279
|
tools.forEach(tool => {
|
|
80241
80280
|
tool.style.display = 'none';
|
|
80242
80281
|
});
|
|
80282
|
+
tools = this.builder.doc.querySelectorAll('.is-col-tool');
|
|
80283
|
+
tools.forEach(tool => {
|
|
80284
|
+
tool.style.display = 'none';
|
|
80285
|
+
});
|
|
80243
80286
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
|
80244
80287
|
tools.forEach(tool => {
|
|
80245
80288
|
tool.style.opacity = 0;
|
|
@@ -80267,15 +80310,6 @@ class Rte {
|
|
|
80267
80310
|
|
|
80268
80311
|
|
|
80269
80312
|
this.builder.elmTool.repositionElementTool();
|
|
80270
|
-
let col = this.builder.activeCol;
|
|
80271
|
-
let tool = this.builder.doc.querySelector('.is-column-tool');
|
|
80272
|
-
tool.style.display = '';
|
|
80273
|
-
|
|
80274
|
-
if (col) {
|
|
80275
|
-
tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
|
|
80276
|
-
tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
|
|
80277
|
-
}
|
|
80278
|
-
|
|
80279
80313
|
let tools = this.builder.doc.querySelectorAll('.is-row-tool');
|
|
80280
80314
|
tools.forEach(tool => {
|
|
80281
80315
|
tool.style.display = '';
|
|
@@ -80284,6 +80318,10 @@ class Rte {
|
|
|
80284
80318
|
tools.forEach(tool => {
|
|
80285
80319
|
tool.style.opacity = '';
|
|
80286
80320
|
});
|
|
80321
|
+
tools = this.builder.doc.querySelectorAll('.is-col-tool');
|
|
80322
|
+
tools.forEach(tool => {
|
|
80323
|
+
tool.style.display = '';
|
|
80324
|
+
});
|
|
80287
80325
|
|
|
80288
80326
|
if (this.builder.onZoomEnd) {
|
|
80289
80327
|
let val = this.rteZoomSlider.value;
|
|
@@ -80316,12 +80354,14 @@ class Rte {
|
|
|
80316
80354
|
Array.prototype.forEach.call(tools, tool => {
|
|
80317
80355
|
tool.style.display = '';
|
|
80318
80356
|
});
|
|
80319
|
-
let tool = this.builder.doc.querySelector('.is-column-tool');
|
|
80320
|
-
tool.style.display = 'none';
|
|
80321
80357
|
tools = this.builder.doc.querySelectorAll('.is-row-tool');
|
|
80322
80358
|
tools.forEach(tool => {
|
|
80323
80359
|
tool.style.display = 'none';
|
|
80324
80360
|
});
|
|
80361
|
+
tools = this.builder.doc.querySelectorAll('.is-col-tool');
|
|
80362
|
+
tools.forEach(tool => {
|
|
80363
|
+
tool.style.display = 'none';
|
|
80364
|
+
});
|
|
80325
80365
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
|
80326
80366
|
tools.forEach(tool => {
|
|
80327
80367
|
tool.style.opacity = 0;
|
|
@@ -80349,15 +80389,6 @@ class Rte {
|
|
|
80349
80389
|
|
|
80350
80390
|
|
|
80351
80391
|
this.builder.elmTool.repositionElementTool();
|
|
80352
|
-
let col = this.builder.activeCol;
|
|
80353
|
-
let tool = this.builder.doc.querySelector('.is-column-tool');
|
|
80354
|
-
tool.style.display = '';
|
|
80355
|
-
|
|
80356
|
-
if (col) {
|
|
80357
|
-
tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
|
|
80358
|
-
tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
|
|
80359
|
-
}
|
|
80360
|
-
|
|
80361
80392
|
let tools = this.builder.doc.querySelectorAll('.is-row-tool');
|
|
80362
80393
|
tools.forEach(tool => {
|
|
80363
80394
|
tool.style.display = '';
|
|
@@ -80366,6 +80397,10 @@ class Rte {
|
|
|
80366
80397
|
tools.forEach(tool => {
|
|
80367
80398
|
tool.style.opacity = '';
|
|
80368
80399
|
});
|
|
80400
|
+
tools = this.builder.doc.querySelectorAll('.is-col-tool');
|
|
80401
|
+
tools.forEach(tool => {
|
|
80402
|
+
tool.style.display = '';
|
|
80403
|
+
});
|
|
80369
80404
|
|
|
80370
80405
|
if (this.builder.onZoomEnd) {
|
|
80371
80406
|
let val = this.rteZoomSlider.value;
|
|
@@ -85684,6 +85719,7 @@ class Resize {
|
|
|
85684
85719
|
Array.from(col.parentNode.children).map(item => {
|
|
85685
85720
|
if (item.classList.contains('is-row-tool')) return;
|
|
85686
85721
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85722
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
85687
85723
|
if (item === col) return;
|
|
85688
85724
|
numOfCols++;
|
|
85689
85725
|
});
|
|
@@ -85696,7 +85732,8 @@ class Resize {
|
|
|
85696
85732
|
let otherWidth = 0;
|
|
85697
85733
|
Array.from(col.parentNode.children).map(item => {
|
|
85698
85734
|
if (item.classList.contains('is-row-tool')) return;
|
|
85699
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85735
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85736
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85700
85737
|
|
|
85701
85738
|
if (item === col) return;
|
|
85702
85739
|
otherWidth += item.offsetWidth;
|
|
@@ -85712,7 +85749,8 @@ class Resize {
|
|
|
85712
85749
|
// Or make others auto
|
|
85713
85750
|
Array.from(col.parentNode.children).map(item => {
|
|
85714
85751
|
if (item.classList.contains('is-row-tool')) return;
|
|
85715
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85752
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85753
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85716
85754
|
|
|
85717
85755
|
if (item === col) return; // // item.style.width = '100%';
|
|
85718
85756
|
// if(!item.getAttribute('data-module')) item.style.width = '100%';
|
|
@@ -85742,7 +85780,8 @@ class Resize {
|
|
|
85742
85780
|
// New: if other cols has no width, set to 100%
|
|
85743
85781
|
Array.from(col.parentNode.children).map(item => {
|
|
85744
85782
|
if (item.classList.contains('is-row-tool')) return;
|
|
85745
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85783
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85784
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85746
85785
|
|
|
85747
85786
|
if (item === col) return;
|
|
85748
85787
|
|
|
@@ -85766,6 +85805,7 @@ class Resize {
|
|
|
85766
85805
|
Array.from(col.parentNode.children).map(item => {
|
|
85767
85806
|
if (item.classList.contains('is-row-tool')) return;
|
|
85768
85807
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85808
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
85769
85809
|
if (item === col) return;
|
|
85770
85810
|
numOfCols++;
|
|
85771
85811
|
});
|
|
@@ -85779,7 +85819,8 @@ class Resize {
|
|
|
85779
85819
|
let otherWidth = 0;
|
|
85780
85820
|
Array.from(col.parentNode.children).map(item => {
|
|
85781
85821
|
if (item.classList.contains('is-row-tool')) return;
|
|
85782
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85822
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85823
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85783
85824
|
|
|
85784
85825
|
if (item.classList.contains('row-tool')) return;
|
|
85785
85826
|
if (item === col) return;
|
|
@@ -85796,7 +85837,8 @@ class Resize {
|
|
|
85796
85837
|
// Or make others auto
|
|
85797
85838
|
Array.from(col.parentNode.children).map(item => {
|
|
85798
85839
|
if (item.classList.contains('is-row-tool')) return;
|
|
85799
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85840
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85841
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85800
85842
|
|
|
85801
85843
|
if (item === col) return; // // item.style.width = '100%';
|
|
85802
85844
|
// if(!item.getAttribute('data-module')) item.style.width = '100%';
|
|
@@ -85826,7 +85868,8 @@ class Resize {
|
|
|
85826
85868
|
let activeColumnWidth = 0;
|
|
85827
85869
|
Array.from(col.parentNode.children).map(item => {
|
|
85828
85870
|
if (item.classList.contains('is-row-tool')) return;
|
|
85829
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85871
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85872
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85830
85873
|
// // Refresh Module
|
|
85831
85874
|
// if(item.getAttribute('data-module')) {
|
|
85832
85875
|
// this.builder.util.refreshModuleLayout(item);
|
|
@@ -85849,6 +85892,7 @@ class Resize {
|
|
|
85849
85892
|
Array.from(col.parentNode.children).map(item => {
|
|
85850
85893
|
if (item.classList.contains('is-row-tool')) return;
|
|
85851
85894
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85895
|
+
if (item.classList.contains('is-col-tool')) return;
|
|
85852
85896
|
|
|
85853
85897
|
if (item.getAttribute('data-module')) {
|
|
85854
85898
|
let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
|
|
@@ -85864,7 +85908,8 @@ class Resize {
|
|
|
85864
85908
|
col.style.height = '';
|
|
85865
85909
|
Array.from(col.parentNode.children).map(item => {
|
|
85866
85910
|
if (item.classList.contains('is-row-tool')) return;
|
|
85867
|
-
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85911
|
+
if (item.classList.contains('is-rowadd-tool')) return;
|
|
85912
|
+
if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
|
|
85868
85913
|
|
|
85869
85914
|
if (item === col) return;
|
|
85870
85915
|
item.style.height = '';
|
|
@@ -86475,6 +86520,8 @@ class ContentStuff$1 {
|
|
|
86475
86520
|
.row-active .is-row-tool {
|
|
86476
86521
|
display:flex;
|
|
86477
86522
|
}
|
|
86523
|
+
|
|
86524
|
+
|
|
86478
86525
|
.row-outline .is-rowadd-tool,
|
|
86479
86526
|
.row-active .is-rowadd-tool {
|
|
86480
86527
|
display:block;
|
|
@@ -86545,7 +86592,78 @@ class ContentStuff$1 {
|
|
|
86545
86592
|
outline:none;
|
|
86546
86593
|
}
|
|
86547
86594
|
|
|
86595
|
+
/* is-col-tool */
|
|
86596
|
+
|
|
86597
|
+
.row-active .is-col-tool {
|
|
86598
|
+
display: flex;
|
|
86599
|
+
}
|
|
86600
|
+
.is-builder[rowoutline] .row-active .is-col-tool {
|
|
86601
|
+
display: none;
|
|
86602
|
+
}
|
|
86603
|
+
.is-builder[hidecolumntool] .row-active .is-col-tool {
|
|
86604
|
+
display: none;
|
|
86605
|
+
}
|
|
86606
|
+
|
|
86607
|
+
|
|
86608
|
+
.is-tool.is-col-tool {
|
|
86609
|
+
flex-direction: row;
|
|
86610
|
+
margin-top: 0px;
|
|
86611
|
+
margin-left: -1px;
|
|
86612
|
+
}
|
|
86613
|
+
.is-tool.is-col-tool button {
|
|
86614
|
+
width: 25px;
|
|
86615
|
+
height: 25px;
|
|
86616
|
+
display: flex;
|
|
86617
|
+
justify-content: center;
|
|
86618
|
+
align-items: center;
|
|
86619
|
+
}
|
|
86620
|
+
.is-tool.is-col-tool .cell-add {
|
|
86621
|
+
background: #0fcc52;
|
|
86622
|
+
}
|
|
86623
|
+
.is-tool.is-col-tool .cell-more {
|
|
86624
|
+
background: rgba(216, 200, 6, 0.9);
|
|
86625
|
+
}
|
|
86626
|
+
.is-tool.is-col-tool .cell-remove {
|
|
86627
|
+
background: rgba(255, 85, 4, 0.9);
|
|
86628
|
+
}
|
|
86629
|
+
.is-tool.is-col-tool svg {
|
|
86630
|
+
width: 23px;
|
|
86631
|
+
height: 23px;
|
|
86632
|
+
fill: #fff;
|
|
86633
|
+
}
|
|
86634
|
+
.is-tool.is-col-tool .cell-more svg {
|
|
86635
|
+
width: 14px;
|
|
86636
|
+
height: 14px;
|
|
86637
|
+
}
|
|
86548
86638
|
|
|
86639
|
+
|
|
86640
|
+
.is-builder[gray] .is-tool.is-col-tool {
|
|
86641
|
+
background: rgba(243, 243, 243, 0.9);
|
|
86642
|
+
flex-direction: row;
|
|
86643
|
+
margin-top: -2px;
|
|
86644
|
+
}
|
|
86645
|
+
.is-builder[gray] .is-tool.is-col-tool button {
|
|
86646
|
+
width: 27px;
|
|
86647
|
+
height: 27px;
|
|
86648
|
+
}
|
|
86649
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-add {
|
|
86650
|
+
background: transparent;
|
|
86651
|
+
}
|
|
86652
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-more {
|
|
86653
|
+
background: transparent;
|
|
86654
|
+
}
|
|
86655
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-remove {
|
|
86656
|
+
background: transparent;
|
|
86657
|
+
}
|
|
86658
|
+
.is-builder[gray] .is-tool.is-col-tool svg {
|
|
86659
|
+
width: 18px;
|
|
86660
|
+
height: 18px;
|
|
86661
|
+
fill: #000;
|
|
86662
|
+
}
|
|
86663
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-more svg {
|
|
86664
|
+
width: 12px;
|
|
86665
|
+
height: 12px;
|
|
86666
|
+
}
|
|
86549
86667
|
|
|
86550
86668
|
|
|
86551
86669
|
.is-builder[gridoutline] > div > div {
|
|
@@ -86822,7 +86940,8 @@ class ContentStuff$1 {
|
|
|
86822
86940
|
display: initial !important;
|
|
86823
86941
|
}
|
|
86824
86942
|
.is-section-tool svg,
|
|
86825
|
-
.is-row-tool svg
|
|
86943
|
+
.is-row-tool svg,
|
|
86944
|
+
.is-col-tool svg {
|
|
86826
86945
|
display: initial !important;
|
|
86827
86946
|
}
|
|
86828
86947
|
|
|
@@ -87770,7 +87889,6 @@ class ContentBuilder {
|
|
|
87770
87889
|
var ret = oldget.apply(this, arguments);
|
|
87771
87890
|
|
|
87772
87891
|
if (this.activeCol) {
|
|
87773
|
-
// this.colTool.refreshColumnTool(this.activeCol);
|
|
87774
87892
|
// Quick reposition column tool
|
|
87775
87893
|
this.util.repositionColumnTool();
|
|
87776
87894
|
}
|
|
@@ -88074,6 +88192,101 @@ class ContentBuilder {
|
|
|
88074
88192
|
*/
|
|
88075
88193
|
|
|
88076
88194
|
}
|
|
88195
|
+
/*
|
|
88196
|
+
If latest npm is used, while local contentbuilder.css is still using the old version,
|
|
88197
|
+
then add the newest css here, so the newest script from npm will work fine.
|
|
88198
|
+
backwardCompatible() is called by rowtool.js
|
|
88199
|
+
*/
|
|
88200
|
+
|
|
88201
|
+
|
|
88202
|
+
backwardCompatible() {
|
|
88203
|
+
let css = `
|
|
88204
|
+
.row-active .is-col-tool {
|
|
88205
|
+
display: flex;
|
|
88206
|
+
}
|
|
88207
|
+
.is-builder[rowoutline] .row-active .is-col-tool {
|
|
88208
|
+
display: none;
|
|
88209
|
+
}
|
|
88210
|
+
.is-builder[hidecolumntool] .row-active .is-col-tool {
|
|
88211
|
+
display: none;
|
|
88212
|
+
}
|
|
88213
|
+
|
|
88214
|
+
.is-tool.is-col-tool {
|
|
88215
|
+
flex-direction: row;
|
|
88216
|
+
margin-top: 0px;
|
|
88217
|
+
margin-left: -1px;
|
|
88218
|
+
}
|
|
88219
|
+
.is-tool.is-col-tool button {
|
|
88220
|
+
width: 25px;
|
|
88221
|
+
height: 25px;
|
|
88222
|
+
display: flex;
|
|
88223
|
+
justify-content: center;
|
|
88224
|
+
align-items: center;
|
|
88225
|
+
}
|
|
88226
|
+
.is-tool.is-col-tool .cell-add {
|
|
88227
|
+
background: #0fcc52;
|
|
88228
|
+
}
|
|
88229
|
+
.is-tool.is-col-tool .cell-more {
|
|
88230
|
+
background: rgba(216, 200, 6, 0.9);
|
|
88231
|
+
}
|
|
88232
|
+
.is-tool.is-col-tool .cell-remove {
|
|
88233
|
+
background: rgba(255, 85, 4, 0.9);
|
|
88234
|
+
}
|
|
88235
|
+
.is-tool.is-col-tool svg {
|
|
88236
|
+
width: 23px;
|
|
88237
|
+
height: 23px;
|
|
88238
|
+
fill: #fff;
|
|
88239
|
+
}
|
|
88240
|
+
.is-tool.is-col-tool .cell-more svg {
|
|
88241
|
+
width: 14px;
|
|
88242
|
+
height: 14px;
|
|
88243
|
+
}
|
|
88244
|
+
|
|
88245
|
+
|
|
88246
|
+
.is-builder[gray] .is-tool.is-col-tool {
|
|
88247
|
+
background: rgba(243, 243, 243, 0.9);
|
|
88248
|
+
flex-direction: row;
|
|
88249
|
+
top:-3px;
|
|
88250
|
+
margin-top: 0px;
|
|
88251
|
+
margin-left: -1px;
|
|
88252
|
+
}
|
|
88253
|
+
.is-builder[gray] .is-tool.is-col-tool button {
|
|
88254
|
+
width: 27px;
|
|
88255
|
+
height: 27px;
|
|
88256
|
+
}
|
|
88257
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-add {
|
|
88258
|
+
background: transparent;
|
|
88259
|
+
}
|
|
88260
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-more {
|
|
88261
|
+
background: transparent;
|
|
88262
|
+
}
|
|
88263
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-remove {
|
|
88264
|
+
background: transparent;
|
|
88265
|
+
}
|
|
88266
|
+
.is-builder[gray] .is-tool.is-col-tool svg {
|
|
88267
|
+
width: 18px;
|
|
88268
|
+
height: 18px;
|
|
88269
|
+
fill: #000;
|
|
88270
|
+
}
|
|
88271
|
+
.is-builder[gray] .is-tool.is-col-tool .cell-more svg {
|
|
88272
|
+
width: 12px;
|
|
88273
|
+
height: 12px;
|
|
88274
|
+
}
|
|
88275
|
+
|
|
88276
|
+
|
|
88277
|
+
.is-col-tool svg {
|
|
88278
|
+
display: initial !important;
|
|
88279
|
+
}
|
|
88280
|
+
`;
|
|
88281
|
+
|
|
88282
|
+
if (!this.builderStuff.querySelector('style[data-rel="css-new"]')) {
|
|
88283
|
+
this.builderStuff.insertAdjacentHTML('afterbegin', `
|
|
88284
|
+
<style data-rel="css-new">
|
|
88285
|
+
${css}
|
|
88286
|
+
</style>
|
|
88287
|
+
`);
|
|
88288
|
+
}
|
|
88289
|
+
}
|
|
88077
88290
|
|
|
88078
88291
|
setZoomOnControl(area) {
|
|
88079
88292
|
const rowtools = area.querySelectorAll('.is-row-tool');
|
|
@@ -88081,6 +88294,12 @@ class ContentBuilder {
|
|
|
88081
88294
|
rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
|
|
88082
88295
|
rowtool.style.transformOrigin = 'top';
|
|
88083
88296
|
});
|
|
88297
|
+
const coltools = area.querySelectorAll('.is-col-tool');
|
|
88298
|
+
coltools.forEach(coltool => {
|
|
88299
|
+
coltool.style.transform = `scale(${1 / this.opts.zoom})`;
|
|
88300
|
+
coltool.style.transformOrigin = 'top left';
|
|
88301
|
+
coltool.style.marginTop = `${-(27 / this.opts.zoom)}px`;
|
|
88302
|
+
});
|
|
88084
88303
|
const rowaddtools = area.querySelectorAll('.is-rowadd-tool button');
|
|
88085
88304
|
rowaddtools.forEach(rowaddtool => {
|
|
88086
88305
|
rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
|
|
@@ -88185,7 +88404,7 @@ class ContentBuilder {
|
|
|
88185
88404
|
|
|
88186
88405
|
const cols = this.dom.elementChildren(row);
|
|
88187
88406
|
cols.forEach(col => {
|
|
88188
|
-
if (this.dom.hasClass(col, 'is-row-tool') || this.dom.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
|
|
88407
|
+
if (this.dom.hasClass(col, 'is-row-tool') || this.dom.hasClass(col, 'is-col-tool') || this.dom.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
|
|
88189
88408
|
// For backward compatibility, replace:
|
|
88190
88409
|
// - data-mode="readonly" with data-noedit
|
|
88191
88410
|
// - data-mode="readonly-protected" with data-protected
|
|
@@ -88319,19 +88538,9 @@ class ContentBuilder {
|
|
|
88319
88538
|
onStart: () => {
|
|
88320
88539
|
this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change
|
|
88321
88540
|
|
|
88322
|
-
this.colTool.hideColumnTool();
|
|
88323
88541
|
this.elmTool.hide();
|
|
88324
88542
|
},
|
|
88325
88543
|
onEnd: () => {
|
|
88326
|
-
if (!this.opts.emailMode) {
|
|
88327
|
-
if (this.dom.hasClass(this.activeCol.parentNode, 'row-outline')) {
|
|
88328
|
-
//if not row selection, but col selection
|
|
88329
|
-
//if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
|
|
88330
|
-
this.colTool.refreshColumnTool(this.activeCol);
|
|
88331
|
-
this.colTool.showColumnTool(this.activeCol);
|
|
88332
|
-
}
|
|
88333
|
-
}
|
|
88334
|
-
|
|
88335
88544
|
this.util.checkEmpty(); // for multiple instances check
|
|
88336
88545
|
},
|
|
88337
88546
|
onAdd: evt => {
|
|
@@ -88892,10 +89101,6 @@ class ContentBuilder {
|
|
|
88892
89101
|
|
|
88893
89102
|
imageLoaded(obj) {
|
|
88894
89103
|
obj.removeAttribute('onload');
|
|
88895
|
-
|
|
88896
|
-
if (this.activeCol) {
|
|
88897
|
-
this.colTool.refreshColumnTool(this.activeCol);
|
|
88898
|
-
}
|
|
88899
89104
|
} // Module related
|
|
88900
89105
|
|
|
88901
89106
|
|
|
@@ -89564,6 +89769,7 @@ class ContentBuilder {
|
|
|
89564
89769
|
}
|
|
89565
89770
|
|
|
89566
89771
|
setUIColorRefresh() {
|
|
89772
|
+
// All related with iframe style
|
|
89567
89773
|
const util = this.util;
|
|
89568
89774
|
|
|
89569
89775
|
if (!this.rte || !this.element) {
|
|
@@ -89694,7 +89900,11 @@ class ContentBuilder {
|
|
|
89694
89900
|
}
|
|
89695
89901
|
|
|
89696
89902
|
handleCellClick(col, e) {
|
|
89697
|
-
if (this.cleanEditing)
|
|
89903
|
+
if (this.cleanEditing) {
|
|
89904
|
+
col.parentNode.querySelector('.is-row-tool').style.display = '';
|
|
89905
|
+
col.parentNode.querySelector('.is-col-tool').style.display = '';
|
|
89906
|
+
}
|
|
89907
|
+
|
|
89698
89908
|
this.lightboxOpen(col);
|
|
89699
89909
|
const util = this.util;
|
|
89700
89910
|
util.clearActiveCell();
|
|
@@ -90217,6 +90427,7 @@ class ContentBuilder {
|
|
|
90217
90427
|
if (this.cleanEditing) {
|
|
90218
90428
|
this.colTool.columnTool.classList.remove('active');
|
|
90219
90429
|
col.parentNode.querySelector('.is-row-tool').style.display = 'none';
|
|
90430
|
+
col.parentNode.querySelector('.is-col-tool').style.display = 'none';
|
|
90220
90431
|
}
|
|
90221
90432
|
}
|
|
90222
90433
|
|
|
@@ -95805,6 +96016,16 @@ class ContentBox {
|
|
|
95805
96016
|
|
|
95806
96017
|
|
|
95807
96018
|
refreshUIStyle() {
|
|
96019
|
+
// -------
|
|
96020
|
+
|
|
96021
|
+
/*
|
|
96022
|
+
Important Info:
|
|
96023
|
+
With the latest update (the contentbuilder css/themes => the new .is-area & .is-area-2nd general purpose classes),
|
|
96024
|
+
all these (below) settings are not needed.
|
|
96025
|
+
They are kept only to maintain backward compatibility, so that
|
|
96026
|
+
if latest npm is used and the local css files are still using the old version,
|
|
96027
|
+
it won't be a problem.
|
|
96028
|
+
*/
|
|
95808
96029
|
if (!this.editor) return;
|
|
95809
96030
|
|
|
95810
96031
|
if (!this.editor.styleSnippetBackground) {
|
|
@@ -95833,7 +96054,9 @@ class ContentBox {
|
|
|
95833
96054
|
const btns = sidebar.querySelectorAll('button');
|
|
95834
96055
|
btns.forEach(btn => {
|
|
95835
96056
|
btn.style.color = this.editor.styleModalColor;
|
|
95836
|
-
});
|
|
96057
|
+
}); // -------
|
|
96058
|
+
// This is not run on initial page load, because the iframe is still empty
|
|
96059
|
+
|
|
95837
96060
|
const sectionIframe = document.querySelector('#ifrIdeasPanel');
|
|
95838
96061
|
|
|
95839
96062
|
if (sectionIframe.contentWindow.applyParentStyles) {
|
|
@@ -95880,8 +96103,6 @@ class ContentBox {
|
|
|
95880
96103
|
Array.prototype.forEach.call(tools, tool => {
|
|
95881
96104
|
tool.style.display = '';
|
|
95882
96105
|
});
|
|
95883
|
-
let tool = this.doc.querySelector('.is-column-tool');
|
|
95884
|
-
tool.style.display = 'none';
|
|
95885
96106
|
tools = this.doc.querySelectorAll('.is-row-tool');
|
|
95886
96107
|
tools.forEach(tool => {
|
|
95887
96108
|
tool.style.display = 'none';
|
|
@@ -95890,12 +96111,14 @@ class ContentBox {
|
|
|
95890
96111
|
tools.forEach(tool => {
|
|
95891
96112
|
tool.style.opacity = 0;
|
|
95892
96113
|
});
|
|
96114
|
+
tools = this.doc.querySelectorAll('.is-col-tool');
|
|
96115
|
+
tools.forEach(tool => {
|
|
96116
|
+
tool.style.display = 'none';
|
|
96117
|
+
});
|
|
95893
96118
|
}
|
|
95894
96119
|
|
|
95895
96120
|
showTools() {
|
|
95896
96121
|
this.editor.util.repositionColumnTool();
|
|
95897
|
-
let tool = this.doc.querySelector('.is-column-tool');
|
|
95898
|
-
tool.style.display = '';
|
|
95899
96122
|
let tools = this.doc.querySelectorAll('.is-row-tool');
|
|
95900
96123
|
tools.forEach(tool => {
|
|
95901
96124
|
tool.style.display = '';
|
|
@@ -95904,6 +96127,10 @@ class ContentBox {
|
|
|
95904
96127
|
tools.forEach(tool => {
|
|
95905
96128
|
tool.style.opacity = '';
|
|
95906
96129
|
});
|
|
96130
|
+
tools = this.doc.querySelectorAll('.is-col-tool');
|
|
96131
|
+
tools.forEach(tool => {
|
|
96132
|
+
tool.style.display = '';
|
|
96133
|
+
});
|
|
95907
96134
|
}
|
|
95908
96135
|
|
|
95909
96136
|
positionTool(box) {
|