@innovastudio/contentbox 1.6.107 → 1.6.109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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.109",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"types": "index.d.ts",
|
@@ -59,7 +59,7 @@
|
|
59
59
|
"ws": "^8.13.0"
|
60
60
|
},
|
61
61
|
"dependencies": {
|
62
|
-
"@innovastudio/contentbuilder": "^1.5.
|
62
|
+
"@innovastudio/contentbuilder": "^1.5.106",
|
63
63
|
"js-beautify": "^1.14.0",
|
64
64
|
"sortablejs": "^1.15.2"
|
65
65
|
}
|
@@ -916,7 +916,16 @@ body.controlpanel .is-content-view.mobile {
|
|
916
916
|
margin-left: 5px;
|
917
917
|
}
|
918
918
|
.builder-ui button.btn-editcode, .builder-ui button.btn-editmodule {
|
919
|
-
width:
|
919
|
+
width: 100%;
|
920
|
+
height: 39px;
|
921
|
+
background: rgb(135, 116, 215);
|
922
|
+
color: #fff;
|
923
|
+
}
|
924
|
+
.builder-ui button.btn-editcode svg, .builder-ui button.btn-editmodule svg {
|
925
|
+
fill: #fff;
|
926
|
+
}
|
927
|
+
.builder-ui button.btn-editcode:hover, .builder-ui button.btn-editmodule:hover {
|
928
|
+
background: rgb(135, 116, 215) !important;
|
920
929
|
}
|
921
930
|
.builder-ui button.is-btn-color {
|
922
931
|
width: 41px;
|
@@ -11531,34 +11531,38 @@ class PanelImage {
|
|
11531
11531
|
|
11532
11532
|
let html = `
|
11533
11533
|
<div class="submain">
|
11534
|
-
<div class="asset-preview"></div>
|
11535
11534
|
|
11536
|
-
<
|
11537
|
-
<div>${out('Source')}:</div>
|
11538
|
-
<input type="text" class="inp-src" id="_inp_src_${this.random()}">
|
11539
|
-
</label>
|
11535
|
+
<div class="div-image-settings">
|
11540
11536
|
|
11541
|
-
|
11542
|
-
<input class="inp-file" type="file" accept="image/*" style="display:none"/>
|
11543
|
-
<button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
|
11544
|
-
<button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
|
11545
|
-
<button title="${out('Link')}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>
|
11546
|
-
<button title="${out('Edit')}" class="btn-edit"><svg><use xlink:href="#icon-pencil"></use></svg></button>
|
11547
|
-
</div>
|
11537
|
+
<div class="asset-preview"></div>
|
11548
11538
|
|
11549
|
-
|
11550
|
-
|
11551
|
-
|
11552
|
-
|
11553
|
-
<button title="${out('Align Right')}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>
|
11554
|
-
<button title="${out('Align Full')}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>
|
11555
|
-
</div>
|
11556
|
-
-->
|
11539
|
+
<label class="label mt-3">
|
11540
|
+
<div>${out('Source')}:</div>
|
11541
|
+
<input type="text" class="inp-src" id="_inp_src_${this.random()}">
|
11542
|
+
</label>
|
11557
11543
|
|
11558
|
-
|
11559
|
-
|
11560
|
-
|
11561
|
-
|
11544
|
+
<div class="group mt-4">
|
11545
|
+
<input class="inp-file" type="file" accept="image/*" style="display:none"/>
|
11546
|
+
<button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
|
11547
|
+
<button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
|
11548
|
+
<button title="${out('Link')}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>
|
11549
|
+
<button title="${out('Edit')}" class="btn-edit"><svg><use xlink:href="#icon-pencil"></use></svg></button>
|
11550
|
+
</div>
|
11551
|
+
|
11552
|
+
<!--
|
11553
|
+
<div class="group">
|
11554
|
+
<button title="${out('Align Left')}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>
|
11555
|
+
<button title="${out('Align Center')}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>
|
11556
|
+
<button title="${out('Align Right')}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>
|
11557
|
+
<button title="${out('Align Full')}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>
|
11558
|
+
</div>
|
11559
|
+
-->
|
11560
|
+
|
11561
|
+
<label class="label mt-2">
|
11562
|
+
<div>${out('Title')}:</div>
|
11563
|
+
<input type="text" class="inp-title" id="_inp_title_${this.random()}">
|
11564
|
+
</label>
|
11565
|
+
</div>
|
11562
11566
|
</div>
|
11563
11567
|
`;
|
11564
11568
|
panel.insertAdjacentHTML('beforeend', html);
|
@@ -11667,6 +11671,14 @@ class PanelImage {
|
|
11667
11671
|
inpSrc.value = 'image/jpeg (base64)';
|
11668
11672
|
}
|
11669
11673
|
|
11674
|
+
const divSettings = panel.querySelector('.div-image-settings');
|
11675
|
+
|
11676
|
+
if (img.closest('[data-html]')) {
|
11677
|
+
divSettings.style.display = 'none';
|
11678
|
+
} else {
|
11679
|
+
divSettings.style.display = '';
|
11680
|
+
}
|
11681
|
+
|
11670
11682
|
const inpTitle = panel.querySelector('.inp-title');
|
11671
11683
|
inpTitle.value = alt;
|
11672
11684
|
}
|
@@ -11713,28 +11725,32 @@ class PanelVideo {
|
|
11713
11725
|
this.builder = builder;
|
11714
11726
|
let html = `
|
11715
11727
|
<div class="submain">
|
11716
|
-
<div class="asset-preview"></div>
|
11717
11728
|
|
11718
|
-
<
|
11719
|
-
<div>${out('Source')}:</div>
|
11720
|
-
<input type="text" class="inp-src">
|
11721
|
-
</label>
|
11729
|
+
<div class="div-video-settings">
|
11722
11730
|
|
11723
|
-
|
11724
|
-
|
11725
|
-
<
|
11726
|
-
|
11727
|
-
|
11731
|
+
<div class="asset-preview"></div>
|
11732
|
+
|
11733
|
+
<label class="label mt-3">
|
11734
|
+
<div>${out('Source')}:</div>
|
11735
|
+
<input type="text" class="inp-src">
|
11736
|
+
</label>
|
11728
11737
|
|
11729
|
-
|
11730
|
-
|
11731
|
-
|
11732
|
-
|
11733
|
-
|
11734
|
-
|
11735
|
-
|
11736
|
-
|
11737
|
-
|
11738
|
+
<div class="group mt-4">
|
11739
|
+
<input class="inp-file" type="file" accept="video/mp4" style="display:none"/>
|
11740
|
+
<button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
|
11741
|
+
<button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
|
11742
|
+
</div>
|
11743
|
+
|
11744
|
+
<label class="label checkbox mt-4">
|
11745
|
+
<input class="inp-video-controls" type="checkbox" /> <span>${out('Show Controls')}</span>
|
11746
|
+
</label>
|
11747
|
+
<label class="label checkbox mt-2">
|
11748
|
+
<input class="inp-video-loop" type="checkbox" /> <span>${out('Loop')}</span>
|
11749
|
+
</label>
|
11750
|
+
<label class="label checkbox mt-2">
|
11751
|
+
<input class="inp-video-autoplay" type="checkbox" /> <span>${out('Autoplay')}</span>
|
11752
|
+
</label>
|
11753
|
+
</div>
|
11738
11754
|
|
11739
11755
|
</div>
|
11740
11756
|
`;
|
@@ -11839,7 +11855,22 @@ class PanelVideo {
|
|
11839
11855
|
const src = source ? source.getAttribute('src') : '';
|
11840
11856
|
this.updatePreview(src);
|
11841
11857
|
const inpSrc = panel.querySelector('.inp-src');
|
11842
|
-
|
11858
|
+
|
11859
|
+
if (src.indexOf('base64') === -1) {
|
11860
|
+
inpSrc.value = src;
|
11861
|
+
} else {
|
11862
|
+
// inpSrc.value = '[Image Data]';
|
11863
|
+
inpSrc.value = 'video/mp4 (base64)';
|
11864
|
+
}
|
11865
|
+
|
11866
|
+
const divSettings = panel.querySelector('.div-video-settings');
|
11867
|
+
|
11868
|
+
if (video.closest('[data-html]')) {
|
11869
|
+
divSettings.style.display = 'none';
|
11870
|
+
} else {
|
11871
|
+
divSettings.style.display = '';
|
11872
|
+
}
|
11873
|
+
|
11843
11874
|
const inpShowControls = panel.querySelector('.inp-video-controls');
|
11844
11875
|
|
11845
11876
|
if (video.hasAttribute('controls')) {
|
@@ -12673,7 +12704,7 @@ class PanelCode {
|
|
12673
12704
|
</button>
|
12674
12705
|
</div>
|
12675
12706
|
|
12676
|
-
<div class="group flex">
|
12707
|
+
<div class="group flex" style="width:100%">
|
12677
12708
|
<button title="${out('Configure')}" class="btn-editmodule">
|
12678
12709
|
<svg><use xlink:href="#icon-settings"></use></svg>
|
12679
12710
|
<span>${out('Configure')}</span>
|
@@ -31443,36 +31474,36 @@ class Util$1 {
|
|
31443
31474
|
}
|
31444
31475
|
|
31445
31476
|
/* Disable Modal Animation */
|
31477
|
+
/*
|
31446
31478
|
let animate = false;
|
31447
|
-
if
|
31448
|
-
|
31449
|
-
|
31450
|
-
|
31451
|
-
|
31452
|
-
|
31479
|
+
if(this.builder) {
|
31480
|
+
if(this.builder.opts.animateModal) {
|
31481
|
+
animate = true;
|
31482
|
+
if(!animated){ // if not set or false
|
31483
|
+
animate=false; // overide
|
31484
|
+
}
|
31453
31485
|
}
|
31454
|
-
}
|
31455
31486
|
} else {
|
31456
|
-
|
31457
|
-
|
31458
|
-
|
31459
|
-
}
|
31487
|
+
if(animated){ // if set true
|
31488
|
+
animate=true; // overide
|
31489
|
+
}
|
31460
31490
|
}
|
31461
|
-
|
31462
|
-
|
31463
|
-
|
31464
|
-
|
31465
|
-
|
31466
|
-
|
31467
|
-
|
31468
|
-
|
31469
|
-
|
31470
|
-
|
31471
|
-
|
31472
|
-
|
31473
|
-
}
|
31474
|
-
}
|
31491
|
+
if(animate) {
|
31492
|
+
if(this.builder){
|
31493
|
+
const buildercontainers = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
31494
|
+
Array.prototype.forEach.call(buildercontainers, (buildercontainer) => {
|
31495
|
+
// buildercontainer.style.transform = 'scale(0.98)';
|
31496
|
+
// buildercontainer.style.WebkitTransform= 'scale(0.98)';
|
31497
|
+
// buildercontainer.style.MozTransform= 'scale(0.98)';
|
31498
|
+
buildercontainer.style.transform = `scale(${this.builder.opts.zoom-0.02})`;
|
31499
|
+
buildercontainer.style.WebkitTransform= `scale(${this.builder.opts.zoom-0.02})`;
|
31500
|
+
buildercontainer.style.MozTransform= `scale(${this.builder.opts.zoom-0.02})`;
|
31501
|
+
buildercontainer.setAttribute('scaled-down','1');
|
31502
|
+
});
|
31503
|
+
}
|
31475
31504
|
}
|
31505
|
+
*/
|
31506
|
+
|
31476
31507
|
const ovl = modal.querySelector('.is-modal-overlay');
|
31477
31508
|
if (ovl) ovl.parentNode.removeChild(ovl); // new
|
31478
31509
|
|
@@ -42499,6 +42530,12 @@ const prepareSvgIcons = builder => {
|
|
42499
42530
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
42500
42531
|
<path d="M5 12l14 0"></path>
|
42501
42532
|
</symbol>
|
42533
|
+
<symbol id="icon-upload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
42534
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
42535
|
+
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
|
42536
|
+
<path d="M7 9l5 -5l5 5"></path>
|
42537
|
+
<path d="M12 4l0 12"></path>
|
42538
|
+
</symbol>
|
42502
42539
|
</svg>`;
|
42503
42540
|
builder.dom.appendHtml(builder.builderStuff, html);
|
42504
42541
|
};
|
@@ -72302,7 +72339,7 @@ class Image$1 {
|
|
72302
72339
|
<div class="image-larger1 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
|
72303
72340
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
72304
72341
|
<input id="hidRefId1" name="hidRefId" type="hidden" value="" />
|
72305
|
-
<svg
|
72342
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
72306
72343
|
<input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
72307
72344
|
</form>
|
72308
72345
|
|
@@ -72325,7 +72362,7 @@ class Image$1 {
|
|
72325
72362
|
<div class="image-larger2 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
|
72326
72363
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
72327
72364
|
<input id="hidRefId2" name="hidRefId" type="hidden" value="" />
|
72328
|
-
<svg
|
72365
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
72329
72366
|
<input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
72330
72367
|
</form>
|
72331
72368
|
</div>
|
@@ -75360,7 +75397,7 @@ class Hyperlink {
|
|
75360
75397
|
<div class="div-anyfile-upload is-btn classic" style="position: relative; flex: 0 0 auto; width: 50px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
75361
75398
|
<form class="form-upload-larger" target="frameTargetAnyfileUpload" method="post" action="${this.builder.opts.fileHandler}" enctype="multipart/form-data" style="overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
|
75362
75399
|
<input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
|
75363
|
-
<svg
|
75400
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
75364
75401
|
<input type="file" onclick="blur()" tabindex="0" class="input-anyfile-upload" name="fileImage" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
75365
75402
|
</form>
|
75366
75403
|
<iframe tabindex="-1" id="frameTargetAnyfileUpload" name="frameTargetAnyfileUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
@@ -77346,7 +77383,7 @@ class Video {
|
|
77346
77383
|
<div class="video-larger1 input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
|
77347
77384
|
<form class="form-upload-larger" target="frameTargetVideoUpload" method="post" action="${this.builder.opts.videoHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
|
77348
77385
|
<input id="hidRefId5" name="hidRefId" type="hidden" value="" />
|
77349
|
-
<svg
|
77386
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
77350
77387
|
<input title="${util.out('Select')}" id="fileVideo1" name="fileImage" type="file" accept="video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
77351
77388
|
</form>
|
77352
77389
|
|
@@ -77579,7 +77616,7 @@ class Audio {
|
|
77579
77616
|
<div class="audio-file-upload input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
|
77580
77617
|
<form class="form-upload-larger" target="frameTargetAudioUpload" method="post" action="${this.builder.opts.audioHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
|
77581
77618
|
<input id="hidRefAudio" name="hidRefId" type="hidden" value="" />
|
77582
|
-
<svg
|
77619
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
77583
77620
|
<input title="${util.out('Select')}" id="fileAudio1" name="fileImage" type="file" accept="audio/mp3" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
77584
77621
|
</form>
|
77585
77622
|
|
@@ -79599,7 +79636,7 @@ class ColumnTool {
|
|
79599
79636
|
<div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
79600
79637
|
<form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
79601
79638
|
<input id="hidRefId3" name="hidRefId" type="hidden" value="">
|
79602
|
-
<svg
|
79639
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
79603
79640
|
<input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
79604
79641
|
</form>
|
79605
79642
|
|
@@ -80455,7 +80492,9 @@ class ColumnTool {
|
|
80455
80492
|
<div class="image-larger4 is-btn classic" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
80456
80493
|
<form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
|
80457
80494
|
<input id="hidRefId4" name="hidRefId" type="hidden" value="">
|
80458
|
-
|
80495
|
+
|
80496
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
80497
|
+
|
80459
80498
|
<input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
|
80460
80499
|
</form>
|
80461
80500
|
|
@@ -100793,7 +100832,7 @@ class SaveImages {
|
|
100793
100832
|
const images = area.querySelectorAll('img');
|
100794
100833
|
Array.prototype.forEach.call(images, img => {
|
100795
100834
|
let src = img.getAttribute('src');
|
100796
|
-
if (typeof src !== typeof undefined && src !== false) {
|
100835
|
+
if (typeof src !== typeof undefined && src !== false && img.getAttribute('data-filename')) {
|
100797
100836
|
if (src.indexOf('base64') !== -1) {
|
100798
100837
|
// let customcode = false;
|
100799
100838
|
// if(dom.parentsHasAttribute(img, 'data-html')){
|
@@ -106506,7 +106545,7 @@ class MediaPicker {
|
|
106506
106545
|
<div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
106507
106546
|
<form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
106508
106547
|
<input name="hidRefId" class="input-ref-id" type="hidden" value="">
|
106509
|
-
<svg
|
106548
|
+
<svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
|
106510
106549
|
<input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
106511
106550
|
</form>
|
106512
106551
|
<iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|