@innovastudio/contentbuilder 1.3.65 → 1.3.67
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
|
@@ -50637,6 +50637,15 @@ class ButtonEditor {
|
|
|
50637
50637
|
<button title="${util.out('Text Color')}" class="text-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
|
|
50638
50638
|
</div>
|
|
50639
50639
|
</div>
|
|
50640
|
+
<div class="flex flex-col" style="margin-left: 60px;">
|
|
50641
|
+
<div>
|
|
50642
|
+
<label>${util.out('Width')}</label>:
|
|
50643
|
+
</div>
|
|
50644
|
+
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
50645
|
+
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
50646
|
+
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
50647
|
+
</div>
|
|
50648
|
+
</div>
|
|
50640
50649
|
</div>
|
|
50641
50650
|
|
|
50642
50651
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
@@ -50665,7 +50674,7 @@ class ButtonEditor {
|
|
|
50665
50674
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
50666
50675
|
<div class="flex flex-col" style="margin-right: 20px;">
|
|
50667
50676
|
<div>
|
|
50668
|
-
<label>${util.out('Padding
|
|
50677
|
+
<label>${util.out('Padding Left/Right')}</label>:
|
|
50669
50678
|
</div>
|
|
50670
50679
|
<div class="flex flex-row" style="margin-top:5px">
|
|
50671
50680
|
<button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
|
|
@@ -50679,7 +50688,7 @@ class ButtonEditor {
|
|
|
50679
50688
|
</div>
|
|
50680
50689
|
</div>
|
|
50681
50690
|
|
|
50682
|
-
<div class="flex flex-col">
|
|
50691
|
+
<div class="flex flex-col" style="display:none">
|
|
50683
50692
|
<div>
|
|
50684
50693
|
<label>${util.out('Padding Y')}</label>:
|
|
50685
50694
|
</div>
|
|
@@ -50694,6 +50703,36 @@ class ButtonEditor {
|
|
|
50694
50703
|
</div>
|
|
50695
50704
|
</div>
|
|
50696
50705
|
|
|
50706
|
+
<div class="flex flex-row" style="margin:15px 0 0">
|
|
50707
|
+
<div class="flex flex-col" style="margin-right: 20px;">
|
|
50708
|
+
<div>
|
|
50709
|
+
<label>${util.out('Padding Top')}</label>:
|
|
50710
|
+
</div>
|
|
50711
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
50712
|
+
<button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
|
|
50713
|
+
<button title="1" data-command="1" class="paddingtop-command" style="margin-right:4px">1</button>
|
|
50714
|
+
<button title="2" data-command="2" class="paddingtop-command" style="margin-right:4px">2</button>
|
|
50715
|
+
<button title="3" data-command="3" class="paddingtop-command" style="margin-right:4px">3</button>
|
|
50716
|
+
<button title="4" data-command="4" class="paddingtop-command" style="margin-right:4px">4</button>
|
|
50717
|
+
<button title="5" data-command="5" class="paddingtop-command" style="margin-right:4px">5</button>
|
|
50718
|
+
</div>
|
|
50719
|
+
</div>
|
|
50720
|
+
|
|
50721
|
+
<div class="flex flex-col">
|
|
50722
|
+
<div>
|
|
50723
|
+
<label>${util.out('Padding Bottom')}</label>:
|
|
50724
|
+
</div>
|
|
50725
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
50726
|
+
<button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
|
|
50727
|
+
<button title="1" data-command="1" class="paddingbottom-command" style="margin-right:4px">1</button>
|
|
50728
|
+
<button title="2" data-command="2" class="paddingbottom-command" style="margin-right:4px">2</button>
|
|
50729
|
+
<button title="3" data-command="3" class="paddingbottom-command" style="margin-right:4px">3</button>
|
|
50730
|
+
<button title="4" data-command="4" class="paddingbottom-command" style="margin-right:4px">4</button>
|
|
50731
|
+
<button title="5" data-command="5" class="paddingbottom-command" style="margin-right:4px">5</button>
|
|
50732
|
+
</div>
|
|
50733
|
+
</div>
|
|
50734
|
+
</div>
|
|
50735
|
+
|
|
50697
50736
|
<div class="flex flex-col" style="margin:15px 0 0">
|
|
50698
50737
|
<div>
|
|
50699
50738
|
<label>${util.out('Border Radius')}</label>:
|
|
@@ -50772,16 +50811,6 @@ class ButtonEditor {
|
|
|
50772
50811
|
|
|
50773
50812
|
</div>
|
|
50774
50813
|
|
|
50775
|
-
<div class="flex flex-col" style="margin:15px 0 0">
|
|
50776
|
-
<div>
|
|
50777
|
-
<label>${util.out('Width')}</label>:
|
|
50778
|
-
</div>
|
|
50779
|
-
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
50780
|
-
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
50781
|
-
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
50782
|
-
</div>
|
|
50783
|
-
</div>
|
|
50784
|
-
|
|
50785
50814
|
</div>
|
|
50786
50815
|
<div id="divButtonHover" class="is-tab-content" tabindex="-1" data-group="button">
|
|
50787
50816
|
|
|
@@ -51215,6 +51244,120 @@ class ButtonEditor {
|
|
|
51215
51244
|
dom.addClass(btn, 'on');
|
|
51216
51245
|
this.builder.opts.onChange();
|
|
51217
51246
|
});
|
|
51247
|
+
}); //padding top
|
|
51248
|
+
|
|
51249
|
+
btns = buttonModal.querySelectorAll('.paddingtop-command');
|
|
51250
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
51251
|
+
btn.addEventListener('click', () => {
|
|
51252
|
+
this.builder.uo.saveForUndo();
|
|
51253
|
+
const val = btn.getAttribute('data-command');
|
|
51254
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
51255
|
+
dom.removeClassesByPrefix(activeButton, 'pt-');
|
|
51256
|
+
|
|
51257
|
+
if (val === '0') {
|
|
51258
|
+
dom.addClass(activeButton, 'pt-0');
|
|
51259
|
+
}
|
|
51260
|
+
|
|
51261
|
+
if (val === '1') {
|
|
51262
|
+
dom.addClass(activeButton, 'pt-1');
|
|
51263
|
+
}
|
|
51264
|
+
|
|
51265
|
+
if (val === '2') {
|
|
51266
|
+
dom.addClass(activeButton, 'pt-2');
|
|
51267
|
+
}
|
|
51268
|
+
|
|
51269
|
+
if (val === '3') {
|
|
51270
|
+
dom.addClass(activeButton, 'pt-3');
|
|
51271
|
+
}
|
|
51272
|
+
|
|
51273
|
+
if (val === '4') {
|
|
51274
|
+
dom.addClass(activeButton, 'pt-4');
|
|
51275
|
+
}
|
|
51276
|
+
|
|
51277
|
+
if (val === '5') {
|
|
51278
|
+
dom.addClass(activeButton, 'pt-5');
|
|
51279
|
+
}
|
|
51280
|
+
|
|
51281
|
+
if (val === '6') {
|
|
51282
|
+
dom.addClass(activeButton, 'pt-6');
|
|
51283
|
+
} // Cleanup
|
|
51284
|
+
|
|
51285
|
+
|
|
51286
|
+
if ((activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5')) && (activeButton.classList.contains('pt-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
51287
|
+
activeButton.classList.remove('py-0');
|
|
51288
|
+
activeButton.classList.remove('py-1');
|
|
51289
|
+
activeButton.classList.remove('py-2');
|
|
51290
|
+
activeButton.classList.remove('py-3');
|
|
51291
|
+
activeButton.classList.remove('py-4');
|
|
51292
|
+
activeButton.classList.remove('p5-4');
|
|
51293
|
+
}
|
|
51294
|
+
|
|
51295
|
+
this.applyDefault(activeButton); // Button on/off
|
|
51296
|
+
|
|
51297
|
+
const items = buttonModal.querySelectorAll('.paddingtop-command');
|
|
51298
|
+
items.forEach(item => {
|
|
51299
|
+
dom.removeClass(item, 'on');
|
|
51300
|
+
});
|
|
51301
|
+
dom.addClass(btn, 'on');
|
|
51302
|
+
this.builder.opts.onChange();
|
|
51303
|
+
});
|
|
51304
|
+
}); //padding bottom
|
|
51305
|
+
|
|
51306
|
+
btns = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
51307
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
51308
|
+
btn.addEventListener('click', () => {
|
|
51309
|
+
this.builder.uo.saveForUndo();
|
|
51310
|
+
const val = btn.getAttribute('data-command');
|
|
51311
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
51312
|
+
dom.removeClassesByPrefix(activeButton, 'pb-');
|
|
51313
|
+
|
|
51314
|
+
if (val === '0') {
|
|
51315
|
+
dom.addClass(activeButton, 'pb-0');
|
|
51316
|
+
}
|
|
51317
|
+
|
|
51318
|
+
if (val === '1') {
|
|
51319
|
+
dom.addClass(activeButton, 'pb-1');
|
|
51320
|
+
}
|
|
51321
|
+
|
|
51322
|
+
if (val === '2') {
|
|
51323
|
+
dom.addClass(activeButton, 'pb-2');
|
|
51324
|
+
}
|
|
51325
|
+
|
|
51326
|
+
if (val === '3') {
|
|
51327
|
+
dom.addClass(activeButton, 'pb-3');
|
|
51328
|
+
}
|
|
51329
|
+
|
|
51330
|
+
if (val === '4') {
|
|
51331
|
+
dom.addClass(activeButton, 'pb-4');
|
|
51332
|
+
}
|
|
51333
|
+
|
|
51334
|
+
if (val === '5') {
|
|
51335
|
+
dom.addClass(activeButton, 'pb-5');
|
|
51336
|
+
}
|
|
51337
|
+
|
|
51338
|
+
if (val === '6') {
|
|
51339
|
+
dom.addClass(activeButton, 'pb-6');
|
|
51340
|
+
} // Cleanup
|
|
51341
|
+
|
|
51342
|
+
|
|
51343
|
+
if ((activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5')) && (activeButton.classList.contains('pt-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
51344
|
+
activeButton.classList.remove('py-0');
|
|
51345
|
+
activeButton.classList.remove('py-1');
|
|
51346
|
+
activeButton.classList.remove('py-2');
|
|
51347
|
+
activeButton.classList.remove('py-3');
|
|
51348
|
+
activeButton.classList.remove('py-4');
|
|
51349
|
+
activeButton.classList.remove('p5-4');
|
|
51350
|
+
}
|
|
51351
|
+
|
|
51352
|
+
this.applyDefault(activeButton); // Button on/off
|
|
51353
|
+
|
|
51354
|
+
const items = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
51355
|
+
items.forEach(item => {
|
|
51356
|
+
dom.removeClass(item, 'on');
|
|
51357
|
+
});
|
|
51358
|
+
dom.addClass(btn, 'on');
|
|
51359
|
+
this.builder.opts.onChange();
|
|
51360
|
+
});
|
|
51218
51361
|
}); //Font size
|
|
51219
51362
|
|
|
51220
51363
|
btns = buttonModal.querySelectorAll('.font-size-command');
|
|
@@ -51613,6 +51756,10 @@ class ButtonEditor {
|
|
|
51613
51756
|
dom.removeClass(btn, 'on');
|
|
51614
51757
|
btn = this.buttonModal.querySelector('.paddingy-command.on');
|
|
51615
51758
|
dom.removeClass(btn, 'on');
|
|
51759
|
+
btn = this.buttonModal.querySelector('.paddingtop-command.on');
|
|
51760
|
+
dom.removeClass(btn, 'on');
|
|
51761
|
+
btn = this.buttonModal.querySelector('.paddingbottom-command.on');
|
|
51762
|
+
dom.removeClass(btn, 'on');
|
|
51616
51763
|
btn = this.buttonModal.querySelector('.border-radius-command.on');
|
|
51617
51764
|
dom.removeClass(btn, 'on');
|
|
51618
51765
|
btn = this.buttonModal.querySelector('.letter-spacing-command.on');
|
|
@@ -51670,6 +51817,28 @@ class ButtonEditor {
|
|
|
51670
51817
|
let val = item.replace('py-', '');
|
|
51671
51818
|
let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
|
|
51672
51819
|
dom.addClass(btn, 'on');
|
|
51820
|
+
|
|
51821
|
+
if (!(activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5'))) {
|
|
51822
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
51823
|
+
dom.addClass(btn, 'on');
|
|
51824
|
+
}
|
|
51825
|
+
|
|
51826
|
+
if (!(activeButton.classList.contains('pb-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
51827
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
51828
|
+
dom.addClass(btn, 'on');
|
|
51829
|
+
}
|
|
51830
|
+
}
|
|
51831
|
+
|
|
51832
|
+
if (item.indexOf('pt-') === 0) {
|
|
51833
|
+
let val = item.replace('pt-', '');
|
|
51834
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
51835
|
+
dom.addClass(btn, 'on');
|
|
51836
|
+
}
|
|
51837
|
+
|
|
51838
|
+
if (item.indexOf('pb-') === 0) {
|
|
51839
|
+
let val = item.replace('pb-', '');
|
|
51840
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
51841
|
+
dom.addClass(btn, 'on');
|
|
51673
51842
|
}
|
|
51674
51843
|
|
|
51675
51844
|
if (item.indexOf('rounded-') === 0) {
|
|
@@ -59117,16 +59286,24 @@ class ColumnTool {
|
|
|
59117
59286
|
let dataBg = elm.getAttribute('data-bg-xs');
|
|
59118
59287
|
if (!dataBg) dataBg = '';
|
|
59119
59288
|
div.style.cssText = dataBg;
|
|
59289
|
+
inpImageScaleSlider.disabled = true;
|
|
59290
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
59120
59291
|
} else if (document.querySelector('.page-preview.is-screen-768.active') && useTarget) {
|
|
59121
59292
|
let dataBg = elm.getAttribute('data-bg-sm');
|
|
59122
59293
|
if (!dataBg) dataBg = '';
|
|
59123
59294
|
div.style.cssText = dataBg;
|
|
59295
|
+
inpImageScaleSlider.disabled = true;
|
|
59296
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
59124
59297
|
} else if (document.querySelector('.page-preview.is-screen-1024.active') && useTarget) {
|
|
59125
59298
|
let dataBg = elm.getAttribute('data-bg-md');
|
|
59126
59299
|
if (!dataBg) dataBg = '';
|
|
59127
59300
|
div.style.cssText = dataBg;
|
|
59301
|
+
inpImageScaleSlider.disabled = true;
|
|
59302
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
59128
59303
|
} else {
|
|
59129
59304
|
div.style.cssText = elm.style.cssText;
|
|
59305
|
+
inpImageScaleSlider.disabled = false;
|
|
59306
|
+
inpImageScaleSlider.style.opacity = '';
|
|
59130
59307
|
}
|
|
59131
59308
|
|
|
59132
59309
|
if (div.style.backgroundSize) {
|
|
@@ -59207,6 +59384,9 @@ class ColumnTool {
|
|
|
59207
59384
|
elm.removeAttribute('data-x');
|
|
59208
59385
|
elm.removeAttribute('data-y');
|
|
59209
59386
|
elm.removeAttribute('data-scale');
|
|
59387
|
+
elm.removeAttribute('data-bg-xs');
|
|
59388
|
+
elm.removeAttribute('data-bg-sm');
|
|
59389
|
+
elm.removeAttribute('data-bg-md');
|
|
59210
59390
|
}
|
|
59211
59391
|
|
|
59212
59392
|
resetImage2(elm) {
|