@innovastudio/contentbox 1.5.33 → 1.5.35
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.5.
|
4
|
+
"version": "1.5.35",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"files": [
|
@@ -46,7 +46,7 @@
|
|
46
46
|
"webpack-dev-server": "^4.0.0"
|
47
47
|
},
|
48
48
|
"dependencies": {
|
49
|
-
"@innovastudio/contentbuilder": "^1.4.
|
49
|
+
"@innovastudio/contentbuilder": "^1.4.26",
|
50
50
|
"js-beautify": "^1.14.0"
|
51
51
|
}
|
52
52
|
}
|
@@ -73112,6 +73112,7 @@ class ColumnTool {
|
|
73112
73112
|
const util = this.builder.util;
|
73113
73113
|
const builderStuff = this.builder.builderStuff;
|
73114
73114
|
this.util = util;
|
73115
|
+
this.builderStuff = builderStuff;
|
73115
73116
|
const dom = this.builder.dom;
|
73116
73117
|
this.dom = dom;
|
73117
73118
|
let columnMore = builderStuff.querySelector('.is-pop.columnmore');
|
@@ -73220,9 +73221,6 @@ class ColumnTool {
|
|
73220
73221
|
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
73221
73222
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
73222
73223
|
</button>
|
73223
|
-
<!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
73224
|
-
<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-device-laptop"></use></svg>
|
73225
|
-
</button>-->
|
73226
73224
|
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
73227
73225
|
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
73228
73226
|
</button>
|
@@ -73413,6 +73411,21 @@ class ColumnTool {
|
|
73413
73411
|
|
73414
73412
|
<div style="padding:0;margin-top:25px;">
|
73415
73413
|
|
73414
|
+
<div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
|
73415
|
+
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
73416
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
73417
|
+
</button>
|
73418
|
+
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
73419
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
73420
|
+
</button>
|
73421
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
73422
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
73423
|
+
</button>
|
73424
|
+
<button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
73425
|
+
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
73426
|
+
</button>
|
73427
|
+
</div>
|
73428
|
+
|
73416
73429
|
<div style="padding-bottom:3px;">${util.out('Scale')}:</div>
|
73417
73430
|
<div style="padding-top:4px">
|
73418
73431
|
<input type="range" min="100" max="500" value="0" class="image-scale-slider is-rangeslider">
|
@@ -75031,6 +75044,25 @@ class ColumnTool {
|
|
75031
75044
|
btnHidden.classList.add('on'); //Trigger Change event
|
75032
75045
|
|
75033
75046
|
this.builder.opts.onChange();
|
75047
|
+
}); // Responsive Image Adjust
|
75048
|
+
|
75049
|
+
btns = this.imageAdjust.querySelectorAll('.input-device');
|
75050
|
+
btns.forEach(btn => {
|
75051
|
+
btn.addEventListener('click', () => {
|
75052
|
+
let elms = this.imageAdjust.querySelectorAll('.input-device');
|
75053
|
+
elms.forEach(elm => {
|
75054
|
+
elm.classList.remove('on');
|
75055
|
+
});
|
75056
|
+
btn.classList.add('on');
|
75057
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview');
|
75058
|
+
|
75059
|
+
if (!modal.classList.contains('active')) {
|
75060
|
+
this.builder.openPreview();
|
75061
|
+
}
|
75062
|
+
|
75063
|
+
this.realtimeImageAdjust();
|
75064
|
+
this.readImageAdjust(this.builder.elementSelected, this.useTarget);
|
75065
|
+
});
|
75034
75066
|
});
|
75035
75067
|
}
|
75036
75068
|
|
@@ -75298,9 +75330,8 @@ class ColumnTool {
|
|
75298
75330
|
if (btn) btn.setAttribute('data-focus', true);
|
75299
75331
|
}
|
75300
75332
|
|
75301
|
-
|
75302
|
-
|
75303
|
-
|
75333
|
+
readImageAdjust(elm, useTarget) {
|
75334
|
+
//Current value
|
75304
75335
|
const imageAdjust = this.imageAdjust;
|
75305
75336
|
const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
|
75306
75337
|
const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
|
@@ -75308,6 +75339,7 @@ class ColumnTool {
|
|
75308
75339
|
inpImageScaleSlider.value = 100;
|
75309
75340
|
inpImageHorSlider.value = 0;
|
75310
75341
|
inpImageVertSlider.value = 0;
|
75342
|
+
inpImageScaleSlider.disabled = false;
|
75311
75343
|
|
75312
75344
|
if (useTarget) {
|
75313
75345
|
inpImageHorSlider.value = 50;
|
@@ -75386,16 +75418,79 @@ class ColumnTool {
|
|
75386
75418
|
} //elementSelected
|
75387
75419
|
|
75388
75420
|
|
75389
|
-
this.builder.elementSelected = elm;
|
75421
|
+
this.builder.elementSelected = elm;
|
75422
|
+
}
|
75423
|
+
|
75424
|
+
openImageAdjust(elm, btn, useTarget) {
|
75425
|
+
if (useTarget) this.useTarget = true;else this.useTarget = false;
|
75426
|
+
const divTarget = this.imageAdjust.querySelector('.div-target');
|
75427
|
+
|
75428
|
+
if (useTarget) {
|
75429
|
+
divTarget.style.display = 'flex';
|
75430
|
+
} else {
|
75431
|
+
divTarget.style.display = 'none';
|
75432
|
+
}
|
75433
|
+
|
75434
|
+
const modal = this.builderStuff.querySelector('.is-modal.content-preview');
|
75435
|
+
let elms = this.imageAdjust.querySelectorAll('.input-device');
|
75436
|
+
elms.forEach(elm => {
|
75437
|
+
elm.classList.remove('on');
|
75438
|
+
});
|
75390
75439
|
|
75391
|
-
|
75392
|
-
|
75440
|
+
if (!modal.classList.contains('active')) {
|
75441
|
+
this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
|
75442
|
+
}
|
75443
|
+
|
75444
|
+
this.readImageAdjust(elm, useTarget); //Show modal
|
75445
|
+
|
75446
|
+
this.imageAdjust.style.zIndex = '10005';
|
75447
|
+
this.util.showModal(this.imageAdjust, false, () => {
|
75393
75448
|
if (btn) {
|
75394
75449
|
btn.removeAttribute('data-focus');
|
75395
75450
|
btn.focus();
|
75396
75451
|
}
|
75397
75452
|
});
|
75398
75453
|
if (btn) btn.setAttribute('data-focus', true);
|
75454
|
+
this.realtimeImageAdjust(true);
|
75455
|
+
}
|
75456
|
+
|
75457
|
+
realtimeImageAdjust(initialOpen) {
|
75458
|
+
if (initialOpen) {
|
75459
|
+
const builderStuff = this.builder.builderStuff;
|
75460
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
75461
|
+
|
75462
|
+
if (modal) {
|
75463
|
+
let elms = this.imageAdjust.querySelectorAll('.input-device');
|
75464
|
+
elms.forEach(elm => {
|
75465
|
+
elm.classList.remove('on');
|
75466
|
+
});
|
75467
|
+
|
75468
|
+
if (modal.classList.contains('is-screen-1920')) {
|
75469
|
+
this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
|
75470
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
75471
|
+
this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
|
75472
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
75473
|
+
this.imageAdjust.querySelector('.input-device[data-value="md"]').classList.add('on');
|
75474
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
75475
|
+
this.imageAdjust.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
75476
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
75477
|
+
this.imageAdjust.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
75478
|
+
}
|
75479
|
+
}
|
75480
|
+
}
|
75481
|
+
|
75482
|
+
let divTarget = this.imageAdjust.querySelector('.div-target');
|
75483
|
+
let target = this.builder.responsive.readTarget(divTarget); // Live Preview Sync
|
75484
|
+
|
75485
|
+
if (target === 'xs') {
|
75486
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
75487
|
+
} else if (target === 'sm') {
|
75488
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
75489
|
+
} else if (target === 'md') {
|
75490
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
75491
|
+
} else {
|
75492
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
75493
|
+
}
|
75399
75494
|
}
|
75400
75495
|
|
75401
75496
|
resetImage(elm) {
|
@@ -91578,7 +91673,28 @@ class LivePreview {
|
|
91578
91673
|
if (!this.builder.doc.querySelector('.is-wrapper')) {
|
91579
91674
|
// ContentBuilder
|
91580
91675
|
if (this.builder.previewURL) {
|
91581
|
-
|
91676
|
+
if (this.builder.livePreviewAlwaysReload) {
|
91677
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91678
|
+
} else {
|
91679
|
+
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
91680
|
+
|
91681
|
+
if (iframeDocument) {
|
91682
|
+
if (iframeDocument.body.innerHTML === '') {
|
91683
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91684
|
+
} else {
|
91685
|
+
// sync. html
|
91686
|
+
let html = this.builder.html();
|
91687
|
+
let container = iframeDocument.querySelector('.container');
|
91688
|
+
if (!container) container = iframeDocument.querySelector('.is-container');
|
91689
|
+
|
91690
|
+
if (container) {
|
91691
|
+
container.innerHTML = html;
|
91692
|
+
} else {
|
91693
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91694
|
+
}
|
91695
|
+
}
|
91696
|
+
}
|
91697
|
+
}
|
91582
91698
|
} else {
|
91583
91699
|
try {
|
91584
91700
|
this.writeHtml(iframe);
|
@@ -91587,87 +91703,90 @@ class LivePreview {
|
|
91587
91703
|
}
|
91588
91704
|
} else {
|
91589
91705
|
// ContentBox
|
91590
|
-
|
91591
|
-
|
91706
|
+
if (this.builder.livePreviewAlwaysReload) {
|
91707
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91708
|
+
} else {
|
91709
|
+
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
91592
91710
|
|
91593
|
-
|
91594
|
-
|
91595
|
-
|
91596
|
-
|
91597
|
-
|
91598
|
-
|
91599
|
-
|
91600
|
-
|
91601
|
-
|
91602
|
-
|
91603
|
-
|
91604
|
-
|
91605
|
-
|
91606
|
-
|
91607
|
-
|
91608
|
-
|
91609
|
-
|
91610
|
-
|
91611
|
-
|
91612
|
-
|
91613
|
-
|
91614
|
-
|
91615
|
-
|
91616
|
-
|
91617
|
-
|
91618
|
-
|
91711
|
+
if (iframeDocument) {
|
91712
|
+
if (iframeDocument.body.innerHTML === '') {
|
91713
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91714
|
+
} else {
|
91715
|
+
// sync. html
|
91716
|
+
let html = localStorage.getItem('preview-html');
|
91717
|
+
let wrapper = iframeDocument.querySelector('.is-wrapper');
|
91718
|
+
wrapper.innerHTML = html; // sync. styles
|
91719
|
+
// let mainCss = localStorage.getItem('preview-maincss');
|
91720
|
+
// let sectionCss = localStorage.getItem('preview-sectioncss');
|
91721
|
+
|
91722
|
+
let elms = iframeDocument.querySelectorAll('link');
|
91723
|
+
let links = this.builder.doc.getElementsByTagName('link');
|
91724
|
+
Array.from(links).map(link => {
|
91725
|
+
let href = link.href.toLowerCase();
|
91726
|
+
|
91727
|
+
if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
|
91728
|
+
// check
|
91729
|
+
let exist = false;
|
91730
|
+
elms.forEach(elm => {
|
91731
|
+
let elmHref = elm.href.toLowerCase();
|
91732
|
+
|
91733
|
+
if (elmHref) {
|
91734
|
+
if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
|
91735
|
+
if (href === elmHref) {
|
91736
|
+
exist = true;
|
91737
|
+
}
|
91619
91738
|
}
|
91620
91739
|
}
|
91621
|
-
}
|
91622
|
-
});
|
91740
|
+
});
|
91623
91741
|
|
91624
|
-
|
91625
|
-
|
91626
|
-
|
91627
|
-
|
91742
|
+
if (!exist) {
|
91743
|
+
// clone is needed, otherwise, parent resource may dissapear when loading on iframe
|
91744
|
+
const clone = link.cloneNode(true);
|
91745
|
+
iframeDocument.head.appendChild(clone); // ADD
|
91746
|
+
}
|
91628
91747
|
}
|
91629
|
-
}
|
91630
|
-
|
91631
|
-
|
91632
|
-
|
91633
|
-
|
91634
|
-
|
91635
|
-
|
91636
|
-
|
91637
|
-
|
91638
|
-
|
91639
|
-
|
91640
|
-
|
91641
|
-
|
91642
|
-
|
91643
|
-
|
91748
|
+
});
|
91749
|
+
elms.forEach(elm => {
|
91750
|
+
let href = elm.href.toLowerCase();
|
91751
|
+
|
91752
|
+
if (href.indexOf('/basetype-') !== -1 || href.indexOf('/type-') !== -1) {
|
91753
|
+
// check
|
91754
|
+
let exist = false;
|
91755
|
+
Array.from(links).map(link => {
|
91756
|
+
let elmHref = link.href.toLowerCase();
|
91757
|
+
|
91758
|
+
if (elmHref) {
|
91759
|
+
if (elmHref.indexOf('/basetype-') !== -1 || elmHref.indexOf('/type-') !== -1) {
|
91760
|
+
if (href === elmHref) {
|
91761
|
+
exist = true;
|
91762
|
+
}
|
91644
91763
|
}
|
91645
91764
|
}
|
91646
|
-
}
|
91647
|
-
});
|
91765
|
+
});
|
91648
91766
|
|
91649
|
-
|
91650
|
-
|
91767
|
+
if (!exist) {
|
91768
|
+
iframeDocument.head.removeChild(elm); // REMOVE
|
91769
|
+
}
|
91651
91770
|
}
|
91652
|
-
}
|
91653
|
-
}); // reload box js
|
91771
|
+
}); // reload box js
|
91654
91772
|
|
91655
|
-
|
91656
|
-
|
91657
|
-
|
91658
|
-
|
91659
|
-
|
91660
|
-
|
91661
|
-
|
91662
|
-
|
91663
|
-
|
91664
|
-
|
91773
|
+
elms = iframeDocument.querySelectorAll('script');
|
91774
|
+
elms.forEach(elm => {
|
91775
|
+
let src = elm.getAttribute('src');
|
91776
|
+
|
91777
|
+
if (src) {
|
91778
|
+
if (src.indexOf('box-flex.js') !== -1 || src.indexOf('box.js') !== -1) {
|
91779
|
+
elm.parentElement.removeChild(elm);
|
91780
|
+
let scriptElm = document.createElement('script');
|
91781
|
+
scriptElm.setAttribute('src', src);
|
91782
|
+
iframeDocument.body.appendChild(scriptElm);
|
91783
|
+
}
|
91665
91784
|
}
|
91666
|
-
}
|
91667
|
-
}
|
91785
|
+
});
|
91786
|
+
}
|
91787
|
+
} else {
|
91788
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91668
91789
|
}
|
91669
|
-
} else {
|
91670
|
-
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
91671
91790
|
}
|
91672
91791
|
}
|
91673
91792
|
|
@@ -91803,6 +91922,7 @@ class ContentBuilder {
|
|
91803
91922
|
// onPreviewClose: ()=>{},
|
91804
91923
|
previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
|
91805
91924
|
livePreviewOpen: false,
|
91925
|
+
livePreviewAlwaysReload: false,
|
91806
91926
|
scriptPath: '',
|
91807
91927
|
// Deprecated
|
91808
91928
|
// Old way:
|
@@ -104516,7 +104636,9 @@ class ContentBox {
|
|
104516
104636
|
zoom: 0.6,
|
104517
104637
|
shortenHTML: true,
|
104518
104638
|
advancedTimeline: true,
|
104639
|
+
previewStyle: 'top:auto;bottom:30px;left:90px;right:auto;',
|
104519
104640
|
livePreviewOpen: false,
|
104641
|
+
livePreviewAlwaysReload: false,
|
104520
104642
|
sectionTemplate: `
|
104521
104643
|
<div class="is-section is-box is-section-100 type-poppins">
|
104522
104644
|
<div class="is-overlay"></div>
|
@@ -107032,8 +107154,9 @@ class ContentBox {
|
|
107032
107154
|
this.scrollSync(iframe);
|
107033
107155
|
}, 1000);
|
107034
107156
|
},
|
107035
|
-
previewStyle:
|
107036
|
-
livePreviewOpen:
|
107157
|
+
previewStyle: this.settings.previewStyle,
|
107158
|
+
livePreviewOpen: this.settings.livePreviewOpen,
|
107159
|
+
livePreviewAlwaysReload: this.settings.livePreviewAlwaysReload,
|
107037
107160
|
iframe: this.settings.iframe,
|
107038
107161
|
imageAdjust: 1,
|
107039
107162
|
// ContentBuilder
|