@innovastudio/contentbuilder 1.5.77 → 1.5.80
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 +48 -0
- package/public/contentbuilder/contentbuilder.esm.js +52 -16
- package/public/contentbuilder/contentbuilder.min.js +5 -5
- package/public/contentbuilder/lang/en.js +3 -1
- package/public/contentbuilder/lang/fr.js +3 -1
- package/readme.txt +1 -1
package/package.json
CHANGED
@@ -1317,6 +1317,54 @@ button:focus-visible {
|
|
1317
1317
|
.is-ui .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
|
1318
1318
|
padding-top: 5px !important;
|
1319
1319
|
}
|
1320
|
+
#_cbhtml .is-rte-pop.rte-color-picker._4lines.active,
|
1321
|
+
.is-ui .is-rte-pop.rte-color-picker._4lines.active {
|
1322
|
+
animation-name: colorpicker-slide-out-4lines;
|
1323
|
+
}
|
1324
|
+
@keyframes colorpicker-slide-out-4lines {
|
1325
|
+
from {
|
1326
|
+
height: 0;
|
1327
|
+
}
|
1328
|
+
to {
|
1329
|
+
height: 420px;
|
1330
|
+
}
|
1331
|
+
}
|
1332
|
+
#_cbhtml .is-rte-pop.rte-color-picker._4lines.deactive,
|
1333
|
+
.is-ui .is-rte-pop.rte-color-picker._4lines.deactive {
|
1334
|
+
animation-name: colorpicker-slide-in-4lines;
|
1335
|
+
}
|
1336
|
+
@keyframes colorpicker-slide-in-4lines {
|
1337
|
+
from {
|
1338
|
+
height: 420px;
|
1339
|
+
}
|
1340
|
+
to {
|
1341
|
+
height: 0;
|
1342
|
+
}
|
1343
|
+
}
|
1344
|
+
#_cbhtml .is-rte-pop.rte-color-picker._5lines.active,
|
1345
|
+
.is-ui .is-rte-pop.rte-color-picker._5lines.active {
|
1346
|
+
animation-name: colorpicker-slide-out-5lines;
|
1347
|
+
}
|
1348
|
+
@keyframes colorpicker-slide-out-5lines {
|
1349
|
+
from {
|
1350
|
+
height: 0;
|
1351
|
+
}
|
1352
|
+
to {
|
1353
|
+
height: 451px;
|
1354
|
+
}
|
1355
|
+
}
|
1356
|
+
#_cbhtml .is-rte-pop.rte-color-picker._5lines.deactive,
|
1357
|
+
.is-ui .is-rte-pop.rte-color-picker._5lines.deactive {
|
1358
|
+
animation-name: colorpicker-slide-in-5lines;
|
1359
|
+
}
|
1360
|
+
@keyframes colorpicker-slide-in-5lines {
|
1361
|
+
from {
|
1362
|
+
height: 451px;
|
1363
|
+
}
|
1364
|
+
to {
|
1365
|
+
height: 0;
|
1366
|
+
}
|
1367
|
+
}
|
1320
1368
|
#_cbhtml .is-rte-pop.rte-icon-options,
|
1321
1369
|
.is-ui .is-rte-pop.rte-icon-options {
|
1322
1370
|
width: 270px;
|
@@ -1494,10 +1494,10 @@ const renderQuickAdd = builder => {
|
|
1494
1494
|
elm = quickadd.querySelector('.add-video');
|
1495
1495
|
dom.addEventListener(elm, 'click', () => {
|
1496
1496
|
const mode = quickadd.getAttribute('data-mode');
|
1497
|
-
let html = `<video style="width: 100%;" loop="" autoplay="">
|
1497
|
+
let html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
|
1498
1498
|
<source src="${builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
|
1499
1499
|
if (builder.opts.snippetSampleVideo) {
|
1500
|
-
html = `<video style="width: 100%;" loop="" autoplay="">
|
1500
|
+
html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
|
1501
1501
|
<source src="${builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
|
1502
1502
|
}
|
1503
1503
|
util.addContent(html, mode);
|
@@ -5334,15 +5334,15 @@ class Util {
|
|
5334
5334
|
} else {
|
5335
5335
|
newelement.click();
|
5336
5336
|
}
|
5337
|
-
const builderStuff = this.builder.builderStuff;
|
5338
|
-
let quickadd = builderStuff.querySelector('.quickadd');
|
5339
|
-
this.hidePop(quickadd);
|
5340
5337
|
|
5341
5338
|
// LATER: auto scroll
|
5342
5339
|
|
5343
5340
|
// LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool.
|
5344
5341
|
}
|
5345
5342
|
|
5343
|
+
const builderStuff = this.builder.builderStuff;
|
5344
|
+
let quickadd = builderStuff.querySelector('.quickadd');
|
5345
|
+
if (quickadd) this.hidePop(quickadd);
|
5346
5346
|
if (this.builder.useCssClasses) {
|
5347
5347
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
5348
5348
|
if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
|
@@ -14637,6 +14637,16 @@ class HtmlUtil {
|
|
14637
14637
|
imgUrl = convertMediaUrl(imgUrl);
|
14638
14638
|
elm.setAttribute('href', `${imgUrl}`);
|
14639
14639
|
}
|
14640
|
+
if (elm.tagName.toLowerCase() === 'a') {
|
14641
|
+
//lightbox
|
14642
|
+
let s = elm.getAttribute('href');
|
14643
|
+
let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
|
14644
|
+
extension = extension.toLowerCase();
|
14645
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4' || extension === 'mp3') {
|
14646
|
+
let mediaUrl = convertMediaUrl(s);
|
14647
|
+
elm.setAttribute('href', `${mediaUrl}`);
|
14648
|
+
}
|
14649
|
+
}
|
14640
14650
|
}
|
14641
14651
|
});
|
14642
14652
|
}
|
@@ -17876,6 +17886,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17876
17886
|
block.offsetWidth / 2;
|
17877
17887
|
let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
|
17878
17888
|
let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
|
17889
|
+
if (y < 0) y = 15; // if block is not fully loaded, block height may be incorrect (y can be negative). Adjust to 15%.
|
17879
17890
|
block.style.top = y + '%';
|
17880
17891
|
block.style.left = x + '%';
|
17881
17892
|
block.removeAttribute('data-new-dummy');
|
@@ -46779,7 +46790,7 @@ class ButtonEditor {
|
|
46779
46790
|
<div class="flex flex-row" style="margin:15px 0 0">
|
46780
46791
|
<div class="flex flex-col" style="margin-right: 40px;">
|
46781
46792
|
<div>
|
46782
|
-
<span>${util.out('Border
|
46793
|
+
<span>${util.out('Border Style')}</span>:
|
46783
46794
|
</div>
|
46784
46795
|
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
46785
46796
|
<button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
|
@@ -46969,7 +46980,7 @@ class ButtonEditor {
|
|
46969
46980
|
|
46970
46981
|
<div class="flex flex-col" style="margin:15px 0 0">
|
46971
46982
|
<div>
|
46972
|
-
<span>${util.out('Border
|
46983
|
+
<span>${util.out('Border Style')}</span>:
|
46973
46984
|
</div>
|
46974
46985
|
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
46975
46986
|
<button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
|
@@ -50565,6 +50576,12 @@ class Video {
|
|
50565
50576
|
} else {
|
50566
50577
|
inpAutoplay.checked = false;
|
50567
50578
|
}
|
50579
|
+
const inpMuted = videoModal.querySelector('.input-video-muted');
|
50580
|
+
if (video.hasAttribute('muted')) {
|
50581
|
+
inpMuted.checked = true;
|
50582
|
+
} else {
|
50583
|
+
inpMuted.checked = false;
|
50584
|
+
}
|
50568
50585
|
util.showModal(videoModal, true, () => {
|
50569
50586
|
btn.removeAttribute('data-focus');
|
50570
50587
|
btn.focus();
|
@@ -50608,6 +50625,9 @@ class Video {
|
|
50608
50625
|
<label style="display:block;margin-top:5px;">
|
50609
50626
|
<input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" /> ${util.out('Autoplay')}
|
50610
50627
|
</label>
|
50628
|
+
<label style="display:block;margin-top:5px;">
|
50629
|
+
<input class="input-video-muted" id="__input_video_muted" type="checkbox" /> ${util.out('Muted')}
|
50630
|
+
</label>
|
50611
50631
|
|
50612
50632
|
<div style="text-align:right;margin-top:14px;">
|
50613
50633
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
@@ -50686,6 +50706,11 @@ class Video {
|
|
50686
50706
|
} else {
|
50687
50707
|
video.removeAttribute('autoplay');
|
50688
50708
|
}
|
50709
|
+
if (videoModal.querySelector('.input-video-muted').checked) {
|
50710
|
+
video.setAttribute('muted', '');
|
50711
|
+
} else {
|
50712
|
+
video.removeAttribute('muted');
|
50713
|
+
}
|
50689
50714
|
if (videoModal.querySelector('.input-url').value !== '') {
|
50690
50715
|
let url = videoModal.querySelector('.input-url').value;
|
50691
50716
|
let source = video.querySelector('source');
|
@@ -63511,6 +63536,10 @@ class ColorPicker {
|
|
63511
63536
|
const poppicker = builderStuff.querySelector('.pop-picker');
|
63512
63537
|
poppicker.style.display = 'flex';
|
63513
63538
|
poppicker.style.opacity = 0;
|
63539
|
+
if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines
|
63540
|
+
else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
|
63541
|
+
else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
|
63542
|
+
|
63514
63543
|
const pickr = Pickr.create({
|
63515
63544
|
el: '._pop-colpick',
|
63516
63545
|
theme: 'nano',
|
@@ -67399,6 +67428,10 @@ class Rte {
|
|
67399
67428
|
btnRteColor.forEach(btn => {
|
67400
67429
|
btn.addEventListener('click', () => {
|
67401
67430
|
const pop = this.rteColorPicker;
|
67431
|
+
const numOfColors = this.builder.colors.length;
|
67432
|
+
if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
|
67433
|
+
else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
|
67434
|
+
|
67402
67435
|
if (!dom.hasClass(pop, 'active')) {
|
67403
67436
|
this.util.showRtePop(pop, () => {
|
67404
67437
|
const top = btn.getBoundingClientRect().top;
|
@@ -68328,15 +68361,15 @@ class Rte {
|
|
68328
68361
|
activeCol = this.builder.activeCol;
|
68329
68362
|
spans = activeCol.querySelectorAll('span');
|
68330
68363
|
Array.prototype.forEach.call(spans, span => {
|
68331
|
-
let attr = span.
|
68364
|
+
let attr = span.hasAttribute('data-keep');
|
68332
68365
|
if (!attr) {
|
68333
68366
|
span.outerHTML = span.innerHTML;
|
68334
68367
|
}
|
68335
68368
|
});
|
68336
68369
|
Array.prototype.forEach.call(spans, span => {
|
68337
|
-
let attr = span.
|
68370
|
+
let attr = span.hasAttribute('data-keep');
|
68338
68371
|
if (attr) {
|
68339
|
-
|
68372
|
+
span.removeAttribute('data-keep');
|
68340
68373
|
}
|
68341
68374
|
});
|
68342
68375
|
this.getState();
|
@@ -96506,7 +96539,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96506
96539
|
*/
|
96507
96540
|
src = this.viewFileUrl + '?url=' + src;
|
96508
96541
|
}
|
96509
|
-
const width =
|
96542
|
+
const width = 768;
|
96510
96543
|
const height = 512;
|
96511
96544
|
const img = new Image();
|
96512
96545
|
img.src = src;
|
@@ -96552,7 +96585,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96552
96585
|
model,
|
96553
96586
|
prompt: prompt,
|
96554
96587
|
negative_prompt,
|
96555
|
-
width:
|
96588
|
+
width: 768,
|
96556
96589
|
height: 512,
|
96557
96590
|
steps,
|
96558
96591
|
guidance,
|
@@ -97246,18 +97279,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
97246
97279
|
}
|
97247
97280
|
|
97248
97281
|
if (this.dom.textSelection()) {
|
97249
|
-
if (e.keyCode ===
|
97282
|
+
if (e.keyCode === 38) {
|
97250
97283
|
// Up arrow
|
97251
97284
|
this.util.saveSelection();
|
97252
|
-
} else if (e.keyCode ===
|
97285
|
+
} else if (e.keyCode === 40) {
|
97253
97286
|
// Down arrow
|
97254
97287
|
this.util.saveSelection();
|
97255
|
-
} else if (e.keyCode ===
|
97288
|
+
} else if (e.keyCode === 37) {
|
97256
97289
|
// Left arrow
|
97257
97290
|
this.util.saveSelection();
|
97258
|
-
} else if (e.keyCode ===
|
97291
|
+
} else if (e.keyCode === 39) {
|
97259
97292
|
// Right arrow
|
97260
97293
|
this.util.saveSelection();
|
97294
|
+
} else if (e.keyCode === 13) {
|
97295
|
+
// Enter
|
97296
|
+
this.util.saveSelection();
|
97261
97297
|
}
|
97262
97298
|
}
|
97263
97299
|
|