@innovastudio/contentbox 1.6.90 → 1.6.92
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.92",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"types": "index.d.ts",
|
@@ -54,7 +54,7 @@
|
|
54
54
|
"ws": "^8.13.0"
|
55
55
|
},
|
56
56
|
"dependencies": {
|
57
|
-
"@innovastudio/contentbuilder": "^1.5.
|
57
|
+
"@innovastudio/contentbuilder": "^1.5.79",
|
58
58
|
"js-beautify": "^1.14.0",
|
59
59
|
"sortablejs": "^1.15.2"
|
60
60
|
}
|
@@ -13193,6 +13193,11 @@ class PanelBox {
|
|
13193
13193
|
<button title="${out('Increase')}" data-content-size="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
|
13194
13194
|
</div>
|
13195
13195
|
|
13196
|
+
<label class="label checkbox mt-3" style="margin-bottom:15px">
|
13197
|
+
<input type="checkbox" class="chk-lock-contentsize" />
|
13198
|
+
<span>${out('Lock Content Size')}</span>
|
13199
|
+
</label>
|
13200
|
+
|
13196
13201
|
<div class="flex">
|
13197
13202
|
<div class="mr-4">
|
13198
13203
|
<div class="label mt-2">${out('Position')}:</div>
|
@@ -13729,6 +13734,11 @@ class PanelBox {
|
|
13729
13734
|
chkParallax.addEventListener('click', () => {
|
13730
13735
|
let isParallax = chkParallax.checked;
|
13731
13736
|
this.box.parallaxContent(isParallax);
|
13737
|
+
});
|
13738
|
+
const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
|
13739
|
+
chkLockContentSize.addEventListener('click', () => {
|
13740
|
+
let isLockContentSize = chkLockContentSize.checked;
|
13741
|
+
this.box.lockContentSize(isLockContentSize);
|
13732
13742
|
}); // Text
|
13733
13743
|
|
13734
13744
|
const btnTextAlign = panel.querySelectorAll('[data-align]');
|
@@ -14285,6 +14295,16 @@ class PanelBox {
|
|
14285
14295
|
chkParallax.checked = true;
|
14286
14296
|
}
|
14287
14297
|
}
|
14298
|
+
} // Lock Content Size
|
14299
|
+
|
14300
|
+
|
14301
|
+
const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
|
14302
|
+
chkLockContentSize.checked = false;
|
14303
|
+
|
14304
|
+
if (container) {
|
14305
|
+
if (container.classList.contains('v3')) {
|
14306
|
+
chkLockContentSize.checked = true;
|
14307
|
+
}
|
14288
14308
|
} // Text Color
|
14289
14309
|
|
14290
14310
|
|
@@ -27883,10 +27903,10 @@ const renderQuickAdd = builder => {
|
|
27883
27903
|
elm = quickadd.querySelector('.add-video');
|
27884
27904
|
dom.addEventListener(elm, 'click', () => {
|
27885
27905
|
const mode = quickadd.getAttribute('data-mode');
|
27886
|
-
let html = `<video style="width: 100%;" loop="" autoplay="">
|
27906
|
+
let html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
|
27887
27907
|
<source src="${builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
|
27888
27908
|
if (builder.opts.snippetSampleVideo) {
|
27889
|
-
html = `<video style="width: 100%;" loop="" autoplay="">
|
27909
|
+
html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
|
27890
27910
|
<source src="${builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
|
27891
27911
|
}
|
27892
27912
|
util.addContent(html, mode);
|
@@ -31723,15 +31743,15 @@ class Util$1 {
|
|
31723
31743
|
} else {
|
31724
31744
|
newelement.click();
|
31725
31745
|
}
|
31726
|
-
const builderStuff = this.builder.builderStuff;
|
31727
|
-
let quickadd = builderStuff.querySelector('.quickadd');
|
31728
|
-
this.hidePop(quickadd);
|
31729
31746
|
|
31730
31747
|
// LATER: auto scroll
|
31731
31748
|
|
31732
31749
|
// LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool.
|
31733
31750
|
}
|
31734
31751
|
|
31752
|
+
const builderStuff = this.builder.builderStuff;
|
31753
|
+
let quickadd = builderStuff.querySelector('.quickadd');
|
31754
|
+
if (quickadd) this.hidePop(quickadd);
|
31735
31755
|
if (this.builder.useCssClasses) {
|
31736
31756
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
31737
31757
|
if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
|
@@ -40566,6 +40586,13 @@ class HtmlUtil {
|
|
40566
40586
|
|
40567
40587
|
//Trigger Render event
|
40568
40588
|
this.builder.opts.onRender();
|
40589
|
+
|
40590
|
+
// Re-select
|
40591
|
+
if (row.firstChild) row.firstChild.click();
|
40592
|
+
//Change to row selection
|
40593
|
+
row.classList.remove('row-outline');
|
40594
|
+
//Hide Column tool (new!)
|
40595
|
+
util.hideColumnTool();
|
40569
40596
|
}
|
40570
40597
|
if (mode === 'full') {
|
40571
40598
|
// freeform
|
@@ -41019,6 +41046,16 @@ class HtmlUtil {
|
|
41019
41046
|
imgUrl = convertMediaUrl(imgUrl);
|
41020
41047
|
elm.setAttribute('href', `${imgUrl}`);
|
41021
41048
|
}
|
41049
|
+
if (elm.tagName.toLowerCase() === 'a') {
|
41050
|
+
//lightbox
|
41051
|
+
let s = elm.getAttribute('href');
|
41052
|
+
let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
|
41053
|
+
extension = extension.toLowerCase();
|
41054
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4' || extension === 'mp3') {
|
41055
|
+
let mediaUrl = convertMediaUrl(s);
|
41056
|
+
elm.setAttribute('href', `${mediaUrl}`);
|
41057
|
+
}
|
41058
|
+
}
|
41022
41059
|
}
|
41023
41060
|
});
|
41024
41061
|
}
|
@@ -44258,6 +44295,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
44258
44295
|
block.offsetWidth / 2;
|
44259
44296
|
let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
|
44260
44297
|
let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
|
44298
|
+
if (y < 0) y = 15; // if block is not fully loaded, block height may be incorrect (y can be negative). Adjust to 15%.
|
44261
44299
|
block.style.top = y + '%';
|
44262
44300
|
block.style.left = x + '%';
|
44263
44301
|
block.removeAttribute('data-new-dummy');
|
@@ -73161,7 +73199,7 @@ class ButtonEditor {
|
|
73161
73199
|
<div class="flex flex-row" style="margin:15px 0 0">
|
73162
73200
|
<div class="flex flex-col" style="margin-right: 40px;">
|
73163
73201
|
<div>
|
73164
|
-
<span>${util.out('Border
|
73202
|
+
<span>${util.out('Border Style')}</span>:
|
73165
73203
|
</div>
|
73166
73204
|
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
73167
73205
|
<button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
|
@@ -73351,7 +73389,7 @@ class ButtonEditor {
|
|
73351
73389
|
|
73352
73390
|
<div class="flex flex-col" style="margin:15px 0 0">
|
73353
73391
|
<div>
|
73354
|
-
<span>${util.out('Border
|
73392
|
+
<span>${util.out('Border Style')}</span>:
|
73355
73393
|
</div>
|
73356
73394
|
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
73357
73395
|
<button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
|
@@ -76947,6 +76985,12 @@ class Video {
|
|
76947
76985
|
} else {
|
76948
76986
|
inpAutoplay.checked = false;
|
76949
76987
|
}
|
76988
|
+
const inpMuted = videoModal.querySelector('.input-video-muted');
|
76989
|
+
if (video.hasAttribute('muted')) {
|
76990
|
+
inpMuted.checked = true;
|
76991
|
+
} else {
|
76992
|
+
inpMuted.checked = false;
|
76993
|
+
}
|
76950
76994
|
util.showModal(videoModal, true, () => {
|
76951
76995
|
btn.removeAttribute('data-focus');
|
76952
76996
|
btn.focus();
|
@@ -76990,6 +77034,9 @@ class Video {
|
|
76990
77034
|
<label style="display:block;margin-top:5px;">
|
76991
77035
|
<input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" /> ${util.out('Autoplay')}
|
76992
77036
|
</label>
|
77037
|
+
<label style="display:block;margin-top:5px;">
|
77038
|
+
<input class="input-video-muted" id="__input_video_muted" type="checkbox" /> ${util.out('Muted')}
|
77039
|
+
</label>
|
76993
77040
|
|
76994
77041
|
<div style="text-align:right;margin-top:14px;">
|
76995
77042
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
@@ -77068,6 +77115,11 @@ class Video {
|
|
77068
77115
|
} else {
|
77069
77116
|
video.removeAttribute('autoplay');
|
77070
77117
|
}
|
77118
|
+
if (videoModal.querySelector('.input-video-muted').checked) {
|
77119
|
+
video.setAttribute('muted', '');
|
77120
|
+
} else {
|
77121
|
+
video.removeAttribute('muted');
|
77122
|
+
}
|
77071
77123
|
if (videoModal.querySelector('.input-url').value !== '') {
|
77072
77124
|
let url = videoModal.querySelector('.input-url').value;
|
77073
77125
|
let source = video.querySelector('source');
|
@@ -94710,15 +94762,15 @@ class Rte {
|
|
94710
94762
|
activeCol = this.builder.activeCol;
|
94711
94763
|
spans = activeCol.querySelectorAll('span');
|
94712
94764
|
Array.prototype.forEach.call(spans, span => {
|
94713
|
-
let attr = span.
|
94765
|
+
let attr = span.hasAttribute('data-keep');
|
94714
94766
|
if (!attr) {
|
94715
94767
|
span.outerHTML = span.innerHTML;
|
94716
94768
|
}
|
94717
94769
|
});
|
94718
94770
|
Array.prototype.forEach.call(spans, span => {
|
94719
|
-
let attr = span.
|
94771
|
+
let attr = span.hasAttribute('data-keep');
|
94720
94772
|
if (attr) {
|
94721
|
-
|
94773
|
+
span.removeAttribute('data-keep');
|
94722
94774
|
}
|
94723
94775
|
});
|
94724
94776
|
this.getState();
|
@@ -123628,18 +123680,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
123628
123680
|
}
|
123629
123681
|
|
123630
123682
|
if (this.dom.textSelection()) {
|
123631
|
-
if (e.keyCode ===
|
123683
|
+
if (e.keyCode === 38) {
|
123632
123684
|
// Up arrow
|
123633
123685
|
this.util.saveSelection();
|
123634
|
-
} else if (e.keyCode ===
|
123686
|
+
} else if (e.keyCode === 40) {
|
123635
123687
|
// Down arrow
|
123636
123688
|
this.util.saveSelection();
|
123637
|
-
} else if (e.keyCode ===
|
123689
|
+
} else if (e.keyCode === 37) {
|
123638
123690
|
// Left arrow
|
123639
123691
|
this.util.saveSelection();
|
123640
|
-
} else if (e.keyCode ===
|
123692
|
+
} else if (e.keyCode === 39) {
|
123641
123693
|
// Right arrow
|
123642
123694
|
this.util.saveSelection();
|
123695
|
+
} else if (e.keyCode === 13) {
|
123696
|
+
// Enter
|
123697
|
+
this.util.saveSelection();
|
123643
123698
|
}
|
123644
123699
|
}
|
123645
123700
|
|
@@ -138810,6 +138865,18 @@ class Box {
|
|
138810
138865
|
this.builder.onChange();
|
138811
138866
|
}
|
138812
138867
|
|
138868
|
+
lockContentSize(isLock) {
|
138869
|
+
this.builder.editor.saveForUndo();
|
138870
|
+
let activeBox = this.builder.activeBox;
|
138871
|
+
let container = activeBox.querySelector('.is-builder');
|
138872
|
+
|
138873
|
+
if (isLock) {
|
138874
|
+
container.classList.add('v3');
|
138875
|
+
} else {
|
138876
|
+
container.classList.remove('v3');
|
138877
|
+
}
|
138878
|
+
}
|
138879
|
+
|
138813
138880
|
parallaxContent(isParallax) {
|
138814
138881
|
this.builder.editor.saveForUndo();
|
138815
138882
|
let activeBox = this.builder.activeBox;
|
@@ -160266,65 +160333,93 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
160266
160333
|
|
160267
160334
|
|
160268
160335
|
boxRender() {
|
160336
|
+
if (!this.linksWithClickListeners) {
|
160337
|
+
this.linksWithClickListeners = new Set();
|
160338
|
+
}
|
160339
|
+
|
160340
|
+
const links = this.wrapperEl.querySelectorAll('.is-box .is-overlay a'); // eg. slider links
|
160341
|
+
|
160342
|
+
links.forEach(link => {
|
160343
|
+
let url = link.getAttribute('href');
|
160344
|
+
|
160345
|
+
if (url.indexOf('#') === 0 || link.classList.contains('glightbox')) ; else {
|
160346
|
+
if (!this.linksWithClickListeners.has(link)) {
|
160347
|
+
link.addEventListener('click', e => {
|
160348
|
+
// Will go to the link
|
160349
|
+
const answer = window.confirm(out('Do you really want to leave?')); // Cancel the navigation and stay on the same page
|
160350
|
+
|
160351
|
+
if (!answer) {
|
160352
|
+
e.preventDefault();
|
160353
|
+
}
|
160354
|
+
|
160355
|
+
e.stopImmediatePropagation();
|
160356
|
+
});
|
160357
|
+
this.linksWithClickListeners.add(link); // Mark the listener as added
|
160358
|
+
}
|
160359
|
+
}
|
160360
|
+
});
|
160269
160361
|
const navbar = this.doc.querySelector('.is-section-navbar');
|
160270
160362
|
|
160271
160363
|
if (navbar) {
|
160272
160364
|
const links = navbar.querySelectorAll('a');
|
160273
160365
|
links.forEach(link => {
|
160274
|
-
|
160275
|
-
|
160276
|
-
|
160277
|
-
|
160278
|
-
if (url
|
160279
|
-
|
160280
|
-
|
160281
|
-
|
160282
|
-
|
160283
|
-
|
160284
|
-
|
160285
|
-
|
160286
|
-
|
160287
|
-
|
160288
|
-
|
160289
|
-
if (
|
160290
|
-
|
160366
|
+
if (!this.linksWithClickListeners.has(link)) {
|
160367
|
+
link.addEventListener('click', e => {
|
160368
|
+
let url = link.getAttribute('href');
|
160369
|
+
|
160370
|
+
if (url) {
|
160371
|
+
if (url.indexOf('#') === 0) {
|
160372
|
+
// Will go to bookmark
|
160373
|
+
if (url.indexOf('#section') === 0) {
|
160374
|
+
let num = url.replace('#section', '');
|
160375
|
+
|
160376
|
+
if (!isNaN(parseInt(num))) {
|
160377
|
+
let sections = this.doc.querySelectorAll('.is-section');
|
160378
|
+
let gotoSection;
|
160379
|
+
let x = 0;
|
160380
|
+
sections.forEach(function (section) {
|
160381
|
+
if (!dom.hasClass(section, 'is-section-navbar')) {
|
160382
|
+
if (x === num - 1) {
|
160383
|
+
gotoSection = section;
|
160384
|
+
}
|
160385
|
+
|
160386
|
+
x++;
|
160291
160387
|
}
|
160388
|
+
});
|
160292
160389
|
|
160293
|
-
|
160390
|
+
if (gotoSection) {
|
160391
|
+
this.scrollTo(gotoSection);
|
160294
160392
|
}
|
160295
|
-
});
|
160296
160393
|
|
160297
|
-
|
160298
|
-
this.scrollTo(gotoSection);
|
160394
|
+
e.preventDefault();
|
160299
160395
|
}
|
160396
|
+
} else {
|
160397
|
+
try {
|
160398
|
+
let bookmark = this.doc.querySelector(url);
|
160300
160399
|
|
160301
|
-
|
160302
|
-
|
160303
|
-
|
160304
|
-
|
160305
|
-
|
160306
|
-
|
160307
|
-
if (bookmark) {
|
160308
|
-
this.scrollTo(bookmark);
|
160309
|
-
e.preventDefault();
|
160400
|
+
if (bookmark) {
|
160401
|
+
this.scrollTo(bookmark);
|
160402
|
+
e.preventDefault();
|
160403
|
+
}
|
160404
|
+
} catch (e) {// Do Nothing
|
160310
160405
|
}
|
160311
|
-
} catch (e) {// Do Nothing
|
160312
160406
|
}
|
160407
|
+
} else {
|
160408
|
+
// Prevent to go to the link
|
160409
|
+
if (e.target.closest('#is-menu-toggle')) return;
|
160410
|
+
e.preventDefault();
|
160411
|
+
e.stopImmediatePropagation();
|
160313
160412
|
}
|
160314
160413
|
} else {
|
160315
|
-
|
160316
|
-
|
160317
|
-
|
160318
|
-
|
160319
|
-
|
160320
|
-
} else {
|
160321
|
-
if (link.closest('.is-menu-search')) ; else {
|
160322
|
-
if (!e.target.getAttribute('href')) return;
|
160323
|
-
e.preventDefault();
|
160324
|
-
e.stopImmediatePropagation();
|
160414
|
+
if (link.closest('.is-menu-search')) ; else {
|
160415
|
+
if (!e.target.getAttribute('href')) return;
|
160416
|
+
e.preventDefault();
|
160417
|
+
e.stopImmediatePropagation();
|
160418
|
+
}
|
160325
160419
|
}
|
160326
|
-
}
|
160327
|
-
|
160420
|
+
});
|
160421
|
+
this.linksWithClickListeners.add(link); // Mark the listener as added
|
160422
|
+
}
|
160328
160423
|
});
|
160329
160424
|
}
|
160330
160425
|
} // box
|
@@ -160491,7 +160586,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
160491
160586
|
'</div>');
|
160492
160587
|
*/
|
160493
160588
|
|
160494
|
-
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('
|
160589
|
+
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Upload Background') + '" title="' + out('Upload Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select Background') + '" title="' + out('Select Background') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
|
160495
160590
|
let info = box.querySelector('.is-box-info');
|
160496
160591
|
if (info) info.parentNode.removeChild(info);
|
160497
160592
|
|