@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.107",
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.103",
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: 150px;
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
- <label class="label mt-3">
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
- <div class="group mt-4">
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
- <div class="group">
11551
- <button title="${out('Align Left')}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>
11552
- <button title="${out('Align Center')}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>
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
- <label class="label mt-2">
11559
- <div>${out('Title')}:</div>
11560
- <input type="text" class="inp-title" id="_inp_title_${this.random()}">
11561
- </label>
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
- <label class="label mt-3">
11719
- <div>${out('Source')}:</div>
11720
- <input type="text" class="inp-src">
11721
- </label>
11729
+ <div class="div-video-settings">
11722
11730
 
11723
- <div class="group mt-4">
11724
- <input class="inp-file" type="file" accept="video/mp4" style="display:none"/>
11725
- <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
11726
- <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
11727
- </div>
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
- <label class="label checkbox mt-4">
11730
- <input class="inp-video-controls" type="checkbox" /> <span>${out('Show Controls')}</span>
11731
- </label>
11732
- <label class="label checkbox mt-2">
11733
- <input class="inp-video-loop" type="checkbox" /> <span>${out('Loop')}</span>
11734
- </label>
11735
- <label class="label checkbox mt-2">
11736
- <input class="inp-video-autoplay" type="checkbox" /> <span>${out('Autoplay')}</span>
11737
- </label>
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
- inpSrc.value = src;
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 (this.builder) {
31448
- if (this.builder.opts.animateModal) {
31449
- animate = true;
31450
- if (!animated) {
31451
- // if not set or false
31452
- animate = false; // overide
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
- if (animated) {
31457
- // if set true
31458
- animate = true; // overide
31459
- }
31487
+ if(animated){ // if set true
31488
+ animate=true; // overide
31489
+ }
31460
31490
  }
31461
-
31462
- if (animate) {
31463
- if (this.builder) {
31464
- const buildercontainers = this.builder.doc.querySelectorAll(this.builder.opts.container);
31465
- Array.prototype.forEach.call(buildercontainers, buildercontainer => {
31466
- // buildercontainer.style.transform = 'scale(0.98)';
31467
- // buildercontainer.style.WebkitTransform= 'scale(0.98)';
31468
- // buildercontainer.style.MozTransform= 'scale(0.98)';
31469
- buildercontainer.style.transform = `scale(${this.builder.opts.zoom - 0.02})`;
31470
- buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom - 0.02})`;
31471
- buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom - 0.02})`;
31472
- buildercontainer.setAttribute('scaled-down', '1');
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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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 class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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 class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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
- <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></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>