@innovastudio/contentbuilder 1.5.11 → 1.5.13
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -2515,6 +2515,10 @@ button:focus-visible {
|
|
2515
2515
|
box-sizing: border-box;
|
2516
2516
|
height: 590px;
|
2517
2517
|
}
|
2518
|
+
#_cbhtml .is-modal.pagesize .div-page-sizes .paper-item,
|
2519
|
+
.is-ui .is-modal.pagesize .div-page-sizes .paper-item {
|
2520
|
+
flex: none;
|
2521
|
+
}
|
2518
2522
|
#_cbhtml .is-modal.pagesize [data-pagesize],
|
2519
2523
|
.is-ui .is-modal.pagesize [data-pagesize] {
|
2520
2524
|
background: #fff;
|
@@ -3221,6 +3221,7 @@ class Util {
|
|
3221
3221
|
localStorage.removeItem('_auto_editblock');
|
3222
3222
|
localStorage.removeItem('_command_lang');
|
3223
3223
|
localStorage.removeItem('_ai_panel_open');
|
3224
|
+
localStorage.removeItem('_pagesize');
|
3224
3225
|
|
3225
3226
|
//NOT USED
|
3226
3227
|
localStorage.removeItem('_scrollableeditor');
|
@@ -71845,13 +71846,13 @@ class SaveImages {
|
|
71845
71846
|
const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
|
71846
71847
|
divs.forEach(div => {
|
71847
71848
|
let src = '';
|
71848
|
-
if (div.style.backgroundImage) {
|
71849
|
+
if (div.style.backgroundImage && div.style.backgroundImage.includes('base64')) {
|
71849
71850
|
if (div.style.backgroundImage.indexOf('url(') !== -1) {
|
71850
71851
|
src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
71851
71852
|
}
|
71852
|
-
} else if (div.classList.contains('is-lightbox')) {
|
71853
|
+
} else if (div.classList.contains('is-lightbox') && div.getAttribute('href').includes('base64')) {
|
71853
71854
|
src = div.getAttribute('href');
|
71854
|
-
} else if (div.classList.contains('block-click')) {
|
71855
|
+
} else if (div.classList.contains('block-click') && div.style.backgroundImage && !div.style.backgroundImage.includes('base64')) {
|
71855
71856
|
src = div.getAttribute('data-modal-url');
|
71856
71857
|
}
|
71857
71858
|
if (src.includes('base64')) {
|
@@ -71864,7 +71865,12 @@ class SaveImages {
|
|
71864
71865
|
//Read image (base64 string)
|
71865
71866
|
let image = src;
|
71866
71867
|
image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
|
71867
|
-
let filename
|
71868
|
+
let filename;
|
71869
|
+
if (div.hasAttribute('data-filename')) {
|
71870
|
+
filename = div.getAttribute('data-filename');
|
71871
|
+
} else {
|
71872
|
+
filename = this.builder.util.makeId() + '.' + ext;
|
71873
|
+
}
|
71868
71874
|
|
71869
71875
|
// console.log(div)
|
71870
71876
|
this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
|
@@ -85075,6 +85081,7 @@ class PageSize {
|
|
85075
85081
|
const builderStuff = this.builderStuff;
|
85076
85082
|
const util = this.util;
|
85077
85083
|
const dom = this.dom;
|
85084
|
+
const pageSizes = this.builder.pageSizes;
|
85078
85085
|
let modal = builderStuff.querySelector('.is-modal.pagesize');
|
85079
85086
|
if (!modal) {
|
85080
85087
|
const html = `
|
@@ -85082,24 +85089,7 @@ class PageSize {
|
|
85082
85089
|
<div class="is-modal-content">
|
85083
85090
|
|
85084
85091
|
<div class="div-page-sizes">
|
85085
|
-
|
85086
|
-
<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>
|
85087
|
-
<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>
|
85088
|
-
<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>
|
85089
|
-
<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>
|
85090
|
-
<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>
|
85091
|
-
<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>
|
85092
|
-
<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>
|
85093
|
-
<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>
|
85094
|
-
<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>
|
85095
|
-
<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>
|
85096
|
-
<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>
|
85097
|
-
<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>
|
85098
|
-
<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>
|
85099
|
-
<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>
|
85100
|
-
<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>
|
85101
|
-
<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>
|
85102
|
-
<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>
|
85092
|
+
${pageSizes.map(item => `<button title="${item.title}" data-pagesize="${item.pagesize}" style="${item.style}" class="paper-item">${item.title}</button>`).join('')}
|
85103
85093
|
</div>
|
85104
85094
|
|
85105
85095
|
<div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
|
@@ -85678,6 +85668,81 @@ class ContentBuilder {
|
|
85678
85668
|
onBlockCanvasAdd: function () {},
|
85679
85669
|
// docContainer: '.is-page',
|
85680
85670
|
blockContainer: '.is-box',
|
85671
|
+
pageSize: '100%,100vh,web',
|
85672
|
+
//'800px,1000px,web'
|
85673
|
+
pageSizes: [{
|
85674
|
+
title: 'Web',
|
85675
|
+
pagesize: '100%,100vh,web',
|
85676
|
+
style: 'width:180px;height:112.5px'
|
85677
|
+
}, {
|
85678
|
+
title: 'Web (container)',
|
85679
|
+
pagesize: '800px,1000px,web',
|
85680
|
+
style: 'width:180px;height:112.5px'
|
85681
|
+
}, {
|
85682
|
+
title: '8.27x5.52',
|
85683
|
+
pagesize: '8.27in,5.52in',
|
85684
|
+
style: 'width:124.05px;height:82.8px'
|
85685
|
+
}, {
|
85686
|
+
title: '8.3x5.8',
|
85687
|
+
pagesize: '8.3in,5.8in',
|
85688
|
+
style: 'width:124.5px;height:87px'
|
85689
|
+
}, {
|
85690
|
+
title: '9x7',
|
85691
|
+
pagesize: '9in,7in',
|
85692
|
+
style: 'wwidth:135px;height:105px'
|
85693
|
+
}, {
|
85694
|
+
title: 'A4',
|
85695
|
+
pagesize: '11.7in,8.3in',
|
85696
|
+
style: 'width:175.5px;height:124.5px'
|
85697
|
+
}, {
|
85698
|
+
title: 'Letter',
|
85699
|
+
pagesize: '11in,8.5in',
|
85700
|
+
style: 'width:165px;height:127.5px'
|
85701
|
+
}, {
|
85702
|
+
title: '12.5x10',
|
85703
|
+
pagesize: '12.5in,10in',
|
85704
|
+
style: 'width:187.5px;height:150px'
|
85705
|
+
}, {
|
85706
|
+
title: '14x11',
|
85707
|
+
pagesize: '14in,11in',
|
85708
|
+
style: 'width:210px;height:165px'
|
85709
|
+
}, {
|
85710
|
+
title: '8.5x8.5',
|
85711
|
+
pagesize: '8.5in,8.5in',
|
85712
|
+
style: 'width:127.5px;height:127.5px'
|
85713
|
+
}, {
|
85714
|
+
title: '10x10',
|
85715
|
+
pagesize: '10in,10in',
|
85716
|
+
style: 'width:150px;height:150px'
|
85717
|
+
}, {
|
85718
|
+
title: '12x12',
|
85719
|
+
pagesize: '12in,12in',
|
85720
|
+
style: 'width:180px;height:180px'
|
85721
|
+
}, {
|
85722
|
+
title: '5.27x8.27',
|
85723
|
+
pagesize: '5.27in,8.27in',
|
85724
|
+
style: 'width:79.05px;height:124.05px'
|
85725
|
+
}, {
|
85726
|
+
title: 'A5',
|
85727
|
+
pagesize: '5.8in,8.3in',
|
85728
|
+
style: 'width:87px;height:124.5px'
|
85729
|
+
}, {
|
85730
|
+
title: '6x9',
|
85731
|
+
pagesize: '6in,9in',
|
85732
|
+
style: 'width:90px;height:135px'
|
85733
|
+
}, {
|
85734
|
+
title: '6.6x10.25',
|
85735
|
+
pagesize: '6.6in,10.25in',
|
85736
|
+
style: 'width:99px;height:153.75px'
|
85737
|
+
}, {
|
85738
|
+
title: 'Letter',
|
85739
|
+
pagesize: '8.5in,11in',
|
85740
|
+
style: 'width:127.5px;height:165px'
|
85741
|
+
}, {
|
85742
|
+
title: 'A4',
|
85743
|
+
pagesize: '8.3in,11.7in',
|
85744
|
+
style: 'width:124.5px;height:175.5px'
|
85745
|
+
}],
|
85681
85746
|
/*
|
85682
85747
|
Deprecated:
|
85683
85748
|
snippetSampleImage: '',
|
@@ -88934,7 +88999,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88934
88999
|
|
88935
89000
|
this.selectAsset(s);
|
88936
89001
|
}
|
88937
|
-
selectAsset(s) {
|
89002
|
+
selectAsset(s, f) {
|
88938
89003
|
let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
|
88939
89004
|
extension = extension.toLowerCase();
|
88940
89005
|
let ok = false;
|
@@ -88966,6 +89031,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88966
89031
|
}
|
88967
89032
|
}
|
88968
89033
|
if (ok) {
|
89034
|
+
if (f) this.targetInput.setAttribute('data-filename', f);else this.targetInput.removeAttribute('data-filename');
|
88969
89035
|
this.targetInput.value = s;
|
88970
89036
|
|
88971
89037
|
// if(this.targetCallback) this.targetCallback();
|
@@ -89015,7 +89081,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89015
89081
|
alert(out('Please select an image file.'));
|
89016
89082
|
}
|
89017
89083
|
if (ok) {
|
89018
|
-
if
|
89084
|
+
// if(callback) callback(s);
|
89085
|
+
if (callback) {
|
89086
|
+
// if s is base64 and there is data-filename attribute set
|
89087
|
+
let f;
|
89088
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
89089
|
+
callback(s, f);
|
89090
|
+
}
|
89019
89091
|
}
|
89020
89092
|
desc.set.call(this, s);
|
89021
89093
|
}
|
@@ -89055,7 +89127,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89055
89127
|
if (targetAssetType === 'media') alert(out('Please select an image or video file.'));
|
89056
89128
|
}
|
89057
89129
|
if (ok) {
|
89058
|
-
if
|
89130
|
+
// if(callback) callback(s);
|
89131
|
+
if (callback) {
|
89132
|
+
// if s is base64 and there is data-filename attribute set
|
89133
|
+
let f;
|
89134
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
89135
|
+
callback(s, f);
|
89136
|
+
}
|
89059
89137
|
}
|
89060
89138
|
desc.set.call(this, s);
|
89061
89139
|
}
|
@@ -89107,7 +89185,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89107
89185
|
}
|
89108
89186
|
}
|
89109
89187
|
if (ok) {
|
89110
|
-
if
|
89188
|
+
// if(callback) callback(s);
|
89189
|
+
if (callback) {
|
89190
|
+
// if s is base64 and there is data-filename attribute set
|
89191
|
+
let f;
|
89192
|
+
if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
|
89193
|
+
callback(s, f);
|
89194
|
+
}
|
89111
89195
|
}
|
89112
89196
|
desc.set.call(this, s);
|
89113
89197
|
}
|
@@ -89816,6 +89900,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89816
89900
|
const docContainer = this.doc.querySelector(this.docContainer);
|
89817
89901
|
let range = this.doc.createRange();
|
89818
89902
|
docContainer.innerHTML = '';
|
89903
|
+
if (!html.includes('is-box')) {
|
89904
|
+
html = `
|
89905
|
+
<div class="is-box box-canvas autolayout">
|
89906
|
+
<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="">
|
89907
|
+
<div class="is-container leading-12 size-17">
|
89908
|
+
${html}
|
89909
|
+
</div>
|
89910
|
+
<div class="is-block-overlay"></div>
|
89911
|
+
</div>
|
89912
|
+
</div>
|
89913
|
+
`;
|
89914
|
+
}
|
89819
89915
|
docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
89820
89916
|
|
89821
89917
|
// set page size
|