@innovastudio/contentbox 1.5.30 → 1.5.32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/public/contentbox/contentbox.esm.js +16 -5
  3. package/public/contentbox/contentbox.min.js +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
3
  "type": "module",
4
- "version": "1.5.30",
4
+ "version": "1.5.32",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
package/public/contentbox/contentbox.esm.js CHANGED
@@ -2063,6 +2063,7 @@ class SideBar {
2063
2063
  setTimeout(()=>{
2064
2064
  designList.innerHTML = '';
2065
2065
  designList.style.opacity = 1;
2066
+ designList.scrollTop = 0;
2066
2067
 
2067
2068
  let nIndex = 0;
2068
2069
 
@@ -10899,7 +10900,7 @@ class EditBox {
10899
10900
 
10900
10901
  ` ) + '<div style="padding:0;width:100%;">' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animation') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
10901
10902
  html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
10902
- html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + this.builder.selectIcon + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;padding-top:20px;">' + '<div style="display:flex;align-items: center;margin-right:30px">' + '<label for="chkAutofitContent" style="margin:0;display:flex;align-items: center;"><input id="chkAutofitContent" type="checkbox" /> <span style="margin-left:3px">' + out('Autofit on Mobile') + '</span></label>' + '</div>' + '<div style="display:flex;align-items: center;">' + '<label for="inpBoxMinHeight" style="margin:0 4px 0 0;">' + out('Min Height') + ':</label>' + '<select id="inpBoxMinHeight">' + '<option value="">' + out('Not Set') + '</option>' + '<option value="20">20%</option>' + '<option value="25">25%</option>' + '<option value="30">30%</option>' + '<option value="40">40%</option>' + '<option value="50">50%</option>' + '<option value="60">60%</option>' + '<option value="70">70%</option>' + '<option value="75">75%</option>' + '<option value="80">80%</option>' + '<option value="90">90%</option>' + '<option value="100">100%</option>' + '</select>' + '</div>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Add Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Add Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
10903
+ html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '<div id="divBoxBackgroundImage">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + this.builder.selectIcon + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;padding-top:20px;">' + '<div style="display:flex;align-items: center;margin-right:30px">' + '<label for="chkAutofitContent" style="margin:0;display:flex;align-items: center;"><input id="chkAutofitContent" type="checkbox" /> <span style="margin-left:3px">' + out('Autofit on Mobile') + '</span></label>' + '</div>' + '<div style="display:flex;align-items: center;">' + '<label for="inpBoxMinHeight" style="margin:0 4px 0 0;">' + out('Min Height') + ':</label>' + '<select id="inpBoxMinHeight">' + '<option value="">' + out('Not Set') + '</option>' + '<option value="20">20%</option>' + '<option value="25">25%</option>' + '<option value="30">30%</option>' + '<option value="40">40%</option>' + '<option value="50">50%</option>' + '<option value="60">60%</option>' + '<option value="70">70%</option>' + '<option value="75">75%</option>' + '<option value="80">80%</option>' + '<option value="90">90%</option>' + '<option value="100">100%</option>' + '</select>' + '</div>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Add Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Add Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
10903
10904
  html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;">' + this.builder.selectIcon + '</button>' + `<button title="${out(this.builder.otherSelectCaption)}" class="input-select-other" style="display:none;flex:none;width:40px;height:38px;background:transparent;">
10904
10905
  ${this.builder.otherSelectIcon}
10905
10906
  </button>` + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
@@ -11651,6 +11652,8 @@ class EditBox {
11651
11652
  dom$l.removeClass(activeBox.querySelector('.edge-y-3'), 'edge-y-3');
11652
11653
  dom$l.removeClass(activeBox.querySelector('.edge-y-4'), 'edge-y-4');
11653
11654
  dom$l.removeClass(activeBox.querySelector('.edge-y-5'), 'edge-y-5');
11655
+ dom$l.removeClass(activeBox.querySelector('.edge-y-6'), 'edge-y-6');
11656
+ dom$l.removeClass(activeBox.querySelector('.edge-y-7'), 'edge-y-7');
11654
11657
  dom$l.removeClass(activeBox.querySelector('.edge-y-8'), 'edge-y-8'); // old (backward compatible)
11655
11658
 
11656
11659
  dom$l.removeClass(activeBox.querySelector('.edge-x--1'), 'edge-x--1');
@@ -11666,6 +11669,7 @@ class EditBox {
11666
11669
  dom$l.removeClass(activeBox.querySelector('.edge-x-3'), 'edge-x-3');
11667
11670
  dom$l.removeClass(activeBox.querySelector('.edge-x-4'), 'edge-x-4');
11668
11671
  dom$l.removeClass(activeBox.querySelector('.edge-x-5'), 'edge-x-5');
11672
+ dom$l.removeClass(activeBox.querySelector('.edge-x-6'), 'edge-x-6');
11669
11673
  dom$l.removeClass(activeBox.querySelector('.is-box-centered'), 'is-content-top');
11670
11674
  dom$l.removeClass(activeBox.querySelector('.is-box-centered'), 'is-content-bottom');
11671
11675
  dom$l.removeClass(activeBox, 'is-content-top'); //simplified
@@ -12924,13 +12928,13 @@ class EditBox {
12924
12928
  }
12925
12929
 
12926
12930
  if (overlayVideo) {
12927
- modalEditBox.querySelector('#divBoxBackgroundColor').style.display = 'none';
12931
+ modalEditBox.querySelector('#divBoxBackgroundImage').style.display = 'none';
12928
12932
  } else {
12929
- modalEditBox.querySelector('#divBoxBackgroundColor').style.display = '';
12933
+ modalEditBox.querySelector('#divBoxBackgroundImage').style.display = '';
12930
12934
 
12931
12935
  if (overlayBgHasContent) {
12932
12936
  //There is content within background overlay
12933
- modalEditBox.querySelector('#divBoxBackgroundColor').style.display = 'none';
12937
+ modalEditBox.querySelector('#divBoxBackgroundImage').style.display = 'none';
12934
12938
  }
12935
12939
  }
12936
12940
 
@@ -13248,7 +13252,7 @@ class EditBox {
13248
13252
  url = activeBox.getAttribute('data-modal-url');
13249
13253
  if (url !== '') inpClickSrc.value = url;else inpClickSrc.value = '';
13250
13254
 
13251
- if (modalEditBox.querySelector('#divBoxSize').style.display === 'none' && modalEditBox.querySelector('#divBoxBackgroundColor').style.display === 'none' && modalEditBox.querySelector('#tabBoxContentText').style.display === 'none' && modalEditBox.querySelector('#tabBoxContentContainer').style.display === 'none' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none' && modalEditBox.querySelector('#tabBoxAnimate').style.display === 'none' && modalEditBox.querySelector('#tabBoxCustomHtml').style.display === 'none') {
13255
+ if (modalEditBox.querySelector('#divBoxSize').style.display === 'none' && modalEditBox.querySelector('#divBoxBackgroundColor').style.display === 'none' && modalEditBox.querySelector('#divBoxBackgroundImage').style.display === 'none' && modalEditBox.querySelector('#tabBoxContentText').style.display === 'none' && modalEditBox.querySelector('#tabBoxContentContainer').style.display === 'none' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none' && modalEditBox.querySelector('#tabBoxAnimate').style.display === 'none' && modalEditBox.querySelector('#tabBoxCustomHtml').style.display === 'none') {
13252
13256
  modalEditBox.querySelector('#divNoBoxSettings').style.display = 'block'; //Show info: This box has no available settings
13253
13257
  } else {
13254
13258
  modalEditBox.querySelector('#divNoBoxSettings').style.display = 'none';
@@ -13678,6 +13682,12 @@ class EditBox {
13678
13682
  h = '780px';
13679
13683
  }
13680
13684
 
13685
+ if (moduleName === 'video-bg') {
13686
+ // div.style.width = '1600px';
13687
+ w = '600px';
13688
+ h = '635px';
13689
+ }
13690
+
13681
13691
  div.style.maxWidth = w;
13682
13692
  div.style.height = h;
13683
13693
  }
@@ -14326,6 +14336,7 @@ class EditBox {
14326
14336
  overlay.style.filter = '';
14327
14337
  const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
14328
14338
  chkBoxBgImageGrayscale.checked = false;
14339
+ overlayBg.style.backgroundSize = '';
14329
14340
  overlayBg.style.backgroundPosition = '50% 60%';
14330
14341
  overlayBg.removeAttribute('data-scale');
14331
14342
  overlayBg.removeAttribute('data-x');