@innovastudio/contentbuilder 1.4.89 → 1.4.90
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/public/contentbuilder/contentbuilder.css +17 -6
- package/public/contentbuilder/contentbuilder.esm.js +61 -0
- package/public/contentbuilder/contentbuilder.min.js +6 -6
- package/public/contentbuilder/themes/colored-blue.css +6 -0
- package/public/contentbuilder/themes/colored-blue2.css +6 -0
- package/public/contentbuilder/themes/colored-blue3.css +6 -0
- package/public/contentbuilder/themes/colored-blue4.css +6 -0
- package/public/contentbuilder/themes/colored-blue5.css +6 -0
- package/public/contentbuilder/themes/colored-blue6.css +6 -0
- package/public/contentbuilder/themes/colored-blue7.css +6 -0
- package/public/contentbuilder/themes/colored-blue8.css +6 -0
- package/public/contentbuilder/themes/colored-dark.css +6 -0
- package/public/contentbuilder/themes/colored-darkblue.css +6 -0
- package/public/contentbuilder/themes/colored-gray.css +6 -0
- package/public/contentbuilder/themes/colored-green.css +6 -0
- package/public/contentbuilder/themes/colored-green2.css +6 -0
- package/public/contentbuilder/themes/colored-green3.css +6 -0
- package/public/contentbuilder/themes/colored-green4.css +6 -0
- package/public/contentbuilder/themes/colored-green5.css +6 -0
- package/public/contentbuilder/themes/colored-magenta.css +6 -0
- package/public/contentbuilder/themes/colored-orange.css +6 -0
- package/public/contentbuilder/themes/colored-orange2.css +6 -0
- package/public/contentbuilder/themes/colored-orange3.css +6 -0
- package/public/contentbuilder/themes/colored-pink.css +6 -0
- package/public/contentbuilder/themes/colored-pink2.css +6 -0
- package/public/contentbuilder/themes/colored-pink3.css +6 -0
- package/public/contentbuilder/themes/colored-pink4.css +6 -0
- package/public/contentbuilder/themes/colored-purple.css +6 -0
- package/public/contentbuilder/themes/colored-purple2.css +6 -0
- package/public/contentbuilder/themes/colored-red.css +6 -0
- package/public/contentbuilder/themes/colored-red2.css +6 -0
- package/public/contentbuilder/themes/colored-red3.css +6 -0
- package/public/contentbuilder/themes/colored-red4.css +6 -0
- package/public/contentbuilder/themes/colored-red5.css +6 -0
- package/public/contentbuilder/themes/colored-yellow.css +6 -0
- package/public/contentbuilder/themes/colored-yellow2.css +6 -0
- package/public/contentbuilder/themes/dark-blue.css +6 -0
- package/public/contentbuilder/themes/dark-blue2.css +6 -0
- package/public/contentbuilder/themes/dark-blue3.css +6 -0
- package/public/contentbuilder/themes/dark-gray.css +6 -0
- package/public/contentbuilder/themes/dark-pink.css +6 -0
- package/public/contentbuilder/themes/dark-purple.css +6 -0
- package/public/contentbuilder/themes/dark-red.css +6 -0
- package/public/contentbuilder/themes/dark.css +6 -0
- package/public/contentbuilder/themes/light-blue.css +6 -0
- package/public/contentbuilder/themes/light-blue2.css +6 -0
- package/public/contentbuilder/themes/light-blue3.css +6 -0
- package/public/contentbuilder/themes/light-cyan.css +6 -0
- package/public/contentbuilder/themes/light-gray.css +6 -0
- package/public/contentbuilder/themes/light-gray2.css +6 -0
- package/public/contentbuilder/themes/light-gray3.css +6 -0
- package/public/contentbuilder/themes/light-green.css +6 -0
- package/public/contentbuilder/themes/light-pink.css +6 -0
- package/public/contentbuilder/themes/light-pink2.css +6 -0
- package/public/contentbuilder/themes/light-purple.css +6 -0
- package/public/contentbuilder/themes/light-purple2.css +6 -0
- package/public/contentbuilder/themes/light-red.css +6 -0
- package/public/contentbuilder/themes/light-yellow.css +6 -0
- package/public/contentbuilder/themes/light-yellow2.css +6 -0
package/package.json
CHANGED
@@ -3024,6 +3024,7 @@ button:focus-visible {
|
|
3024
3024
|
.is-ui .is-tool.is-iframe-tool {
|
3025
3025
|
background: rgba(0, 0, 0, 0.15);
|
3026
3026
|
border: transparent 1px solid;
|
3027
|
+
box-shadow: none;
|
3027
3028
|
}
|
3028
3029
|
#_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
|
3029
3030
|
.is-ui .is-tool#divImageTool > div,
|
@@ -3065,13 +3066,12 @@ button:focus-visible {
|
|
3065
3066
|
#_cbhtml .is-tool.is-spacer-tool,
|
3066
3067
|
.is-ui .is-tool.is-spacer-tool {
|
3067
3068
|
border: none;
|
3068
|
-
background: none;
|
3069
3069
|
}
|
3070
3070
|
#_cbhtml .is-tool.is-spacer-tool > button,
|
3071
3071
|
.is-ui .is-tool.is-spacer-tool > button {
|
3072
3072
|
width: 30px;
|
3073
3073
|
height: 30px;
|
3074
|
-
background:
|
3074
|
+
background: none;
|
3075
3075
|
}
|
3076
3076
|
#_cbhtml .is-tool.is-spacer-tool > button svg,
|
3077
3077
|
.is-ui .is-tool.is-spacer-tool > button svg {
|
@@ -3081,6 +3081,7 @@ button:focus-visible {
|
|
3081
3081
|
.is-ui .is-tool.is-table-tool {
|
3082
3082
|
border: none;
|
3083
3083
|
background: none;
|
3084
|
+
box-shadow: none;
|
3084
3085
|
}
|
3085
3086
|
#_cbhtml .is-tool.is-table-tool:hover,
|
3086
3087
|
.is-ui .is-tool.is-table-tool:hover {
|
@@ -3114,13 +3115,20 @@ button:focus-visible {
|
|
3114
3115
|
.is-ui .is-tool.is-module-tool > button svg {
|
3115
3116
|
fill: #121212;
|
3116
3117
|
}
|
3118
|
+
#_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool, #_cbhtml .is-tool#divSvgTool,
|
3119
|
+
.is-ui .is-tool#divLinkTool,
|
3120
|
+
.is-ui .is-tool#divButtonTool,
|
3121
|
+
.is-ui .is-tool#divSvgTool {
|
3122
|
+
background: rgba(243, 243, 243, 0.9);
|
3123
|
+
box-shadow: none;
|
3124
|
+
}
|
3117
3125
|
#_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button, #_cbhtml .is-tool#divSvgTool button,
|
3118
3126
|
.is-ui .is-tool#divLinkTool button,
|
3119
3127
|
.is-ui .is-tool#divButtonTool button,
|
3120
3128
|
.is-ui .is-tool#divSvgTool button {
|
3121
3129
|
width: 30px;
|
3122
3130
|
height: 30px;
|
3123
|
-
background:
|
3131
|
+
background: transparent;
|
3124
3132
|
}
|
3125
3133
|
#_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg, #_cbhtml .is-tool#divSvgTool button svg,
|
3126
3134
|
.is-ui .is-tool#divLinkTool button svg,
|
@@ -4327,6 +4335,10 @@ button:focus-visible {
|
|
4327
4335
|
fill: #000;
|
4328
4336
|
}
|
4329
4337
|
|
4338
|
+
#_cbhtml[gray] .is-tool {
|
4339
|
+
background: rgba(243, 243, 243, 0.9);
|
4340
|
+
box-shadow: none;
|
4341
|
+
}
|
4330
4342
|
#_cbhtml[gray] .is-tool.is-column-tool {
|
4331
4343
|
background: rgba(243, 243, 243, 0.9);
|
4332
4344
|
flex-direction: row;
|
@@ -4570,9 +4582,6 @@ button:focus-visible {
|
|
4570
4582
|
background: transparent;
|
4571
4583
|
padding: 5px;
|
4572
4584
|
}
|
4573
|
-
#_cbhtml .is-tool.is-element-tool {
|
4574
|
-
background: rgba(243, 243, 243, 0.9);
|
4575
|
-
}
|
4576
4585
|
#_cbhtml .is-tool.is-element-tool button {
|
4577
4586
|
width: 25px;
|
4578
4587
|
height: 25px;
|
@@ -4612,6 +4621,7 @@ button:focus-visible {
|
|
4612
4621
|
width: auto;
|
4613
4622
|
left: auto;
|
4614
4623
|
right: -40px;
|
4624
|
+
box-shadow: none;
|
4615
4625
|
}
|
4616
4626
|
.is-tool.is-row-tool button {
|
4617
4627
|
width: 25px;
|
@@ -4664,6 +4674,7 @@ button:focus-visible {
|
|
4664
4674
|
flex-direction: row;
|
4665
4675
|
margin-top: 0px;
|
4666
4676
|
margin-left: -1px;
|
4677
|
+
box-shadow: none;
|
4667
4678
|
}
|
4668
4679
|
.is-tool.is-col-tool button {
|
4669
4680
|
width: 25px;
|
@@ -80021,6 +80021,7 @@ class ContentBuilder {
|
|
80021
80021
|
window.selectAsset = this.selectAsset.bind(this);
|
80022
80022
|
window.assetType = this.assetType.bind(this);
|
80023
80023
|
window.hideModal = this.hideModal.bind(this);
|
80024
|
+
window.generateImage = this.generateImage.bind(this);
|
80024
80025
|
setTimeout(() => {
|
80025
80026
|
// Remember UI
|
80026
80027
|
if (localStorage.getItem('_livepreview') != null) {
|
@@ -81814,6 +81815,66 @@ class ContentBuilder {
|
|
81814
81815
|
}
|
81815
81816
|
}
|
81816
81817
|
}
|
81818
|
+
async generateImage(prompt, num, callback) {
|
81819
|
+
if (!(this.generateImageUrl && this.uploadBase64Url)) return;
|
81820
|
+
const messages = {
|
81821
|
+
prompt,
|
81822
|
+
num
|
81823
|
+
};
|
81824
|
+
const response = await fetch(this.generateImageUrl, {
|
81825
|
+
method: 'POST',
|
81826
|
+
headers: {
|
81827
|
+
'Content-Type': 'application/json'
|
81828
|
+
},
|
81829
|
+
body: JSON.stringify(messages)
|
81830
|
+
});
|
81831
|
+
const result = await response.json();
|
81832
|
+
if (result.error) {
|
81833
|
+
console.log('Error:\n' + result.error);
|
81834
|
+
return;
|
81835
|
+
}
|
81836
|
+
const filename = result.filename;
|
81837
|
+
let images = [];
|
81838
|
+
const numOfImages = result.data.data.length;
|
81839
|
+
const imageList = result.data.data;
|
81840
|
+
imageList.forEach(item => {
|
81841
|
+
const base64 = item.b64_json;
|
81842
|
+
const src = `data:image/jpeg;base64,${base64}`;
|
81843
|
+
var newWidth = 1024;
|
81844
|
+
var newHeight = 1024;
|
81845
|
+
var img = new Image();
|
81846
|
+
img.src = src;
|
81847
|
+
img.onload = () => {
|
81848
|
+
var canvas = document.createElement('canvas');
|
81849
|
+
canvas.width = newWidth;
|
81850
|
+
canvas.height = newHeight;
|
81851
|
+
var ctx = canvas.getContext('2d');
|
81852
|
+
ctx.drawImage(img, 0, 0, newWidth, newHeight);
|
81853
|
+
var resizedBase64 = canvas.toDataURL('image/jpeg');
|
81854
|
+
let image = resizedBase64;
|
81855
|
+
image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
|
81856
|
+
const reqBody = {
|
81857
|
+
image: image,
|
81858
|
+
filename: filename
|
81859
|
+
};
|
81860
|
+
fetch(this.uploadBase64Url, {
|
81861
|
+
method: 'POST',
|
81862
|
+
body: JSON.stringify(reqBody),
|
81863
|
+
headers: {
|
81864
|
+
'Content-Type': 'application/json'
|
81865
|
+
}
|
81866
|
+
}).then(response => response.json()).then(response => {
|
81867
|
+
if (!response.error) {
|
81868
|
+
const uploadedImageUrl = response.url;
|
81869
|
+
images.push(uploadedImageUrl);
|
81870
|
+
if (images.length === numOfImages) {
|
81871
|
+
callback(images);
|
81872
|
+
}
|
81873
|
+
}
|
81874
|
+
});
|
81875
|
+
};
|
81876
|
+
});
|
81877
|
+
}
|
81817
81878
|
lightboxOpen(col) {
|
81818
81879
|
// Open Lightbox
|
81819
81880
|
if (this.useLightbox) {
|