@innovastudio/contentbox 1.5.95 → 1.5.96
Sign up to get free protection for your applications and to get access to all the features.
@@ -4313,21 +4313,17 @@ class EditSection {
|
|
4313
4313
|
const modalDelConfirm = builderStuff.querySelector('.is-modal.delsectionconfirm');
|
4314
4314
|
const btnOk = modalDelConfirm.querySelector('.input-ok');
|
4315
4315
|
btnOk.addEventListener('click', () => {
|
4316
|
-
const activeSection = this.builder.activeSection;
|
4317
4316
|
this.builder.editor.saveForUndo();
|
4318
|
-
|
4319
|
-
this.builder.sectionStack();
|
4320
|
-
|
4321
|
-
|
4322
|
-
this.builder.editor.util.hideModal(modalDelConfirm);
|
4323
|
-
this.builder.editor.util.clearControls(); //Trigger Change event
|
4324
|
-
|
4325
|
-
this.builder.settings.onChange(); // //Hide box tool
|
4317
|
+
this.sectionDelete();
|
4318
|
+
this.builder.sectionStack();
|
4319
|
+
this.builder.hideModal(modalDelConfirm); // this.builder.editor.util.clearControls();
|
4320
|
+
// //Hide box tool
|
4326
4321
|
// let boxTool = document.querySelector('#divBoxTool');
|
4327
4322
|
// boxTool.style.display = 'none';
|
4328
4323
|
// setTimeout(()=>{
|
4329
4324
|
// boxTool.style.display = 'none';
|
4330
4325
|
// }, 300);
|
4326
|
+
//--- clear ---
|
4331
4327
|
|
4332
4328
|
this.builder.activeSection = null;
|
4333
4329
|
this.builder.activeBox = null;
|
@@ -4336,51 +4332,44 @@ class EditSection {
|
|
4336
4332
|
this.builder.editor.activeCol = null;
|
4337
4333
|
this.builder.wrapperEl.classList.remove('hard-select');
|
4338
4334
|
this.builder.wrapperEl.classList.remove('is-container-edit');
|
4339
|
-
this.builder.wrapperEl.classList.remove('is-clean-edit');
|
4340
|
-
|
4335
|
+
this.builder.wrapperEl.classList.remove('is-clean-edit'); //--- /clear ---
|
4336
|
+
|
4337
|
+
this.builder.settings.onChange();
|
4341
4338
|
});
|
4342
4339
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
4343
4340
|
btnSectionUp.addEventListener('click', () => {
|
4344
4341
|
this.builder.editor.saveForUndo();
|
4345
4342
|
this.sectionUp();
|
4346
|
-
this.builder.sectionStack();
|
4347
|
-
|
4343
|
+
this.builder.sectionStack();
|
4348
4344
|
this.builder.settings.onChange();
|
4349
4345
|
});
|
4350
4346
|
const btnSectionDown = modalEditSection.querySelector('.cmd-section-down');
|
4351
4347
|
btnSectionDown.addEventListener('click', () => {
|
4352
4348
|
this.builder.editor.saveForUndo();
|
4353
4349
|
this.sectionDown();
|
4354
|
-
this.builder.sectionStack();
|
4355
|
-
|
4350
|
+
this.builder.sectionStack();
|
4356
4351
|
this.builder.settings.onChange();
|
4357
4352
|
});
|
4358
4353
|
const btnSectionTop = modalEditSection.querySelector('.cmd-section-top');
|
4359
4354
|
btnSectionTop.addEventListener('click', () => {
|
4360
4355
|
this.builder.editor.saveForUndo();
|
4361
4356
|
this.sectionTop();
|
4362
|
-
this.builder.sectionStack();
|
4363
|
-
|
4357
|
+
this.builder.sectionStack();
|
4364
4358
|
this.builder.settings.onChange();
|
4365
4359
|
});
|
4366
4360
|
const btnSectionBottom = modalEditSection.querySelector('.cmd-section-bottom');
|
4367
4361
|
btnSectionBottom.addEventListener('click', () => {
|
4368
4362
|
this.builder.editor.saveForUndo();
|
4369
4363
|
this.sectionBottom();
|
4370
|
-
this.builder.sectionStack();
|
4371
|
-
|
4364
|
+
this.builder.sectionStack();
|
4372
4365
|
this.builder.settings.onChange();
|
4373
4366
|
});
|
4374
4367
|
const btnSectionDuplicate = modalEditSection.querySelector('.cmd-section-duplicate');
|
4375
4368
|
btnSectionDuplicate.addEventListener('click', () => {
|
4376
4369
|
this.builder.editor.saveForUndo();
|
4377
4370
|
this.sectionDuplicate();
|
4378
|
-
this.builder.sectionStack();
|
4379
|
-
|
4371
|
+
this.builder.sectionStack();
|
4380
4372
|
this.builder.settings.onChange();
|
4381
|
-
setTimeout(() => {
|
4382
|
-
this.builder.refreshAnim();
|
4383
|
-
}, 600);
|
4384
4373
|
});
|
4385
4374
|
const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
|
4386
4375
|
btnSectionAnimStart.forEach(btn => {
|
@@ -4398,8 +4387,7 @@ class EditSection {
|
|
4398
4387
|
setTimeout(() => {
|
4399
4388
|
dom$n.removeClass(btn, 'on');
|
4400
4389
|
}, 100);
|
4401
|
-
}
|
4402
|
-
|
4390
|
+
}
|
4403
4391
|
|
4404
4392
|
this.builder.settings.onChange();
|
4405
4393
|
});
|
@@ -4420,8 +4408,7 @@ class EditSection {
|
|
4420
4408
|
setTimeout(() => {
|
4421
4409
|
dom$n.removeClass(btn, 'on');
|
4422
4410
|
}, 100);
|
4423
|
-
}
|
4424
|
-
|
4411
|
+
}
|
4425
4412
|
|
4426
4413
|
this.builder.settings.onChange();
|
4427
4414
|
});
|
@@ -4444,8 +4431,7 @@ class EditSection {
|
|
4444
4431
|
btns.forEach(btn => {
|
4445
4432
|
dom$n.removeClass(btn, 'on');
|
4446
4433
|
});
|
4447
|
-
dom$n.addClass(btn, 'on');
|
4448
|
-
|
4434
|
+
dom$n.addClass(btn, 'on');
|
4449
4435
|
this.builder.settings.onChange();
|
4450
4436
|
setTimeout(() => {
|
4451
4437
|
this.builder.refreshAnim();
|
@@ -4468,8 +4454,7 @@ class EditSection {
|
|
4468
4454
|
setTimeout(() => {
|
4469
4455
|
dom$n.removeClass(btn, 'on');
|
4470
4456
|
}, 100);
|
4471
|
-
}
|
4472
|
-
|
4457
|
+
}
|
4473
4458
|
|
4474
4459
|
this.builder.settings.onChange();
|
4475
4460
|
});
|
@@ -4491,8 +4476,7 @@ class EditSection {
|
|
4491
4476
|
btns.forEach(btn => {
|
4492
4477
|
dom$n.removeClass(btn, 'on');
|
4493
4478
|
});
|
4494
|
-
dom$n.addClass(btn, 'on');
|
4495
|
-
|
4479
|
+
dom$n.addClass(btn, 'on');
|
4496
4480
|
this.builder.settings.onChange();
|
4497
4481
|
});
|
4498
4482
|
});
|
@@ -4518,8 +4502,7 @@ class EditSection {
|
|
4518
4502
|
btns.forEach(btn => {
|
4519
4503
|
dom$n.removeClass(btn, 'on');
|
4520
4504
|
});
|
4521
|
-
dom$n.addClass(btn, 'on');
|
4522
|
-
|
4505
|
+
dom$n.addClass(btn, 'on');
|
4523
4506
|
this.builder.settings.onChange();
|
4524
4507
|
});
|
4525
4508
|
});
|
@@ -4529,8 +4512,7 @@ class EditSection {
|
|
4529
4512
|
this.builder.editor.saveForUndo();
|
4530
4513
|
let val = btn.getAttribute('data-value'); // light or dark
|
4531
4514
|
|
4532
|
-
this.sectionScrollIcon(val);
|
4533
|
-
|
4515
|
+
this.sectionScrollIcon(val);
|
4534
4516
|
this.builder.settings.onChange();
|
4535
4517
|
});
|
4536
4518
|
});
|
@@ -4550,8 +4532,7 @@ class EditSection {
|
|
4550
4532
|
setTimeout(() => {
|
4551
4533
|
dom$n.removeClass(btn, 'on');
|
4552
4534
|
}, 100);
|
4553
|
-
}
|
4554
|
-
|
4535
|
+
}
|
4555
4536
|
|
4556
4537
|
this.builder.settings.onChange();
|
4557
4538
|
});
|
@@ -4559,8 +4540,7 @@ class EditSection {
|
|
4559
4540
|
const chkScrollIcon = modalEditSection.querySelector('#chkScrollIcon');
|
4560
4541
|
chkScrollIcon.addEventListener('click', () => {
|
4561
4542
|
this.builder.editor.saveForUndo();
|
4562
|
-
this.sectionUseScroll();
|
4563
|
-
|
4543
|
+
this.sectionUseScroll();
|
4564
4544
|
this.builder.settings.onChange();
|
4565
4545
|
});
|
4566
4546
|
const colorpicker = this.builder.editor.colorpicker(); // Section Background Color
|
@@ -4584,7 +4564,6 @@ class EditSection {
|
|
4584
4564
|
section.style.backgroundImage = ''; //remove gradient
|
4585
4565
|
|
4586
4566
|
btnSectionBgColor.style.backgroundColor = s; // preview
|
4587
|
-
//Trigger Change event
|
4588
4567
|
|
4589
4568
|
this.builder.onChange();
|
4590
4569
|
}, bgcolor);
|
@@ -4603,8 +4582,7 @@ class EditSection {
|
|
4603
4582
|
overlay.style.backgroundColor = '';
|
4604
4583
|
overlay.style.backgroundImage = ''; //remove gradient
|
4605
4584
|
});
|
4606
|
-
}
|
4607
|
-
|
4585
|
+
}
|
4608
4586
|
|
4609
4587
|
this.builder.onChange();
|
4610
4588
|
});
|
@@ -4621,8 +4599,7 @@ class EditSection {
|
|
4621
4599
|
} else {
|
4622
4600
|
section.removeAttribute('id');
|
4623
4601
|
info.innerHTML = '';
|
4624
|
-
}
|
4625
|
-
|
4602
|
+
}
|
4626
4603
|
|
4627
4604
|
this.builder.onChange();
|
4628
4605
|
});
|
@@ -4646,8 +4623,7 @@ class EditSection {
|
|
4646
4623
|
}); // save
|
4647
4624
|
|
4648
4625
|
section.setAttribute('data-class', newClasses);
|
4649
|
-
if (section.getAttribute('data-class') === '') section.removeAttribute('data-class');
|
4650
|
-
|
4626
|
+
if (section.getAttribute('data-class') === '') section.removeAttribute('data-class');
|
4651
4627
|
this.builder.onChange();
|
4652
4628
|
});
|
4653
4629
|
inpSectionId.addEventListener('keyup', () => {
|
@@ -4696,8 +4672,7 @@ class EditSection {
|
|
4696
4672
|
} else {
|
4697
4673
|
section.classList.remove('desktop-box-reverse');
|
4698
4674
|
}
|
4699
|
-
}
|
4700
|
-
|
4675
|
+
}
|
4701
4676
|
|
4702
4677
|
this.builder.settings.onChange();
|
4703
4678
|
}); // Section Visibility
|
@@ -4736,8 +4711,7 @@ class EditSection {
|
|
4736
4711
|
}
|
4737
4712
|
|
4738
4713
|
btnVisible.classList.add('on');
|
4739
|
-
btnHidden.classList.remove('on');
|
4740
|
-
|
4714
|
+
btnHidden.classList.remove('on');
|
4741
4715
|
this.builder.onChange();
|
4742
4716
|
});
|
4743
4717
|
btnHidden.addEventListener('click', () => {
|
@@ -4759,8 +4733,7 @@ class EditSection {
|
|
4759
4733
|
}
|
4760
4734
|
|
4761
4735
|
btnVisible.classList.remove('on');
|
4762
|
-
btnHidden.classList.add('on');
|
4763
|
-
|
4736
|
+
btnHidden.classList.add('on');
|
4764
4737
|
this.builder.onChange();
|
4765
4738
|
}); // Boxes per line
|
4766
4739
|
|
@@ -4838,8 +4811,7 @@ class EditSection {
|
|
4838
4811
|
section.classList.add(`desktop-boxes-${val}`);
|
4839
4812
|
section.classList.add('desktop-boxes-wrap');
|
4840
4813
|
}
|
4841
|
-
}
|
4842
|
-
|
4814
|
+
}
|
4843
4815
|
|
4844
4816
|
this.builder.onChange();
|
4845
4817
|
});
|
@@ -5142,82 +5114,59 @@ class EditSection {
|
|
5142
5114
|
}, 1000); // this.builder.scrollTo(activeSection);
|
5143
5115
|
}
|
5144
5116
|
|
5145
|
-
|
5146
|
-
|
5147
|
-
let
|
5117
|
+
sectionDelete() {
|
5118
|
+
let activeSection = this.builder.activeSection;
|
5119
|
+
let hasPin = this.builder.hasPin();
|
5148
5120
|
|
5149
|
-
if (
|
5150
|
-
|
5151
|
-
|
5152
|
-
|
5121
|
+
if (hasPin) {
|
5122
|
+
// After a section is deleted, the scroll goes to the previous section
|
5123
|
+
let scrollTarget;
|
5124
|
+
|
5125
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5126
|
+
scrollTarget = activeSection.parentNode.previousElementSibling;
|
5127
|
+
if (scrollTarget) if (scrollTarget.classList.contains('pin-wrap')) scrollTarget = scrollTarget.querySelector('.is-section');
|
5128
|
+
} else {
|
5129
|
+
scrollTarget = activeSection.previousElementSibling;
|
5153
5130
|
}
|
5154
|
-
}
|
5155
5131
|
|
5156
|
-
|
5157
|
-
|
5132
|
+
if (scrollTarget) this.builder.markScrollTarget(scrollTarget);
|
5133
|
+
} // Remove section
|
5158
5134
|
|
5159
|
-
this.builder.settings.onRender();
|
5160
|
-
this.builder.refreshAnim();
|
5161
|
-
this.builder.scrollTo(activeSection, 600);
|
5162
|
-
}
|
5163
|
-
}
|
5164
5135
|
|
5165
|
-
|
5166
|
-
|
5167
|
-
|
5168
|
-
|
5169
|
-
|
5170
|
-
while (!dom$n.hasClass(currNext, 'is-section')) {
|
5171
|
-
if (!currNext.nextElementSibling) break;
|
5172
|
-
currNext = currNext.previousElementSibling;
|
5173
|
-
}
|
5136
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5137
|
+
const pin = activeSection.parentNode;
|
5138
|
+
pin.parentNode.removeChild(pin);
|
5139
|
+
} else {
|
5140
|
+
activeSection.parentNode.removeChild(activeSection);
|
5174
5141
|
}
|
5175
5142
|
|
5176
|
-
|
5177
|
-
activeSection.parentNode.insertBefore(currNext, activeSection); //Trigger Render event
|
5143
|
+
this.builder.settings.onRender();
|
5178
5144
|
|
5179
|
-
|
5145
|
+
if (hasPin) {
|
5146
|
+
this.builder.scrollToMarkedTarget();
|
5147
|
+
} else {
|
5180
5148
|
this.builder.refreshAnim();
|
5181
|
-
this.builder.scrollTo(activeSection, 600);
|
5182
5149
|
}
|
5183
|
-
|
5184
|
-
return false;
|
5185
|
-
}
|
5186
|
-
|
5187
|
-
sectionTop() {
|
5188
|
-
const activeSection = this.builder.activeSection;
|
5189
|
-
let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
|
5190
|
-
|
5191
|
-
activeSection.parentNode.insertBefore(activeSection, refSection); //Trigger Render event
|
5192
|
-
|
5193
|
-
this.builder.settings.onRender();
|
5194
|
-
this.builder.refreshAnim();
|
5195
|
-
this.builder.scrollTo(activeSection, 600);
|
5196
|
-
}
|
5197
|
-
|
5198
|
-
sectionBottom() {
|
5199
|
-
const activeSection = this.builder.activeSection; // let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)');
|
5200
|
-
|
5201
|
-
let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
|
5202
|
-
return item.classList.contains('is-section');
|
5203
|
-
});
|
5204
|
-
let last = nodes[nodes.length - 1];
|
5205
|
-
activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
|
5206
|
-
|
5207
|
-
this.builder.settings.onRender();
|
5208
|
-
this.builder.refreshAnim();
|
5209
|
-
this.builder.scrollTo(activeSection, 600);
|
5210
5150
|
}
|
5211
5151
|
|
5212
5152
|
sectionDuplicate() {
|
5213
5153
|
const activeSection = this.builder.activeSection;
|
5154
|
+
let hasPin = this.builder.hasPin();
|
5214
5155
|
let copiedSection = activeSection.cloneNode(true);
|
5215
5156
|
copiedSection.setAttribute('data-section-copied', '1');
|
5216
5157
|
let parent = activeSection.parentNode;
|
5217
|
-
|
5158
|
+
|
5159
|
+
if (parent.classList.contains('pin-wrap')) {
|
5160
|
+
parent = parent.parentNode;
|
5161
|
+
parent.insertBefore(copiedSection, activeSection.parentNode.nextElementSibling);
|
5162
|
+
} else {
|
5163
|
+
parent.insertBefore(copiedSection, activeSection.nextElementSibling);
|
5164
|
+
}
|
5165
|
+
|
5218
5166
|
let section = this.builder.doc.querySelector('[data-section-copied]');
|
5219
5167
|
section.removeAttribute('data-section-copied');
|
5220
|
-
dom$n.removeClass(section, 'section-active');
|
5168
|
+
dom$n.removeClass(section, 'section-active');
|
5169
|
+
this.builder.markScrollTarget(section); // Code Blocks Handling
|
5221
5170
|
|
5222
5171
|
let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
|
5223
5172
|
codeBlocks.forEach(element => {
|
@@ -5257,12 +5206,17 @@ class EditSection {
|
|
5257
5206
|
e.preventDefault();
|
5258
5207
|
e.stopImmediatePropagation();
|
5259
5208
|
return false;
|
5260
|
-
});
|
5261
|
-
|
5209
|
+
});
|
5262
5210
|
this.builder.settings.onRender();
|
5263
|
-
|
5264
|
-
|
5265
|
-
|
5211
|
+
|
5212
|
+
if (hasPin) {
|
5213
|
+
this.builder.scrollToMarkedTarget();
|
5214
|
+
} else {
|
5215
|
+
this.builder.refreshAnim();
|
5216
|
+
this.builder.scrollTo(section, 600);
|
5217
|
+
}
|
5218
|
+
|
5219
|
+
this.builder.hideModal(this.modalEditSection); // Change
|
5266
5220
|
|
5267
5221
|
activeSection.classList.remove('section-select');
|
5268
5222
|
activeSection.classList.remove('box-select');
|
@@ -5277,6 +5231,179 @@ class EditSection {
|
|
5277
5231
|
}
|
5278
5232
|
}
|
5279
5233
|
|
5234
|
+
sectionTop_Pin() {
|
5235
|
+
let activeSection = this.builder.activeSection;
|
5236
|
+
this.builder.markScrollTarget(activeSection);
|
5237
|
+
|
5238
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5239
|
+
activeSection = activeSection.parentNode;
|
5240
|
+
} // let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
|
5241
|
+
|
5242
|
+
|
5243
|
+
let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
|
5244
|
+
return (item.classList.contains('is-section') || item.classList.contains('pin-wrap')) && !item.classList.contains('is-section-navbar');
|
5245
|
+
});
|
5246
|
+
if (nodes.length === 0) return;
|
5247
|
+
let refSection = nodes[0];
|
5248
|
+
activeSection.parentNode.insertBefore(activeSection, refSection);
|
5249
|
+
this.builder.settings.onRender();
|
5250
|
+
this.builder.scrollToMarkedTarget();
|
5251
|
+
}
|
5252
|
+
|
5253
|
+
sectionUp_Pin() {
|
5254
|
+
let activeSection = this.builder.activeSection;
|
5255
|
+
this.builder.markScrollTarget(activeSection);
|
5256
|
+
|
5257
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5258
|
+
activeSection = activeSection.parentNode;
|
5259
|
+
}
|
5260
|
+
|
5261
|
+
let currPrev = activeSection.previousElementSibling;
|
5262
|
+
|
5263
|
+
if (currPrev) {
|
5264
|
+
while (!(currPrev.classList.contains('is-section') || currPrev.classList.contains('pin-wrap'))) {
|
5265
|
+
if (!currPrev.previousElementSibling) break;
|
5266
|
+
currPrev = currPrev.previousElementSibling;
|
5267
|
+
}
|
5268
|
+
}
|
5269
|
+
|
5270
|
+
if (currPrev && !dom$n.hasClass(currPrev, 'is-static')) {
|
5271
|
+
activeSection.parentNode.insertBefore(activeSection, currPrev);
|
5272
|
+
this.builder.settings.onRender();
|
5273
|
+
this.builder.scrollToMarkedTarget();
|
5274
|
+
}
|
5275
|
+
}
|
5276
|
+
|
5277
|
+
sectionBottom_Pin() {
|
5278
|
+
let activeSection = this.builder.activeSection;
|
5279
|
+
this.builder.markScrollTarget(activeSection);
|
5280
|
+
|
5281
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5282
|
+
activeSection = activeSection.parentNode;
|
5283
|
+
} // let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)');
|
5284
|
+
|
5285
|
+
|
5286
|
+
let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
|
5287
|
+
return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
|
5288
|
+
});
|
5289
|
+
let last = nodes[nodes.length - 1];
|
5290
|
+
activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling);
|
5291
|
+
this.builder.settings.onRender();
|
5292
|
+
this.builder.scrollToMarkedTarget();
|
5293
|
+
}
|
5294
|
+
|
5295
|
+
sectionDown_Pin() {
|
5296
|
+
let activeSection = this.builder.activeSection;
|
5297
|
+
this.builder.markScrollTarget(activeSection);
|
5298
|
+
|
5299
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
5300
|
+
activeSection = activeSection.parentNode;
|
5301
|
+
}
|
5302
|
+
|
5303
|
+
let currNext = activeSection.nextElementSibling;
|
5304
|
+
|
5305
|
+
if (currNext) {
|
5306
|
+
while (!(currNext.classList.contains('is-section') || currNext.classList.contains('pin-wrap'))) {
|
5307
|
+
if (!currNext.nextElementSibling) break;
|
5308
|
+
currNext = currNext.previousElementSibling;
|
5309
|
+
}
|
5310
|
+
}
|
5311
|
+
|
5312
|
+
if (currNext && !dom$n.hasClass(currNext, 'is-static')) {
|
5313
|
+
activeSection.parentNode.insertBefore(currNext, activeSection);
|
5314
|
+
this.builder.settings.onRender();
|
5315
|
+
this.builder.scrollToMarkedTarget();
|
5316
|
+
}
|
5317
|
+
}
|
5318
|
+
|
5319
|
+
sectionUp() {
|
5320
|
+
let hasPin = this.builder.hasPin();
|
5321
|
+
|
5322
|
+
if (hasPin) {
|
5323
|
+
this.sectionUp_Pin();
|
5324
|
+
return;
|
5325
|
+
}
|
5326
|
+
|
5327
|
+
const activeSection = this.builder.activeSection;
|
5328
|
+
let currPrev = activeSection.previousElementSibling;
|
5329
|
+
|
5330
|
+
if (currPrev) {
|
5331
|
+
while (!dom$n.hasClass(currPrev, 'is-section')) {
|
5332
|
+
if (!currPrev.previousElementSibling) break;
|
5333
|
+
currPrev = currPrev.previousElementSibling;
|
5334
|
+
}
|
5335
|
+
}
|
5336
|
+
|
5337
|
+
if (currPrev && !dom$n.hasClass(currPrev, 'is-static')) {
|
5338
|
+
activeSection.parentNode.insertBefore(activeSection, currPrev);
|
5339
|
+
this.builder.settings.onRender();
|
5340
|
+
this.builder.refreshAnim();
|
5341
|
+
this.builder.scrollTo(activeSection, 600);
|
5342
|
+
}
|
5343
|
+
}
|
5344
|
+
|
5345
|
+
sectionDown() {
|
5346
|
+
let hasPin = this.builder.hasPin();
|
5347
|
+
|
5348
|
+
if (hasPin) {
|
5349
|
+
this.sectionDown_Pin();
|
5350
|
+
return;
|
5351
|
+
}
|
5352
|
+
|
5353
|
+
const activeSection = this.builder.activeSection;
|
5354
|
+
let currNext = activeSection.nextElementSibling;
|
5355
|
+
|
5356
|
+
if (currNext) {
|
5357
|
+
while (!dom$n.hasClass(currNext, 'is-section')) {
|
5358
|
+
if (!currNext.nextElementSibling) break;
|
5359
|
+
currNext = currNext.previousElementSibling;
|
5360
|
+
}
|
5361
|
+
}
|
5362
|
+
|
5363
|
+
if (currNext && !dom$n.hasClass(currNext, 'is-static')) {
|
5364
|
+
activeSection.parentNode.insertBefore(currNext, activeSection);
|
5365
|
+
this.builder.settings.onRender();
|
5366
|
+
this.builder.refreshAnim();
|
5367
|
+
this.builder.scrollTo(activeSection, 600);
|
5368
|
+
}
|
5369
|
+
}
|
5370
|
+
|
5371
|
+
sectionTop() {
|
5372
|
+
let hasPin = this.builder.hasPin();
|
5373
|
+
|
5374
|
+
if (hasPin) {
|
5375
|
+
this.sectionTop_Pin();
|
5376
|
+
return;
|
5377
|
+
}
|
5378
|
+
|
5379
|
+
const activeSection = this.builder.activeSection;
|
5380
|
+
let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
|
5381
|
+
|
5382
|
+
activeSection.parentNode.insertBefore(activeSection, refSection);
|
5383
|
+
this.builder.settings.onRender();
|
5384
|
+
this.builder.refreshAnim();
|
5385
|
+
this.builder.scrollTo(activeSection, 600);
|
5386
|
+
}
|
5387
|
+
|
5388
|
+
sectionBottom() {
|
5389
|
+
let hasPin = this.builder.hasPin();
|
5390
|
+
|
5391
|
+
if (hasPin) {
|
5392
|
+
this.sectionBottom_Pin();
|
5393
|
+
return;
|
5394
|
+
}
|
5395
|
+
|
5396
|
+
const activeSection = this.builder.activeSection;
|
5397
|
+
let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
|
5398
|
+
return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
|
5399
|
+
});
|
5400
|
+
let last = nodes[nodes.length - 1];
|
5401
|
+
activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling);
|
5402
|
+
this.builder.settings.onRender();
|
5403
|
+
this.builder.refreshAnim();
|
5404
|
+
this.builder.scrollTo(activeSection, 600);
|
5405
|
+
}
|
5406
|
+
|
5280
5407
|
sectionAnimStart(s) {
|
5281
5408
|
const activeSection = this.builder.activeSection;
|
5282
5409
|
activeSection.removeAttribute('data-bottom-top');
|
@@ -19390,6 +19517,7 @@ class Util$1 {
|
|
19390
19517
|
}
|
19391
19518
|
const dom = this.dom;
|
19392
19519
|
dom.removeClass(modal, 'active');
|
19520
|
+
modal.style.display = '';
|
19393
19521
|
}
|
19394
19522
|
|
19395
19523
|
// attachInputTextClear(inp) {
|
@@ -37157,6 +37285,7 @@ const renderSnippetPanel = builder => {
|
|
37157
37285
|
}
|
37158
37286
|
let html_snippets = '' + '<div class="is-dropdown selectsnippet" style="position:absolute;top:0;right:0;padding: 0;width:100%;z-index:2;">' + '<button tabindex="0" class="dropdown-toggle no-outline" title="' + util.out('Snippet Categories') + '" type="button" aria-haspopup="true" data-value="' + defaultcatval + '">' + '<span>' + util.out(defaultcat) + '</span>' + '</button>' + '<ul class="dropdown-menu" role="listbox" title="' + util.out('Snippets') + '" aria-expanded="false">' + catitems + '</ul>' + '</div>' + (sidePanel === 'right' ? '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);right:25px;">▲</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);right:25px;">▼</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-left"></use></svg>' + '</div>' : '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);left:10px;">▲</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);left:10px;">▼</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-right"></use></svg>' + '</div>') + '<div class="is-design-list" tabindex="0">' + '</div>';
|
37159
37287
|
let snippetPanel = document.querySelector(builder.opts.snippetList);
|
37288
|
+
snippetPanel.innerHTML = ''; //clear
|
37160
37289
|
dom.appendHtml(snippetPanel, html_snippets);
|
37161
37290
|
const dropDown = new Select(snippetPanel.querySelector('.selectsnippet'));
|
37162
37291
|
dropDown.element.addEventListener('change', () => {
|
@@ -88127,28 +88256,30 @@ class Rte {
|
|
88127
88256
|
return bExist;
|
88128
88257
|
}
|
88129
88258
|
positionToolbar() {
|
88259
|
+
const leftSidebarAdj = this.builder.leftSidebarAdj || 0;
|
88260
|
+
const leftSidebarAdj2 = this.builder.leftSidebarAdj2 || 0;
|
88130
88261
|
const viewportWidth = document.body.clientWidth; //window.innerWidth;
|
88131
88262
|
const viewportHeight = window.innerHeight;
|
88132
88263
|
if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
|
88133
88264
|
let h = this.rteTool.offsetHeight;
|
88134
88265
|
let top = viewportHeight / 2 - h / 2;
|
88135
|
-
this.rteTool.style.left = '';
|
88266
|
+
this.rteTool.style.left = leftSidebarAdj2 + 'px';
|
88136
88267
|
this.rteTool.style.top = top + 'px';
|
88137
88268
|
|
88138
88269
|
// Element Toolbar
|
88139
88270
|
h = this.elementRteTool.offsetHeight;
|
88140
88271
|
top = viewportHeight / 2 - h / 2;
|
88141
|
-
this.elementRteTool.style.left = '';
|
88272
|
+
this.elementRteTool.style.left = leftSidebarAdj2 + 'px';
|
88142
88273
|
this.elementRteTool.style.top = top + 'px';
|
88143
88274
|
} else {
|
88144
88275
|
let w = this.rteTool.offsetWidth;
|
88145
|
-
let left = viewportWidth / 2 - w / 2;
|
88276
|
+
let left = viewportWidth / 2 - w / 2 + leftSidebarAdj;
|
88146
88277
|
this.rteTool.style.top = '';
|
88147
88278
|
this.rteTool.style.left = left + 'px';
|
88148
88279
|
|
88149
88280
|
// Element Toolbar
|
88150
88281
|
w = this.elementRteTool.offsetWidth;
|
88151
|
-
left = viewportWidth / 2 - w / 2;
|
88282
|
+
left = viewportWidth / 2 - w / 2 + leftSidebarAdj;
|
88152
88283
|
this.elementRteTool.style.top = '';
|
88153
88284
|
this.elementRteTool.style.left = left + 'px';
|
88154
88285
|
}
|
@@ -95123,7 +95254,7 @@ class ContentBuilder {
|
|
95123
95254
|
if (this.dom.hasClass(builder, 'preview')) this.preview = true;
|
95124
95255
|
});
|
95125
95256
|
if (!this.preview) {
|
95126
|
-
if (this.opts.snippetJSON.snippets.length > 0) {
|
95257
|
+
if (this.opts.snippetJSON) if (this.opts.snippetJSON.snippets.length > 0) {
|
95127
95258
|
renderSnippetPanel(this); // Render Snippet Panel
|
95128
95259
|
}
|
95129
95260
|
}
|
@@ -95220,7 +95351,7 @@ class ContentBuilder {
|
|
95220
95351
|
this.util.hidePops();
|
95221
95352
|
});
|
95222
95353
|
this.win.addEventListener('resize', this.doWindowResize = () => {
|
95223
|
-
this.util.clearActiveCell();
|
95354
|
+
// this.util.clearActiveCell();
|
95224
95355
|
this.util.clearControls();
|
95225
95356
|
|
95226
95357
|
// Disable on mobile
|
@@ -96976,8 +97107,10 @@ class ContentBuilder {
|
|
96976
97107
|
}
|
96977
97108
|
loadSnippets(snippetFile) {
|
96978
97109
|
if (this.preview) return;
|
96979
|
-
|
96980
|
-
|
97110
|
+
if (this.opts.snippetList === '#divSnippetList') {
|
97111
|
+
let snippetPanel = document.querySelector(this.opts.snippetList);
|
97112
|
+
if (snippetPanel) return; // do not render if already rendered (just protection)
|
97113
|
+
}
|
96981
97114
|
|
96982
97115
|
if (this.isScriptAlreadyIncluded(snippetFile)) return;
|
96983
97116
|
const script = document.createElement('script');
|
@@ -112871,17 +113004,22 @@ ${currentHtml}
|
|
112871
113004
|
this.builder.editor.saveForUndo();
|
112872
113005
|
this.builder.editsection.sectionDuplicate();
|
112873
113006
|
this.builder.sectionStack();
|
112874
|
-
setTimeout(() => {
|
112875
|
-
this.builder.refreshAnim();
|
112876
|
-
}, 600);
|
112877
113007
|
this.builder.settings.onChange();
|
112878
113008
|
return false;
|
112879
113009
|
} else if (intent === 'remove_section') {
|
112880
113010
|
this.builder.editor.saveForUndo();
|
112881
|
-
|
112882
|
-
|
113011
|
+
this.builder.editsection.sectionDelete();
|
113012
|
+
this.builder.sectionStack(); //--- clear ---
|
113013
|
+
|
112883
113014
|
this.builder.activeSection = null;
|
112884
113015
|
this.builder.activeBox = null;
|
113016
|
+
this.builder.editor.inspectedElement = null;
|
113017
|
+
this.builder.editor.activeElement = null;
|
113018
|
+
this.builder.editor.activeCol = null;
|
113019
|
+
this.builder.wrapperEl.classList.remove('hard-select');
|
113020
|
+
this.builder.wrapperEl.classList.remove('is-container-edit');
|
113021
|
+
this.builder.wrapperEl.classList.remove('is-clean-edit'); //--- /clear ---
|
113022
|
+
|
112885
113023
|
this.builder.settings.onChange();
|
112886
113024
|
return false;
|
112887
113025
|
} else if (intent === 'add_content') {
|
@@ -115194,6 +115332,200 @@ ${currentHtml}
|
|
115194
115332
|
|
115195
115333
|
}
|
115196
115334
|
|
115335
|
+
class IframePanel {
|
115336
|
+
constructor(opts = {}, builder) {
|
115337
|
+
let defaults = {
|
115338
|
+
src: '',
|
115339
|
+
page: '.is-wrapper',
|
115340
|
+
onReady: () => {}
|
115341
|
+
};
|
115342
|
+
this.opts = Object.assign(this, defaults, opts);
|
115343
|
+
this.builder = builder;
|
115344
|
+
const builderStuff = this.builder.builderStuff;
|
115345
|
+
this.builderStuff = builderStuff;
|
115346
|
+
let editPanel = document.querySelector('#editPanel');
|
115347
|
+
|
115348
|
+
if (!editPanel) {
|
115349
|
+
const html = `
|
115350
|
+
<style>
|
115351
|
+
#editPanel {
|
115352
|
+
display:flex;
|
115353
|
+
flex-direction:column;
|
115354
|
+
justify-content:center;
|
115355
|
+
align-items:center;
|
115356
|
+
/* width: 100vw; */
|
115357
|
+
width: calc(100% - 60px) !important;
|
115358
|
+
left:60px !important;
|
115359
|
+
height:100vh;
|
115360
|
+
position:fixed;
|
115361
|
+
top:0;
|
115362
|
+
background:#f5f5f5;
|
115363
|
+
}
|
115364
|
+
|
115365
|
+
.is-content-view {
|
115366
|
+
transition: all 300ms ease 0s;
|
115367
|
+
overflow: hidden;
|
115368
|
+
margin-top: 1.5rem;
|
115369
|
+
background: #f5f5f5;
|
115370
|
+
position: relative;
|
115371
|
+
}
|
115372
|
+
.is-content-view > div {
|
115373
|
+
background-color: rgb(230 231 233);
|
115374
|
+
border-top-left-radius: 8px;
|
115375
|
+
border-top-right-radius: 8px;
|
115376
|
+
height: 1.75rem;
|
115377
|
+
display: flex;
|
115378
|
+
justify-content: center;
|
115379
|
+
}
|
115380
|
+
|
115381
|
+
.is-responsive-toolbar {
|
115382
|
+
display: inline-flex;
|
115383
|
+
margin-left: 15px;
|
115384
|
+
margin-right: 15px;
|
115385
|
+
position: relative;
|
115386
|
+
background: transparent;
|
115387
|
+
}
|
115388
|
+
.is-responsive-toolbar button {
|
115389
|
+
background: transparent !important;
|
115390
|
+
width: 40px !important;
|
115391
|
+
height: auto !important;
|
115392
|
+
}
|
115393
|
+
.is-responsive-toolbar button.active {
|
115394
|
+
background: #c0c0c05c !important;
|
115395
|
+
}
|
115396
|
+
.is-responsive-toolbar button svg {
|
115397
|
+
width: 17px;
|
115398
|
+
height: 17px;
|
115399
|
+
opacity: 0.75;
|
115400
|
+
fill: none !important;
|
115401
|
+
}
|
115402
|
+
.is-content-view iframe {
|
115403
|
+
width: 100%;
|
115404
|
+
height: calc(100% - 28px);
|
115405
|
+
position: absolute;
|
115406
|
+
}
|
115407
|
+
</style>
|
115408
|
+
|
115409
|
+
<div id="editPanel">
|
115410
|
+
|
115411
|
+
<div class="is-content-view desktop">
|
115412
|
+
<div>
|
115413
|
+
|
115414
|
+
<div class="is-responsive-toolbar is-tool">
|
115415
|
+
<button title="${out('Desktop')}" class="active" data-command="desktop">
|
115416
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
115417
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
115418
|
+
<rect x="3" y="4" width="18" height="12" rx="1"></rect>
|
115419
|
+
<line x1="7" y1="20" x2="17" y2="20"></line>
|
115420
|
+
<line x1="9" y1="16" x2="9" y2="20"></line>
|
115421
|
+
<line x1="15" y1="16" x2="15" y2="20"></line>
|
115422
|
+
</svg>
|
115423
|
+
</button>
|
115424
|
+
|
115425
|
+
<button title="${out('Tablet (Landscape)')}" data-command="tablet-landscape">
|
115426
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-tablet-landscape" style="transform:rotate(-90deg)" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
115427
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
115428
|
+
<rect x="5" y="3" width="14" height="18" rx="1"></rect>
|
115429
|
+
<circle cx="12" cy="17" r="1"></circle>
|
115430
|
+
</svg>
|
115431
|
+
</button>
|
115432
|
+
|
115433
|
+
<button title="${out('Tablet (Portrait)')}" data-command="tablet">
|
115434
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-tablet" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
115435
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
115436
|
+
<rect x="5" y="3" width="14" height="18" rx="1"></rect>
|
115437
|
+
<circle cx="12" cy="17" r="1"></circle>
|
115438
|
+
</svg>
|
115439
|
+
</button>
|
115440
|
+
|
115441
|
+
<button title="${out('Mobile')}" data-command="mobile">
|
115442
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
115443
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
115444
|
+
<rect x="6" y="3" width="12" height="18" rx="2"></rect>
|
115445
|
+
<line x1="11" y1="4" x2="13" y2="4"></line>
|
115446
|
+
<line x1="12" y1="17" x2="12" y2="17.01"></line>
|
115447
|
+
</svg>
|
115448
|
+
</button>
|
115449
|
+
</div>
|
115450
|
+
|
115451
|
+
</div>
|
115452
|
+
<iframe id="ifrBuilder" src="about:blank"></iframe>
|
115453
|
+
</div>
|
115454
|
+
|
115455
|
+
</div>
|
115456
|
+
`;
|
115457
|
+
builderStuff.insertAdjacentHTML('beforeend', html); // document.body.insertAdjacentHTML('beforeend', html);
|
115458
|
+
|
115459
|
+
editPanel = document.querySelector('#editPanel');
|
115460
|
+
this.editPanel = editPanel;
|
115461
|
+
this.loadIframe();
|
115462
|
+
let tool = document.querySelector('.is-responsive-toolbar');
|
115463
|
+
let btns = tool.querySelectorAll('button');
|
115464
|
+
btns.forEach(btn => {
|
115465
|
+
btn.addEventListener('click', () => {
|
115466
|
+
const command = btn.getAttribute('data-command');
|
115467
|
+
const contentView = editPanel.querySelector('.is-content-view');
|
115468
|
+
let elm = tool.querySelector('button.active');
|
115469
|
+
if (elm) elm.classList.remove('active');
|
115470
|
+
contentView.classList.remove('desktop');
|
115471
|
+
contentView.classList.remove('tablet-landscape');
|
115472
|
+
contentView.classList.remove('tablet');
|
115473
|
+
contentView.classList.remove('mobile');
|
115474
|
+
|
115475
|
+
if (command === 'desktop') {
|
115476
|
+
contentView.classList.add('desktop');
|
115477
|
+
} else if (command === 'tablet-landscape') {
|
115478
|
+
contentView.classList.add('tablet-landscape');
|
115479
|
+
} else if (command === 'tablet') {
|
115480
|
+
contentView.classList.add('tablet');
|
115481
|
+
} else if (command === 'mobile') {
|
115482
|
+
contentView.classList.add('mobile');
|
115483
|
+
}
|
115484
|
+
|
115485
|
+
btn.classList.add('active');
|
115486
|
+
});
|
115487
|
+
});
|
115488
|
+
}
|
115489
|
+
}
|
115490
|
+
|
115491
|
+
loadIframe() {
|
115492
|
+
let iframe = this.editPanel.querySelector('iframe');
|
115493
|
+
|
115494
|
+
if (this.src !== '') {
|
115495
|
+
iframe.setAttribute('src', this.src);
|
115496
|
+
} else {
|
115497
|
+
alert('Please specify src attribute.');
|
115498
|
+
}
|
115499
|
+
|
115500
|
+
document.body.style.overflowY = 'hidden';
|
115501
|
+
let checkLoad = setInterval(() => {
|
115502
|
+
if (iframe.contentDocument.readyState === 'complete') {
|
115503
|
+
iframe.contentDocument.body.classList.add('iframe-body'); // add .iframe-body class that is required by box/flex.css
|
115504
|
+
// Check if editable container is ready
|
115505
|
+
|
115506
|
+
let wrapper = iframe.contentDocument.querySelector(this.opts.page);
|
115507
|
+
|
115508
|
+
if (wrapper) {
|
115509
|
+
clearInterval(checkLoad);
|
115510
|
+
this.onReady(iframe);
|
115511
|
+
}
|
115512
|
+
|
115513
|
+
iframe.contentDocument.body.style.display = 'flex'; // this removes empty space at the bottom of the page
|
115514
|
+
}
|
115515
|
+
}, 200);
|
115516
|
+
}
|
115517
|
+
|
115518
|
+
showTooltip() {
|
115519
|
+
let tool = document.querySelector('.is-responsive-toolbar');
|
115520
|
+
let elms = tool.querySelectorAll('[title]');
|
115521
|
+
Array.prototype.forEach.call(elms, elm => {
|
115522
|
+
elm.setAttribute('data-title', elm.getAttribute('title'));
|
115523
|
+
this.builder.editor.tooltip.set(elm, 5, 3);
|
115524
|
+
});
|
115525
|
+
}
|
115526
|
+
|
115527
|
+
}
|
115528
|
+
|
115197
115529
|
const dom = new Dom$1();
|
115198
115530
|
|
115199
115531
|
class ContentBox {
|
@@ -118223,131 +118555,156 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
118223
118555
|
|
118224
118556
|
if (this.settings.contentStyleWithSample) {
|
118225
118557
|
this.settings.contentStyles = this.settings.contentStylesAlt;
|
118226
|
-
} //
|
118558
|
+
} // Hidden placement for builder things
|
118227
118559
|
|
118228
118560
|
|
118229
|
-
let
|
118561
|
+
let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
|
118230
118562
|
|
118231
|
-
if (
|
118232
|
-
|
118233
|
-
|
118234
|
-
|
118235
|
-
|
118236
|
-
|
118237
|
-
|
118238
|
-
doc = document;
|
118563
|
+
if (!builderStuff) {
|
118564
|
+
builderStuff = document.createElement('div');
|
118565
|
+
builderStuff.id = '_cbhtml';
|
118566
|
+
builderStuff.style.visibility = 'hidden';
|
118567
|
+
builderStuff.className = 'is-ui';
|
118568
|
+
document.body.appendChild(builderStuff);
|
118569
|
+
builderStuff = document.querySelector('#_cbhtml');
|
118239
118570
|
}
|
118240
118571
|
|
118241
|
-
this.
|
118242
|
-
this
|
118572
|
+
this.builderStuff = builderStuff;
|
118573
|
+
prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons)
|
118243
118574
|
|
118244
|
-
|
118245
|
-
|
118575
|
+
this.sidebar = new SideBar(this);
|
118576
|
+
this.animateScroll = new AnimateScroll(this);
|
118577
|
+
this.timeline = new Timeline(this);
|
118578
|
+
this.util = new Util(this);
|
118579
|
+
this.controlpanel = new ControlPanel(this);
|
118246
118580
|
|
118247
|
-
|
118248
|
-
|
118249
|
-
|
118250
|
-
contentStuff.id = '_cbhtml';
|
118251
|
-
doc.body.appendChild(contentStuff);
|
118252
|
-
}
|
118581
|
+
if (!this.pageTemplate) {
|
118582
|
+
this.pageTemplate = this.util.getPageTemplate(this.framework);
|
118583
|
+
} // IFRAME
|
118253
118584
|
|
118254
|
-
this.contentStuff = contentStuff;
|
118255
|
-
this.stuff = new ContentStuff(this);
|
118256
|
-
}
|
118257
118585
|
|
118258
|
-
|
118586
|
+
const initialStart = ifr => {
|
118587
|
+
if (ifr) this.iframe = ifr;
|
118588
|
+
let win, doc;
|
118259
118589
|
|
118260
|
-
|
118261
|
-
|
118262
|
-
|
118263
|
-
|
118590
|
+
if (this.iframe) {
|
118591
|
+
win = this.iframe.contentWindow;
|
118592
|
+
let iframeDocument = this.iframe.contentDocument || this.iframe.contentWindow.document;
|
118593
|
+
doc = iframeDocument;
|
118594
|
+
this.iframeDocument = iframeDocument;
|
118595
|
+
} else {
|
118596
|
+
win = window;
|
118597
|
+
doc = document;
|
118598
|
+
}
|
118264
118599
|
|
118265
|
-
|
118266
|
-
|
118600
|
+
this.win = win;
|
118601
|
+
this.doc = doc; // Content stuff
|
118267
118602
|
|
118268
|
-
|
118603
|
+
if (this.iframe) {
|
118604
|
+
let contentStuff = doc.querySelector('.content-stuff');
|
118269
118605
|
|
118270
|
-
|
118271
|
-
|
118606
|
+
if (!contentStuff) {
|
118607
|
+
contentStuff = document.createElement('div');
|
118608
|
+
contentStuff.className = 'content-stuff is-ui';
|
118609
|
+
contentStuff.id = '_cbhtml';
|
118610
|
+
doc.body.appendChild(contentStuff);
|
118611
|
+
}
|
118272
118612
|
|
118273
|
-
|
118274
|
-
|
118275
|
-
//Run parts of box(-flex).js
|
118276
|
-
this.box(); // //Run built-in plugin inside the builder
|
118277
|
-
// setTimeout(()=>{
|
118278
|
-
// if (this.win.skrollr) {
|
118279
|
-
// let obj = this.win.skrollr.get();
|
118280
|
-
// if(obj) obj.refresh();
|
118281
|
-
// }
|
118282
|
-
// }, 100);
|
118283
|
-
} catch (e) {// Do Nothing
|
118613
|
+
this.contentStuff = contentStuff;
|
118614
|
+
this.stuff = new ContentStuff(this);
|
118284
118615
|
}
|
118285
|
-
}; //Extend onChange with built-in plugins
|
118286
118616
|
|
118617
|
+
this.wrapperEl = this.doc.querySelector(this.wrapper);
|
118287
118618
|
|
118288
|
-
|
118619
|
+
if (dom.hasClass(this.wrapperEl, 'preview')) {
|
118620
|
+
this.preview = true;
|
118621
|
+
return;
|
118622
|
+
}
|
118289
118623
|
|
118290
|
-
|
118291
|
-
|
118292
|
-
setTimeout(() => {
|
118293
|
-
// this.quickPosTool();
|
118294
|
-
this.editor.livePreview.previewRefresh();
|
118295
|
-
}, 100);
|
118296
|
-
}; // Hidden placement for builder things
|
118624
|
+
dom.addClass(this.wrapperEl, 'is-wrapper');
|
118625
|
+
dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
|
118297
118626
|
|
118627
|
+
let old = this.settings.onRender;
|
118298
118628
|
|
118299
|
-
|
118629
|
+
this.settings.onRender = () => {
|
118630
|
+
old.call(this); // call user's defined onRender
|
118300
118631
|
|
118301
|
-
|
118302
|
-
|
118303
|
-
|
118304
|
-
|
118305
|
-
|
118306
|
-
|
118307
|
-
|
118308
|
-
|
118632
|
+
try {
|
118633
|
+
// Built-in onRender
|
118634
|
+
//Run parts of box(-flex).js
|
118635
|
+
this.box(); // //Run built-in plugin inside the builder
|
118636
|
+
// setTimeout(()=>{
|
118637
|
+
// if (this.win.skrollr) {
|
118638
|
+
// let obj = this.win.skrollr.get();
|
118639
|
+
// if(obj) obj.refresh();
|
118640
|
+
// }
|
118641
|
+
// }, 100);
|
118642
|
+
} catch (e) {// Do Nothing
|
118643
|
+
}
|
118644
|
+
}; //Extend onChange with built-in plugins
|
118309
118645
|
|
118310
|
-
this.builderStuff = builderStuff; // a hack to prevent html/body page get sliding
|
118311
118646
|
|
118312
|
-
|
118313
|
-
|
118314
|
-
|
118647
|
+
let old2 = this.settings.onChange;
|
118648
|
+
|
118649
|
+
this.settings.onChange = () => {
|
118650
|
+
old2.call(this);
|
118651
|
+
setTimeout(() => {
|
118652
|
+
// this.quickPosTool();
|
118653
|
+
this.editor.livePreview.previewRefresh();
|
118654
|
+
}, 100);
|
118655
|
+
}; // a hack to prevent html/body page get sliding
|
118656
|
+
|
118315
118657
|
|
118316
|
-
if (this.
|
118658
|
+
if (!this.iframeSrc) {
|
118317
118659
|
builderStuff.style.position = 'fixed';
|
118318
118660
|
setTimeout(() => {
|
118319
118661
|
builderStuff.style.position = '';
|
118662
|
+
|
118663
|
+
if (this.wrapperEl.getBoundingClientRect().left < 0) {
|
118664
|
+
builderStuff.style.position = 'fixed';
|
118665
|
+
setTimeout(() => {
|
118666
|
+
builderStuff.style.position = '';
|
118667
|
+
}, 1500);
|
118668
|
+
}
|
118320
118669
|
}, 1500);
|
118321
118670
|
}
|
118322
|
-
|
118323
|
-
|
118324
|
-
|
118325
|
-
|
118326
|
-
|
118327
|
-
|
118328
|
-
|
118329
|
-
|
118671
|
+
/*
|
118672
|
+
if(!window.data_basic) {
|
118673
|
+
dom.addExternalScripts([this.snippetUrl], ()=>{
|
118674
|
+
this.editorSetup();
|
118675
|
+
this.init();
|
118676
|
+
|
118677
|
+
});
|
118678
|
+
} else {
|
118679
|
+
this.editorSetup();
|
118680
|
+
this.init();
|
118681
|
+
}
|
118682
|
+
*/
|
118330
118683
|
|
118331
|
-
if (!this.pageTemplate) {
|
118332
|
-
this.pageTemplate = this.util.getPageTemplate(this.framework);
|
118333
|
-
}
|
118334
118684
|
|
118335
|
-
if (!window.data_basic) {
|
118336
|
-
dom.addExternalScripts([this.snippetUrl], () => {
|
118337
|
-
this.editorSetup();
|
118338
|
-
this.init();
|
118339
|
-
});
|
118340
|
-
} else {
|
118341
118685
|
this.editorSetup();
|
118342
118686
|
this.init();
|
118343
|
-
|
118687
|
+
window.contentbox = this;
|
118688
|
+
window.applyBoxImage = this.boxImage.bind(this);
|
118689
|
+
window.applyLargerImage = this.applyLargerImage.bind(this);
|
118690
|
+
window.returnUrl = this.returnUrl.bind(this);
|
118691
|
+
this.win.applyBoxImage = this.boxImage.bind(this);
|
118692
|
+
window._contentbox = this;
|
118693
|
+
};
|
118344
118694
|
|
118345
|
-
|
118346
|
-
|
118347
|
-
|
118348
|
-
|
118349
|
-
|
118350
|
-
|
118695
|
+
if (this.iframeSrc) {
|
118696
|
+
let iframeSrc = this.iframeSrc;
|
118697
|
+
this.iframePanel = new IframePanel({
|
118698
|
+
src: iframeSrc,
|
118699
|
+
page: '.is-wrapper',
|
118700
|
+
onReady: ifr => {
|
118701
|
+
initialStart(ifr);
|
118702
|
+
this.iframePanel.showTooltip(); // Run here because this feature uses ContentBuilder
|
118703
|
+
}
|
118704
|
+
}, this);
|
118705
|
+
} else {
|
118706
|
+
initialStart();
|
118707
|
+
}
|
118351
118708
|
} // constructor
|
118352
118709
|
|
118353
118710
|
|
@@ -118644,6 +119001,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
118644
119001
|
blockCodeEditorHeight: this.settings.blockCodeEditorHeight,
|
118645
119002
|
blockCodeEditorMaxWidth: this.settings.blockCodeEditorMaxWidth,
|
118646
119003
|
assetRefresh: this.settings.assetRefresh,
|
119004
|
+
leftSidebarAdj: 30,
|
119005
|
+
leftSidebarAdj2: 80,
|
118647
119006
|
onContentClick: e => {
|
118648
119007
|
if (this.settings.onContentClick) this.settings.onContentClick(e);
|
118649
119008
|
this.doc.body.classList.remove('temporary-hide-tools');
|
@@ -118696,7 +119055,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
118696
119055
|
}
|
118697
119056
|
}
|
118698
119057
|
}
|
118699
|
-
});
|
119058
|
+
});
|
119059
|
+
this.editor.loadSnippets(this.snippetUrl); // Live Preview
|
118700
119060
|
|
118701
119061
|
const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
118702
119062
|
this.modalPagePreview = modalPagePreview;
|
@@ -119252,8 +119612,13 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
119252
119612
|
|
119253
119613
|
this.wrapperEl.style.transition = 'none';
|
119254
119614
|
const x = 300 * (1 - zoom) / 0.5;
|
119255
|
-
this.wrapperEl.style.marginTop = `${x}px`;
|
119256
|
-
|
119615
|
+
this.wrapperEl.style.marginTop = `${x}px`; // this.wrapperEl.style.opacity = 1;
|
119616
|
+
|
119617
|
+
this.wrapperEl.style.transition = 'all 400ms ease';
|
119618
|
+
setTimeout(() => {
|
119619
|
+
this.wrapperEl.style.opacity = 1;
|
119620
|
+
this.wrapperEl.style.transition = '';
|
119621
|
+
}, 100);
|
119257
119622
|
let sidebar = builderStuff.querySelector('.is-sidebar');
|
119258
119623
|
if (sidebar) sidebar.style.opacity = 1;
|
119259
119624
|
this.builderStuff.style.visibility = 'visible'; // Remove the page-overlay
|
@@ -119645,7 +120010,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
119645
120010
|
}
|
119646
120011
|
};
|
119647
120012
|
|
119648
|
-
let elmTool =
|
120013
|
+
let elmTool = this.doc.querySelector('.is-element-tool');
|
119649
120014
|
let divImageTool = document.querySelector('#divImageTool');
|
119650
120015
|
let divImageResizer = document.querySelector('#divImageResizer');
|
119651
120016
|
|
@@ -120318,7 +120683,10 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
120318
120683
|
arrSections.push(newSection);
|
120319
120684
|
} else if (newArea.indexOf('is-static') !== -1) {
|
120320
120685
|
// Insert last
|
120321
|
-
let
|
120686
|
+
let nodes = Array.from(this.wrapperEl.children).filter(item => {
|
120687
|
+
return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
|
120688
|
+
});
|
120689
|
+
let lastSection = nodes[nodes.length - 1];
|
120322
120690
|
|
120323
120691
|
if (lastSection) {
|
120324
120692
|
dom.appendHtml(lastSection, newArea, 'afterend');
|
@@ -120354,7 +120722,11 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
120354
120722
|
let activeSection = this.activeSection;
|
120355
120723
|
|
120356
120724
|
if (dom.hasClass(activeSection, 'is-static')) {
|
120357
|
-
|
120725
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
120726
|
+
activeSection = activeSection.parentNode;
|
120727
|
+
} // Insert before
|
120728
|
+
|
120729
|
+
|
120358
120730
|
dom.appendHtml(activeSection, newArea, 'beforebegin');
|
120359
120731
|
newSection = activeSection.previousElementSibling;
|
120360
120732
|
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
@@ -120379,7 +120751,11 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
120379
120751
|
}
|
120380
120752
|
}
|
120381
120753
|
} else {
|
120382
|
-
|
120754
|
+
if (activeSection.parentNode.classList.contains('pin-wrap')) {
|
120755
|
+
activeSection = activeSection.parentNode;
|
120756
|
+
} // Insert afer
|
120757
|
+
|
120758
|
+
|
120383
120759
|
dom.appendHtml(activeSection, newArea, 'afterend');
|
120384
120760
|
newSection = activeSection.nextElementSibling;
|
120385
120761
|
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
@@ -120636,10 +121012,18 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
120636
121012
|
dom.removeClass(document.querySelectorAll('.is-sidebar-content'), 'active');
|
120637
121013
|
document.body.style.overflowY = '';
|
120638
121014
|
this.addSpace();
|
120639
|
-
this.
|
120640
|
-
|
120641
|
-
|
120642
|
-
|
121015
|
+
const hasPin = this.hasPin();
|
121016
|
+
|
121017
|
+
if (hasPin) {
|
121018
|
+
this.markScrollTarget(newSection);
|
121019
|
+
this.scrollToMarkedTarget();
|
121020
|
+
} else {
|
121021
|
+
this.scrollTo(newSection, 600);
|
121022
|
+
setTimeout(() => {
|
121023
|
+
this.refreshAnim();
|
121024
|
+
}, 600);
|
121025
|
+
}
|
121026
|
+
|
120643
121027
|
return newSection;
|
120644
121028
|
} // addIdea
|
120645
121029
|
|
@@ -121141,6 +121525,16 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
121141
121525
|
}
|
121142
121526
|
|
121143
121527
|
loadStyles(mainCss, sectionCss) {
|
121528
|
+
// Wait for IFRAME loaded
|
121529
|
+
const wrapper = this.wrapperEl;
|
121530
|
+
|
121531
|
+
if (!wrapper) {
|
121532
|
+
setTimeout(() => {
|
121533
|
+
this.loadStyles(mainCss, sectionCss);
|
121534
|
+
}, 100);
|
121535
|
+
return;
|
121536
|
+
}
|
121537
|
+
|
121144
121538
|
let links = this.doc.getElementsByTagName('link');
|
121145
121539
|
let boxCssInBody;
|
121146
121540
|
|
@@ -121191,11 +121585,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
121191
121585
|
loadHtml(html) {
|
121192
121586
|
// Reset
|
121193
121587
|
this.activeBox = null;
|
121194
|
-
this.activeSection = null;
|
121588
|
+
this.activeSection = null; // Wait for IFRAME loaded
|
121589
|
+
|
121195
121590
|
const wrapper = this.wrapperEl;
|
121196
121591
|
|
121197
|
-
if (!wrapper
|
121198
|
-
|
121592
|
+
if (!wrapper) {
|
121593
|
+
setTimeout(() => {
|
121594
|
+
this.loadHtml(html);
|
121595
|
+
}, 100);
|
121596
|
+
return;
|
121199
121597
|
}
|
121200
121598
|
|
121201
121599
|
let waitSlider = false;
|
@@ -121208,10 +121606,10 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
121208
121606
|
} else {
|
121209
121607
|
waitSlider = true; // console.log('not loaded');
|
121210
121608
|
}
|
121211
|
-
}
|
121609
|
+
} // Wait for the ContentBuilder init complete
|
121610
|
+
|
121212
121611
|
|
121213
121612
|
if (!this.editor || waitSlider) {
|
121214
|
-
// Wait for the ContentBuilder init complete
|
121215
121613
|
setTimeout(() => {
|
121216
121614
|
this.loadHtml(html);
|
121217
121615
|
}, 100);
|
@@ -121267,9 +121665,17 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
121267
121665
|
this.openPreview();
|
121268
121666
|
}
|
121269
121667
|
|
121668
|
+
if (this.win.pageReRender) {
|
121669
|
+
this.win.pageReRender();
|
121670
|
+
}
|
121671
|
+
|
121672
|
+
this.wrapperEl.style.transition = 'all 400ms ease';
|
121270
121673
|
setTimeout(() => {
|
121271
|
-
this.
|
121272
|
-
|
121674
|
+
this.wrapperEl.style.opacity = 1;
|
121675
|
+
setTimeout(() => {
|
121676
|
+
wrapper.style.transition = '';
|
121677
|
+
}, 400);
|
121678
|
+
}, 400);
|
121273
121679
|
}
|
121274
121680
|
|
121275
121681
|
boxImage(url, err) {
|
@@ -121369,9 +121775,48 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
121369
121775
|
return html;
|
121370
121776
|
}
|
121371
121777
|
|
121778
|
+
hasPin() {
|
121779
|
+
if (this.wrapperEl.querySelector('.pin-wrap')) return true;
|
121780
|
+
return false;
|
121781
|
+
}
|
121782
|
+
|
121783
|
+
markScrollTarget(element) {
|
121784
|
+
this.doc.querySelectorAll('.scroll-target').forEach(el => el.classList.remove('scroll-target'));
|
121785
|
+
if (element) element.classList.add('scroll-target');
|
121786
|
+
}
|
121787
|
+
|
121788
|
+
scrollToMarkedTarget() {
|
121789
|
+
if (this.win.pageReRender) this.win.pageReRender();
|
121790
|
+
let scrollTarget = this.doc.querySelector('.scroll-target');
|
121791
|
+
|
121792
|
+
if (scrollTarget) {
|
121793
|
+
this.scrollTo(scrollTarget, 0);
|
121794
|
+
scrollTarget.classList.remove('scroll-target');
|
121795
|
+
}
|
121796
|
+
}
|
121797
|
+
|
121372
121798
|
html(bForView) {
|
121373
|
-
this.cleanupUnused();
|
121374
|
-
|
121799
|
+
this.cleanupUnused(); // Clean pinned sections
|
121800
|
+
|
121801
|
+
const wrapperEl = this.wrapperEl.cloneNode(true); // Clone the child element
|
121802
|
+
|
121803
|
+
let pinWraps = wrapperEl.querySelectorAll('.pin-wrap');
|
121804
|
+
pinWraps.forEach(pinWrap => {
|
121805
|
+
const sectionElm = pinWrap.firstElementChild;
|
121806
|
+
pinWrap.after(sectionElm);
|
121807
|
+
pinWrap.parentNode.removeChild(pinWrap);
|
121808
|
+
});
|
121809
|
+
const sections = wrapperEl.querySelectorAll('.is-section');
|
121810
|
+
sections.forEach(section => {
|
121811
|
+
if (section.hasAttribute('data-section-clone')) section.parentNode.removeChild(section);
|
121812
|
+
|
121813
|
+
if (section.hasAttribute('data-section-original')) {
|
121814
|
+
section.style.display = '';
|
121815
|
+
section.removeAttribute('data-section-original');
|
121816
|
+
}
|
121817
|
+
});
|
121818
|
+
const html = this.editor.readHtml(wrapperEl, bForView, true); // const html = this.editor.readHtml(this.wrapperEl, bForView, true);
|
121819
|
+
|
121375
121820
|
return html;
|
121376
121821
|
}
|
121377
121822
|
|