@innovastudio/contentbox 1.5.17 → 1.5.18
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -4089,6 +4089,19 @@ class EditSection {
|
|
4089
4089
|
</button>
|
4090
4090
|
</div>
|
4091
4091
|
|
4092
|
+
<div class="div-boxesperline" style="flex-direction:column">
|
4093
|
+
<label style="margin:20px 0 0;display:flex;flex-direction:column">
|
4094
|
+
<span style="margin:0 4px 3px 0">${out('Boxes per Line')}:</span>
|
4095
|
+
</label>
|
4096
|
+
<div class="flex">
|
4097
|
+
<button title="1" class="input-boxesperline on" data-value="1" style="width:40px;height:25px;">1</button>
|
4098
|
+
<button title="2" class="input-boxesperline" data-value="2" style="width:40px;height:25px;">2</button>
|
4099
|
+
<button title="3" class="input-boxesperline" data-value="3" style="width:40px;height:25px;">3</button>
|
4100
|
+
<button title="4" class="input-boxesperline" data-value="4" style="width:40px;height:25px;">4</button>
|
4101
|
+
<button title="${out('Default')}" class="input-boxesperline" data-value="" style="width:90px;height:25px;">${out('Default')}</button>
|
4102
|
+
</div>
|
4103
|
+
</div>
|
4104
|
+
|
4092
4105
|
<div id="divReverseBoxes" style="display:none">
|
4093
4106
|
<label for="chkReverseBoxes" style="margin:20px 0 0 0;display:flex"><input id="chkReverseBoxes" type="checkbox" style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
|
4094
4107
|
</div>
|
@@ -4592,6 +4605,72 @@ class EditSection {
|
|
4592
4605
|
btnHidden.classList.add('on'); //Trigger Change event
|
4593
4606
|
|
4594
4607
|
this.builder.onChange();
|
4608
|
+
}); // Boxes per line
|
4609
|
+
|
4610
|
+
btns = modalEditSection.querySelectorAll('.input-boxesperline');
|
4611
|
+
btns.forEach(btn => {
|
4612
|
+
btn.addEventListener('click', () => {
|
4613
|
+
let section = this.builder.activeSection;
|
4614
|
+
if (!section) return;
|
4615
|
+
this.builder.editor.saveForUndo();
|
4616
|
+
let elms = modalEditSection.querySelectorAll('.input-boxesperline');
|
4617
|
+
elms.forEach(elm => {
|
4618
|
+
elm.classList.remove('on');
|
4619
|
+
});
|
4620
|
+
btn.classList.add('on');
|
4621
|
+
let val = btn.getAttribute('data-value');
|
4622
|
+
let divTarget = modalEditSection.querySelector('.div-target');
|
4623
|
+
let target = this.builder.editor.responsive.readTarget(divTarget);
|
4624
|
+
|
4625
|
+
if (target === 'xs') {
|
4626
|
+
section.classList.remove('xs-boxes-1');
|
4627
|
+
section.classList.remove('xs-boxes-2');
|
4628
|
+
section.classList.remove('xs-boxes-3');
|
4629
|
+
section.classList.remove('xs-boxes-4');
|
4630
|
+
section.classList.remove('xs-boxes-wrap');
|
4631
|
+
|
4632
|
+
if (val !== '') {
|
4633
|
+
section.classList.add(`xs-boxes-${val}`);
|
4634
|
+
section.classList.add('xs-boxes-wrap');
|
4635
|
+
}
|
4636
|
+
} else if (target === 'sm') {
|
4637
|
+
section.classList.remove('sm-boxes-1');
|
4638
|
+
section.classList.remove('sm-boxes-2');
|
4639
|
+
section.classList.remove('sm-boxes-3');
|
4640
|
+
section.classList.remove('sm-boxes-4');
|
4641
|
+
section.classList.remove('sm-boxes-wrap');
|
4642
|
+
|
4643
|
+
if (val !== '') {
|
4644
|
+
section.classList.add(`sm-boxes-${val}`);
|
4645
|
+
section.classList.add('sm-boxes-wrap');
|
4646
|
+
}
|
4647
|
+
} else if (target === 'md') {
|
4648
|
+
section.classList.remove('md-boxes-1');
|
4649
|
+
section.classList.remove('md-boxes-2');
|
4650
|
+
section.classList.remove('md-boxes-3');
|
4651
|
+
section.classList.remove('md-boxes-4');
|
4652
|
+
section.classList.remove('md-boxes-wrap');
|
4653
|
+
|
4654
|
+
if (val !== '') {
|
4655
|
+
section.classList.add(`md-boxes-${val}`);
|
4656
|
+
section.classList.add('md-boxes-wrap');
|
4657
|
+
}
|
4658
|
+
} else if (target === '') {
|
4659
|
+
section.classList.remove('desktop-boxes-1');
|
4660
|
+
section.classList.remove('desktop-boxes-2');
|
4661
|
+
section.classList.remove('desktop-boxes-3');
|
4662
|
+
section.classList.remove('desktop-boxes-4');
|
4663
|
+
section.classList.remove('desktop-boxes-wrap');
|
4664
|
+
|
4665
|
+
if (val !== '') {
|
4666
|
+
section.classList.add(`desktop-boxes-${val}`);
|
4667
|
+
section.classList.add('desktop-boxes-wrap');
|
4668
|
+
}
|
4669
|
+
} //Trigger Change event
|
4670
|
+
|
4671
|
+
|
4672
|
+
this.builder.onChange();
|
4673
|
+
});
|
4595
4674
|
});
|
4596
4675
|
} // Section Visibility
|
4597
4676
|
|
@@ -4625,21 +4704,30 @@ class EditSection {
|
|
4625
4704
|
let divVisibility = this.modalEditSection.querySelector('.div-visibility');
|
4626
4705
|
let target = this.builder.editor.responsive.readTarget(divTarget);
|
4627
4706
|
let valVisibility = this.builder.editor.responsive.getVisibility(section, target);
|
4628
|
-
this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); //
|
4707
|
+
this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // const divColsPerLine = this.modalEditSection.querySelector('.div-boxesperline');
|
4708
|
+
|
4709
|
+
let btns = this.modalEditSection.querySelectorAll('.input-boxesperline');
|
4710
|
+
btns.forEach(btn => {
|
4711
|
+
btn.classList.remove('on');
|
4712
|
+
}); // Column reverse
|
4629
4713
|
|
4630
4714
|
let valReverse = false;
|
4631
4715
|
|
4632
4716
|
if (target === 'xs') {
|
4633
4717
|
valReverse = section.classList.contains('xs-box-reverse');
|
4718
|
+
if (section.classList.contains('xs-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('xs-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('xs-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('xs-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
|
4634
4719
|
if (!initialOpen) this.builder.editor.livePreview.resizePreview(375);
|
4635
4720
|
} else if (target === 'sm') {
|
4636
4721
|
valReverse = section.classList.contains('sm-box-reverse');
|
4722
|
+
if (section.classList.contains('sm-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('sm-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('sm-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('sm-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
|
4637
4723
|
if (!initialOpen) this.builder.editor.livePreview.resizePreview(768);
|
4638
4724
|
} else if (target === 'md') {
|
4639
4725
|
valReverse = section.classList.contains('md-box-reverse');
|
4726
|
+
if (section.classList.contains('md-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('md-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('md-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('md-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
|
4640
4727
|
if (!initialOpen) this.builder.editor.livePreview.resizePreview(1024);
|
4641
4728
|
} else {
|
4642
4729
|
valReverse = section.classList.contains('desktop-box-reverse');
|
4730
|
+
if (section.classList.contains('desktop-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('desktop-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('desktop-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('desktop-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
|
4643
4731
|
if (!initialOpen) this.builder.editor.livePreview.resizePreview(1920);
|
4644
4732
|
}
|
4645
4733
|
|