@innovastudio/contentbuilder 1.4.14 → 1.4.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -4549,6 +4549,7 @@ button:focus-visible {
|
|
|
4549
4549
|
.row-active .is-col-tool {
|
|
4550
4550
|
display: flex;
|
|
4551
4551
|
width: auto;
|
|
4552
|
+
padding: 0 !important;
|
|
4552
4553
|
}
|
|
4553
4554
|
|
|
4554
4555
|
.is-builder[rowoutline] .row-active .is-col-tool {
|
|
@@ -4581,6 +4582,10 @@ button:focus-visible {
|
|
|
4581
4582
|
justify-content: center;
|
|
4582
4583
|
align-items: center;
|
|
4583
4584
|
background: #169af7;
|
|
4585
|
+
margin: 0;
|
|
4586
|
+
padding: 0;
|
|
4587
|
+
border: none;
|
|
4588
|
+
border-radius: 0;
|
|
4584
4589
|
}
|
|
4585
4590
|
.is-tool.is-row-tool .row-handle svg {
|
|
4586
4591
|
width: 13px;
|
|
@@ -4656,6 +4661,10 @@ button:focus-visible {
|
|
|
4656
4661
|
justify-content: center;
|
|
4657
4662
|
align-items: center;
|
|
4658
4663
|
background: transparent;
|
|
4664
|
+
margin: 0;
|
|
4665
|
+
padding: 0;
|
|
4666
|
+
border: none;
|
|
4667
|
+
border-radius: 0;
|
|
4659
4668
|
}
|
|
4660
4669
|
.is-builder[gray] .is-tool.is-row-tool .row-handle svg {
|
|
4661
4670
|
width: 11px;
|
|
@@ -6930,7 +6930,7 @@ class Util {
|
|
|
6930
6930
|
${this.getFontPreview()}
|
|
6931
6931
|
</ul>
|
|
6932
6932
|
|
|
6933
|
-
<script
|
|
6933
|
+
<script>
|
|
6934
6934
|
|
|
6935
6935
|
const close = () => {
|
|
6936
6936
|
parent.focus();
|
|
@@ -7173,7 +7173,7 @@ class Util {
|
|
|
7173
7173
|
<li role="option" tabindex="0" data-provider="" data-font-family="serif"><div></div><img src="${path}serif.png"></li>
|
|
7174
7174
|
</ul>
|
|
7175
7175
|
|
|
7176
|
-
<script
|
|
7176
|
+
<script>
|
|
7177
7177
|
|
|
7178
7178
|
const close = () => {
|
|
7179
7179
|
parent.focus();
|
|
@@ -7247,13 +7247,13 @@ class Util {
|
|
|
7247
7247
|
<title>Page</title>
|
|
7248
7248
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7249
7249
|
<meta name="description" content="">
|
|
7250
|
-
<link rel="shortcut icon" href="#"
|
|
7250
|
+
<link rel="shortcut icon" href="#">
|
|
7251
7251
|
|
|
7252
|
-
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"
|
|
7252
|
+
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet">
|
|
7253
7253
|
|
|
7254
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet"
|
|
7255
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet"
|
|
7256
|
-
<script src="[%PATH%]/assets/scripts/glide/glide.js"
|
|
7254
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
|
|
7255
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
|
|
7256
|
+
<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
|
|
7257
7257
|
|
|
7258
7258
|
<style>
|
|
7259
7259
|
.container {
|
|
@@ -7283,13 +7283,13 @@ class Util {
|
|
|
7283
7283
|
<title>Page</title>
|
|
7284
7284
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7285
7285
|
<meta name="description" content="">
|
|
7286
|
-
<link rel="shortcut icon" href="#"
|
|
7286
|
+
<link rel="shortcut icon" href="#">
|
|
7287
7287
|
|
|
7288
|
-
<link href="[%PATH%]/assets/minimalist-blocks/content-tailwind.css" rel="stylesheet"
|
|
7288
|
+
<link href="[%PATH%]/assets/minimalist-blocks/content-tailwind.css" rel="stylesheet">
|
|
7289
7289
|
|
|
7290
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet"
|
|
7291
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet"
|
|
7292
|
-
<script src="[%PATH%]/assets/scripts/glide/glide.js"
|
|
7290
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
|
|
7291
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
|
|
7292
|
+
<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
|
|
7293
7293
|
|
|
7294
7294
|
<link rel="stylesheet" href="[%PATH%]/assets/frameworks/tailwindcss/styles.css">
|
|
7295
7295
|
<!-- To build your own, please see: https://tailwindcss.com/docs/installation -->
|
|
@@ -7322,15 +7322,15 @@ class Util {
|
|
|
7322
7322
|
<title>Page</title>
|
|
7323
7323
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7324
7324
|
<meta name="description" content="">
|
|
7325
|
-
<link rel="shortcut icon" href="#"
|
|
7325
|
+
<link rel="shortcut icon" href="#">
|
|
7326
7326
|
|
|
7327
7327
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
7328
7328
|
|
|
7329
|
-
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"
|
|
7329
|
+
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet">
|
|
7330
7330
|
|
|
7331
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet"
|
|
7332
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet"
|
|
7333
|
-
<script src="[%PATH%]/assets/scripts/glide/glide.js"
|
|
7331
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
|
|
7332
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
|
|
7333
|
+
<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
|
|
7334
7334
|
|
|
7335
7335
|
<style>
|
|
7336
7336
|
.container {margin: 140px auto; max-width: 800px; width:100%; padding:0 35px; box-sizing: border-box;}
|
|
@@ -7359,16 +7359,16 @@ class Util {
|
|
|
7359
7359
|
<title>Page</title>
|
|
7360
7360
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7361
7361
|
<meta name="description" content="">
|
|
7362
|
-
<link rel="shortcut icon" href="#"
|
|
7362
|
+
<link rel="shortcut icon" href="#">
|
|
7363
7363
|
|
|
7364
7364
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
|
|
7365
7365
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation-float.min.css">
|
|
7366
7366
|
|
|
7367
|
-
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"
|
|
7367
|
+
<link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet">
|
|
7368
7368
|
|
|
7369
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet"
|
|
7370
|
-
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet"
|
|
7371
|
-
<script src="[%PATH%]/assets/scripts/glide/glide.js"
|
|
7369
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
|
|
7370
|
+
<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
|
|
7371
|
+
<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
|
|
7372
7372
|
|
|
7373
7373
|
<style>
|
|
7374
7374
|
.container {
|
|
@@ -16316,7 +16316,7 @@ class Snippets {
|
|
|
16316
16316
|
<title></title>
|
|
16317
16317
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
16318
16318
|
<meta name="description" content="">
|
|
16319
|
-
<script src="${snippetUrl}"
|
|
16319
|
+
<script src="${snippetUrl}"></script>
|
|
16320
16320
|
<style>
|
|
16321
16321
|
body {
|
|
16322
16322
|
// background: #fff;
|
|
@@ -57465,7 +57465,7 @@ class RowTool {
|
|
|
57465
57465
|
<label class="label-row-grayscale label-checkbox" for="chkRowGrayscale"><input id="chkRowGrayscale" class="chk-row-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
57466
57466
|
</div>
|
|
57467
57467
|
|
|
57468
|
-
<div class="div-row-wrapcolumns" style="display:
|
|
57468
|
+
<div class="div-row-wrapcolumns" style="display:none;flex-direction:column;padding-bottom:7px">
|
|
57469
57469
|
<div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
|
|
57470
57470
|
<div style="padding-top:3px;padding-bottom:5px;display:flex;align-items: center;">
|
|
57471
57471
|
|
|
@@ -57517,6 +57517,31 @@ class RowTool {
|
|
|
57517
57517
|
</button>
|
|
57518
57518
|
</div>
|
|
57519
57519
|
|
|
57520
|
+
<div class="div-colsperline" style="flex-direction:column">
|
|
57521
|
+
<label style="margin:20px 0 0;display:flex;flex-direction:column">
|
|
57522
|
+
<span style="margin:0 4px 3px 0">${util.out('Columns per Line')}:</span>
|
|
57523
|
+
|
|
57524
|
+
|
|
57525
|
+
<select class="input-numofcols" style="width:50%;display:none">
|
|
57526
|
+
<option value="">Default</option>
|
|
57527
|
+
<option value="2">2 columns per row</option>
|
|
57528
|
+
<option value="3">3 columns per row</option>
|
|
57529
|
+
<option value="4">4 columns per row</option>
|
|
57530
|
+
<option value="5">5 columns per row</option>
|
|
57531
|
+
<option value="6">6 columns per row</option>
|
|
57532
|
+
</select>
|
|
57533
|
+
</label>
|
|
57534
|
+
<div class="flex">
|
|
57535
|
+
<button title="1" class="input-colsperline on" data-value="1" style="width:40px;height:25px;">1</button>
|
|
57536
|
+
<button title="2" class="input-colsperline" data-value="2" style="width:40px;height:25px;">2</button>
|
|
57537
|
+
<button title="3" class="input-colsperline" data-value="3" style="width:40px;height:25px;">3</button>
|
|
57538
|
+
<button title="4" class="input-colsperline" data-value="4" style="width:40px;height:25px;">4</button>
|
|
57539
|
+
<button title="5" class="input-colsperline" data-value="5" style="width:40px;height:25px;">5</button>
|
|
57540
|
+
<button title="6" class="input-colsperline" data-value="6" style="width:40px;height:25px;">6</button>
|
|
57541
|
+
<button title="${util.out('Default')}" class="input-colsperline" data-value="" style="width:120px;height:25px;">${util.out('Default')}</button>
|
|
57542
|
+
</div>
|
|
57543
|
+
</div>
|
|
57544
|
+
|
|
57520
57545
|
<div id="divReverseColumns" style="diplay:none">
|
|
57521
57546
|
<label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox" style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
|
|
57522
57547
|
</div>
|
|
@@ -57552,7 +57577,9 @@ class RowTool {
|
|
|
57552
57577
|
this.imageSource = imageSource;
|
|
57553
57578
|
this.imageAdjust = imageAdjust;
|
|
57554
57579
|
this.imageAdjust2 = imageAdjust2;
|
|
57555
|
-
this.divRowGeneral = builderStuff.querySelector('#divRowGeneral');
|
|
57580
|
+
this.divRowGeneral = builderStuff.querySelector('#divRowGeneral');
|
|
57581
|
+
const divColsPerLine = rowSettings.querySelector('.div-colsperline');
|
|
57582
|
+
if (!this.builder.enableColumnsPerLine) divColsPerLine.style.display = 'none'; // Open Row Settings
|
|
57556
57583
|
|
|
57557
57584
|
let elm = rowMore.querySelector('.row-settings');
|
|
57558
57585
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
@@ -57732,66 +57759,30 @@ class RowTool {
|
|
|
57732
57759
|
|
|
57733
57760
|
|
|
57734
57761
|
this.builder.opts.onChange();
|
|
57735
|
-
}); // Breakpoint
|
|
57736
|
-
|
|
57737
|
-
rowSettings.querySelectorAll('input[name="boxWrap"]').forEach(input => {
|
|
57738
|
-
input.addEventListener('change', () => {
|
|
57739
|
-
let row = util.rowSelected();
|
|
57740
|
-
if (!row) return;
|
|
57741
|
-
this.builder.uo.saveForUndo();
|
|
57742
|
-
|
|
57743
|
-
if (input.value === 'xs') {
|
|
57744
|
-
row.classList.remove('sm-wrap');
|
|
57745
|
-
row.classList.remove('md-wrap');
|
|
57746
|
-
} else if (input.value === 'sm') {
|
|
57747
|
-
row.classList.remove('md-wrap');
|
|
57748
|
-
row.classList.add('sm-wrap');
|
|
57749
|
-
} else if (input.value === 'md') {
|
|
57750
|
-
row.classList.remove('sm-wrap');
|
|
57751
|
-
row.classList.add('md-wrap');
|
|
57752
|
-
} //Trigger Change event
|
|
57753
|
-
|
|
57754
|
-
|
|
57755
|
-
this.builder.opts.onChange();
|
|
57756
|
-
});
|
|
57757
57762
|
});
|
|
57758
|
-
|
|
57759
|
-
|
|
57760
|
-
|
|
57761
|
-
|
|
57762
|
-
|
|
57763
|
-
|
|
57764
|
-
|
|
57765
|
-
|
|
57766
|
-
|
|
57767
|
-
|
|
57768
|
-
|
|
57769
|
-
|
|
57770
|
-
|
|
57771
|
-
|
|
57772
|
-
|
|
57773
|
-
|
|
57774
|
-
|
|
57775
|
-
|
|
57776
|
-
|
|
57777
|
-
}
|
|
57778
|
-
|
|
57779
|
-
|
|
57780
|
-
|
|
57781
|
-
} else {
|
|
57782
|
-
row.classList.remove('md-column-reverse');
|
|
57783
|
-
}
|
|
57784
|
-
} else if (target === '') {
|
|
57785
|
-
if (chkReverseBoxes.checked) {
|
|
57786
|
-
row.classList.add('desktop-column-reverse');
|
|
57787
|
-
} else {
|
|
57788
|
-
row.classList.remove('desktop-column-reverse');
|
|
57789
|
-
}
|
|
57790
|
-
} //Trigger Change event
|
|
57791
|
-
|
|
57792
|
-
|
|
57793
|
-
this.builder.settings.onChange();
|
|
57794
|
-
}); // Responsive Visibility
|
|
57763
|
+
/*
|
|
57764
|
+
// Breakpoint
|
|
57765
|
+
rowSettings.querySelectorAll('input[name="boxWrap"]').forEach((input) => {
|
|
57766
|
+
input.addEventListener('change', ()=>{
|
|
57767
|
+
let row = util.rowSelected();
|
|
57768
|
+
if(!row) return;
|
|
57769
|
+
this.builder.uo.saveForUndo();
|
|
57770
|
+
if(input.value==='xs') {
|
|
57771
|
+
row.classList.remove('sm-wrap');
|
|
57772
|
+
row.classList.remove('md-wrap');
|
|
57773
|
+
} else if(input.value==='sm') {
|
|
57774
|
+
row.classList.remove('md-wrap');
|
|
57775
|
+
row.classList.add('sm-wrap');
|
|
57776
|
+
} else if(input.value==='md') {
|
|
57777
|
+
row.classList.remove('sm-wrap');
|
|
57778
|
+
row.classList.add('md-wrap');
|
|
57779
|
+
}
|
|
57780
|
+
//Trigger Change event
|
|
57781
|
+
this.builder.opts.onChange();
|
|
57782
|
+
});
|
|
57783
|
+
});
|
|
57784
|
+
*/
|
|
57785
|
+
// Responsive Visibility
|
|
57795
57786
|
|
|
57796
57787
|
let btns = this.rowSettings.querySelectorAll('.input-device');
|
|
57797
57788
|
btns.forEach(btn => {
|
|
@@ -57853,6 +57844,98 @@ class RowTool {
|
|
|
57853
57844
|
btnHidden.classList.add('on'); //Trigger Change event
|
|
57854
57845
|
|
|
57855
57846
|
this.builder.opts.onChange();
|
|
57847
|
+
}); // Cols per line
|
|
57848
|
+
|
|
57849
|
+
btns = this.rowSettings.querySelectorAll('.input-colsperline');
|
|
57850
|
+
btns.forEach(btn => {
|
|
57851
|
+
btn.addEventListener('click', () => {
|
|
57852
|
+
let row = util.rowSelected();
|
|
57853
|
+
if (!row) return;
|
|
57854
|
+
this.builder.uo.saveForUndo();
|
|
57855
|
+
let elms = this.rowSettings.querySelectorAll('.input-colsperline');
|
|
57856
|
+
elms.forEach(elm => {
|
|
57857
|
+
elm.classList.remove('on');
|
|
57858
|
+
});
|
|
57859
|
+
btn.classList.add('on');
|
|
57860
|
+
let val = btn.getAttribute('data-value');
|
|
57861
|
+
let divTarget = this.rowSettings.querySelector('.div-target');
|
|
57862
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
57863
|
+
|
|
57864
|
+
if (target === 'xs') {
|
|
57865
|
+
row.classList.remove('xs-items-1');
|
|
57866
|
+
row.classList.remove('xs-items-2');
|
|
57867
|
+
row.classList.remove('xs-items-3');
|
|
57868
|
+
row.classList.remove('xs-items-4');
|
|
57869
|
+
row.classList.remove('xs-items-5');
|
|
57870
|
+
row.classList.remove('xs-items-6');
|
|
57871
|
+
if (val !== '') row.classList.add(`xs-items-${val}`);
|
|
57872
|
+
} else if (target === 'sm') {
|
|
57873
|
+
row.classList.remove('sm-items-1');
|
|
57874
|
+
row.classList.remove('sm-items-2');
|
|
57875
|
+
row.classList.remove('sm-items-3');
|
|
57876
|
+
row.classList.remove('sm-items-4');
|
|
57877
|
+
row.classList.remove('sm-items-5');
|
|
57878
|
+
row.classList.remove('sm-items-6');
|
|
57879
|
+
if (val !== '') row.classList.add(`sm-items-${val}`);
|
|
57880
|
+
} else if (target === 'md') {
|
|
57881
|
+
row.classList.remove('md-items-1');
|
|
57882
|
+
row.classList.remove('md-items-2');
|
|
57883
|
+
row.classList.remove('md-items-3');
|
|
57884
|
+
row.classList.remove('md-items-4');
|
|
57885
|
+
row.classList.remove('md-items-5');
|
|
57886
|
+
row.classList.remove('md-items-6');
|
|
57887
|
+
if (val !== '') row.classList.add(`md-items-${val}`);
|
|
57888
|
+
} else if (target === '') {
|
|
57889
|
+
row.classList.remove('desktop-items-1');
|
|
57890
|
+
row.classList.remove('desktop-items-2');
|
|
57891
|
+
row.classList.remove('desktop-items-3');
|
|
57892
|
+
row.classList.remove('desktop-items-4');
|
|
57893
|
+
row.classList.remove('desktop-items-5');
|
|
57894
|
+
row.classList.remove('desktop-items-6');
|
|
57895
|
+
if (val !== '') row.classList.add(`desktop-items-${val}`);
|
|
57896
|
+
} //Trigger Change event
|
|
57897
|
+
|
|
57898
|
+
|
|
57899
|
+
this.builder.settings.onChange();
|
|
57900
|
+
});
|
|
57901
|
+
}); // Reverse
|
|
57902
|
+
|
|
57903
|
+
const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
|
|
57904
|
+
chkReverseColumns.addEventListener('click', () => {
|
|
57905
|
+
let row = util.rowSelected();
|
|
57906
|
+
if (!row) return;
|
|
57907
|
+
this.builder.uo.saveForUndo();
|
|
57908
|
+
let divTarget = this.rowSettings.querySelector('.div-target');
|
|
57909
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
57910
|
+
|
|
57911
|
+
if (target === 'xs') {
|
|
57912
|
+
if (chkReverseColumns.checked) {
|
|
57913
|
+
row.classList.add('xs-column-reverse');
|
|
57914
|
+
} else {
|
|
57915
|
+
row.classList.remove('xs-column-reverse');
|
|
57916
|
+
}
|
|
57917
|
+
} else if (target === 'sm') {
|
|
57918
|
+
if (chkReverseColumns.checked) {
|
|
57919
|
+
row.classList.add('sm-column-reverse');
|
|
57920
|
+
} else {
|
|
57921
|
+
row.classList.remove('sm-column-reverse');
|
|
57922
|
+
}
|
|
57923
|
+
} else if (target === 'md') {
|
|
57924
|
+
if (chkReverseColumns.checked) {
|
|
57925
|
+
row.classList.add('md-column-reverse');
|
|
57926
|
+
} else {
|
|
57927
|
+
row.classList.remove('md-column-reverse');
|
|
57928
|
+
}
|
|
57929
|
+
} else if (target === '') {
|
|
57930
|
+
if (chkReverseColumns.checked) {
|
|
57931
|
+
row.classList.add('desktop-column-reverse');
|
|
57932
|
+
} else {
|
|
57933
|
+
row.classList.remove('desktop-column-reverse');
|
|
57934
|
+
}
|
|
57935
|
+
} //Trigger Change event
|
|
57936
|
+
|
|
57937
|
+
|
|
57938
|
+
this.builder.settings.onChange();
|
|
57856
57939
|
}); //More
|
|
57857
57940
|
|
|
57858
57941
|
let inpRowId = rowSettings.querySelector('.input-row-id');
|
|
@@ -58022,21 +58105,34 @@ class RowTool {
|
|
|
58022
58105
|
let divVisibility = this.rowSettings.querySelector('.div-visibility');
|
|
58023
58106
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
58024
58107
|
let valVisibility = this.builder.responsive.getVisibility(row, target);
|
|
58025
|
-
this.builder.responsive.showVisibility(divVisibility, valVisibility); //
|
|
58108
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility); // const divColsPerLine = this.rowSettings.querySelector('.div-colsperline');
|
|
58109
|
+
|
|
58110
|
+
let btns = this.rowSettings.querySelectorAll('.input-colsperline');
|
|
58111
|
+
btns.forEach(btn => {
|
|
58112
|
+
btn.classList.remove('on');
|
|
58113
|
+
}); // Column reverse
|
|
58026
58114
|
|
|
58027
58115
|
let valReverse = false;
|
|
58028
58116
|
|
|
58029
58117
|
if (target === 'xs') {
|
|
58030
58118
|
valReverse = row.classList.contains('xs-column-reverse');
|
|
58119
|
+
this.rowSettings.querySelector('.input-colsperline[data-value=""]').style.display = 'none';
|
|
58120
|
+
if (row.classList.contains('xs-items-1')) this.rowSettings.querySelector('.input-colsperline[data-value="1"]').classList.add('on');else if (row.classList.contains('xs-items-2')) this.rowSettings.querySelector('.input-colsperline[data-value="2"]').classList.add('on');else if (row.classList.contains('xs-items-3')) this.rowSettings.querySelector('.input-colsperline[data-value="3"]').classList.add('on');else if (row.classList.contains('xs-items-4')) this.rowSettings.querySelector('.input-colsperline[data-value="4"]').classList.add('on');else if (row.classList.contains('xs-items-5')) this.rowSettings.querySelector('.input-colsperline[data-value="5"]').classList.add('on');else if (row.classList.contains('xs-items-6')) this.rowSettings.querySelector('.input-colsperline[data-value="6"]').classList.add('on');else this.rowSettings.querySelector('.input-colsperline[data-value="1"]').classList.add('on');
|
|
58031
58121
|
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
|
58032
58122
|
} else if (target === 'sm') {
|
|
58033
58123
|
valReverse = row.classList.contains('sm-column-reverse');
|
|
58124
|
+
this.rowSettings.querySelector('.input-colsperline[data-value=""]').style.display = 'flex';
|
|
58125
|
+
if (row.classList.contains('sm-items-1')) this.rowSettings.querySelector('.input-colsperline[data-value="1"]').classList.add('on');else if (row.classList.contains('sm-items-2')) this.rowSettings.querySelector('.input-colsperline[data-value="2"]').classList.add('on');else if (row.classList.contains('sm-items-3')) this.rowSettings.querySelector('.input-colsperline[data-value="3"]').classList.add('on');else if (row.classList.contains('sm-items-4')) this.rowSettings.querySelector('.input-colsperline[data-value="4"]').classList.add('on');else if (row.classList.contains('sm-items-5')) this.rowSettings.querySelector('.input-colsperline[data-value="5"]').classList.add('on');else if (row.classList.contains('sm-items-6')) this.rowSettings.querySelector('.input-colsperline[data-value="6"]').classList.add('on');else this.rowSettings.querySelector('.input-colsperline[data-value=""]').classList.add('on');
|
|
58034
58126
|
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
|
58035
58127
|
} else if (target === 'md') {
|
|
58036
58128
|
valReverse = row.classList.contains('md-column-reverse');
|
|
58129
|
+
this.rowSettings.querySelector('.input-colsperline[data-value=""]').style.display = 'flex';
|
|
58130
|
+
if (row.classList.contains('md-items-1')) this.rowSettings.querySelector('.input-colsperline[data-value="1"]').classList.add('on');else if (row.classList.contains('md-items-2')) this.rowSettings.querySelector('.input-colsperline[data-value="2"]').classList.add('on');else if (row.classList.contains('md-items-3')) this.rowSettings.querySelector('.input-colsperline[data-value="3"]').classList.add('on');else if (row.classList.contains('md-items-4')) this.rowSettings.querySelector('.input-colsperline[data-value="4"]').classList.add('on');else if (row.classList.contains('md-items-5')) this.rowSettings.querySelector('.input-colsperline[data-value="5"]').classList.add('on');else if (row.classList.contains('md-items-6')) this.rowSettings.querySelector('.input-colsperline[data-value="6"]').classList.add('on');else this.rowSettings.querySelector('.input-colsperline[data-value=""]').classList.add('on');
|
|
58037
58131
|
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
|
58038
58132
|
} else {
|
|
58039
58133
|
valReverse = row.classList.contains('desktop-column-reverse');
|
|
58134
|
+
this.rowSettings.querySelector('.input-colsperline[data-value=""]').style.display = 'flex';
|
|
58135
|
+
if (row.classList.contains('desktop-items-1')) this.rowSettings.querySelector('.input-colsperline[data-value="1"]').classList.add('on');else if (row.classList.contains('desktop-items-2')) this.rowSettings.querySelector('.input-colsperline[data-value="2"]').classList.add('on');else if (row.classList.contains('desktop-items-3')) this.rowSettings.querySelector('.input-colsperline[data-value="3"]').classList.add('on');else if (row.classList.contains('desktop-items-4')) this.rowSettings.querySelector('.input-colsperline[data-value="4"]').classList.add('on');else if (row.classList.contains('desktop-items-5')) this.rowSettings.querySelector('.input-colsperline[data-value="5"]').classList.add('on');else if (row.classList.contains('desktop-items-6')) this.rowSettings.querySelector('.input-colsperline[data-value="6"]').classList.add('on');else this.rowSettings.querySelector('.input-colsperline[data-value=""]').classList.add('on');
|
|
58040
58136
|
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
|
58041
58137
|
}
|
|
58042
58138
|
|
|
@@ -58363,14 +58459,17 @@ class RowTool {
|
|
|
58363
58459
|
} else {
|
|
58364
58460
|
divReverseBoxes.style.display = 'none';
|
|
58365
58461
|
}
|
|
58366
|
-
|
|
58367
|
-
|
|
58368
|
-
|
|
58462
|
+
/*
|
|
58463
|
+
// Breakpoint
|
|
58464
|
+
if(actualRow.classList.contains('md-wrap')) {
|
|
58465
|
+
this.rowSettings.querySelector('#rdoColMdWrap').checked = true;
|
|
58369
58466
|
} else if (actualRow.classList.contains('sm-wrap')) {
|
|
58370
|
-
|
|
58467
|
+
this.rowSettings.querySelector('#rdoColSmWrap').checked = true;
|
|
58371
58468
|
} else {
|
|
58372
|
-
|
|
58373
|
-
}
|
|
58469
|
+
this.rowSettings.querySelector('#rdoColXsWrap').checked = true;
|
|
58470
|
+
}
|
|
58471
|
+
*/
|
|
58472
|
+
//More
|
|
58374
58473
|
|
|
58375
58474
|
|
|
58376
58475
|
let inpRowId = this.rowSettings.querySelector('.input-row-id');
|
|
@@ -61077,7 +61176,8 @@ class ColumnTool {
|
|
|
61077
61176
|
const dom = this.dom; //---- New Col Tool ----
|
|
61078
61177
|
|
|
61079
61178
|
this.columnTool = col.parentNode.querySelector('.is-col-tool');
|
|
61080
|
-
this.columnTool.style.left = col.offsetLeft + 'px';
|
|
61179
|
+
this.columnTool.style.left = col.offsetLeft + 'px';
|
|
61180
|
+
this.columnTool.style.top = col.offsetTop + 'px'; //---- /New Col Tool ----
|
|
61081
61181
|
|
|
61082
61182
|
const btnIncrease = this.columnMore.querySelector('.cell-increase');
|
|
61083
61183
|
const btnDecrease = this.columnMore.querySelector('.cell-decrease');
|
|
@@ -61716,15 +61816,49 @@ class ElementGeneralStyles {
|
|
|
61716
61816
|
}
|
|
61717
61817
|
}
|
|
61718
61818
|
|
|
61719
|
-
this.realtimeVisibility(elm);
|
|
61819
|
+
this.realtimeVisibility(elm, true);
|
|
61720
61820
|
}
|
|
61721
61821
|
|
|
61722
|
-
realtimeVisibility(row) {
|
|
61822
|
+
realtimeVisibility(row, initialOpen) {
|
|
61823
|
+
if (initialOpen) {
|
|
61824
|
+
const builderStuff = this.builder.builderStuff;
|
|
61825
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
|
61826
|
+
|
|
61827
|
+
if (modal) {
|
|
61828
|
+
let elms = this.panelStuff.querySelectorAll('.input-device');
|
|
61829
|
+
elms.forEach(elm => {
|
|
61830
|
+
elm.classList.remove('on');
|
|
61831
|
+
});
|
|
61832
|
+
|
|
61833
|
+
if (modal.classList.contains('is-screen-1920')) {
|
|
61834
|
+
this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
|
|
61835
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
|
61836
|
+
this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
|
|
61837
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
|
61838
|
+
this.panelStuff.querySelector('.input-device[data-value="md"]').classList.add('on');
|
|
61839
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
|
61840
|
+
this.panelStuff.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
|
61841
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
|
61842
|
+
this.panelStuff.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
|
61843
|
+
}
|
|
61844
|
+
}
|
|
61845
|
+
}
|
|
61846
|
+
|
|
61723
61847
|
let divTarget = this.panelStuff.querySelector('.div-target');
|
|
61724
61848
|
let divVisibility = this.panelStuff.querySelector('.div-visibility');
|
|
61725
61849
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
61726
61850
|
let valVisibility = this.builder.responsive.getVisibility(row, target);
|
|
61727
|
-
this.builder.responsive.showVisibility(divVisibility, valVisibility);
|
|
61851
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility); // Live Preview Sync
|
|
61852
|
+
|
|
61853
|
+
if (target === 'xs') {
|
|
61854
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
|
61855
|
+
} else if (target === 'sm') {
|
|
61856
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
|
61857
|
+
} else if (target === 'md') {
|
|
61858
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
|
61859
|
+
} else {
|
|
61860
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
|
61861
|
+
}
|
|
61728
61862
|
}
|
|
61729
61863
|
|
|
61730
61864
|
}
|
|
@@ -72692,7 +72826,7 @@ class Rte {
|
|
|
72692
72826
|
<title>Fonts</title>
|
|
72693
72827
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
72694
72828
|
<meta name="description" content="">
|
|
72695
|
-
<link href="${path}css/ionicons.min.css" rel="stylesheet"
|
|
72829
|
+
<link href="${path}css/ionicons.min.css" rel="stylesheet">
|
|
72696
72830
|
<style id="mainstyle">
|
|
72697
72831
|
html, body {height:100%}
|
|
72698
72832
|
body {overflow:hidden;margin:0;
|
|
@@ -72807,7 +72941,7 @@ class Rte {
|
|
|
72807
72941
|
${this.getIcons()}
|
|
72808
72942
|
</div>
|
|
72809
72943
|
|
|
72810
|
-
<script
|
|
72944
|
+
<script>
|
|
72811
72945
|
const setValue = (elm) => {
|
|
72812
72946
|
if(!elm.className) elm = elm.childNodes[0];
|
|
72813
72947
|
parent._cb.addIcon(elm.className);
|
|
@@ -73001,7 +73135,7 @@ class Rte {
|
|
|
73001
73135
|
element = element.parentNode;
|
|
73002
73136
|
}
|
|
73003
73137
|
|
|
73004
|
-
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + o + '" rel="stylesheet" property="stylesheet"
|
|
73138
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + o + '" rel="stylesheet" property="stylesheet">');
|
|
73005
73139
|
}
|
|
73006
73140
|
}
|
|
73007
73141
|
|
|
@@ -73195,9 +73329,9 @@ class Rte {
|
|
|
73195
73329
|
if (this.builder.fontPath) {
|
|
73196
73330
|
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
73197
73331
|
cssUrl = this.builder.fontPath + cssFileName;
|
|
73198
|
-
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet"
|
|
73332
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet">`);
|
|
73199
73333
|
} else {
|
|
73200
|
-
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet"
|
|
73334
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet">');
|
|
73201
73335
|
}
|
|
73202
73336
|
}
|
|
73203
73337
|
}
|
|
@@ -73218,7 +73352,7 @@ class Rte {
|
|
|
73218
73352
|
if (this.builder.fontPath) {
|
|
73219
73353
|
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
73220
73354
|
cssUrl = this.builder.fontPath + cssFileName;
|
|
73221
|
-
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet"
|
|
73355
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet">`);
|
|
73222
73356
|
}
|
|
73223
73357
|
}
|
|
73224
73358
|
}
|
|
@@ -76960,7 +77094,7 @@ class LivePreview {
|
|
|
76960
77094
|
|
|
76961
77095
|
for (let i = 0; i < styles.length; i++) {
|
|
76962
77096
|
if (styles[i].href.indexOf('.css') != -1 && styles[i].href.indexOf('contentbox.css') == -1 && styles[i].href.indexOf('contentbuilder.css') == -1) {
|
|
76963
|
-
csslinks += '<link href="' + styles[i].href + '" rel="stylesheet"
|
|
77097
|
+
csslinks += '<link href="' + styles[i].href + '" rel="stylesheet">';
|
|
76964
77098
|
}
|
|
76965
77099
|
}
|
|
76966
77100
|
|
|
@@ -76972,7 +77106,7 @@ class LivePreview {
|
|
|
76972
77106
|
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
76973
77107
|
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
76974
77108
|
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('monaco-editor') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
76975
|
-
jsincludes1 += '<script src="' + scripts[i].src + '"
|
|
77109
|
+
jsincludes1 += '<script src="' + scripts[i].src + '"></script>';
|
|
76976
77110
|
}
|
|
76977
77111
|
}
|
|
76978
77112
|
|
|
@@ -76984,7 +77118,7 @@ class LivePreview {
|
|
|
76984
77118
|
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
76985
77119
|
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
76986
77120
|
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('monaco-editor') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
76987
|
-
jsincludes2 += '<script src="' + scripts[i].src + '"
|
|
77121
|
+
jsincludes2 += '<script src="' + scripts[i].src + '"></script>';
|
|
76988
77122
|
}
|
|
76989
77123
|
}
|
|
76990
77124
|
|
|
@@ -76994,7 +77128,7 @@ class LivePreview {
|
|
|
76994
77128
|
let content = this.builder.html();
|
|
76995
77129
|
doc = iframe.contentWindow.document;
|
|
76996
77130
|
doc.open();
|
|
76997
|
-
doc.write('<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet"
|
|
77131
|
+
doc.write('<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet">' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>');
|
|
76998
77132
|
doc.close();
|
|
76999
77133
|
}
|
|
77000
77134
|
|
|
@@ -77583,7 +77717,8 @@ class ContentBuilder {
|
|
|
77583
77717
|
useCssClasses: true,
|
|
77584
77718
|
useButtonPlugin: false,
|
|
77585
77719
|
enableDragResize: true,
|
|
77586
|
-
simpleTextSettings: false
|
|
77720
|
+
simpleTextSettings: false,
|
|
77721
|
+
enableColumnsPerLine: true
|
|
77587
77722
|
}; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
|
|
77588
77723
|
|
|
77589
77724
|
this.opts = Object.assign(this, defaults, opts);
|
|
@@ -79595,7 +79730,6 @@ class ContentBuilder {
|
|
|
79595
79730
|
if (this.filesAdded.indexOf('[' + filename + ']') === -1) {
|
|
79596
79731
|
var inc = document.createElement('link');
|
|
79597
79732
|
inc.setAttribute('rel', 'stylesheet');
|
|
79598
|
-
inc.setAttribute('type', 'text/css');
|
|
79599
79733
|
inc.setAttribute('href', filename);
|
|
79600
79734
|
document.getElementsByTagName('head')[0].appendChild(inc);
|
|
79601
79735
|
this.filesAdded += '[' + filename + ']';
|