@innovastudio/contentbox 1.4.69 → 1.4.71

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.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.esm.js +801 -37
  3. package/public/contentbox/contentbox.min.js +3 -3
  4. package/public/contentbox/lang/en.js +11 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -4029,10 +4029,42 @@ class EditSection {
4029
4029
  <div>
4030
4030
  <input id="inpSectionId" class="input-section-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">
4031
4031
  </div>
4032
+
4033
+ <label for="inpSectionCssClasses" style="padding:20px 0 3px;">${out('Add Css Classes')}:</label>
4034
+ <div>
4035
+ <input id="inpSectionCssClasses" class="input-section-classes" type="text" style="height:38px">
4036
+ </div>
4032
4037
  </div>
4033
4038
  ` + '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" 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>';
4034
4039
  html += '<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('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<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>';
4035
- html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<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" data-group="sectionsettings" 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>' +
4040
+ html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<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>' + `
4041
+
4042
+ <div class="is-separator-" style="margin-top:30px"></div>
4043
+
4044
+ <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
4045
+ <button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
4046
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
4047
+ </button>
4048
+ <button title="${out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
4049
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
4050
+ </button>
4051
+ <button title="${out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
4052
+ <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
4053
+ </button>
4054
+ </div>
4055
+
4056
+ <div style="padding-top:0;padding-bottom:3px;">${out('Visibility')}:</div>
4057
+ <div class="div-visibility" style="display:flex;">
4058
+ <button title="${out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
4059
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
4060
+ <span>${out('Visible')}</span>
4061
+ </button>
4062
+ <button title="${out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
4063
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
4064
+ <span>${out('Hidden')}</span>
4065
+ </button>
4066
+ </div>
4067
+ ` + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" 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>' +
4036
4068
  '<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>';
4037
4069
  html += '<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>' +
4038
4070
  // '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' +
@@ -4361,6 +4393,30 @@ class EditSection {
4361
4393
  } //Trigger Change event
4362
4394
 
4363
4395
 
4396
+ this.builder.onChange();
4397
+ });
4398
+ let inpSectionCssClasses = modalEditSection.querySelector('.input-section-classes');
4399
+ inpSectionCssClasses.addEventListener('change', () => {
4400
+ this.builder.editor.saveForUndo();
4401
+ const section = this.builder.activeSection;
4402
+ let arrCurrentClasses = [];
4403
+ let currentClasses = section.getAttribute('data-class');
4404
+ if (currentClasses) arrCurrentClasses = currentClasses.split(' ');
4405
+ let arrNewClasses = [];
4406
+ let newClasses = inpSectionCssClasses.value;
4407
+ arrNewClasses = newClasses.split(' ');
4408
+ arrCurrentClasses.forEach(item => {
4409
+ if (!arrNewClasses.includes(item)) {
4410
+ section.classList.remove(item);
4411
+ }
4412
+ });
4413
+ arrNewClasses.forEach(item => {
4414
+ if (item !== '') section.classList.add(item);
4415
+ }); // save
4416
+
4417
+ section.setAttribute('data-class', newClasses);
4418
+ if (section.getAttribute('data-class') === '') section.removeAttribute('data-class'); //Trigger Change event
4419
+
4364
4420
  this.builder.onChange();
4365
4421
  });
4366
4422
  inpSectionId.addEventListener('keyup', () => {
@@ -4374,7 +4430,68 @@ class EditSection {
4374
4430
  section.removeAttribute('id');
4375
4431
  info.innerHTML = '';
4376
4432
  }
4433
+ }); // Section Visibility
4434
+
4435
+ let btns = modalEditSection.querySelectorAll('.input-device');
4436
+ btns.forEach(btn => {
4437
+ btn.addEventListener('click', () => {
4438
+ let section = this.builder.activeSection;
4439
+ if (!section) return;
4440
+ let elms = modalEditSection.querySelectorAll('.input-device');
4441
+ elms.forEach(elm => {
4442
+ elm.classList.remove('on');
4443
+ });
4444
+ btn.classList.add('on');
4445
+ this.realtimeVisibility(section);
4446
+ });
4377
4447
  });
4448
+ let btnVisible = modalEditSection.querySelector('.input-visible');
4449
+ let btnHidden = modalEditSection.querySelector('.input-hidden');
4450
+ btnVisible.addEventListener('click', () => {
4451
+ let section = this.builder.activeSection;
4452
+ if (!section) return;
4453
+ section.classList.remove('hideonmobile');
4454
+ let divTarget = modalEditSection.querySelector('.div-target');
4455
+ let target = this.builder.editor.responsive.readTarget(divTarget);
4456
+
4457
+ if (target === 'xs') {
4458
+ section.classList.remove('xs-hidden');
4459
+ } else if (target === 'sm') {
4460
+ section.classList.remove('sm-hidden');
4461
+ } else if (target === '') {
4462
+ section.classList.remove('desktop-hidden');
4463
+ }
4464
+
4465
+ btnVisible.classList.add('on');
4466
+ btnHidden.classList.remove('on');
4467
+ });
4468
+ btnHidden.addEventListener('click', () => {
4469
+ let section = this.builder.activeSection;
4470
+ if (!section) return;
4471
+ section.classList.remove('hideonmobile');
4472
+ let divTarget = modalEditSection.querySelector('.div-target');
4473
+ let target = this.builder.editor.responsive.readTarget(divTarget);
4474
+
4475
+ if (target === 'xs') {
4476
+ section.classList.add('xs-hidden');
4477
+ } else if (target === 'sm') {
4478
+ section.classList.add('sm-hidden');
4479
+ } else if (target === '') {
4480
+ section.classList.add('desktop-hidden');
4481
+ }
4482
+
4483
+ btnVisible.classList.remove('on');
4484
+ btnHidden.classList.add('on');
4485
+ });
4486
+ } // Section Visibility
4487
+
4488
+
4489
+ realtimeVisibility(cell) {
4490
+ let divTarget = this.modalEditSection.querySelector('.div-target');
4491
+ let divVisibility = this.modalEditSection.querySelector('.div-visibility');
4492
+ let target = this.builder.editor.responsive.readTarget(divTarget);
4493
+ let valVisibility = this.builder.editor.responsive.getVisibility(cell, target);
4494
+ this.builder.editor.responsive.showVisibility(divVisibility, valVisibility);
4378
4495
  }
4379
4496
 
4380
4497
  read() {
@@ -4386,8 +4503,12 @@ class EditSection {
4386
4503
 
4387
4504
  if (sectionId) {
4388
4505
  inpSectionId.value = sectionId;
4389
- } // Clean old unused is-bg-light/dark
4506
+ }
4390
4507
 
4508
+ let inpSectionClasses = modalEditSection.querySelector('.input-section-classes');
4509
+ inpSectionClasses.value = '';
4510
+ const classes = activeSection.getAttribute('data-class');
4511
+ inpSectionClasses.value = classes; // Clean old unused is-bg-light/dark
4391
4512
 
4392
4513
  let elms = this.builder.activeSection.querySelectorAll('.is-bg-light');
4393
4514
  elms.forEach(elm => {
@@ -4565,7 +4686,10 @@ class EditSection {
4565
4686
  btnSectionBgColor.style.backgroundColor = bgcolor; //preview
4566
4687
  } else {
4567
4688
  btnSectionBgColor.style.backgroundColor = '';
4568
- }
4689
+ } // Section Visibility
4690
+
4691
+
4692
+ this.realtimeVisibility(activeSection);
4569
4693
  }
4570
4694
 
4571
4695
  close() {
@@ -18246,6 +18370,7 @@ class Util {
18246
18370
  Array.prototype.forEach.call(subblocks, subblock => {
18247
18371
  if (col.getAttribute('data-html-' + i)) {
18248
18372
  subblock.innerHTML = decodeURIComponent(col.getAttribute('data-html-' + i));
18373
+ subblock.contentEditable = true;
18249
18374
  }
18250
18375
 
18251
18376
  i++;
@@ -28734,6 +28859,7 @@ class HtmlUtil {
28734
28859
  let index = 1;
28735
28860
  let subblocks = block.querySelectorAll('[data-subblock]');
28736
28861
  Array.prototype.forEach.call(subblocks, subblock => {
28862
+ if (subblock.closest('.glide__slide--clone')) return;
28737
28863
  let html = subblock.innerHTML;
28738
28864
  block.setAttribute('data-html-' + index, encodeURIComponent(html));
28739
28865
  index++;
@@ -28784,6 +28910,79 @@ class HtmlUtil {
28784
28910
  block.getAttribute('data-settings', uniqueID);
28785
28911
  }
28786
28912
  });
28913
+ } //Make absolute (for Export/Download)
28914
+
28915
+
28916
+ if (this.builder.makeAbsolute) {
28917
+ const convertMediaUrl = imgUrl => {
28918
+ // make absolute
28919
+ let img = document.createElement('img');
28920
+ img.src = imgUrl;
28921
+ img.setAttribute('data-absoluteurl', img.src);
28922
+ imgUrl = img.getAttribute('data-absoluteurl');
28923
+ return imgUrl;
28924
+ };
28925
+
28926
+ const convertBgUrl = imgUrl => {
28927
+ // make absolute
28928
+ let img = document.createElement('img');
28929
+ img.src = imgUrl;
28930
+ img.setAttribute('data-absoluteurl', img.src);
28931
+ imgUrl = img.getAttribute('data-absoluteurl'); // Do not use imgUrl directly, change base to [%PATH%] instead
28932
+ // (to prevent auto converting back to relative path)
28933
+
28934
+ let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
28935
+ return imgUrl.replace(urlBase, '[%PATH%]'); // Example:
28936
+ // url = http://localhost:8080/uploads/image.jpg
28937
+ // urlBase = http://localhost:8080
28938
+ // become: [%PATH%]/uploads/image.jpg
28939
+ };
28940
+
28941
+ const convertMedia = (elm, attrName) => {
28942
+ if (elm.hasAttribute(attrName)) {
28943
+ if (!(elm.parentNode.tagName.toLowerCase() === 'video' || elm.parentNode.tagName.toLowerCase() === 'audio')) return;
28944
+ let imgUrl = elm.getAttribute(attrName);
28945
+ imgUrl = convertMediaUrl(imgUrl);
28946
+ elm.setAttribute(attrName, `${imgUrl}`);
28947
+ }
28948
+ };
28949
+
28950
+ let imgs = tmp.querySelectorAll('img');
28951
+ Array.prototype.forEach.call(imgs, img => {
28952
+ let src = img.src;
28953
+ img.setAttribute('src', src);
28954
+ });
28955
+ let elms = tmp.querySelectorAll('*');
28956
+ elms.forEach(elm => {
28957
+ if (elm.style.backgroundImage) {
28958
+ let s = elm.style.backgroundImage;
28959
+
28960
+ if (s.indexOf('url(') !== -1) {
28961
+ let imgUrl = s.slice(4, -1).replace(/["']/g, '');
28962
+ imgUrl = convertBgUrl(imgUrl);
28963
+ elm.style.backgroundImage = `url(${imgUrl})`;
28964
+ }
28965
+ }
28966
+
28967
+ convertMedia(elm, 'src');
28968
+ convertMedia(elm, 'data-default');
28969
+ convertMedia(elm, 'data-240');
28970
+ convertMedia(elm, 'data-360');
28971
+ convertMedia(elm, 'data-480');
28972
+ convertMedia(elm, 'data-540');
28973
+ convertMedia(elm, 'data-720');
28974
+ convertMedia(elm, 'data-1080');
28975
+ convertMedia(elm, 'data-1440');
28976
+ convertMedia(elm, 'data-2160');
28977
+
28978
+ if (elm.hasAttribute('href')) {
28979
+ if (elm.tagName.toLowerCase() === 'link') {
28980
+ let imgUrl = elm.getAttribute('href');
28981
+ imgUrl = convertMediaUrl(imgUrl);
28982
+ elm.setAttribute('href', `${imgUrl}`);
28983
+ }
28984
+ }
28985
+ });
28787
28986
  } //Cleaning
28788
28987
 
28789
28988
 
@@ -28921,7 +29120,75 @@ class HtmlUtil {
28921
29120
  elms = tmp.querySelectorAll('[data-scroll]');
28922
29121
  dom$h.removeAttributes(elms, 'data-scroll');
28923
29122
  elms = tmp.querySelectorAll('[data-scroll-once]');
28924
- dom$h.removeAttributes(elms, 'data-scroll-once'); // cleaning
29123
+ dom$h.removeAttributes(elms, 'data-scroll-once');
29124
+
29125
+ if (this.builder.shortenOutput) {
29126
+ elms = tmp.querySelectorAll('[data-noedit]');
29127
+ dom$h.removeAttributes(elms, 'data-noedit');
29128
+ elms = tmp.querySelectorAll('[data-module]');
29129
+ dom$h.removeAttributes(elms, 'data-module');
29130
+ elms = tmp.querySelectorAll('[data-module-desc]');
29131
+ dom$h.removeAttributes(elms, 'data-module-desc');
29132
+ elms = tmp.querySelectorAll('[data-dialog-width]');
29133
+ dom$h.removeAttributes(elms, 'data-dialog-width');
29134
+ elms = tmp.querySelectorAll('[data-dialog-height]');
29135
+ dom$h.removeAttributes(elms, 'data-dialog-height');
29136
+ elms = tmp.querySelectorAll('[data-html]');
29137
+ dom$h.removeAttributes(elms, 'data-html');
29138
+ elms = tmp.querySelectorAll('[data-settings]');
29139
+ dom$h.removeAttributes(elms, 'data-settings');
29140
+ elms = tmp.querySelectorAll('[data-html-1]');
29141
+ dom$h.removeAttributes(elms, 'data-html-1');
29142
+ elms = tmp.querySelectorAll('[data-html-2]');
29143
+ dom$h.removeAttributes(elms, 'data-html-2');
29144
+ elms = tmp.querySelectorAll('[data-html-3]');
29145
+ dom$h.removeAttributes(elms, 'data-html-3');
29146
+ elms = tmp.querySelectorAll('[data-html-4]');
29147
+ dom$h.removeAttributes(elms, 'data-html-4');
29148
+ elms = tmp.querySelectorAll('[data-html-5]');
29149
+ dom$h.removeAttributes(elms, 'data-html-5');
29150
+ elms = tmp.querySelectorAll('[data-html-6]');
29151
+ dom$h.removeAttributes(elms, 'data-html-6');
29152
+ elms = tmp.querySelectorAll('[data-html-7]');
29153
+ dom$h.removeAttributes(elms, 'data-html-7');
29154
+ elms = tmp.querySelectorAll('[data-html-8]');
29155
+ dom$h.removeAttributes(elms, 'data-html-8');
29156
+ elms = tmp.querySelectorAll('[data-html-9]');
29157
+ dom$h.removeAttributes(elms, 'data-html-9');
29158
+ elms = tmp.querySelectorAll('[data-html-10]');
29159
+ dom$h.removeAttributes(elms, 'data-html-10');
29160
+ elms = tmp.querySelectorAll('[data-html-12]');
29161
+ dom$h.removeAttributes(elms, 'data-html-12');
29162
+ elms = tmp.querySelectorAll('[data-html-13]');
29163
+ dom$h.removeAttributes(elms, 'data-html-13');
29164
+ elms = tmp.querySelectorAll('[data-html-14]');
29165
+ dom$h.removeAttributes(elms, 'data-html-14');
29166
+ elms = tmp.querySelectorAll('[data-html-15]');
29167
+ dom$h.removeAttributes(elms, 'data-html-15');
29168
+ elms = tmp.querySelectorAll('[data-html-16]');
29169
+ dom$h.removeAttributes(elms, 'data-html-16');
29170
+ elms = tmp.querySelectorAll('[data-html-17]');
29171
+ dom$h.removeAttributes(elms, 'data-html-17');
29172
+ elms = tmp.querySelectorAll('[data-html-18]');
29173
+ dom$h.removeAttributes(elms, 'data-html-18');
29174
+ elms = tmp.querySelectorAll('[data-html-19]');
29175
+ dom$h.removeAttributes(elms, 'data-html-19');
29176
+ elms = tmp.querySelectorAll('[data-html-20]');
29177
+ dom$h.removeAttributes(elms, 'data-html-20');
29178
+ elms = tmp.querySelectorAll('[data-html-21]');
29179
+ dom$h.removeAttributes(elms, 'data-html-21');
29180
+ elms = tmp.querySelectorAll('[data-html-21]');
29181
+ dom$h.removeAttributes(elms, 'data-html-21');
29182
+ elms = tmp.querySelectorAll('[data-html-22]');
29183
+ dom$h.removeAttributes(elms, 'data-html-22');
29184
+ elms = tmp.querySelectorAll('[data-html-23]');
29185
+ dom$h.removeAttributes(elms, 'data-html-23');
29186
+ elms = tmp.querySelectorAll('[data-html-24]');
29187
+ dom$h.removeAttributes(elms, 'data-html-24');
29188
+ elms = tmp.querySelectorAll('[data-html-25]');
29189
+ dom$h.removeAttributes(elms, 'data-html-25');
29190
+ } // cleaning
29191
+
28925
29192
 
28926
29193
  elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]'); // elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' +
28927
29194
  // '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' +
@@ -29035,6 +29302,74 @@ class HtmlUtil {
29035
29302
  Array.prototype.forEach.call(emptystyles, emptystyle => {
29036
29303
  emptystyle.removeAttribute('style');
29037
29304
  });
29305
+
29306
+ if (this.builder.shortenOutput) {
29307
+ elms = tmp.querySelectorAll('[data-noedit]');
29308
+ dom$h.removeAttributes(elms, 'data-noedit');
29309
+ elms = tmp.querySelectorAll('[data-module]');
29310
+ dom$h.removeAttributes(elms, 'data-module');
29311
+ elms = tmp.querySelectorAll('[data-module-desc]');
29312
+ dom$h.removeAttributes(elms, 'data-module-desc');
29313
+ elms = tmp.querySelectorAll('[data-dialog-width]');
29314
+ dom$h.removeAttributes(elms, 'data-dialog-width');
29315
+ elms = tmp.querySelectorAll('[data-dialog-height]');
29316
+ dom$h.removeAttributes(elms, 'data-dialog-height');
29317
+ elms = tmp.querySelectorAll('[data-html]');
29318
+ dom$h.removeAttributes(elms, 'data-html');
29319
+ elms = tmp.querySelectorAll('[data-settings]');
29320
+ dom$h.removeAttributes(elms, 'data-settings');
29321
+ elms = tmp.querySelectorAll('[data-html-1]');
29322
+ dom$h.removeAttributes(elms, 'data-html-1');
29323
+ elms = tmp.querySelectorAll('[data-html-2]');
29324
+ dom$h.removeAttributes(elms, 'data-html-2');
29325
+ elms = tmp.querySelectorAll('[data-html-3]');
29326
+ dom$h.removeAttributes(elms, 'data-html-3');
29327
+ elms = tmp.querySelectorAll('[data-html-4]');
29328
+ dom$h.removeAttributes(elms, 'data-html-4');
29329
+ elms = tmp.querySelectorAll('[data-html-5]');
29330
+ dom$h.removeAttributes(elms, 'data-html-5');
29331
+ elms = tmp.querySelectorAll('[data-html-6]');
29332
+ dom$h.removeAttributes(elms, 'data-html-6');
29333
+ elms = tmp.querySelectorAll('[data-html-7]');
29334
+ dom$h.removeAttributes(elms, 'data-html-7');
29335
+ elms = tmp.querySelectorAll('[data-html-8]');
29336
+ dom$h.removeAttributes(elms, 'data-html-8');
29337
+ elms = tmp.querySelectorAll('[data-html-9]');
29338
+ dom$h.removeAttributes(elms, 'data-html-9');
29339
+ elms = tmp.querySelectorAll('[data-html-10]');
29340
+ dom$h.removeAttributes(elms, 'data-html-10');
29341
+ elms = tmp.querySelectorAll('[data-html-12]');
29342
+ dom$h.removeAttributes(elms, 'data-html-12');
29343
+ elms = tmp.querySelectorAll('[data-html-13]');
29344
+ dom$h.removeAttributes(elms, 'data-html-13');
29345
+ elms = tmp.querySelectorAll('[data-html-14]');
29346
+ dom$h.removeAttributes(elms, 'data-html-14');
29347
+ elms = tmp.querySelectorAll('[data-html-15]');
29348
+ dom$h.removeAttributes(elms, 'data-html-15');
29349
+ elms = tmp.querySelectorAll('[data-html-16]');
29350
+ dom$h.removeAttributes(elms, 'data-html-16');
29351
+ elms = tmp.querySelectorAll('[data-html-17]');
29352
+ dom$h.removeAttributes(elms, 'data-html-17');
29353
+ elms = tmp.querySelectorAll('[data-html-18]');
29354
+ dom$h.removeAttributes(elms, 'data-html-18');
29355
+ elms = tmp.querySelectorAll('[data-html-19]');
29356
+ dom$h.removeAttributes(elms, 'data-html-19');
29357
+ elms = tmp.querySelectorAll('[data-html-20]');
29358
+ dom$h.removeAttributes(elms, 'data-html-20');
29359
+ elms = tmp.querySelectorAll('[data-html-21]');
29360
+ dom$h.removeAttributes(elms, 'data-html-21');
29361
+ elms = tmp.querySelectorAll('[data-html-21]');
29362
+ dom$h.removeAttributes(elms, 'data-html-21');
29363
+ elms = tmp.querySelectorAll('[data-html-22]');
29364
+ dom$h.removeAttributes(elms, 'data-html-22');
29365
+ elms = tmp.querySelectorAll('[data-html-23]');
29366
+ dom$h.removeAttributes(elms, 'data-html-23');
29367
+ elms = tmp.querySelectorAll('[data-html-24]');
29368
+ dom$h.removeAttributes(elms, 'data-html-24');
29369
+ elms = tmp.querySelectorAll('[data-html-25]');
29370
+ dom$h.removeAttributes(elms, 'data-html-25');
29371
+ }
29372
+
29038
29373
  html = tmp.innerHTML.trim();
29039
29374
  html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
29040
29375
  } // elm = builderStuff.querySelector('#tmp_content');
@@ -29052,6 +29387,13 @@ class HtmlUtil {
29052
29387
  return html;
29053
29388
  }
29054
29389
 
29390
+ beautify(html) {
29391
+ let beautify = JsBeautify.html;
29392
+ html = beautify(html);
29393
+ html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
29394
+ return html;
29395
+ }
29396
+
29055
29397
  }
29056
29398
 
29057
29399
  class UndoRedo {
@@ -29561,6 +29903,55 @@ const prepareSvgIcons = builder => {
29561
29903
  <symbol viewBox="0 0 512 512" id="ion-volume-medium">
29562
29904
  <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
29563
29905
  </symbol>
29906
+
29907
+
29908
+
29909
+ <symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29910
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29911
+ <rect x="13" y="8" width="8" height="12" rx="1"></rect>
29912
+ <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
29913
+ <line x1="16" y1="9" x2="18" y2="9"></line>
29914
+ </symbol>
29915
+ <symbol id="icon-device-desktop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29916
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29917
+ <rect x="3" y="4" width="18" height="12" rx="1"></rect>
29918
+ <line x1="7" y1="20" x2="17" y2="20"></line>
29919
+ <line x1="9" y1="16" x2="9" y2="20"></line>
29920
+ <line x1="15" y1="16" x2="15" y2="20"></line>
29921
+ </symbol>
29922
+ <symbol id="icon-device-mobile" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29923
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29924
+ <rect x="6" y="3" width="12" height="18" rx="2"></rect>
29925
+ <line x1="11" y1="4" x2="13" y2="4"></line>
29926
+ <line x1="12" y1="17" x2="12" y2="17.01"></line>
29927
+ </symbol>
29928
+ <symbol id="icon-device-laptop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29929
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29930
+ <line x1="3" y1="19" x2="21" y2="19"></line>
29931
+ <rect x="5" y="6" width="14" height="10" rx="1"></rect>
29932
+ </symbol>
29933
+ <symbol id="icon-device-tablet" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29934
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29935
+ <rect x="5" y="3" width="14" height="18" rx="1"></rect>
29936
+ <circle cx="12" cy="17" r="1"></circle>
29937
+ </symbol>
29938
+
29939
+ <symbol id="icon-eye" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29940
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29941
+ <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0m13 0c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
29942
+ </symbol>
29943
+ <symbol id="icon-eye-off" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29944
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29945
+ <path d="M9.88 9.878a3 3 0 1 0 4.243 4.242m.581 -3.42a3.012 3.012 0 0 0 -1.45 -1.426m-3.877 -3.913a9.469 9.469 0 0 1 2.623 -.361c4 0 7.333 2.333 10 7c-.778 1.362 -1.613 2.524 -2.504 3.489m-2.138 1.859c-1.629 1.101 -3.415 1.652 -5.358 1.652c-4 0 -7.333 -2.333 -10 -7c1.374 -2.404 2.924 -4.189 4.652 -5.354m-3.652 -3.646l18 18"></path>
29946
+ </symbol>
29947
+
29948
+ <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
29949
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
29950
+ <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
29951
+ <path d="M7 11l5 5l5 -5"></path>
29952
+ <path d="M12 4l0 12"></path>
29953
+ </symbol>
29954
+
29564
29955
  </defs>
29565
29956
  </svg>`;
29566
29957
  builder.dom.appendHtml(builder.builderStuff, html);
@@ -36598,7 +36989,7 @@ function getOffset(element) {
36598
36989
  top: box.top + (window.pageYOffset - document.documentElement.clientTop)
36599
36990
  };
36600
36991
  }
36601
- var location = WINDOW.location;
36992
+ var location$1 = WINDOW.location;
36602
36993
  var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
36603
36994
  /**
36604
36995
  * Check if the given URL is a cross origin URL.
@@ -36608,7 +36999,7 @@ var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
36608
36999
 
36609
37000
  function isCrossOriginURL(url) {
36610
37001
  var parts = url.match(REGEXP_ORIGINS);
36611
- return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
37002
+ return parts !== null && (parts[1] !== location$1.protocol || parts[2] !== location$1.hostname || parts[3] !== location$1.port);
36612
37003
  }
36613
37004
  /**
36614
37005
  * Add timestamp to the given URL.
@@ -67020,7 +67411,7 @@ class Module {
67020
67411
  var moduleDesc = module.getAttribute('data-module-desc');
67021
67412
 
67022
67413
  if (moduleDesc) {
67023
- moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
67414
+ moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out(moduleDesc) + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
67024
67415
  <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
67025
67416
  </button>`;
67026
67417
  } else {
@@ -67349,9 +67740,12 @@ class Code {
67349
67740
  viewhtml = this.builderStuff.querySelector('.viewhtml');
67350
67741
  }
67351
67742
 
67352
- let textarea = viewhtml.querySelector('textarea');
67743
+ let textarea = viewhtml.querySelector('textarea'); // Prevent {id} get formatted.
67744
+
67745
+ html = html.replaceAll('{id}', '__id__');
67353
67746
  let beautify = JsBeautify.html;
67354
67747
  html = beautify(html);
67748
+ html = html.replaceAll('__id__', '{id}');
67355
67749
  textarea.value = html;
67356
67750
  this.htmlUtil.view('code');
67357
67751
  });
@@ -71188,13 +71582,39 @@ class ColumnTool {
71188
71582
  <button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
71189
71583
  </div>
71190
71584
 
71191
- <div style="padding-top:30px;">
71585
+ <div style="padding:30px 0 10px;">
71192
71586
  <label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
71193
71587
  </div>
71194
71588
 
71195
- <div style="padding:20px 0 10px;">
71589
+ <div style="display:none;padding:20px 0 10px;">
71196
71590
  <label class="label-cell-hideonmobile label-checkbox" for="chkHideColumnOnMobile"><input id="chkHideColumnOnMobile" class="chk-cell-hideonmobile" type="checkbox" /> ${util.out('Hide Column on Mobile')}</label>
71197
71591
  </div>
71592
+
71593
+ <div class="is-separator"></div>
71594
+
71595
+ <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
71596
+ <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
71597
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
71598
+ </button>
71599
+ <button title="${util.out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
71600
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
71601
+ </button>
71602
+ <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
71603
+ <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
71604
+ </button>
71605
+ </div>
71606
+
71607
+ <div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
71608
+ <div class="div-visibility" style="display:flex;">
71609
+ <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
71610
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
71611
+ <span>${util.out('Visible')}</span>
71612
+ </button>
71613
+ <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
71614
+ <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
71615
+ <span>${util.out('Hidden')}</span>
71616
+ </button>
71617
+ </div>
71198
71618
 
71199
71619
  <!--
71200
71620
  <div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
@@ -72804,6 +73224,58 @@ class ColumnTool {
72804
73224
  if (!cell) return;
72805
73225
  if (inpClickSrc.value === '') return;
72806
73226
  this.builder.openMedia(cell);
73227
+ }); // Responsive Visibility
73228
+
73229
+ let btns = this.cellSettings.querySelectorAll('.input-device');
73230
+ btns.forEach(btn => {
73231
+ btn.addEventListener('click', () => {
73232
+ let cell = this.util.cellSelected();
73233
+ if (!cell) return;
73234
+ let elms = this.cellSettings.querySelectorAll('.input-device');
73235
+ elms.forEach(elm => {
73236
+ elm.classList.remove('on');
73237
+ });
73238
+ btn.classList.add('on');
73239
+ this.realtimeVisibility(cell);
73240
+ });
73241
+ });
73242
+ let btnVisible = this.cellSettings.querySelector('.input-visible');
73243
+ let btnHidden = this.cellSettings.querySelector('.input-hidden');
73244
+ btnVisible.addEventListener('click', () => {
73245
+ let cell = this.util.cellSelected();
73246
+ if (!cell) return;
73247
+ cell.classList.remove('hideonmobile');
73248
+ let divTarget = this.cellSettings.querySelector('.div-target');
73249
+ let target = this.builder.responsive.readTarget(divTarget);
73250
+
73251
+ if (target === 'xs') {
73252
+ cell.classList.remove('xs-hidden');
73253
+ } else if (target === 'sm') {
73254
+ cell.classList.remove('sm-hidden');
73255
+ } else if (target === '') {
73256
+ cell.classList.remove('desktop-hidden');
73257
+ }
73258
+
73259
+ btnVisible.classList.add('on');
73260
+ btnHidden.classList.remove('on');
73261
+ });
73262
+ btnHidden.addEventListener('click', () => {
73263
+ let cell = this.util.cellSelected();
73264
+ if (!cell) return;
73265
+ cell.classList.remove('hideonmobile');
73266
+ let divTarget = this.cellSettings.querySelector('.div-target');
73267
+ let target = this.builder.responsive.readTarget(divTarget);
73268
+
73269
+ if (target === 'xs') {
73270
+ cell.classList.add('xs-hidden');
73271
+ } else if (target === 'sm') {
73272
+ cell.classList.add('sm-hidden');
73273
+ } else if (target === '') {
73274
+ cell.classList.add('desktop-hidden');
73275
+ }
73276
+
73277
+ btnVisible.classList.remove('on');
73278
+ btnHidden.classList.add('on');
72807
73279
  });
72808
73280
  }
72809
73281
 
@@ -72994,6 +73466,16 @@ class ColumnTool {
72994
73466
  let btn = this.cellSettings.querySelector('.cmd-content-pos[data-pos="bottomright"');
72995
73467
  dom.addClass(btn, 'on');
72996
73468
  }
73469
+
73470
+ this.realtimeVisibility(cell);
73471
+ }
73472
+
73473
+ realtimeVisibility(cell) {
73474
+ let divTarget = this.cellSettings.querySelector('.div-target');
73475
+ let divVisibility = this.cellSettings.querySelector('.div-visibility');
73476
+ let target = this.builder.responsive.readTarget(divTarget);
73477
+ let valVisibility = this.builder.responsive.getVisibility(cell, target);
73478
+ this.builder.responsive.showVisibility(divVisibility, valVisibility);
72997
73479
  }
72998
73480
 
72999
73481
  openImagePicker(currentUrl, callback, btn) {
@@ -74409,17 +74891,19 @@ class ElementSpacingStyles {
74409
74891
  </select>
74410
74892
  </div>
74411
74893
  </div>
74412
-
74413
- <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
74414
-
74415
- <div class="is-settings" style="width:100%;">
74416
- <div>
74417
- <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
74894
+
74895
+ <div style="display:none">
74896
+ <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
74897
+
74898
+ <div class="is-settings" style="width:100%;">
74899
+ <div>
74900
+ <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
74901
+ </div>
74418
74902
  </div>
74419
- </div>
74420
- <div class="is-settings" style="margin-top:0;width:100%;">
74421
- <div>
74422
- <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
74903
+ <div class="is-settings" style="margin-top:0;width:100%;">
74904
+ <div>
74905
+ <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
74906
+ </div>
74423
74907
  </div>
74424
74908
  </div>
74425
74909
  `;
@@ -76123,7 +76607,7 @@ class ElementTextStyles {
76123
76607
  var sTextAlign = elm.style.textAlign;
76124
76608
  this.panelStuff.querySelector('#inpElmTextAlign').value = sTextAlign;
76125
76609
  this.panelStuff.querySelector('#inpElmFontSize').value = '';
76126
- var nFontSize = parseInt(elm.style.fontSize);
76610
+ var nFontSize = parseFloat(elm.style.fontSize);
76127
76611
 
76128
76612
  if (!isNaN(nFontSize)) {
76129
76613
  this.panelStuff.querySelector('#inpElmFontSize').value = nFontSize;
@@ -76183,7 +76667,7 @@ class ElementTextStyles {
76183
76667
  if (!isNaN(elm.style.lineHeight)) {
76184
76668
  this.panelStuff.querySelector('#inpElmLineHeight').value = elm.style.lineHeight;
76185
76669
  } else {
76186
- var nLineHeight = parseInt(elm.style.lineHeight);
76670
+ var nLineHeight = parseFloat(elm.style.lineHeight);
76187
76671
 
76188
76672
  if (!isNaN(nLineHeight)) {
76189
76673
  this.panelStuff.querySelector('#inpElmLineHeight').value = nLineHeight;
@@ -76204,14 +76688,14 @@ class ElementTextStyles {
76204
76688
 
76205
76689
  this.panelStuff.querySelector('#inpElmLineHeightUnit').value = sLineHeightUnit;
76206
76690
  this.panelStuff.querySelector('#inpElmLetterSpacing').value = '';
76207
- var nLetterSpacing = parseInt(elm.style.letterSpacing);
76691
+ var nLetterSpacing = parseFloat(elm.style.letterSpacing);
76208
76692
 
76209
76693
  if (!isNaN(nLetterSpacing)) {
76210
76694
  this.panelStuff.querySelector('#inpElmLetterSpacing').value = nLetterSpacing;
76211
76695
  }
76212
76696
 
76213
76697
  this.panelStuff.querySelector('#inpElmWordSpacing').value = '';
76214
- var nWordSpacing = parseInt(elm.style.wordSpacing);
76698
+ var nWordSpacing = parseFloat(elm.style.wordSpacing);
76215
76699
 
76216
76700
  if (!isNaN(nWordSpacing)) {
76217
76701
  this.panelStuff.querySelector('#inpElmWordSpacing').value = nWordSpacing;
@@ -78519,6 +79003,11 @@ class ElementTool {
78519
79003
  if (ok) {
78520
79004
  this.builder.uo.saveForUndo();
78521
79005
  let elm = this.builder.activeElement;
79006
+ let subblock = false;
79007
+
79008
+ if (elm.closest('.is-subblock')) {
79009
+ subblock = true;
79010
+ }
78522
79011
  /*
78523
79012
  if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
78524
79013
  // Level 1
@@ -78544,6 +79033,7 @@ class ElementTool {
78544
79033
  }
78545
79034
  */
78546
79035
 
79036
+
78547
79037
  elm.parentNode.removeChild(elm);
78548
79038
  this.elementTool.style.display = 'none';
78549
79039
  let cell = this.builder.activeCol;
@@ -78574,7 +79064,21 @@ class ElementTool {
78574
79064
  subblock.innerHTML = '<div class="spacer height-40" contentEditable="false"></div>';
78575
79065
  }
78576
79066
  });
78577
- util.clearControls(); //Trigger Change event
79067
+ util.clearControls();
79068
+
79069
+ if (subblock) {
79070
+ let block = this.builder.activeCol;
79071
+ let subblocks = block.querySelectorAll('[data-subblock]');
79072
+ var index = 1;
79073
+ Array.prototype.forEach.call(subblocks, subblock => {
79074
+ if (subblock.closest('.glide__slide--clone')) return;
79075
+ let html = subblock.innerHTML;
79076
+ block.setAttribute('data-html-' + index, encodeURIComponent(html));
79077
+ index++;
79078
+ });
79079
+ util.refreshModuleLayout(block);
79080
+ } //Trigger Change event
79081
+
78578
79082
 
78579
79083
  this.builder.opts.onChange();
78580
79084
  }
@@ -83414,7 +83918,8 @@ class Rte {
83414
83918
  // Column contains custom code.
83415
83919
  customcode = true;
83416
83920
 
83417
- if (dom.parentsHasAttribute(elm, 'data-subblock')) {
83921
+ if (elm.closest('.is-subblock')) {
83922
+ // dom.parentsHasAttribute(elm, 'data-subblock')
83418
83923
  subblock = true;
83419
83924
  }
83420
83925
  }
@@ -83440,7 +83945,7 @@ class Rte {
83440
83945
  this.showAlignButtons();
83441
83946
  this.positionToolbar();
83442
83947
  }
83443
- } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html')) {
83948
+ } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html') && !subblock) {
83444
83949
  //|| col===elm
83445
83950
  if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
83446
83951
  this.elementRteTool.style.display = 'flex';
@@ -86877,6 +87382,7 @@ class Resizeable {
86877
87382
 
86878
87383
  const onDown = e => {
86879
87384
  calc(e);
87385
+ if (e.target.closest('.glide__arrows')) return false;
86880
87386
  const isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
86881
87387
  clicked = {
86882
87388
  x: x,
@@ -88566,6 +89072,54 @@ class MediaPicker {
88566
89072
 
88567
89073
  }
88568
89074
 
89075
+ class Responsive {
89076
+ constructor(builder) {
89077
+ this.builder = builder;
89078
+ const util = this.builder.util;
89079
+ const builderStuff = this.builder.builderStuff;
89080
+ this.util = util;
89081
+ this.builderStuff = builderStuff;
89082
+ const dom = this.builder.dom;
89083
+ this.dom = dom;
89084
+ }
89085
+
89086
+ getVisibility(elm, target) {
89087
+ if (target === 'xs') return !elm.classList.contains('xs-hidden');
89088
+ if (target === 'sm') return !elm.classList.contains('sm-hidden');
89089
+ if (target === '') return !elm.classList.contains('desktop-hidden');
89090
+ }
89091
+
89092
+ setVisibility(visibility, elm, target) {
89093
+ if (target === 'xs') {
89094
+ if (visibility) elm.classList.remove('xs-hidden');else elm.classList.add('xs-hidden');
89095
+ }
89096
+
89097
+ if (target === 'sm') {
89098
+ if (visibility) elm.classList.remove('sm-hidden');else elm.classList.add('sm-hidden');
89099
+ }
89100
+
89101
+ if (target === '') {
89102
+ if (visibility) elm.classList.remove('desktop-hidden');else elm.classList.add('desktop-hidden');
89103
+ }
89104
+ }
89105
+
89106
+ readTarget(area) {
89107
+ const inp = area.querySelector('.input-device.on');
89108
+ return inp.getAttribute('data-value');
89109
+ }
89110
+
89111
+ showVisibility(area, visibility) {
89112
+ if (visibility) {
89113
+ area.querySelector('.input-visible').classList.add('on');
89114
+ area.querySelector('.input-hidden').classList.remove('on');
89115
+ } else {
89116
+ area.querySelector('.input-visible').classList.remove('on');
89117
+ area.querySelector('.input-hidden').classList.add('on');
89118
+ }
89119
+ }
89120
+
89121
+ }
89122
+
88569
89123
  class ContentBuilder {
88570
89124
  constructor(opts = {}) {
88571
89125
  let defaults = {
@@ -88775,6 +89329,39 @@ class ContentBuilder {
88775
89329
  </div>
88776
89330
  </div>
88777
89331
  `,
89332
+ pageTemplate: `<!DOCTYPE html>
89333
+ <html lang="en">
89334
+ <head>
89335
+ <meta charset="utf-8">
89336
+ <title>Page</title>
89337
+ <meta name="viewport" content="width=device-width, initial-scale=1">
89338
+ <meta name="description" content="">
89339
+ <link rel="shortcut icon" href="#" />
89340
+
89341
+ <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
89342
+
89343
+ <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
89344
+ <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
89345
+ <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
89346
+
89347
+ <style>
89348
+ .container {
89349
+ margin: 150px auto 0;
89350
+ max-width: 800px;
89351
+ width: 100%;
89352
+ padding: 0 20px;
89353
+ box-sizing: border-box;
89354
+ }
89355
+ </style>
89356
+ </head>
89357
+ <body>
89358
+
89359
+ <div class="container">
89360
+ [%CONTENT%]
89361
+ </div>
89362
+
89363
+ </body>
89364
+ </html>`,
88778
89365
 
88779
89366
  /*
88780
89367
  onZoomStart: () => {
@@ -89284,11 +89871,15 @@ class ContentBuilder {
89284
89871
 
89285
89872
  this.win = win;
89286
89873
  this.doc = doc;
89874
+ this.doc.body.classList.add('data-editor');
89287
89875
  const dom = new Dom(this);
89288
89876
  this.dom = dom;
89289
89877
  const util = new Util(this); // General utilities
89290
89878
 
89291
- this.util = util; // Content stuff
89879
+ this.util = util;
89880
+ const responsive = new Responsive(this); // General utilities
89881
+
89882
+ this.responsive = responsive; // Content stuff
89292
89883
 
89293
89884
  if (this.iframe) {
89294
89885
  let contentStuff = doc.querySelector('.content-stuff');
@@ -89450,7 +90041,8 @@ class ContentBuilder {
89450
90041
  k = false;
89451
90042
  let m = false,
89452
90043
  n = false,
89453
- o = false;
90044
+ o = false,
90045
+ p = false;
89454
90046
  let isSpecialElement = false;
89455
90047
  let element = target;
89456
90048
 
@@ -89458,6 +90050,7 @@ class ContentBuilder {
89458
90050
  if (!element.tagName) break;
89459
90051
  if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
89460
90052
  if (this.dom.hasClass(element, 'is-builder')) a = true;
90053
+ if (this.dom.hasClass(element, 'is-subblock')) p = true;
89461
90054
  if (this.dom.hasClass(element, 'is-modal')) b = true;
89462
90055
  if (this.dom.hasClass(element, 'is-side') || this.dom.hasClass(element, 'is-sidebar')) c = true;
89463
90056
  if (this.dom.hasClass(element, 'is-pop')) d = true;
@@ -89524,7 +90117,7 @@ class ContentBuilder {
89524
90117
  }
89525
90118
  }
89526
90119
 
89527
- if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
90120
+ if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
89528
90121
  // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
89529
90122
  if (!this.dom.getSelected()) {
89530
90123
  // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
@@ -90246,6 +90839,7 @@ class ContentBuilder {
90246
90839
  }
90247
90840
 
90248
90841
  destroy() {
90842
+ this.doc.body.classList.remove('data-editor');
90249
90843
  document.removeEventListener('click', this.doDocumentClick, false);
90250
90844
  document.removeEventListener('keydown', this.doDocumentKeydown, false);
90251
90845
  document.removeEventListener('mousedown', this.doDocumentMousedown, false);
@@ -90279,7 +90873,11 @@ class ContentBuilder {
90279
90873
 
90280
90874
  const builders = this.doc.querySelectorAll(this.opts.container);
90281
90875
  Array.prototype.forEach.call(builders, builder => {
90282
- builder.innerHTML = htmlutil.readHtml(builder, true);
90876
+ // builder.innerHTML = htmlutil.readHtml(builder, true);
90877
+ let html = htmlutil.readHtml(builder, false);
90878
+ let range = this.doc.createRange();
90879
+ builder.innerHTML = '';
90880
+ builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
90283
90881
  });
90284
90882
  Array.prototype.forEach.call(builders, builder => {
90285
90883
  builder.removeAttribute('data-sort');
@@ -90606,6 +91204,52 @@ class ContentBuilder {
90606
91204
 
90607
91205
  saveForUndo(checkLater) {
90608
91206
  this.uo.saveForUndo(checkLater);
91207
+ }
91208
+
91209
+ download(options = {}) {
91210
+ this.export(options, true);
91211
+ }
91212
+
91213
+ export(options = {}, shortenOutput = false) {
91214
+ let pageTemplate = this.pageTemplate;
91215
+ let output = ''; // [%CONTENT%]
91216
+
91217
+ this.makeAbsolute = true; //To make absolute (for Export/Download)
91218
+
91219
+ this.shortenOutput = shortenOutput;
91220
+ let html = this.html();
91221
+ this.makeAbsolute = false;
91222
+ this.shortenOutput = false;
91223
+ output = pageTemplate.replace('[%CONTENT%]', html); // Custom
91224
+
91225
+ if (options.replace) {
91226
+ options.replace.forEach(rule => {
91227
+ output = output.replaceAll(`${rule[0]}`, rule[1]);
91228
+ });
91229
+ } // [%PATH%]
91230
+
91231
+
91232
+ if (options.path) {
91233
+ output = output.replaceAll('[%PATH%]', options.path);
91234
+ } else {
91235
+ let urlBase;
91236
+ urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
91237
+ output = output.replaceAll('[%PATH%]', urlBase);
91238
+ } // Beautify
91239
+
91240
+
91241
+ output = this.beautify(output);
91242
+ const a = document.createElement('a');
91243
+ a.href = window.URL.createObjectURL(new Blob([output], {
91244
+ type: 'text/plain'
91245
+ }));
91246
+ a.download = 'page.html';
91247
+ a.click();
91248
+ }
91249
+
91250
+ beautify(html) {
91251
+ const htmlutil = new HtmlUtil(this);
91252
+ return htmlutil.beautify(html);
90609
91253
  } // Module related
90610
91254
 
90611
91255
 
@@ -101142,6 +101786,59 @@ class ContentBox {
101142
101786
  </div>
101143
101787
  </div>
101144
101788
  `,
101789
+ pageTemplate: `
101790
+ <!DOCTYPE html>
101791
+ <html lang="en">
101792
+ <head>
101793
+ <meta charset="utf-8">
101794
+ <title>Page</title>
101795
+ <meta name="viewport" content="width=device-width, initial-scale=1">
101796
+ <meta name="description" content="">
101797
+ <link rel="shortcut icon" href="#" />
101798
+
101799
+ <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
101800
+ <link href="[%PATH%]/box/box-flex.css" rel="stylesheet" type="text/css" />
101801
+
101802
+ [%MAINCSS%]
101803
+ [%SECTIONCSS%]
101804
+ </head>
101805
+ <body style="touch-action: pan-y">
101806
+
101807
+ <main id="main">
101808
+ <div class="is-wrapper">
101809
+ [%CONTENT%]
101810
+ </div>
101811
+ </main>
101812
+
101813
+ <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
101814
+ <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
101815
+ <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
101816
+
101817
+ <link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet" type="text/css" />
101818
+ <script src="[%PATH%]/assets/scripts/navbar/navbar.min.js" type="text/javascript"></script>
101819
+
101820
+ <script src="[%PATH%]/box/box-flex.js" type="text/javascript"></script>
101821
+
101822
+ <!-- Optional: if you want to add smooth scrolling -->
101823
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" type="text/javascript"></script>
101824
+ <script>
101825
+ SmoothScroll({
101826
+ frameRate: 150,
101827
+ animationTime: 800,
101828
+ stepSize: 120,
101829
+ pulseAlgorithm: 1,
101830
+ pulseScale: 4,
101831
+ pulseNormalize: 1,
101832
+ accelerationDelta: 300,
101833
+ accelerationMax: 2,
101834
+ keyboardSupport: 1,
101835
+ arrowScroll: 50,
101836
+ fixedBackground: 0
101837
+ });
101838
+ </script>
101839
+ </body>
101840
+ </html>
101841
+ `,
101145
101842
  contentStyleWithSample: false,
101146
101843
  contentSizes: [300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780, 800, 820, 840, 860, 880, 900, 920, 940, 960, 970, 980, 1000, 1020, 1040, 1050, 1060, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1220, 1240, 1260, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1620, 1640, 1660, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1820, 1840, 1860, 1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020, 2040, 2060, 2080, 2100, 2120, 2140, 2160, 2180, 2200, 2220, 2240, 2260, 2280, 2300, 2320, 2340, 2360, 2380, 2400, 2420, 2440, 2460, 2480, 2500, 2520, 2540, 2560, 2580, 2600, 2620, 2640, 2660, 2680, 2700],
101147
101844
  contentStyles: {
@@ -103883,7 +104580,8 @@ class ContentBox {
103883
104580
  display: flex !important;
103884
104581
  }
103885
104582
  .hard-select .box-select .is-overlay {
103886
- z-index: -1;
104583
+ //z-index: -1;
104584
+ top:1px;left:1px;right:1px;bottom:1px;
103887
104585
  }
103888
104586
  .hard-select .section-select .is-section-tool {
103889
104587
  display: block !important;
@@ -105696,7 +106394,7 @@ class ContentBox {
105696
106394
  this.editbox.boxImage(url, err);
105697
106395
  }
105698
106396
 
105699
- mainCss() {
106397
+ mainCss(absolute) {
105700
106398
  let links = this.doc.getElementsByTagName('link');
105701
106399
  let arrLinks = [];
105702
106400
 
@@ -105704,7 +106402,17 @@ class ContentBox {
105704
106402
  let src = links[i].href.toLowerCase();
105705
106403
 
105706
106404
  if (src.indexOf('basetype-') != -1) {
105707
- arrLinks.push(links[i].outerHTML);
106405
+ if (absolute) {
106406
+ // make absolute
106407
+ const link = links[i].cloneNode();
106408
+ let imgUrl = link.href;
106409
+ let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
106410
+ imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
106411
+ link.href = imgUrl;
106412
+ arrLinks.push(link.outerHTML);
106413
+ } else {
106414
+ arrLinks.push(links[i].outerHTML);
106415
+ }
105708
106416
  }
105709
106417
  } // arrLinks = [...new Set(arrLinks)]; // remove duplicates not needed, always single css
105710
106418
 
@@ -105728,7 +106436,7 @@ class ContentBox {
105728
106436
  return arrLinks;
105729
106437
  }
105730
106438
 
105731
- sectionCss() {
106439
+ sectionCss(absolute) {
105732
106440
  let links = this.doc.getElementsByTagName('link');
105733
106441
  let arrLinks = [];
105734
106442
 
@@ -105736,7 +106444,17 @@ class ContentBox {
105736
106444
  let src = links[i].href.toLowerCase();
105737
106445
 
105738
106446
  if (src.indexOf('basetype-') != -1) ; else if (src.indexOf('type-') != -1) {
105739
- arrLinks.push(links[i].outerHTML);
106447
+ if (absolute) {
106448
+ // make absolute
106449
+ const link = links[i].cloneNode();
106450
+ let imgUrl = link.href;
106451
+ let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
106452
+ imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
106453
+ link.href = imgUrl;
106454
+ arrLinks.push(link.outerHTML);
106455
+ } else {
106456
+ arrLinks.push(links[i].outerHTML);
106457
+ }
105740
106458
  }
105741
106459
  }
105742
106460
 
@@ -105764,10 +106482,56 @@ class ContentBox {
105764
106482
 
105765
106483
  html(bForView) {
105766
106484
  this.cleanupUnused();
105767
- var html = this.editor.readHtml(this.wrapperEl, bForView, true);
106485
+ const html = this.editor.readHtml(this.wrapperEl, bForView, true);
105768
106486
  return html;
105769
106487
  }
105770
106488
 
106489
+ download(options = {}) {
106490
+ this.export(options, true);
106491
+ }
106492
+
106493
+ export(options = {}, shortenOutput = false) {
106494
+ let pageTemplate = this.pageTemplate;
106495
+ let output = ''; // [%CONTENT%]
106496
+
106497
+ this.cleanupUnused();
106498
+ this.editor.makeAbsolute = true;
106499
+ this.editor.shortenOutput = shortenOutput;
106500
+ let html = this.editor.readHtml(this.wrapperEl, false, true);
106501
+ this.editor.makeAbsolute = false;
106502
+ this.editor.shortenOutput = false;
106503
+ output = pageTemplate.replace('[%CONTENT%]', html); // [%MAINCSS%] & [%SECTIONCSS%]
106504
+
106505
+ let mainCss = this.mainCss(true);
106506
+ let sectionCss = this.sectionCss(true);
106507
+ output = output.replaceAll('[%MAINCSS%]', mainCss);
106508
+ output = output.replaceAll('[%SECTIONCSS%]', sectionCss); // Custom
106509
+
106510
+ if (options.replace) {
106511
+ options.replace.forEach(rule => {
106512
+ output = output.replaceAll(`${rule[0]}`, rule[1]);
106513
+ });
106514
+ } // [%PATH%]
106515
+
106516
+
106517
+ if (options.path) {
106518
+ output = output.replaceAll('[%PATH%]', options.path);
106519
+ } else {
106520
+ let urlBase;
106521
+ urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
106522
+ output = output.replaceAll('[%PATH%]', urlBase);
106523
+ } // Beautify
106524
+
106525
+
106526
+ output = this.editor.beautify(output);
106527
+ const a = document.createElement('a');
106528
+ a.href = window.URL.createObjectURL(new Blob([output], {
106529
+ type: 'text/plain'
106530
+ }));
106531
+ a.download = 'page.html';
106532
+ a.click();
106533
+ }
106534
+
105771
106535
  viewZoom() {
105772
106536
  this.editor.viewZoom();
105773
106537
  }