@innovastudio/contentbox 1.5.13 → 1.5.14
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@innovastudio/contentbox",
|
3
3
|
"type": "module",
|
4
|
-
"version": "1.5.
|
4
|
+
"version": "1.5.14",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"files": [
|
@@ -46,7 +46,7 @@
|
|
46
46
|
"webpack-dev-server": "^4.0.0"
|
47
47
|
},
|
48
48
|
"dependencies": {
|
49
|
-
"@innovastudio/contentbuilder": "^1.4.
|
49
|
+
"@innovastudio/contentbuilder": "^1.4.15",
|
50
50
|
"js-beautify": "^1.14.0"
|
51
51
|
}
|
52
52
|
}
|
@@ -75,7 +75,7 @@
|
|
75
75
|
background: rgba(255, 255, 255, 0.97);
|
76
76
|
color: rgba(0, 0, 0, 0.8);
|
77
77
|
border-right: rgba(0, 0, 0, 0.05) 1px solid;
|
78
|
-
z-index:
|
78
|
+
z-index: 10006;
|
79
79
|
opacity: 0.0001;
|
80
80
|
}
|
81
81
|
#_cbhtml .is-sidebar button.is-sidebar-button {
|
@@ -109,7 +109,7 @@
|
|
109
109
|
}
|
110
110
|
|
111
111
|
.is-sidebar-content {
|
112
|
-
z-index:
|
112
|
+
z-index: 10005;
|
113
113
|
position: fixed;
|
114
114
|
top: 0;
|
115
115
|
left: 0;
|
@@ -676,7 +676,7 @@ class SideBar {
|
|
676
676
|
*/
|
677
677
|
|
678
678
|
|
679
|
-
html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:
|
679
|
+
html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10006;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
680
680
|
<div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">
|
681
681
|
<div class="is-label"><span>${out('Zoom')}</span>:</div>
|
682
682
|
<div style="padding-top:4px">
|
@@ -4046,12 +4046,15 @@ class EditSection {
|
|
4046
4046
|
<div class="div-section-wrapboxes" style="display:flex;flex-direction:column;">
|
4047
4047
|
<div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
|
4048
4048
|
<div style="padding-top:3px;display:flex;align-items: center;">
|
4049
|
-
|
4050
|
-
|
4051
|
-
|
4052
|
-
|
4053
|
-
|
4054
|
-
|
4049
|
+
|
4050
|
+
<label class="flex mr-5" title="${out('Tablet (Landscape)')}">
|
4051
|
+
<input type="radio" id="rdoBoxMdWrap" name="boxWrap" value="md">
|
4052
|
+
<svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
4053
|
+
</label>
|
4054
|
+
<label class="flex" title="${out('Tablet (Portrait)')}">
|
4055
|
+
<input type="radio" id="rdoBoxSmWrap" name="boxWrap" value="sm">
|
4056
|
+
<svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
4057
|
+
</label>
|
4055
4058
|
</div>
|
4056
4059
|
</div>
|
4057
4060
|
|
@@ -4475,42 +4478,22 @@ class EditSection {
|
|
4475
4478
|
}
|
4476
4479
|
}); // Breakpoint
|
4477
4480
|
|
4478
|
-
|
4479
|
-
|
4480
|
-
btn.addEventListener('click', () => {
|
4481
|
+
modalEditSection.querySelectorAll('input[name="boxWrap"]').forEach(input => {
|
4482
|
+
input.addEventListener('change', () => {
|
4481
4483
|
let section = this.builder.activeSection;
|
4482
4484
|
if (!section) return;
|
4483
4485
|
this.builder.editor.saveForUndo();
|
4484
|
-
let elms = modalEditSection.querySelectorAll('.input-breakpoint');
|
4485
|
-
elms.forEach(elm => {
|
4486
|
-
elm.classList.remove('on');
|
4487
|
-
});
|
4488
|
-
btn.classList.add('on');
|
4489
|
-
let target = btn.getAttribute('data-value');
|
4490
4486
|
|
4491
|
-
if (
|
4487
|
+
if (input.value === 'sm') {
|
4492
4488
|
section.classList.remove('md-wrap');
|
4493
|
-
} else if (
|
4489
|
+
} else if (input.value === 'md') {
|
4494
4490
|
section.classList.add('md-wrap');
|
4495
4491
|
} //Trigger Change event
|
4496
4492
|
|
4497
4493
|
|
4498
4494
|
this.builder.onChange();
|
4499
4495
|
});
|
4500
|
-
});
|
4501
|
-
// chkReverseBoxes.addEventListener('click', ()=>{
|
4502
|
-
// let section = this.builder.activeSection;
|
4503
|
-
// if(!section) return;
|
4504
|
-
// this.builder.editor.saveForUndo();
|
4505
|
-
// if(chkReverseBoxes.checked) {
|
4506
|
-
// section.classList.add('box-reverse');
|
4507
|
-
// } else {
|
4508
|
-
// section.classList.remove('box-reverse');
|
4509
|
-
// }
|
4510
|
-
// //Trigger Change event
|
4511
|
-
// this.builder.settings.onChange();
|
4512
|
-
// });
|
4513
|
-
|
4496
|
+
});
|
4514
4497
|
const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
|
4515
4498
|
chkReverseBoxes.addEventListener('click', () => {
|
4516
4499
|
let section = this.builder.activeSection;
|
@@ -4551,7 +4534,7 @@ class EditSection {
|
|
4551
4534
|
this.builder.settings.onChange();
|
4552
4535
|
}); // Section Visibility
|
4553
4536
|
|
4554
|
-
btns = modalEditSection.querySelectorAll('.input-device');
|
4537
|
+
let btns = modalEditSection.querySelectorAll('.input-device');
|
4555
4538
|
btns.forEach(btn => {
|
4556
4539
|
btn.addEventListener('click', () => {
|
4557
4540
|
let section = this.builder.activeSection;
|
@@ -4615,7 +4598,31 @@ class EditSection {
|
|
4615
4598
|
} // Section Visibility
|
4616
4599
|
|
4617
4600
|
|
4618
|
-
realtimeVisibility(section) {
|
4601
|
+
realtimeVisibility(section, initialOpen) {
|
4602
|
+
if (initialOpen) {
|
4603
|
+
const builderStuff = this.builder.builderStuff;
|
4604
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
4605
|
+
|
4606
|
+
if (modal) {
|
4607
|
+
let elms = this.modalEditSection.querySelectorAll('.input-device');
|
4608
|
+
elms.forEach(elm => {
|
4609
|
+
elm.classList.remove('on');
|
4610
|
+
});
|
4611
|
+
|
4612
|
+
if (modal.classList.contains('is-screen-1920')) {
|
4613
|
+
this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
|
4614
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
4615
|
+
this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
|
4616
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
4617
|
+
this.modalEditSection.querySelector('.input-device[data-value="md"]').classList.add('on');
|
4618
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
4619
|
+
this.modalEditSection.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
4620
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
4621
|
+
this.modalEditSection.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
4622
|
+
}
|
4623
|
+
}
|
4624
|
+
}
|
4625
|
+
|
4619
4626
|
let divTarget = this.modalEditSection.querySelector('.div-target');
|
4620
4627
|
let divVisibility = this.modalEditSection.querySelector('.div-visibility');
|
4621
4628
|
let target = this.builder.editor.responsive.readTarget(divTarget);
|
@@ -4626,12 +4633,16 @@ class EditSection {
|
|
4626
4633
|
|
4627
4634
|
if (target === 'xs') {
|
4628
4635
|
valReverse = section.classList.contains('xs-box-reverse');
|
4636
|
+
if (!initialOpen) this.builder.editor.livePreview.resizePreview(375);
|
4629
4637
|
} else if (target === 'sm') {
|
4630
4638
|
valReverse = section.classList.contains('sm-box-reverse');
|
4639
|
+
if (!initialOpen) this.builder.editor.livePreview.resizePreview(768);
|
4631
4640
|
} else if (target === 'md') {
|
4632
4641
|
valReverse = section.classList.contains('md-box-reverse');
|
4642
|
+
if (!initialOpen) this.builder.editor.livePreview.resizePreview(1024);
|
4633
4643
|
} else {
|
4634
4644
|
valReverse = section.classList.contains('desktop-box-reverse');
|
4645
|
+
if (!initialOpen) this.builder.editor.livePreview.resizePreview(1920);
|
4635
4646
|
}
|
4636
4647
|
|
4637
4648
|
const chkReverseBoxes = this.modalEditSection.querySelector('#chkReverseBoxes');
|
@@ -4841,16 +4852,12 @@ class EditSection {
|
|
4841
4852
|
} // Section Visibility
|
4842
4853
|
|
4843
4854
|
|
4844
|
-
this.realtimeVisibility(activeSection);
|
4845
|
-
btns = modalEditSection.querySelectorAll('.input-breakpoint');
|
4846
|
-
btns.forEach(btn => {
|
4847
|
-
dom$m.removeClass(btn, 'on');
|
4848
|
-
});
|
4855
|
+
this.realtimeVisibility(activeSection, true);
|
4849
4856
|
|
4850
4857
|
if (activeSection.classList.contains('md-wrap')) {
|
4851
|
-
|
4858
|
+
modalEditSection.querySelector('#rdoBoxMdWrap').checked = true;
|
4852
4859
|
} else {
|
4853
|
-
|
4860
|
+
modalEditSection.querySelector('#rdoBoxSmWrap').checked = true;
|
4854
4861
|
}
|
4855
4862
|
|
4856
4863
|
const divReverseBoxes = modalEditSection.querySelector('#divReverseBoxes');
|
@@ -71761,16 +71768,20 @@ class RowTool {
|
|
71761
71768
|
|
71762
71769
|
<div class="div-row-wrapcolumns" style="display:flex;flex-direction:column;padding-bottom:7px">
|
71763
71770
|
<div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
|
71764
|
-
<div style="padding-top:3px;display:flex;align-items: center;">
|
71765
|
-
|
71766
|
-
|
71767
|
-
|
71768
|
-
|
71769
|
-
|
71770
|
-
|
71771
|
-
|
71772
|
-
<svg class="is-icon-flex" style="width:
|
71773
|
-
</
|
71771
|
+
<div style="padding-top:3px;padding-bottom:5px;display:flex;align-items: center;">
|
71772
|
+
|
71773
|
+
<label class="flex mr-3" title="${util.out('Tablet (Landscape)')}">
|
71774
|
+
<input type="radio" id="rdoColMdWrap" name="boxWrap" value="md">
|
71775
|
+
<svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
71776
|
+
</label>
|
71777
|
+
<label class="flex mr-3" title="${util.out('Tablet (Portrait)')}">
|
71778
|
+
<input type="radio" id="rdoColSmWrap" name="boxWrap" value="sm">
|
71779
|
+
<svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
71780
|
+
</label>
|
71781
|
+
<label class="flex" title="${util.out('Mobile')}">
|
71782
|
+
<input type="radio" id="rdoColXsWrap" name="boxWrap" value="xs">
|
71783
|
+
<svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
71784
|
+
</label>
|
71774
71785
|
|
71775
71786
|
</div>
|
71776
71787
|
</div>
|
@@ -72024,32 +72035,25 @@ class RowTool {
|
|
72024
72035
|
this.builder.opts.onChange();
|
72025
72036
|
}); // Breakpoint
|
72026
72037
|
|
72027
|
-
|
72028
|
-
|
72029
|
-
btn.addEventListener('click', () => {
|
72038
|
+
rowSettings.querySelectorAll('input[name="boxWrap"]').forEach(input => {
|
72039
|
+
input.addEventListener('change', () => {
|
72030
72040
|
let row = util.rowSelected();
|
72031
72041
|
if (!row) return;
|
72032
72042
|
this.builder.uo.saveForUndo();
|
72033
|
-
let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
|
72034
|
-
elms.forEach(elm => {
|
72035
|
-
elm.classList.remove('on');
|
72036
|
-
});
|
72037
|
-
btn.classList.add('on');
|
72038
|
-
let target = btn.getAttribute('data-value');
|
72039
72043
|
|
72040
|
-
if (
|
72044
|
+
if (input.value === 'xs') {
|
72041
72045
|
row.classList.remove('sm-wrap');
|
72042
72046
|
row.classList.remove('md-wrap');
|
72043
|
-
} else if (
|
72047
|
+
} else if (input.value === 'sm') {
|
72044
72048
|
row.classList.remove('md-wrap');
|
72045
72049
|
row.classList.add('sm-wrap');
|
72046
|
-
} else if (
|
72047
|
-
row.classList.remove('
|
72050
|
+
} else if (input.value === 'md') {
|
72051
|
+
row.classList.remove('sm-wrap');
|
72048
72052
|
row.classList.add('md-wrap');
|
72049
72053
|
} //Trigger Change event
|
72050
72054
|
|
72051
72055
|
|
72052
|
-
this.builder.onChange();
|
72056
|
+
this.builder.opts.onChange();
|
72053
72057
|
});
|
72054
72058
|
});
|
72055
72059
|
const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
|
@@ -72090,7 +72094,7 @@ class RowTool {
|
|
72090
72094
|
this.builder.settings.onChange();
|
72091
72095
|
}); // Responsive Visibility
|
72092
72096
|
|
72093
|
-
btns = this.rowSettings.querySelectorAll('.input-device');
|
72097
|
+
let btns = this.rowSettings.querySelectorAll('.input-device');
|
72094
72098
|
btns.forEach(btn => {
|
72095
72099
|
btn.addEventListener('click', () => {
|
72096
72100
|
let row = util.rowSelected();
|
@@ -72290,7 +72294,31 @@ class RowTool {
|
|
72290
72294
|
// });
|
72291
72295
|
}
|
72292
72296
|
|
72293
|
-
realtimeVisibility(row) {
|
72297
|
+
realtimeVisibility(row, initialOpen) {
|
72298
|
+
if (initialOpen) {
|
72299
|
+
const builderStuff = this.builder.builderStuff;
|
72300
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
72301
|
+
|
72302
|
+
if (modal) {
|
72303
|
+
let elms = this.rowSettings.querySelectorAll('.input-device');
|
72304
|
+
elms.forEach(elm => {
|
72305
|
+
elm.classList.remove('on');
|
72306
|
+
});
|
72307
|
+
|
72308
|
+
if (modal.classList.contains('is-screen-1920')) {
|
72309
|
+
this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
|
72310
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
72311
|
+
this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
|
72312
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
72313
|
+
this.rowSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
|
72314
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
72315
|
+
this.rowSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
72316
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
72317
|
+
this.rowSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
72318
|
+
}
|
72319
|
+
}
|
72320
|
+
}
|
72321
|
+
|
72294
72322
|
let divTarget = this.rowSettings.querySelector('.div-target');
|
72295
72323
|
let divVisibility = this.rowSettings.querySelector('.div-visibility');
|
72296
72324
|
let target = this.builder.responsive.readTarget(divTarget);
|
@@ -72301,12 +72329,16 @@ class RowTool {
|
|
72301
72329
|
|
72302
72330
|
if (target === 'xs') {
|
72303
72331
|
valReverse = row.classList.contains('xs-column-reverse');
|
72332
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
72304
72333
|
} else if (target === 'sm') {
|
72305
72334
|
valReverse = row.classList.contains('sm-column-reverse');
|
72335
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
72306
72336
|
} else if (target === 'md') {
|
72307
72337
|
valReverse = row.classList.contains('md-column-reverse');
|
72338
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
72308
72339
|
} else {
|
72309
72340
|
valReverse = row.classList.contains('desktop-column-reverse');
|
72341
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
72310
72342
|
}
|
72311
72343
|
|
72312
72344
|
const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
|
@@ -72619,7 +72651,7 @@ class RowTool {
|
|
72619
72651
|
|
72620
72652
|
let actualRow = row.parentNode; // row is actually row overlay
|
72621
72653
|
|
72622
|
-
this.realtimeVisibility(actualRow);
|
72654
|
+
this.realtimeVisibility(actualRow, true);
|
72623
72655
|
const divReverseBoxes = this.rowSettings.querySelector('#divReverseColumns');
|
72624
72656
|
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
72625
72657
|
|
@@ -72633,17 +72665,12 @@ class RowTool {
|
|
72633
72665
|
divReverseBoxes.style.display = 'none';
|
72634
72666
|
}
|
72635
72667
|
|
72636
|
-
let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
|
72637
|
-
elms.forEach(elm => {
|
72638
|
-
elm.classList.remove('on');
|
72639
|
-
});
|
72640
|
-
|
72641
72668
|
if (actualRow.classList.contains('md-wrap')) {
|
72642
|
-
this.rowSettings.querySelector('
|
72669
|
+
this.rowSettings.querySelector('#rdoColMdWrap').checked = true;
|
72643
72670
|
} else if (actualRow.classList.contains('sm-wrap')) {
|
72644
|
-
this.rowSettings.querySelector('
|
72671
|
+
this.rowSettings.querySelector('#rdoColSmWrap').checked = true;
|
72645
72672
|
} else {
|
72646
|
-
this.rowSettings.querySelector('
|
72673
|
+
this.rowSettings.querySelector('#rdoColXsWrap').checked = true;
|
72647
72674
|
} //More
|
72648
72675
|
|
72649
72676
|
|
@@ -74591,6 +74618,12 @@ class ColumnTool {
|
|
74591
74618
|
});
|
74592
74619
|
let btnVisible = this.cellSettings.querySelector('.input-visible');
|
74593
74620
|
let btnHidden = this.cellSettings.querySelector('.input-hidden');
|
74621
|
+
|
74622
|
+
const rowHasHiddenColumns = (row, target) => {
|
74623
|
+
let cols = row.querySelectorAll(`.${target}-hidden`);
|
74624
|
+
return cols.length > 0;
|
74625
|
+
};
|
74626
|
+
|
74594
74627
|
btnVisible.addEventListener('click', () => {
|
74595
74628
|
let cell = this.util.cellSelected();
|
74596
74629
|
if (!cell) return;
|
@@ -74603,12 +74636,13 @@ class ColumnTool {
|
|
74603
74636
|
cell.classList.remove('xs-hidden');
|
74604
74637
|
} else if (target === 'sm') {
|
74605
74638
|
cell.classList.remove('sm-hidden');
|
74606
|
-
cell.parentNode.classList.remove('sm-autofit');
|
74639
|
+
if (!rowHasHiddenColumns(cell.parentNode, 'sm')) cell.parentNode.classList.remove('sm-autofit');
|
74607
74640
|
} else if (target === 'md') {
|
74608
74641
|
cell.classList.remove('md-hidden');
|
74609
|
-
cell.parentNode.classList.remove('md-autofit');
|
74642
|
+
if (!rowHasHiddenColumns(cell.parentNode, 'md')) cell.parentNode.classList.remove('md-autofit');
|
74610
74643
|
} else if (target === '') {
|
74611
74644
|
cell.classList.remove('desktop-hidden');
|
74645
|
+
if (!rowHasHiddenColumns(cell.parentNode, 'desktop')) cell.parentNode.classList.remove('desktop-autofit');
|
74612
74646
|
}
|
74613
74647
|
|
74614
74648
|
btnVisible.classList.add('on');
|
@@ -74634,6 +74668,7 @@ class ColumnTool {
|
|
74634
74668
|
cell.parentNode.classList.add('md-autofit');
|
74635
74669
|
} else if (target === '') {
|
74636
74670
|
cell.classList.add('desktop-hidden');
|
74671
|
+
cell.parentNode.classList.add('desktop-autofit');
|
74637
74672
|
}
|
74638
74673
|
|
74639
74674
|
btnVisible.classList.remove('on');
|
@@ -74831,7 +74866,7 @@ class ColumnTool {
|
|
74831
74866
|
dom.addClass(btn, 'on');
|
74832
74867
|
}
|
74833
74868
|
|
74834
|
-
this.realtimeVisibility(cell); //More
|
74869
|
+
this.realtimeVisibility(cell, true); //More
|
74835
74870
|
|
74836
74871
|
let inpCellId = this.cellSettings.querySelector('.input-cell-id');
|
74837
74872
|
inpCellId.value = '';
|
@@ -74847,12 +74882,46 @@ class ColumnTool {
|
|
74847
74882
|
inpCellClasses.value = classes;
|
74848
74883
|
}
|
74849
74884
|
|
74850
|
-
realtimeVisibility(cell) {
|
74885
|
+
realtimeVisibility(cell, initialOpen) {
|
74886
|
+
if (initialOpen) {
|
74887
|
+
const builderStuff = this.builder.builderStuff;
|
74888
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
74889
|
+
|
74890
|
+
if (modal) {
|
74891
|
+
let elms = this.cellSettings.querySelectorAll('.input-device');
|
74892
|
+
elms.forEach(elm => {
|
74893
|
+
elm.classList.remove('on');
|
74894
|
+
});
|
74895
|
+
|
74896
|
+
if (modal.classList.contains('is-screen-1920')) {
|
74897
|
+
this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
|
74898
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
74899
|
+
this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
|
74900
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
74901
|
+
this.cellSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
|
74902
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
74903
|
+
this.cellSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
74904
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
74905
|
+
this.cellSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
74906
|
+
}
|
74907
|
+
}
|
74908
|
+
}
|
74909
|
+
|
74851
74910
|
let divTarget = this.cellSettings.querySelector('.div-target');
|
74852
74911
|
let divVisibility = this.cellSettings.querySelector('.div-visibility');
|
74853
74912
|
let target = this.builder.responsive.readTarget(divTarget);
|
74854
74913
|
let valVisibility = this.builder.responsive.getVisibility(cell, target);
|
74855
|
-
this.builder.responsive.showVisibility(divVisibility, valVisibility);
|
74914
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility); // Live Preview Sync
|
74915
|
+
|
74916
|
+
if (target === 'xs') {
|
74917
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
74918
|
+
} else if (target === 'sm') {
|
74919
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
74920
|
+
} else if (target === 'md') {
|
74921
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
74922
|
+
} else {
|
74923
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
74924
|
+
}
|
74856
74925
|
}
|
74857
74926
|
|
74858
74927
|
openImagePicker(currentUrl, callback, btn) {
|
@@ -75948,15 +76017,49 @@ class ElementGeneralStyles {
|
|
75948
76017
|
}
|
75949
76018
|
}
|
75950
76019
|
|
75951
|
-
this.realtimeVisibility(elm);
|
76020
|
+
this.realtimeVisibility(elm, true);
|
75952
76021
|
}
|
75953
76022
|
|
75954
|
-
realtimeVisibility(row) {
|
76023
|
+
realtimeVisibility(row, initialOpen) {
|
76024
|
+
if (initialOpen) {
|
76025
|
+
const builderStuff = this.builder.builderStuff;
|
76026
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
76027
|
+
|
76028
|
+
if (modal) {
|
76029
|
+
let elms = this.panelStuff.querySelectorAll('.input-device');
|
76030
|
+
elms.forEach(elm => {
|
76031
|
+
elm.classList.remove('on');
|
76032
|
+
});
|
76033
|
+
|
76034
|
+
if (modal.classList.contains('is-screen-1920')) {
|
76035
|
+
this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
|
76036
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
76037
|
+
this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
|
76038
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
76039
|
+
this.panelStuff.querySelector('.input-device[data-value="md"]').classList.add('on');
|
76040
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
76041
|
+
this.panelStuff.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
76042
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
76043
|
+
this.panelStuff.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
76044
|
+
}
|
76045
|
+
}
|
76046
|
+
}
|
76047
|
+
|
75955
76048
|
let divTarget = this.panelStuff.querySelector('.div-target');
|
75956
76049
|
let divVisibility = this.panelStuff.querySelector('.div-visibility');
|
75957
76050
|
let target = this.builder.responsive.readTarget(divTarget);
|
75958
76051
|
let valVisibility = this.builder.responsive.getVisibility(row, target);
|
75959
|
-
this.builder.responsive.showVisibility(divVisibility, valVisibility);
|
76052
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility); // Live Preview Sync
|
76053
|
+
|
76054
|
+
if (target === 'xs') {
|
76055
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
76056
|
+
} else if (target === 'sm') {
|
76057
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
76058
|
+
} else if (target === 'md') {
|
76059
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
76060
|
+
} else {
|
76061
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
76062
|
+
}
|
75960
76063
|
}
|
75961
76064
|
|
75962
76065
|
}
|
@@ -91002,7 +91105,7 @@ class LivePreview {
|
|
91002
91105
|
z-index:100021 !important
|
91003
91106
|
}
|
91004
91107
|
</style>
|
91005
|
-
<div style="z-index:
|
91108
|
+
<div style="z-index:10004;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
91006
91109
|
<div class="is-modal-bar is-draggable" draggable="">
|
91007
91110
|
<span>${util.out('Live Preview')}</span>
|
91008
91111
|
<button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
|
@@ -91035,41 +91138,18 @@ class LivePreview {
|
|
91035
91138
|
this.closePreview();
|
91036
91139
|
});
|
91037
91140
|
const btnModalSize = modal.querySelector('.is-modal-size');
|
91038
|
-
const infoDevice = modal.querySelector('.is-modal-device');
|
91039
91141
|
btnModalSize.addEventListener('click', () => {
|
91040
91142
|
if (modal.classList.contains('is-screen-1920')) {
|
91041
|
-
|
91042
|
-
modal.classList.add('is-screen-1440');
|
91043
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
|
91044
|
-
infoDevice.setAttribute('title', util.out('Laptop'));
|
91045
|
-
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
|
91143
|
+
this.resizePreview(1440);
|
91046
91144
|
} else if (modal.classList.contains('is-screen-1440')) {
|
91047
|
-
|
91048
|
-
modal.classList.add('is-screen-1024');
|
91049
|
-
infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
|
91050
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
|
91051
|
-
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
|
91145
|
+
this.resizePreview(1024);
|
91052
91146
|
} else if (modal.classList.contains('is-screen-1024')) {
|
91053
|
-
|
91054
|
-
modal.classList.add('is-screen-768');
|
91055
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-768');
|
91056
|
-
infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
|
91057
|
-
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
|
91147
|
+
this.resizePreview(768);
|
91058
91148
|
} else if (modal.classList.contains('is-screen-768')) {
|
91059
|
-
|
91060
|
-
modal.classList.add('is-screen-375');
|
91061
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-375');
|
91062
|
-
infoDevice.setAttribute('title', util.out('Mobile'));
|
91063
|
-
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
|
91149
|
+
this.resizePreview(375);
|
91064
91150
|
} else if (modal.classList.contains('is-screen-375')) {
|
91065
|
-
|
91066
|
-
modal.classList.add('is-screen-1920');
|
91067
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
|
91068
|
-
infoDevice.setAttribute('title', util.out('Desktop'));
|
91069
|
-
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
|
91151
|
+
this.resizePreview(1920);
|
91070
91152
|
}
|
91071
|
-
|
91072
|
-
this.previewRefresh(true);
|
91073
91153
|
});
|
91074
91154
|
const btnModalRefresh = modal.querySelector('.is-modal-refresh');
|
91075
91155
|
btnModalRefresh.addEventListener('click', () => {
|
@@ -91085,6 +91165,47 @@ class LivePreview {
|
|
91085
91165
|
}
|
91086
91166
|
}
|
91087
91167
|
|
91168
|
+
resizePreview(size) {
|
91169
|
+
let modal = this.modal;
|
91170
|
+
let util = this.util;
|
91171
|
+
modal.classList.remove('is-screen-1440');
|
91172
|
+
modal.classList.remove('is-screen-1920');
|
91173
|
+
modal.classList.remove('is-screen-1024');
|
91174
|
+
modal.classList.remove('is-screen-768');
|
91175
|
+
modal.classList.remove('is-screen-375');
|
91176
|
+
const infoDevice = modal.querySelector('.is-modal-device');
|
91177
|
+
|
91178
|
+
if (size === 1440) {
|
91179
|
+
modal.classList.add('is-screen-1440');
|
91180
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
|
91181
|
+
infoDevice.setAttribute('title', util.out('Laptop'));
|
91182
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
|
91183
|
+
} else if (size === 1024) {
|
91184
|
+
modal.classList.remove('is-screen-1440');
|
91185
|
+
modal.classList.add('is-screen-1024');
|
91186
|
+
infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
|
91187
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
|
91188
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
|
91189
|
+
} else if (size === 768) {
|
91190
|
+
modal.classList.add('is-screen-768');
|
91191
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-768');
|
91192
|
+
infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
|
91193
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
|
91194
|
+
} else if (size === 375) {
|
91195
|
+
modal.classList.add('is-screen-375');
|
91196
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-375');
|
91197
|
+
infoDevice.setAttribute('title', util.out('Mobile'));
|
91198
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
|
91199
|
+
} else if (size === 1920) {
|
91200
|
+
modal.classList.add('is-screen-1920');
|
91201
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
|
91202
|
+
infoDevice.setAttribute('title', util.out('Desktop'));
|
91203
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
|
91204
|
+
}
|
91205
|
+
|
91206
|
+
this.previewRefresh(true);
|
91207
|
+
}
|
91208
|
+
|
91088
91209
|
previewRefresh(disableOnContentLoad) {
|
91089
91210
|
if (this.modal.classList.contains('active')) {
|
91090
91211
|
// let html = this.builder.html();
|