@innovastudio/contentbox 1.2.12 → 1.2.13

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
- "version": "1.2.12",
3
+ "version": "1.2.13",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
@@ -40,7 +40,7 @@
40
40
  "webpack-dev-server": "^4.0.0"
41
41
  },
42
42
  "dependencies": {
43
- "@innovastudio/contentbuilder": "^1.1.14",
43
+ "@innovastudio/contentbuilder": "^1.1.15",
44
44
  "axios": "^0.21.4",
45
45
  "cors": "^2.8.5",
46
46
  "express": "^4.17.1",
@@ -1976,7 +1976,7 @@ class EditSection {
1976
1976
  this.builder = builder;
1977
1977
  const builderStuff = this.builder.builderStuff;
1978
1978
  this.builderStuff = builderStuff;
1979
- let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>' + '<div id="divSectionGeneral" class="is-tab-content" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
1979
+ let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>' + '<div id="divSectionGeneral" class="is-tab-content" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div class="div-section-bgcolor" style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
1980
1980
  '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
1981
1981
  dom$L.appendHtml(builderStuff, html);
1982
1982
  let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
@@ -2173,6 +2173,30 @@ class EditSection {
2173
2173
 
2174
2174
  this.builder.settings.onChange();
2175
2175
  });
2176
+ const colorpicker = this.builder.editor.colorpicker(); // Section Background Color
2177
+
2178
+ const btnSectionBgColor = modalEditSection.querySelector('.input-section-bgcolor');
2179
+ btnSectionBgColor.addEventListener('click', () => {
2180
+ this.builder.editor.saveForUndo(true); // checkLater = true
2181
+
2182
+ const section = this.builder.activeSection;
2183
+ let bgcolor = btnSectionBgColor.style.backgroundColor;
2184
+ colorpicker.open(s => {
2185
+ section.style.backgroundColor = s;
2186
+ section.style.backgroundImage = ''; //remove gradient
2187
+
2188
+ btnSectionBgColor.style.backgroundColor = s; // preview
2189
+ }, bgcolor);
2190
+ }); // Section Background Gradient
2191
+
2192
+ let btnSectionGradient = modalEditSection.querySelector('.input-section-gradient');
2193
+ btnSectionGradient.addEventListener('click', () => {
2194
+ this.builder.editor.saveForUndo(true); // checkLater = true
2195
+
2196
+ const section = this.builder.activeSection;
2197
+ let gradientPicker = this.builder.editor.gradientpicker();
2198
+ gradientPicker.open(section);
2199
+ });
2176
2200
  }
2177
2201
 
2178
2202
  edit() {
@@ -2232,12 +2256,16 @@ class EditSection {
2232
2256
  }
2233
2257
 
2234
2258
  btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
2259
+ const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
2235
2260
  btns.forEach(btn => {
2236
2261
  dom$L.removeClass(btn, 'on');
2237
2262
  });
2238
2263
 
2239
2264
  if (dom$L.hasClass(activeSection, 'box-space')) {
2240
2265
  if (dom$L.hasClass(activeSection, 'box-space-sm')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$L.hasClass(activeSection, 'box-space-m')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$L.hasClass(activeSection, 'box-space-lg')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
2266
+ divSectionBgColor.style.display = 'flex';
2267
+ } else {
2268
+ divSectionBgColor.style.display = 'none';
2241
2269
  }
2242
2270
 
2243
2271
  btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
@@ -2253,6 +2281,16 @@ class EditSection {
2253
2281
  let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-value="${preset}"]`);
2254
2282
  dom$L.addClass(btn, 'on');
2255
2283
  }
2284
+ } // Background color
2285
+
2286
+
2287
+ let btnSectionBgColor = modalEditSection.querySelector('.input-section-bgcolor');
2288
+ let bgcolor = activeSection.style.backgroundColor;
2289
+
2290
+ if (bgcolor) {
2291
+ btnSectionBgColor.style.backgroundColor = bgcolor; //preview
2292
+ } else {
2293
+ btnSectionBgColor.style.backgroundColor = '';
2256
2294
  } // this.builder.scrollTo(activeSection);
2257
2295
 
2258
2296
  }
@@ -2478,14 +2516,17 @@ class EditSection {
2478
2516
 
2479
2517
  boxSpacing(s) {
2480
2518
  const activeSection = this.builder.activeSection;
2519
+ const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
2481
2520
 
2482
2521
  if (s == '') {
2483
2522
  dom$L.removeClass(activeSection, 'box-space');
2484
2523
  dom$L.removeClass(activeSection, 'box-space-sm');
2485
2524
  dom$L.removeClass(activeSection, 'box-space-m');
2486
2525
  dom$L.removeClass(activeSection, 'box-space-lg');
2526
+ divSectionBgColor.style.display = 'none';
2487
2527
  } else {
2488
2528
  dom$L.addClass(activeSection, 'box-space');
2529
+ divSectionBgColor.style.display = 'flex';
2489
2530
  }
2490
2531
 
2491
2532
  if (s === 'sm') {
@@ -9688,33 +9729,47 @@ class EditBox {
9688
9729
  overlay = activeBox.querySelector('.is-overlay');
9689
9730
  } // Gradient Color
9690
9731
 
9691
-
9732
+ /*
9692
9733
  const s = activeBox.style.backgroundImage;
9693
- if (s) if (s.indexOf('linear-gradient') !== -1) {
9694
- // Fix
9695
- overlay.style.backgroundImage = s;
9696
- activeBox.style.backgroundImage = '';
9697
- } // Background color
9734
+ if(s) if(s.indexOf('linear-gradient')!==-1){
9735
+ // Fix
9736
+ overlay.style.backgroundImage = s;
9737
+ activeBox.style.backgroundImage = '';
9738
+ }
9739
+ */
9740
+ // Background color
9741
+
9698
9742
 
9699
9743
  let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
9744
+ /*
9700
9745
  let bgcolor = activeBox.style.backgroundColor;
9746
+ if(bgcolor){
9747
+ // Fix
9748
+ overlay.style.backgroundColor = bgcolor;
9749
+ activeBox.style.backgroundColor = '';
9750
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9751
+ } else {
9752
+ bgcolor = overlay.style.backgroundColor;
9753
+ if(bgcolor) {
9754
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9755
+ } else {
9756
+ //backward
9757
+ bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
9758
+ if(bgcolor==='rgba(0, 0, 0, 0)')bgcolor='';
9759
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9760
+ }
9761
+ }
9762
+ */
9763
+
9764
+ let bgcolor = overlay.style.backgroundColor;
9701
9765
 
9702
9766
  if (bgcolor) {
9703
- // Fix
9704
- overlay.style.backgroundColor = bgcolor;
9705
- activeBox.style.backgroundColor = '';
9706
9767
  btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9707
9768
  } else {
9708
- bgcolor = overlay.style.backgroundColor;
9709
-
9710
- if (bgcolor) {
9711
- btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9712
- } else {
9713
- //backward
9714
- bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
9715
- if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
9716
- btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9717
- }
9769
+ //backward
9770
+ bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
9771
+ if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
9772
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
9718
9773
  }
9719
9774
 
9720
9775
  const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
@@ -57128,6 +57183,7 @@ class Image {
57128
57183
 
57129
57184
  if (this.builder.opts.assetRefresh) {
57130
57185
  iframe.src = this.builder.opts.imageselect;
57186
+ this.builder.opts.assetRefresh = false;
57131
57187
  }
57132
57188
 
57133
57189
  if (iframe.src === 'about:blank') {
@@ -57155,6 +57211,7 @@ class Image {
57155
57211
 
57156
57212
  if (this.builder.opts.assetRefresh) {
57157
57213
  iframe.src = this.builder.opts.imageselect;
57214
+ this.builder.opts.assetRefresh = false;
57158
57215
  }
57159
57216
 
57160
57217
  if (iframe.src === 'about:blank') {
@@ -59293,6 +59350,7 @@ class Hyperlink {
59293
59350
 
59294
59351
  if (this.builder.opts.assetRefresh) {
59295
59352
  modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
59353
+ this.builder.opts.assetRefresh = false;
59296
59354
  }
59297
59355
 
59298
59356
  if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
@@ -59389,6 +59447,7 @@ class Hyperlink {
59389
59447
 
59390
59448
  if (this.builder.opts.assetRefresh) {
59391
59449
  modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
59450
+ this.builder.opts.assetRefresh = false;
59392
59451
  }
59393
59452
 
59394
59453
  if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
@@ -63889,6 +63948,11 @@ class ColumnTool {
63889
63948
  let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
63890
63949
  let iframe = modalImageSelect.querySelector('iframe');
63891
63950
 
63951
+ if (this.builder.opts.assetRefresh) {
63952
+ iframe.src = this.builder.opts.imageselect;
63953
+ this.builder.opts.assetRefresh = false;
63954
+ }
63955
+
63892
63956
  if (iframe.src === 'about:blank') {
63893
63957
  iframe.src = this.builder.opts.imageselect;
63894
63958
  }
@@ -64591,6 +64655,11 @@ class ColumnTool {
64591
64655
  let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
64592
64656
  let iframe = modalFileSelect.querySelector('iframe');
64593
64657
 
64658
+ if (this.builder.opts.assetRefresh) {
64659
+ iframe.src = this.builder.opts.fileselect;
64660
+ this.builder.opts.assetRefresh = false;
64661
+ }
64662
+
64594
64663
  if (iframe.src === 'about:blank') {
64595
64664
  iframe.src = this.builder.opts.fileselect;
64596
64665
  }
@@ -64607,6 +64676,11 @@ class ColumnTool {
64607
64676
  let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
64608
64677
  let iframe = modalImageSelect.querySelector('iframe');
64609
64678
 
64679
+ if (this.builder.opts.assetRefresh) {
64680
+ iframe.src = this.builder.opts.imageselect;
64681
+ this.builder.opts.assetRefresh = false;
64682
+ }
64683
+
64610
64684
  if (iframe.src === 'about:blank') {
64611
64685
  iframe.src = this.builder.opts.imageselect;
64612
64686
  }
@@ -72243,6 +72317,7 @@ class Rte {
72243
72317
 
72244
72318
  if (this.builder.opts.assetRefresh) {
72245
72319
  iframe.src = this.builder.opts.imageselect;
72320
+ this.builder.opts.assetRefresh = false;
72246
72321
  }
72247
72322
 
72248
72323
  if (iframe.src === 'about:blank') {
@@ -76605,7 +76680,7 @@ class ContentBuilder {
76605
76680
  imageSelect: '',
76606
76681
  fileSelect: '',
76607
76682
  videoSelect: '',
76608
- assetRefresh: true,
76683
+ assetRefresh: false,
76609
76684
  // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
76610
76685
  customTags: [],
76611
76686
  buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
@@ -77988,6 +78063,7 @@ class ContentBuilder {
77988
78063
  formUpload.parentNode.parentNode.querySelector('input[type="file"]').value = '';
77989
78064
  }
77990
78065
  });
78066
+ this.opts.assetRefresh = true; // After file upload, make open asset refreshed
77991
78067
  }
77992
78068
 
77993
78069
  openImagePicker(currentUrl, callback) {