@innovastudio/contentbox 1.6.32 → 1.6.34
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.34",
|
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.13",
|
56
56
|
"js-beautify": "^1.14.0"
|
57
57
|
}
|
58
58
|
}
|
@@ -13451,8 +13451,14 @@ class PanelBox {
|
|
13451
13451
|
if (!this.builder.onUploadCoverImage) btnUpload.style.display = 'none';
|
13452
13452
|
const btnOpenAsset = panel.querySelector('.btn-asset');
|
13453
13453
|
btnOpenAsset.addEventListener('click', () => {
|
13454
|
-
this.builder.editor.openAssetSelect('image', src => {
|
13454
|
+
this.builder.editor.openAssetSelect('image', (src, f) => {
|
13455
13455
|
this.updateImage(src);
|
13456
|
+
|
13457
|
+
if (f) {
|
13458
|
+
const activeBox = this.builder.activeBox;
|
13459
|
+
let overlayBg = activeBox.querySelector('.is-overlay-bg');
|
13460
|
+
if (overlayBg) overlayBg.setAttribute('data-filename', f);
|
13461
|
+
}
|
13456
13462
|
}, btnOpenAsset);
|
13457
13463
|
}); // Show/hide button
|
13458
13464
|
|
@@ -13830,9 +13836,14 @@ class PanelBox {
|
|
13830
13836
|
if (!this.builder.onMediaUpload) btnUpload2.style.display = 'none';
|
13831
13837
|
const btnOpenAsset2 = panel.querySelector('.btn-asset-2');
|
13832
13838
|
btnOpenAsset2.addEventListener('click', () => {
|
13833
|
-
this.builder.editor.openAssetSelect('media', src => {
|
13839
|
+
this.builder.editor.openAssetSelect('media', (src, f) => {
|
13834
13840
|
inpSrc2.value = src;
|
13835
13841
|
this.box.applyBoxClick(src);
|
13842
|
+
|
13843
|
+
if (f) {
|
13844
|
+
const activeBox = this.builder.activeBox;
|
13845
|
+
activeBox.setAttribute('data-filename', f);
|
13846
|
+
}
|
13836
13847
|
}, btnOpenAsset2);
|
13837
13848
|
}); // Show/hide button
|
13838
13849
|
|
@@ -16738,8 +16749,13 @@ class PanelColumn {
|
|
16738
16749
|
if (!this.builder.onImageUpload) btnUpload.style.display = 'none';
|
16739
16750
|
const btnOpenAsset = panel.querySelector('.btn-asset');
|
16740
16751
|
btnOpenAsset.addEventListener('click', () => {
|
16741
|
-
this.builder.editor.openAssetSelect('image', src => {
|
16752
|
+
this.builder.editor.openAssetSelect('image', (src, f) => {
|
16742
16753
|
this.updateImage(src);
|
16754
|
+
|
16755
|
+
if (f) {
|
16756
|
+
let activeColumn = this.builder.controlpanel.activeColumn;
|
16757
|
+
activeColumn.setAttribute('data-filename', f);
|
16758
|
+
}
|
16743
16759
|
}, btnOpenAsset);
|
16744
16760
|
}); // Show/hide button
|
16745
16761
|
|
@@ -17085,9 +17101,14 @@ class PanelColumn {
|
|
17085
17101
|
if (!this.builder.onMediaUpload) btnUpload2.style.display = 'none';
|
17086
17102
|
const btnOpenAsset2 = panel.querySelector('.btn-asset-2');
|
17087
17103
|
btnOpenAsset2.addEventListener('click', () => {
|
17088
|
-
this.builder.editor.openAssetSelect('media', src => {
|
17104
|
+
this.builder.editor.openAssetSelect('media', (src, f) => {
|
17089
17105
|
inpSrc2.value = src;
|
17090
17106
|
this.applyClick(src);
|
17107
|
+
|
17108
|
+
if (f) {
|
17109
|
+
let activeColumn = this.builder.controlpanel.activeColumn;
|
17110
|
+
activeColumn.setAttribute('data-filename', f);
|
17111
|
+
}
|
17091
17112
|
}, btnOpenAsset2);
|
17092
17113
|
}); // Show/hide button
|
17093
17114
|
|
@@ -17704,8 +17725,13 @@ class PanelRow {
|
|
17704
17725
|
if (!this.builder.onImageUpload) btnUpload.style.display = 'none';
|
17705
17726
|
const btnOpenAsset = panel.querySelector('.btn-asset');
|
17706
17727
|
btnOpenAsset.addEventListener('click', () => {
|
17707
|
-
this.builder.editor.openAssetSelect('image', src => {
|
17728
|
+
this.builder.editor.openAssetSelect('image', (src, f) => {
|
17708
17729
|
this.updateImage(src);
|
17730
|
+
|
17731
|
+
if (f) {
|
17732
|
+
const row = this.rowOverlay();
|
17733
|
+
row.setAttribute('data-filename', f);
|
17734
|
+
}
|
17709
17735
|
}, btnOpenAsset);
|
17710
17736
|
}); // Show/hide button
|
17711
17737
|
|
@@ -28658,6 +28684,7 @@ class Util$1 {
|
|
28658
28684
|
localStorage.removeItem('_auto_editblock');
|
28659
28685
|
localStorage.removeItem('_command_lang');
|
28660
28686
|
localStorage.removeItem('_ai_panel_open');
|
28687
|
+
localStorage.removeItem('_pagesize');
|
28661
28688
|
|
28662
28689
|
//NOT USED
|
28663
28690
|
localStorage.removeItem('_scrollableeditor');
|
@@ -97282,13 +97309,13 @@ class SaveImages {
|
|
97282
97309
|
const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
|
97283
97310
|
divs.forEach(div => {
|
97284
97311
|
let src = '';
|
97285
|
-
if (div.style.backgroundImage) {
|
97312
|
+
if (div.style.backgroundImage && div.style.backgroundImage.includes('base64')) {
|
97286
97313
|
if (div.style.backgroundImage.indexOf('url(') !== -1) {
|
97287
97314
|
src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
97288
97315
|
}
|
97289
|
-
} else if (div.classList.contains('is-lightbox')) {
|
97316
|
+
} else if (div.classList.contains('is-lightbox') && div.getAttribute('href').includes('base64')) {
|
97290
97317
|
src = div.getAttribute('href');
|
97291
|
-
} else if (div.classList.contains('block-click')) {
|
97318
|
+
} else if (div.classList.contains('block-click') && div.style.backgroundImage && !div.style.backgroundImage.includes('base64')) {
|
97292
97319
|
src = div.getAttribute('data-modal-url');
|
97293
97320
|
}
|
97294
97321
|
if (src.includes('base64')) {
|
@@ -97301,7 +97328,12 @@ class SaveImages {
|
|
97301
97328
|
//Read image (base64 string)
|
97302
97329
|
let image = src;
|
97303
97330
|
image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
|
97304
|
-
let filename
|
97331
|
+
let filename;
|
97332
|
+
if (div.hasAttribute('data-filename')) {
|
97333
|
+
filename = div.getAttribute('data-filename');
|
97334
|
+
} else {
|
97335
|
+
filename = this.builder.util.makeId() + '.' + ext;
|
97336
|
+
}
|
97305
97337
|
|
97306
97338
|
// console.log(div)
|
97307
97339
|
this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
|
@@ -110512,6 +110544,7 @@ class PageSize {
|
|
110512
110544
|
const builderStuff = this.builderStuff;
|
110513
110545
|
const util = this.util;
|
110514
110546
|
const dom = this.dom;
|
110547
|
+
const pageSizes = this.builder.pageSizes;
|
110515
110548
|
let modal = builderStuff.querySelector('.is-modal.pagesize');
|
110516
110549
|
if (!modal) {
|
110517
110550
|
const html = `
|
@@ -110519,24 +110552,7 @@ class PageSize {
|
|
110519
110552
|
<div class="is-modal-content">
|
110520
110553
|
|
110521
110554
|
<div class="div-page-sizes">
|
110522
|
-
|
110523
|
-
<button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
|
110524
|
-
<button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
|
110525
|
-
<button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
|
110526
|
-
<button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
|
110527
|
-
<button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
|
110528
|
-
<button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
|
110529
|
-
<button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
|
110530
|
-
<button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
|
110531
|
-
<button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
|
110532
|
-
<button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
|
110533
|
-
<button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
|
110534
|
-
<button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
|
110535
|
-
<button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
|
110536
|
-
<button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
|
110537
|
-
<button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
|
110538
|
-
<button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
|
110539
|
-
<button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
|
110555
|
+
${pageSizes.map(item => `<button title="${item.title}" data-pagesize="${item.pagesize}" style="${item.style}" class="paper-item">${item.title}</button>`).join('')}
|
110540
110556
|
</div>
|
110541
110557
|
|
110542
110558
|
<div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
|
@@ -111115,6 +111131,81 @@ class ContentBuilder {
|
|
111115
111131
|
onBlockCanvasAdd: function () {},
|
111116
111132
|
// docContainer: '.is-page',
|
111117
111133
|
blockContainer: '.is-box',
|
111134
|
+
pageSize: '100%,100vh,web',
|
111135
|
+
//'800px,1000px,web'
|
111136
|
+
pageSizes: [{
|
111137
|
+
title: 'Web',
|
111138
|
+
pagesize: '100%,100vh,web',
|
111139
|
+
style: 'width:180px;height:112.5px'
|
111140
|
+
}, {
|
111141
|
+
title: 'Web (container)',
|
111142
|
+
pagesize: '800px,1000px,web',
|
111143
|
+
style: 'width:180px;height:112.5px'
|
111144
|
+
}, {
|
111145
|
+
title: '8.27x5.52',
|
111146
|
+
pagesize: '8.27in,5.52in',
|
111147
|
+
style: 'width:124.05px;height:82.8px'
|
111148
|
+
}, {
|
111149
|
+
title: '8.3x5.8',
|
111150
|
+
pagesize: '8.3in,5.8in',
|
111151
|
+
style: 'width:124.5px;height:87px'
|
111152
|
+
}, {
|
111153
|
+
title: '9x7',
|
111154
|
+
pagesize: '9in,7in',
|
111155
|
+
style: 'wwidth:135px;height:105px'
|
111156
|
+
}, {
|
111157
|
+
title: 'A4',
|
111158
|
+
pagesize: '11.7in,8.3in',
|
111159
|
+
style: 'width:175.5px;height:124.5px'
|
111160
|
+
}, {
|
111161
|
+
title: 'Letter',
|
111162
|
+
pagesize: '11in,8.5in',
|
111163
|
+
style: 'width:165px;height:127.5px'
|
111164
|
+
}, {
|
111165
|
+
title: '12.5x10',
|
111166
|
+
pagesize: '12.5in,10in',
|
111167
|
+
style: 'width:187.5px;height:150px'
|
111168
|
+
}, {
|
111169
|
+
title: '14x11',
|
111170
|
+
pagesize: '14in,11in',
|
111171
|
+
style: 'width:210px;height:165px'
|
111172
|
+
}, {
|
111173
|
+
title: '8.5x8.5',
|
111174
|
+
pagesize: '8.5in,8.5in',
|
111175
|
+
style: 'width:127.5px;height:127.5px'
|
111176
|
+
}, {
|
111177
|
+
title: '10x10',
|
111178
|
+
pagesize: '10in,10in',
|
111179
|
+
style: 'width:150px;height:150px'
|
111180
|
+
}, {
|
111181
|
+
title: '12x12',
|
111182
|
+
pagesize: '12in,12in',
|
111183
|
+
style: 'width:180px;height:180px'
|
111184
|
+
}, {
|
111185
|
+
title: '5.27x8.27',
|
111186
|
+
pagesize: '5.27in,8.27in',
|
111187
|
+
style: 'width:79.05px;height:124.05px'
|
111188
|
+
}, {
|
111189
|
+
title: 'A5',
|
111190
|
+
pagesize: '5.8in,8.3in',
|
111191
|
+
style: 'width:87px;height:124.5px'
|
111192
|
+
}, {
|
111193
|
+
title: '6x9',
|
111194
|
+
pagesize: '6in,9in',
|
111195
|
+
style: 'width:90px;height:135px'
|
111196
|
+
}, {
|
111197
|
+
title: '6.6x10.25',
|
111198
|
+
pagesize: '6.6in,10.25in',
|
111199
|
+
style: 'width:99px;height:153.75px'
|
111200
|
+
}, {
|
111201
|
+
title: 'Letter',
|
111202
|
+
pagesize: '8.5in,11in',
|
111203
|
+
style: 'width:127.5px;height:165px'
|
111204
|
+
}, {
|
111205
|
+
title: 'A4',
|
111206
|
+
pagesize: '8.3in,11.7in',
|
111207
|
+
style: 'width:124.5px;height:175.5px'
|
111208
|
+
}],
|
111118
111209
|
/*
|
111119
111210
|
Deprecated:
|
111120
111211
|
snippetSampleImage: '',
|
@@ -114371,7 +114462,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114371
114462
|
|
114372
114463
|
this.selectAsset(s);
|
114373
114464
|
}
|
114374
|
-
selectAsset(s) {
|
114465
|
+
selectAsset(s, f) {
|
114375
114466
|
let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
|
114376
114467
|
extension = extension.toLowerCase();
|
114377
114468
|
let ok = false;
|
@@ -114403,6 +114494,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114403
114494
|
}
|
114404
114495
|
}
|
114405
114496
|
if (ok) {
|
114497
|
+
if (f) this.targetInput.setAttribute('data-filename', f);else this.targetInput.removeAttribute('data-filename');
|
114406
114498
|
this.targetInput.value = s;
|
114407
114499
|
|
114408
114500
|
// if(this.targetCallback) this.targetCallback();
|
@@ -114452,7 +114544,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114452
114544
|
alert(out('Please select an image file.'));
|
114453
114545
|
}
|
114454
114546
|
if (ok) {
|
114455
|
-
if
|
114547
|
+
// if(callback) callback(s);
|
114548
|
+
if (callback) {
|
114549
|
+
// if s is base64 and there is data-filename attribute set
|
114550
|
+
let f;
|
114551
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
114552
|
+
callback(s, f);
|
114553
|
+
}
|
114456
114554
|
}
|
114457
114555
|
desc.set.call(this, s);
|
114458
114556
|
}
|
@@ -114492,7 +114590,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114492
114590
|
if (targetAssetType === 'media') alert(out('Please select an image or video file.'));
|
114493
114591
|
}
|
114494
114592
|
if (ok) {
|
114495
|
-
if
|
114593
|
+
// if(callback) callback(s);
|
114594
|
+
if (callback) {
|
114595
|
+
// if s is base64 and there is data-filename attribute set
|
114596
|
+
let f;
|
114597
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
114598
|
+
callback(s, f);
|
114599
|
+
}
|
114496
114600
|
}
|
114497
114601
|
desc.set.call(this, s);
|
114498
114602
|
}
|
@@ -114544,7 +114648,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114544
114648
|
}
|
114545
114649
|
}
|
114546
114650
|
if (ok) {
|
114547
|
-
if
|
114651
|
+
// if(callback) callback(s);
|
114652
|
+
if (callback) {
|
114653
|
+
// if s is base64 and there is data-filename attribute set
|
114654
|
+
let f;
|
114655
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
114656
|
+
callback(s, f);
|
114657
|
+
}
|
114548
114658
|
}
|
114549
114659
|
desc.set.call(this, s);
|
114550
114660
|
}
|
@@ -115253,6 +115363,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
115253
115363
|
const docContainer = this.doc.querySelector(this.docContainer);
|
115254
115364
|
let range = this.doc.createRange();
|
115255
115365
|
docContainer.innerHTML = '';
|
115366
|
+
if (!html.includes('is-box')) {
|
115367
|
+
html = `
|
115368
|
+
<div class="is-box box-canvas autolayout">
|
115369
|
+
<div class="is-block block-steady height-auto" style="top: calc(50% - 357px); left: calc(50% - 348px); width: 696px;" data--t="calc(50% - 357px)" data--l="calc(50% - 348px)" data--b="" data--r="" data--w="696px" data--h="">
|
115370
|
+
<div class="is-container leading-12 size-17">
|
115371
|
+
${html}
|
115372
|
+
</div>
|
115373
|
+
<div class="is-block-overlay"></div>
|
115374
|
+
</div>
|
115375
|
+
</div>
|
115376
|
+
`;
|
115377
|
+
}
|
115256
115378
|
docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
115257
115379
|
|
115258
115380
|
// set page size
|
@@ -149908,9 +150030,16 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
149908
150030
|
}
|
149909
150031
|
}
|
149910
150032
|
|
149911
|
-
this.editor.openImageSelect(src => {
|
150033
|
+
this.editor.openImageSelect((src, f) => {
|
149912
150034
|
this.editor.saveForUndo();
|
149913
|
-
this.boxImage(src);
|
150035
|
+
this.boxImage(src);
|
150036
|
+
|
150037
|
+
if (f) {
|
150038
|
+
const activeBox = this.activeBox;
|
150039
|
+
let overlayBg = activeBox.querySelector('.is-overlay-bg');
|
150040
|
+
if (overlayBg) overlayBg.setAttribute('data-filename', f);
|
150041
|
+
} //Trigger Change event
|
150042
|
+
|
149914
150043
|
|
149915
150044
|
this.onChange();
|
149916
150045
|
}, currentImageUrl);
|