@innovastudio/contentbuilder 1.3.66 → 1.3.68
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
|
@@ -50048,7 +50048,9 @@ class Image$1 {
|
|
|
50048
50048
|
|
|
50049
50049
|
if (extension === 'jpg') {
|
|
50050
50050
|
img.src = this.cropper.getCroppedCanvas({
|
|
50051
|
-
fillColor: '#fff'
|
|
50051
|
+
fillColor: '#fff',
|
|
50052
|
+
imageSmoothingEnabled: true,
|
|
50053
|
+
imageSmoothingQuality: 'high'
|
|
50052
50054
|
}).toDataURL('image/jpeg');
|
|
50053
50055
|
} else {
|
|
50054
50056
|
img.src = this.cropper.getCroppedCanvas({}).toDataURL();
|
|
@@ -50637,6 +50639,15 @@ class ButtonEditor {
|
|
|
50637
50639
|
<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
50640
|
</div>
|
|
50639
50641
|
</div>
|
|
50642
|
+
<div class="flex flex-col" style="margin-left: 60px;">
|
|
50643
|
+
<div>
|
|
50644
|
+
<label>${util.out('Width')}</label>:
|
|
50645
|
+
</div>
|
|
50646
|
+
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
50647
|
+
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
50648
|
+
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
50649
|
+
</div>
|
|
50650
|
+
</div>
|
|
50640
50651
|
</div>
|
|
50641
50652
|
|
|
50642
50653
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
@@ -50665,7 +50676,7 @@ class ButtonEditor {
|
|
|
50665
50676
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
50666
50677
|
<div class="flex flex-col" style="margin-right: 20px;">
|
|
50667
50678
|
<div>
|
|
50668
|
-
<label>${util.out('Padding
|
|
50679
|
+
<label>${util.out('Padding Left/Right')}</label>:
|
|
50669
50680
|
</div>
|
|
50670
50681
|
<div class="flex flex-row" style="margin-top:5px">
|
|
50671
50682
|
<button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
|
|
@@ -50679,7 +50690,7 @@ class ButtonEditor {
|
|
|
50679
50690
|
</div>
|
|
50680
50691
|
</div>
|
|
50681
50692
|
|
|
50682
|
-
<div class="flex flex-col">
|
|
50693
|
+
<div class="flex flex-col" style="display:none">
|
|
50683
50694
|
<div>
|
|
50684
50695
|
<label>${util.out('Padding Y')}</label>:
|
|
50685
50696
|
</div>
|
|
@@ -50694,6 +50705,36 @@ class ButtonEditor {
|
|
|
50694
50705
|
</div>
|
|
50695
50706
|
</div>
|
|
50696
50707
|
|
|
50708
|
+
<div class="flex flex-row" style="margin:15px 0 0">
|
|
50709
|
+
<div class="flex flex-col" style="margin-right: 20px;">
|
|
50710
|
+
<div>
|
|
50711
|
+
<label>${util.out('Padding Top')}</label>:
|
|
50712
|
+
</div>
|
|
50713
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
50714
|
+
<button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
|
|
50715
|
+
<button title="1" data-command="1" class="paddingtop-command" style="margin-right:4px">1</button>
|
|
50716
|
+
<button title="2" data-command="2" class="paddingtop-command" style="margin-right:4px">2</button>
|
|
50717
|
+
<button title="3" data-command="3" class="paddingtop-command" style="margin-right:4px">3</button>
|
|
50718
|
+
<button title="4" data-command="4" class="paddingtop-command" style="margin-right:4px">4</button>
|
|
50719
|
+
<button title="5" data-command="5" class="paddingtop-command" style="margin-right:4px">5</button>
|
|
50720
|
+
</div>
|
|
50721
|
+
</div>
|
|
50722
|
+
|
|
50723
|
+
<div class="flex flex-col">
|
|
50724
|
+
<div>
|
|
50725
|
+
<label>${util.out('Padding Bottom')}</label>:
|
|
50726
|
+
</div>
|
|
50727
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
50728
|
+
<button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
|
|
50729
|
+
<button title="1" data-command="1" class="paddingbottom-command" style="margin-right:4px">1</button>
|
|
50730
|
+
<button title="2" data-command="2" class="paddingbottom-command" style="margin-right:4px">2</button>
|
|
50731
|
+
<button title="3" data-command="3" class="paddingbottom-command" style="margin-right:4px">3</button>
|
|
50732
|
+
<button title="4" data-command="4" class="paddingbottom-command" style="margin-right:4px">4</button>
|
|
50733
|
+
<button title="5" data-command="5" class="paddingbottom-command" style="margin-right:4px">5</button>
|
|
50734
|
+
</div>
|
|
50735
|
+
</div>
|
|
50736
|
+
</div>
|
|
50737
|
+
|
|
50697
50738
|
<div class="flex flex-col" style="margin:15px 0 0">
|
|
50698
50739
|
<div>
|
|
50699
50740
|
<label>${util.out('Border Radius')}</label>:
|
|
@@ -50772,16 +50813,6 @@ class ButtonEditor {
|
|
|
50772
50813
|
|
|
50773
50814
|
</div>
|
|
50774
50815
|
|
|
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
50816
|
</div>
|
|
50786
50817
|
<div id="divButtonHover" class="is-tab-content" tabindex="-1" data-group="button">
|
|
50787
50818
|
|
|
@@ -51215,6 +51246,120 @@ class ButtonEditor {
|
|
|
51215
51246
|
dom.addClass(btn, 'on');
|
|
51216
51247
|
this.builder.opts.onChange();
|
|
51217
51248
|
});
|
|
51249
|
+
}); //padding top
|
|
51250
|
+
|
|
51251
|
+
btns = buttonModal.querySelectorAll('.paddingtop-command');
|
|
51252
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
51253
|
+
btn.addEventListener('click', () => {
|
|
51254
|
+
this.builder.uo.saveForUndo();
|
|
51255
|
+
const val = btn.getAttribute('data-command');
|
|
51256
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
51257
|
+
dom.removeClassesByPrefix(activeButton, 'pt-');
|
|
51258
|
+
|
|
51259
|
+
if (val === '0') {
|
|
51260
|
+
dom.addClass(activeButton, 'pt-0');
|
|
51261
|
+
}
|
|
51262
|
+
|
|
51263
|
+
if (val === '1') {
|
|
51264
|
+
dom.addClass(activeButton, 'pt-1');
|
|
51265
|
+
}
|
|
51266
|
+
|
|
51267
|
+
if (val === '2') {
|
|
51268
|
+
dom.addClass(activeButton, 'pt-2');
|
|
51269
|
+
}
|
|
51270
|
+
|
|
51271
|
+
if (val === '3') {
|
|
51272
|
+
dom.addClass(activeButton, 'pt-3');
|
|
51273
|
+
}
|
|
51274
|
+
|
|
51275
|
+
if (val === '4') {
|
|
51276
|
+
dom.addClass(activeButton, 'pt-4');
|
|
51277
|
+
}
|
|
51278
|
+
|
|
51279
|
+
if (val === '5') {
|
|
51280
|
+
dom.addClass(activeButton, 'pt-5');
|
|
51281
|
+
}
|
|
51282
|
+
|
|
51283
|
+
if (val === '6') {
|
|
51284
|
+
dom.addClass(activeButton, 'pt-6');
|
|
51285
|
+
} // Cleanup
|
|
51286
|
+
|
|
51287
|
+
|
|
51288
|
+
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'))) {
|
|
51289
|
+
activeButton.classList.remove('py-0');
|
|
51290
|
+
activeButton.classList.remove('py-1');
|
|
51291
|
+
activeButton.classList.remove('py-2');
|
|
51292
|
+
activeButton.classList.remove('py-3');
|
|
51293
|
+
activeButton.classList.remove('py-4');
|
|
51294
|
+
activeButton.classList.remove('p5-4');
|
|
51295
|
+
}
|
|
51296
|
+
|
|
51297
|
+
this.applyDefault(activeButton); // Button on/off
|
|
51298
|
+
|
|
51299
|
+
const items = buttonModal.querySelectorAll('.paddingtop-command');
|
|
51300
|
+
items.forEach(item => {
|
|
51301
|
+
dom.removeClass(item, 'on');
|
|
51302
|
+
});
|
|
51303
|
+
dom.addClass(btn, 'on');
|
|
51304
|
+
this.builder.opts.onChange();
|
|
51305
|
+
});
|
|
51306
|
+
}); //padding bottom
|
|
51307
|
+
|
|
51308
|
+
btns = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
51309
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
51310
|
+
btn.addEventListener('click', () => {
|
|
51311
|
+
this.builder.uo.saveForUndo();
|
|
51312
|
+
const val = btn.getAttribute('data-command');
|
|
51313
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
51314
|
+
dom.removeClassesByPrefix(activeButton, 'pb-');
|
|
51315
|
+
|
|
51316
|
+
if (val === '0') {
|
|
51317
|
+
dom.addClass(activeButton, 'pb-0');
|
|
51318
|
+
}
|
|
51319
|
+
|
|
51320
|
+
if (val === '1') {
|
|
51321
|
+
dom.addClass(activeButton, 'pb-1');
|
|
51322
|
+
}
|
|
51323
|
+
|
|
51324
|
+
if (val === '2') {
|
|
51325
|
+
dom.addClass(activeButton, 'pb-2');
|
|
51326
|
+
}
|
|
51327
|
+
|
|
51328
|
+
if (val === '3') {
|
|
51329
|
+
dom.addClass(activeButton, 'pb-3');
|
|
51330
|
+
}
|
|
51331
|
+
|
|
51332
|
+
if (val === '4') {
|
|
51333
|
+
dom.addClass(activeButton, 'pb-4');
|
|
51334
|
+
}
|
|
51335
|
+
|
|
51336
|
+
if (val === '5') {
|
|
51337
|
+
dom.addClass(activeButton, 'pb-5');
|
|
51338
|
+
}
|
|
51339
|
+
|
|
51340
|
+
if (val === '6') {
|
|
51341
|
+
dom.addClass(activeButton, 'pb-6');
|
|
51342
|
+
} // Cleanup
|
|
51343
|
+
|
|
51344
|
+
|
|
51345
|
+
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'))) {
|
|
51346
|
+
activeButton.classList.remove('py-0');
|
|
51347
|
+
activeButton.classList.remove('py-1');
|
|
51348
|
+
activeButton.classList.remove('py-2');
|
|
51349
|
+
activeButton.classList.remove('py-3');
|
|
51350
|
+
activeButton.classList.remove('py-4');
|
|
51351
|
+
activeButton.classList.remove('p5-4');
|
|
51352
|
+
}
|
|
51353
|
+
|
|
51354
|
+
this.applyDefault(activeButton); // Button on/off
|
|
51355
|
+
|
|
51356
|
+
const items = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
51357
|
+
items.forEach(item => {
|
|
51358
|
+
dom.removeClass(item, 'on');
|
|
51359
|
+
});
|
|
51360
|
+
dom.addClass(btn, 'on');
|
|
51361
|
+
this.builder.opts.onChange();
|
|
51362
|
+
});
|
|
51218
51363
|
}); //Font size
|
|
51219
51364
|
|
|
51220
51365
|
btns = buttonModal.querySelectorAll('.font-size-command');
|
|
@@ -51613,6 +51758,10 @@ class ButtonEditor {
|
|
|
51613
51758
|
dom.removeClass(btn, 'on');
|
|
51614
51759
|
btn = this.buttonModal.querySelector('.paddingy-command.on');
|
|
51615
51760
|
dom.removeClass(btn, 'on');
|
|
51761
|
+
btn = this.buttonModal.querySelector('.paddingtop-command.on');
|
|
51762
|
+
dom.removeClass(btn, 'on');
|
|
51763
|
+
btn = this.buttonModal.querySelector('.paddingbottom-command.on');
|
|
51764
|
+
dom.removeClass(btn, 'on');
|
|
51616
51765
|
btn = this.buttonModal.querySelector('.border-radius-command.on');
|
|
51617
51766
|
dom.removeClass(btn, 'on');
|
|
51618
51767
|
btn = this.buttonModal.querySelector('.letter-spacing-command.on');
|
|
@@ -51670,6 +51819,28 @@ class ButtonEditor {
|
|
|
51670
51819
|
let val = item.replace('py-', '');
|
|
51671
51820
|
let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
|
|
51672
51821
|
dom.addClass(btn, 'on');
|
|
51822
|
+
|
|
51823
|
+
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'))) {
|
|
51824
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
51825
|
+
dom.addClass(btn, 'on');
|
|
51826
|
+
}
|
|
51827
|
+
|
|
51828
|
+
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'))) {
|
|
51829
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
51830
|
+
dom.addClass(btn, 'on');
|
|
51831
|
+
}
|
|
51832
|
+
}
|
|
51833
|
+
|
|
51834
|
+
if (item.indexOf('pt-') === 0) {
|
|
51835
|
+
let val = item.replace('pt-', '');
|
|
51836
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
51837
|
+
dom.addClass(btn, 'on');
|
|
51838
|
+
}
|
|
51839
|
+
|
|
51840
|
+
if (item.indexOf('pb-') === 0) {
|
|
51841
|
+
let val = item.replace('pb-', '');
|
|
51842
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
51843
|
+
dom.addClass(btn, 'on');
|
|
51673
51844
|
}
|
|
51674
51845
|
|
|
51675
51846
|
if (item.indexOf('rounded-') === 0) {
|