@innovastudio/contentbox 1.6.75 → 1.6.77
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.6.
|
4
|
+
"version": "1.6.77",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"files": [
|
@@ -52,7 +52,7 @@
|
|
52
52
|
"ws": "^8.13.0"
|
53
53
|
},
|
54
54
|
"dependencies": {
|
55
|
-
"@innovastudio/contentbuilder": "^1.5.
|
55
|
+
"@innovastudio/contentbuilder": "^1.5.69",
|
56
56
|
"js-beautify": "^1.14.0",
|
57
57
|
"sortablejs": "^1.15.2"
|
58
58
|
}
|
@@ -1399,7 +1399,9 @@ body.controlpanel .is-wrapper {
|
|
1399
1399
|
}
|
1400
1400
|
.builder-ui .is-controlpanel .panel-image .asset-preview img,
|
1401
1401
|
.builder-ui .is-controlpanel .panel-box .asset-preview img,
|
1402
|
-
.builder-ui .is-controlpanel .panel-block .asset-preview img
|
1402
|
+
.builder-ui .is-controlpanel .panel-block .asset-preview img,
|
1403
|
+
.builder-ui .is-controlpanel .panel-column .asset-preview img,
|
1404
|
+
.builder-ui .is-controlpanel .panel-row .asset-preview img {
|
1403
1405
|
max-width: 130px;
|
1404
1406
|
max-height: 130px;
|
1405
1407
|
}
|
@@ -8889,11 +8889,9 @@ class Text {
|
|
8889
8889
|
|
8890
8890
|
if (text.trim() === '') {
|
8891
8891
|
elm.style.color = color;
|
8892
|
-
elm.style.backgroundClip = '';
|
8893
8892
|
} else {
|
8894
8893
|
if (elm.innerText === text) {
|
8895
8894
|
elm.style.color = color;
|
8896
|
-
elm.style.backgroundClip = '';
|
8897
8895
|
} else {
|
8898
8896
|
this.builder.doc.execCommand('ForeColor', false, color); //Cleanup FONTs
|
8899
8897
|
|
@@ -10839,13 +10837,17 @@ class PanelText {
|
|
10839
10837
|
// remove gradient if exists
|
10840
10838
|
let elm = this.text.getElm();
|
10841
10839
|
|
10842
|
-
if (elm.style.backgroundImage) {
|
10840
|
+
if (color !== '' && elm.style.backgroundImage) {
|
10843
10841
|
elm.style.backgroundImage = '';
|
10844
10842
|
elm.style.backgroundClip = ''; // set gradient preview none
|
10845
10843
|
|
10846
10844
|
btnGradient.style.backgroundImage = '';
|
10847
10845
|
}
|
10848
10846
|
|
10847
|
+
if (color === '' && elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
|
10848
|
+
color = 'transparent'; // needed by gradient
|
10849
|
+
}
|
10850
|
+
|
10849
10851
|
this.text.setTextColor(color);
|
10850
10852
|
btnColor.style.backgroundColor = color; // preview
|
10851
10853
|
// this.builder.onChange();
|
@@ -10866,9 +10868,10 @@ class PanelText {
|
|
10866
10868
|
|
10867
10869
|
btnColor.style.backgroundColor = '';
|
10868
10870
|
} else {
|
10869
|
-
//
|
10871
|
+
// clear gradient
|
10870
10872
|
elm.style.backgroundClip = '';
|
10871
|
-
elm.style.
|
10873
|
+
elm.style.backgroundImage = '';
|
10874
|
+
if (elm.style.color === 'transparent') elm.style.color = ''; // set text color preview back
|
10872
10875
|
|
10873
10876
|
setTimeout(() => {
|
10874
10877
|
let currentColor = this.text.getStyle(elm, 'color');
|
@@ -13508,6 +13511,7 @@ class PanelBox {
|
|
13508
13511
|
}); // Background Color
|
13509
13512
|
|
13510
13513
|
const btnColorPick = panel.querySelector('.btn-color');
|
13514
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
13511
13515
|
btnColorPick.addEventListener('click', () => {
|
13512
13516
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
13513
13517
|
|
@@ -13518,12 +13522,19 @@ class PanelBox {
|
|
13518
13522
|
activeBox.style.backgroundColor = ''; // backward compatibility (to clear bg color)
|
13519
13523
|
|
13520
13524
|
this.box.setBoxBgColor(s);
|
13525
|
+
let overlay = activeBox.querySelector('.is-overlay');
|
13526
|
+
|
13527
|
+
if (s !== '' && overlay.style.backgroundImage && overlay.style.backgroundImage.includes('gradient')) {
|
13528
|
+
overlay.style.backgroundImage = ''; // remove gradient
|
13529
|
+
|
13530
|
+
btnGradient.style.backgroundImage = ''; // remove gradient preview
|
13531
|
+
}
|
13532
|
+
|
13521
13533
|
btnColorPick.style.backgroundColor = s; // preview
|
13522
13534
|
|
13523
13535
|
this.builder.onChange();
|
13524
13536
|
}, bgcolor, () => {}, btnColorPick, true); // overlay=true
|
13525
13537
|
});
|
13526
|
-
const btnGradient = panel.querySelector('.btn-gradient');
|
13527
13538
|
btnGradient.addEventListener('click', () => {
|
13528
13539
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
13529
13540
|
|
@@ -13533,8 +13544,10 @@ class PanelBox {
|
|
13533
13544
|
gradientPicker.open(overlay, () => {
|
13534
13545
|
activeBox.style.backgroundImage = ''; // backward compatibility (to clear gradient)
|
13535
13546
|
|
13536
|
-
|
13537
|
-
|
13547
|
+
if (overlay.style.backgroundImage && overlay.style.backgroundImage.includes('linear-gradient')) {
|
13548
|
+
overlay.style.backgroundColor = '';
|
13549
|
+
btnColorPick.style.backgroundColor = ''; // remove bg color preview
|
13550
|
+
}
|
13538
13551
|
}, () => {}, btnGradient, true); // overlay=true
|
13539
13552
|
}); // Module
|
13540
13553
|
|
@@ -15270,7 +15283,7 @@ class PanelBlock {
|
|
15270
15283
|
colorpicker.open(s => {
|
15271
15284
|
blockOverlay.style.backgroundColor = s;
|
15272
15285
|
|
15273
|
-
if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
|
15286
|
+
if (s !== '' && blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
|
15274
15287
|
blockOverlay.style.backgroundImage = ''; // remove gradient
|
15275
15288
|
|
15276
15289
|
btnGradient.style.backgroundImage = ''; // preview
|
@@ -15287,12 +15300,14 @@ class PanelBlock {
|
|
15287
15300
|
let blockOverlay = this.blockOverlay();
|
15288
15301
|
let gradientPicker = this.builder.editor.gradientpicker();
|
15289
15302
|
gradientPicker.open(blockOverlay, () => {
|
15290
|
-
blockOverlay.style.backgroundColor = '';
|
15291
|
-
btnColorPick.style.backgroundColor = ''; // preview
|
15292
|
-
|
15293
15303
|
this.updatePanelImage('');
|
15294
|
-
|
15295
|
-
|
15304
|
+
|
15305
|
+
if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('linear-gradient')) {
|
15306
|
+
blockOverlay.style.backgroundColor = '';
|
15307
|
+
btnColorPick.style.backgroundColor = ''; // preview
|
15308
|
+
}
|
15309
|
+
|
15310
|
+
btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage; // needed because updatePanelImage clear it
|
15296
15311
|
}, () => {}, btnGradient, true); // overlay=true
|
15297
15312
|
}); // Background Image
|
15298
15313
|
|
@@ -16225,6 +16240,7 @@ class PanelSection {
|
|
16225
16240
|
}); // Background Color
|
16226
16241
|
|
16227
16242
|
const btnColorPick = panel.querySelector('.btn-color');
|
16243
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
16228
16244
|
btnColorPick.addEventListener('click', () => {
|
16229
16245
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
16230
16246
|
|
@@ -16239,10 +16255,15 @@ class PanelSection {
|
|
16239
16255
|
this.section.setSectionBgColor(s);
|
16240
16256
|
btnColorPick.style.backgroundColor = s; // preview
|
16241
16257
|
|
16258
|
+
if (s !== '') {
|
16259
|
+
section.style.backgroundImage = ''; //remove gradient
|
16260
|
+
|
16261
|
+
btnGradient.style.backgroundImage = '';
|
16262
|
+
}
|
16263
|
+
|
16242
16264
|
this.builder.onChange();
|
16243
16265
|
}, bgcolor, () => {}, btnColorPick, true);
|
16244
16266
|
});
|
16245
|
-
const btnGradient = panel.querySelector('.btn-gradient');
|
16246
16267
|
btnGradient.addEventListener('click', () => {
|
16247
16268
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
16248
16269
|
|
@@ -16250,8 +16271,11 @@ class PanelSection {
|
|
16250
16271
|
let gradientPicker = this.builder.editor.gradientpicker();
|
16251
16272
|
gradientPicker.open(section, () => {
|
16252
16273
|
this.section.clearOverlayBg();
|
16253
|
-
|
16254
|
-
|
16274
|
+
|
16275
|
+
if (section.style.backgroundImage && section.style.backgroundImage.includes('linear-gradient')) {
|
16276
|
+
section.style.backgroundColor = '';
|
16277
|
+
btnColorPick.style.backgroundColor = ''; // preview
|
16278
|
+
}
|
16255
16279
|
}, () => {}, btnGradient, true); // overlay=true
|
16256
16280
|
}); // Animation
|
16257
16281
|
|
@@ -16913,6 +16937,7 @@ class PanelColumn {
|
|
16913
16937
|
}); // Background Color
|
16914
16938
|
|
16915
16939
|
const btnColorPick = panel.querySelector('.btn-color');
|
16940
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
16916
16941
|
btnColorPick.addEventListener('click', () => {
|
16917
16942
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
16918
16943
|
|
@@ -16921,22 +16946,31 @@ class PanelColumn {
|
|
16921
16946
|
const colorpicker = this.builder.editor.colorpicker();
|
16922
16947
|
colorpicker.open(s => {
|
16923
16948
|
activeColumn.style.backgroundColor = s;
|
16924
|
-
activeColumn.style.backgroundImage = ''; // remove gradient
|
16925
|
-
|
16926
16949
|
btnColorPick.style.backgroundColor = s; // preview
|
16927
16950
|
|
16951
|
+
if (s !== '' && activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('gradient')) {
|
16952
|
+
activeColumn.style.backgroundImage = ''; // remove gradient
|
16953
|
+
|
16954
|
+
btnGradient.style.backgroundImage = ''; // remove gradient preview
|
16955
|
+
|
16956
|
+
this.imagePreview.innerHTML = '';
|
16957
|
+
}
|
16958
|
+
|
16928
16959
|
this.builder.onChange();
|
16929
16960
|
}, bgcolor, () => {}, btnColorPick, true); // overlay=true
|
16930
16961
|
});
|
16931
|
-
const btnGradient = panel.querySelector('.btn-gradient');
|
16932
16962
|
btnGradient.addEventListener('click', () => {
|
16933
16963
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
16934
16964
|
|
16935
16965
|
let activeColumn = this.builder.controlpanel.activeColumn;
|
16936
16966
|
let gradientPicker = this.builder.editor.gradientpicker();
|
16937
16967
|
gradientPicker.open(activeColumn, () => {
|
16938
|
-
|
16939
|
-
|
16968
|
+
if (activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('linear-gradient')) {
|
16969
|
+
activeColumn.style.backgroundColor = '';
|
16970
|
+
btnColorPick.style.backgroundColor = ''; // remove bg color preview
|
16971
|
+
}
|
16972
|
+
|
16973
|
+
this.updatePanelImage('');
|
16940
16974
|
}, () => {}, btnGradient, true); // overlay=true
|
16941
16975
|
}); // Text Color
|
16942
16976
|
|
@@ -17633,6 +17667,7 @@ class PanelColumn {
|
|
17633
17667
|
}
|
17634
17668
|
|
17635
17669
|
updateImage(src) {
|
17670
|
+
const panel = this.panel;
|
17636
17671
|
this.builder.editor.saveForUndo();
|
17637
17672
|
let activeColumn = this.builder.controlpanel.activeColumn;
|
17638
17673
|
|
@@ -17646,6 +17681,8 @@ class PanelColumn {
|
|
17646
17681
|
|
17647
17682
|
this.builder.editor.onChange();
|
17648
17683
|
this.updatePanelImage(src);
|
17684
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
17685
|
+
btnGradient.style.backgroundImage = '';
|
17649
17686
|
}
|
17650
17687
|
|
17651
17688
|
clear() {
|
@@ -17903,6 +17940,7 @@ class PanelRow {
|
|
17903
17940
|
}); // Background Color
|
17904
17941
|
|
17905
17942
|
const btnColorPick = panel.querySelector('.btn-color');
|
17943
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
17906
17944
|
btnColorPick.addEventListener('click', () => {
|
17907
17945
|
this.builder.editor.saveForUndo(true); // checkLater = true
|
17908
17946
|
|
@@ -17914,10 +17952,15 @@ class PanelRow {
|
|
17914
17952
|
row.style.backgroundColor = s;
|
17915
17953
|
btnColorPick.style.backgroundColor = s; // preview
|
17916
17954
|
|
17955
|
+
if (s !== '' && row.style.backgroundImage && row.style.backgroundImage.includes('gradient')) {
|
17956
|
+
row.style.backgroundImage = ''; // remove gradient
|
17957
|
+
|
17958
|
+
btnGradient.style.backgroundImage = ''; // remove gradient preview
|
17959
|
+
}
|
17960
|
+
|
17917
17961
|
this.builder.onChange();
|
17918
17962
|
}, bgcolor, () => {}, btnColorPick, true); // overlay=true
|
17919
17963
|
});
|
17920
|
-
const btnGradient = panel.querySelector('.btn-gradient');
|
17921
17964
|
btnGradient.addEventListener('click', () => {
|
17922
17965
|
const row = this.rowOverlay();
|
17923
17966
|
if (!row) return;
|
@@ -17926,8 +17969,12 @@ class PanelRow {
|
|
17926
17969
|
let gradientPicker = this.builder.editor.gradientpicker();
|
17927
17970
|
gradientPicker.open(row, () => {
|
17928
17971
|
this.updatePanelImage('');
|
17929
|
-
|
17930
|
-
|
17972
|
+
|
17973
|
+
if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
|
17974
|
+
row.style.backgroundColor = '';
|
17975
|
+
btnColorPick.style.backgroundColor = ''; // remove bg color preview
|
17976
|
+
} // btnGradient.style.backgroundImage = row.style.backgroundImage;
|
17977
|
+
|
17931
17978
|
}, () => {}, btnGradient, true); // overlay=true
|
17932
17979
|
}); // Grid Settings
|
17933
17980
|
|
@@ -18317,6 +18364,11 @@ class PanelRow {
|
|
18317
18364
|
btnClear.style.display = '';
|
18318
18365
|
btnAdjust.style.display = '';
|
18319
18366
|
}
|
18367
|
+
|
18368
|
+
if (src) {
|
18369
|
+
const btnGradient = panel.querySelector('.btn-gradient');
|
18370
|
+
btnGradient.style.backgroundImage = '';
|
18371
|
+
}
|
18320
18372
|
}
|
18321
18373
|
|
18322
18374
|
rowOverlay() {
|
@@ -23417,6 +23469,12 @@ class Element$2 {
|
|
23417
23469
|
elm.style[property] = s;
|
23418
23470
|
btnPicker.style.backgroundColor = s; // preview
|
23419
23471
|
|
23472
|
+
if (s !== '' && property === 'background-color') {
|
23473
|
+
elm.style.backgroundImage = '';
|
23474
|
+
const btnGradient = dialog.querySelector('.btn-gradient');
|
23475
|
+
btnGradient.style.backgroundImage = '';
|
23476
|
+
}
|
23477
|
+
|
23420
23478
|
this.builder.onChange();
|
23421
23479
|
}, bgcolor, () => {}, btnPicker, true); //overlay=true
|
23422
23480
|
});
|
@@ -23462,8 +23520,11 @@ class Element$2 {
|
|
23462
23520
|
const elm = this.inspectedElement;
|
23463
23521
|
let gradientPicker = this.builder.editor.gradientpicker();
|
23464
23522
|
gradientPicker.open(elm, () => {
|
23465
|
-
|
23466
|
-
|
23523
|
+
if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
|
23524
|
+
elm.style.backgroundColor = '';
|
23525
|
+
const btnColorPick = dialog.querySelector('.btn-bgcolor');
|
23526
|
+
btnColorPick.style.backgroundColor = ''; // preview
|
23527
|
+
}
|
23467
23528
|
}, () => {}, btnGradient, true);
|
23468
23529
|
}); // Responsive
|
23469
23530
|
|
@@ -27155,6 +27216,11 @@ class Snippets {
|
|
27155
27216
|
|
27156
27217
|
var snippets = data_basic.snippets; //DATA
|
27157
27218
|
|
27219
|
+
${!this.builder.canvas && !this.builder.isContentBox ? `
|
27220
|
+
const canvasFilter = (item) => (item.mode!=='canvas');
|
27221
|
+
snippets = snippets.filter(canvasFilter);
|
27222
|
+
` : ''}
|
27223
|
+
|
27158
27224
|
if (slider !== null){
|
27159
27225
|
if(slider==='slick') {
|
27160
27226
|
//remove glide
|
@@ -27384,6 +27450,12 @@ class Snippets {
|
|
27384
27450
|
if(snippets[i].id + ''=== snippetid) {
|
27385
27451
|
|
27386
27452
|
var html = snippets[i].html;
|
27453
|
+
|
27454
|
+
// check if is block
|
27455
|
+
if(html.includes('"is-block')) {
|
27456
|
+
html = snippets[i].html2;
|
27457
|
+
}
|
27458
|
+
|
27387
27459
|
var noedit = snippets[i].noedit;
|
27388
27460
|
break;
|
27389
27461
|
}
|
@@ -75286,9 +75358,10 @@ class Hyperlink {
|
|
75286
75358
|
linkTool.style.top = top - h - 3 + 'px';
|
75287
75359
|
linkTool.style.left = left + link.offsetWidth * this.builder.opts.zoom - w + 'px';
|
75288
75360
|
const handleLinkButtonClick = e => {
|
75361
|
+
const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
|
75289
75362
|
let elm = e.target;
|
75290
75363
|
if (!elm) return;
|
75291
|
-
if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a')) {
|
75364
|
+
if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a') && !clrPicker) {
|
75292
75365
|
// click outside
|
75293
75366
|
|
75294
75367
|
this.hideTool();
|
@@ -75414,6 +75487,7 @@ class Button {
|
|
75414
75487
|
const contentStuff = this.builder.contentStuff;
|
75415
75488
|
const dom = this.builder.dom;
|
75416
75489
|
this.dom = dom;
|
75490
|
+
this.builderStuff = builderStuff;
|
75417
75491
|
let buttonTool = builderStuff.querySelector('#divButtonTool');
|
75418
75492
|
if (!buttonTool) {
|
75419
75493
|
let html = `<div id="divButtonTool" class="is-tool">
|
@@ -75485,9 +75559,10 @@ class Button {
|
|
75485
75559
|
this.renderTool();
|
75486
75560
|
this.showTool(btn);
|
75487
75561
|
const handleButtonClick = e => {
|
75562
|
+
const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
|
75488
75563
|
let elm = e.target;
|
75489
75564
|
if (!elm) return;
|
75490
|
-
if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button')) {
|
75565
|
+
if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button') && !clrPicker) {
|
75491
75566
|
// click outside
|
75492
75567
|
|
75493
75568
|
// hide
|
@@ -76689,9 +76764,11 @@ class Table {
|
|
76689
76764
|
this.realtime();
|
76690
76765
|
const handleTableClick = e => {
|
76691
76766
|
// console.log('handleTableClick');
|
76767
|
+
|
76768
|
+
const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
|
76692
76769
|
let elm = e.target;
|
76693
76770
|
if (!elm) return;
|
76694
|
-
if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table')) {
|
76771
|
+
if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table') && !clrPicker) {
|
76695
76772
|
// click outside
|
76696
76773
|
|
76697
76774
|
// hide
|
@@ -78310,6 +78387,11 @@ class RowTool {
|
|
78310
78387
|
row.style.backgroundColor = color;
|
78311
78388
|
elm.style.backgroundColor = color; // preview
|
78312
78389
|
|
78390
|
+
if (color !== '') {
|
78391
|
+
let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
|
78392
|
+
btnRowGradient.style.backgroundImage = '';
|
78393
|
+
row.style.backgroundImage = '';
|
78394
|
+
}
|
78313
78395
|
this.builder.opts.onChange();
|
78314
78396
|
}, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
|
78315
78397
|
btnRowBgColor.removeAttribute('data-focus');
|
@@ -78425,9 +78507,13 @@ class RowTool {
|
|
78425
78507
|
div.innerHTML = '';
|
78426
78508
|
const inpSrc = this.imageSource.querySelector('.input-src');
|
78427
78509
|
inpSrc.value = '';
|
78510
|
+
if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
|
78511
|
+
const btnCellBgColor = this.rowSettings.querySelector('.input-row-bgcolor');
|
78512
|
+
btnCellBgColor.style.backgroundColor = '';
|
78513
|
+
row.style.backgroundColor = '';
|
78514
|
+
}
|
78428
78515
|
|
78429
|
-
//
|
78430
|
-
this.builder.opts.onChange();
|
78516
|
+
// this.builder.opts.onChange();
|
78431
78517
|
}, isChanged => {
|
78432
78518
|
btnRowGradient.removeAttribute('data-focus');
|
78433
78519
|
btnRowGradient.focus();
|
@@ -80027,6 +80113,11 @@ class ColumnTool {
|
|
80027
80113
|
cell.style.backgroundColor = color;
|
80028
80114
|
elm.style.backgroundColor = color; // preview
|
80029
80115
|
|
80116
|
+
if (color !== '') {
|
80117
|
+
let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
|
80118
|
+
btnCellGradient.style.backgroundImage = '';
|
80119
|
+
cell.style.backgroundImage = '';
|
80120
|
+
}
|
80030
80121
|
this.builder.opts.onChange();
|
80031
80122
|
}, cellSettings.querySelector('.input-cell-bgcolor').style.backgroundColor, () => {
|
80032
80123
|
btnCellBgColor.removeAttribute('data-focus');
|
@@ -80160,7 +80251,13 @@ class ColumnTool {
|
|
80160
80251
|
div.innerHTML = '';
|
80161
80252
|
const inpSrc = this.imageSource.querySelector('.input-src');
|
80162
80253
|
inpSrc.value = '';
|
80163
|
-
|
80254
|
+
if (cell.style.backgroundImage && cell.style.backgroundImage.includes('linear-gradient')) {
|
80255
|
+
const btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
|
80256
|
+
btnCellBgColor.style.backgroundColor = '';
|
80257
|
+
cell.style.backgroundColor = '';
|
80258
|
+
}
|
80259
|
+
|
80260
|
+
// this.builder.opts.onChange();
|
80164
80261
|
}, isChanged => {
|
80165
80262
|
btnCellGradient.removeAttribute('data-focus');
|
80166
80263
|
btnCellGradient.focus();
|
@@ -81833,17 +81930,20 @@ class ElementGeneralStyles {
|
|
81833
81930
|
|
81834
81931
|
// Background color
|
81835
81932
|
let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
|
81836
|
-
btnElmBgColor.addEventListener('click',
|
81933
|
+
btnElmBgColor.addEventListener('click', () => {
|
81837
81934
|
this.builder.uo.saveForUndo(true); // checkLater = true
|
81838
81935
|
|
81839
|
-
let elm = e.target;
|
81840
81936
|
this.builder.colorPicker.open(color => {
|
81841
|
-
this.builder.inspectedElement
|
81842
|
-
elm.style.backgroundColor = color;
|
81937
|
+
let elm = this.builder.inspectedElement;
|
81938
|
+
elm.style.backgroundColor = color;
|
81939
|
+
btnElmBgColor.style.backgroundColor = color; // preview
|
81843
81940
|
|
81941
|
+
if (color !== '') {
|
81942
|
+
let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
|
81943
|
+
btnElmGradient.style.backgroundImage = '';
|
81944
|
+
elm.style.backgroundImage = '';
|
81945
|
+
}
|
81844
81946
|
elementStyleEditor.refresh();
|
81845
|
-
|
81846
|
-
//Trigger Change event
|
81847
81947
|
this.builder.opts.onChange();
|
81848
81948
|
}, panelStuff.querySelector('.input-elm-bgcolor').style.backgroundColor, () => {
|
81849
81949
|
btnElmBgColor.removeAttribute('data-focus');
|
@@ -81860,10 +81960,15 @@ class ElementGeneralStyles {
|
|
81860
81960
|
this.builder.uo.saveForUndo(true); // checkLater = true
|
81861
81961
|
|
81862
81962
|
gradientPicker.open(this.builder.inspectedElement, () => {
|
81963
|
+
let elm = this.builder.inspectedElement;
|
81964
|
+
if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
|
81965
|
+
const btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
|
81966
|
+
btnElmBgColor.style.backgroundColor = '';
|
81967
|
+
elm.style.backgroundColor = '';
|
81968
|
+
}
|
81863
81969
|
elementStyleEditor.refresh();
|
81864
81970
|
|
81865
|
-
//
|
81866
|
-
this.builder.opts.onChange();
|
81971
|
+
// this.builder.opts.onChange();
|
81867
81972
|
}, isChanged => {
|
81868
81973
|
if (isChanged) {
|
81869
81974
|
elementStyleEditor.refresh();
|
@@ -115871,10 +115976,15 @@ class BlockModal {
|
|
115871
115976
|
|
115872
115977
|
<div class="modal-page-content" style="display:none;padding-bottom:28px;">
|
115873
115978
|
|
115874
|
-
<div style="
|
115875
|
-
|
115876
|
-
|
115877
|
-
|
115979
|
+
<div style="display:flex;gap:40px">
|
115980
|
+
<div>
|
115981
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
115982
|
+
<button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
|
115983
|
+
</div>
|
115984
|
+
<div>
|
115985
|
+
<div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
|
115986
|
+
<button title="${util.out('Gradient')}" class="btn-page-gradient is-btn-color"></button>
|
115987
|
+
</div>
|
115878
115988
|
</div>
|
115879
115989
|
|
115880
115990
|
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
@@ -115941,10 +116051,15 @@ class BlockModal {
|
|
115941
116051
|
|
115942
116052
|
<div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
|
115943
116053
|
|
115944
|
-
<div style="
|
115945
|
-
|
115946
|
-
|
115947
|
-
|
116054
|
+
<div style="display:flex;gap:40px">
|
116055
|
+
<div>
|
116056
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
116057
|
+
<button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
|
116058
|
+
</div>
|
116059
|
+
<div>
|
116060
|
+
<div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
|
116061
|
+
<button title="${util.out('Gradient')}" class="btn-block-gradient is-btn-color"></button>
|
116062
|
+
</div>
|
115948
116063
|
</div>
|
115949
116064
|
|
115950
116065
|
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
@@ -137886,7 +138001,7 @@ class Box {
|
|
137886
138001
|
setBoxBgColor(s) {
|
137887
138002
|
const activeBox = this.builder.activeBox;
|
137888
138003
|
let overlay = activeBox.querySelector('.is-overlay');
|
137889
|
-
overlay.style.backgroundColor = s;
|
138004
|
+
overlay.style.backgroundColor = s;
|
137890
138005
|
} // Box Size
|
137891
138006
|
|
137892
138007
|
|
@@ -139860,7 +139975,6 @@ class Section {
|
|
139860
139975
|
const activeSection = this.builder.activeSection;
|
139861
139976
|
this.clearOverlayBg();
|
139862
139977
|
activeSection.style.backgroundColor = s;
|
139863
|
-
activeSection.style.backgroundImage = ''; //remove gradient
|
139864
139978
|
}
|
139865
139979
|
|
139866
139980
|
clearOverlayBg() {
|