@innovastudio/contentbuilder 1.5.49 → 1.5.51
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -17122,6 +17122,24 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17122
17122
|
}
|
17123
17123
|
});
|
17124
17124
|
}
|
17125
|
+
let snippetid;
|
17126
|
+
if (isMobile && builder.isContentBox) {
|
17127
|
+
const items = snippetlist.querySelectorAll('.snippet-item');
|
17128
|
+
items.forEach(item => {
|
17129
|
+
if (item.classList.contains('data-click')) return;
|
17130
|
+
item.addEventListener('touchstart', () => {
|
17131
|
+
snippetid = item.getAttribute('data-id');
|
17132
|
+
}, {
|
17133
|
+
passive: false
|
17134
|
+
});
|
17135
|
+
item.addEventListener('touchend', () => {
|
17136
|
+
builder.dropSnippet(snippetid);
|
17137
|
+
}, {
|
17138
|
+
passive: false
|
17139
|
+
});
|
17140
|
+
item.classList.add('data-click');
|
17141
|
+
});
|
17142
|
+
}
|
17125
17143
|
}
|
17126
17144
|
});
|
17127
17145
|
inpSnippet.setValue(defaultcatval + '');
|
@@ -17242,14 +17260,23 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17242
17260
|
let activeBuilderArea;
|
17243
17261
|
let itemHeight;
|
17244
17262
|
const isMobile = dom.detectMobileOrTablet();
|
17263
|
+
let snippetid;
|
17245
17264
|
let useClick = false;
|
17246
17265
|
if (isMobile && builder.isContentBox) {
|
17247
17266
|
const items = snippetlist.querySelectorAll('.snippet-item');
|
17248
17267
|
items.forEach(item => {
|
17249
|
-
item.
|
17250
|
-
|
17268
|
+
if (item.classList.contains('data-click')) return;
|
17269
|
+
item.addEventListener('touchstart', () => {
|
17270
|
+
snippetid = item.getAttribute('data-id');
|
17271
|
+
}, {
|
17272
|
+
passive: false
|
17273
|
+
});
|
17274
|
+
item.addEventListener('touchend', () => {
|
17251
17275
|
builder.dropSnippet(snippetid);
|
17276
|
+
}, {
|
17277
|
+
passive: false
|
17252
17278
|
});
|
17279
|
+
item.classList.add('data-click');
|
17253
17280
|
});
|
17254
17281
|
useClick = true;
|
17255
17282
|
}
|
@@ -72863,15 +72890,19 @@ class Resizeable {
|
|
72863
72890
|
resizing();
|
72864
72891
|
}
|
72865
72892
|
getScale(container) {
|
72866
|
-
|
72867
|
-
|
72868
|
-
|
72869
|
-
|
72870
|
-
|
72871
|
-
|
72872
|
-
|
72873
|
-
|
72874
|
-
|
72893
|
+
try {
|
72894
|
+
let matrix = window.getComputedStyle(container).transform;
|
72895
|
+
if (matrix === 'none') return false;
|
72896
|
+
let values = matrix.split('(')[1];
|
72897
|
+
values = values.split(')')[0];
|
72898
|
+
values = values.split(',');
|
72899
|
+
let a = values[0];
|
72900
|
+
let b = values[1];
|
72901
|
+
let scale = Math.sqrt(a * a + b * b);
|
72902
|
+
return scale;
|
72903
|
+
} catch (e) {
|
72904
|
+
return 1;
|
72905
|
+
}
|
72875
72906
|
}
|
72876
72907
|
destroy() {
|
72877
72908
|
const pane = this.pane;
|
@@ -83310,6 +83341,7 @@ class Draggable {
|
|
83310
83341
|
passive: false
|
83311
83342
|
});
|
83312
83343
|
this.doc.addEventListener('keydown', this.handleKeyDown);
|
83344
|
+
if (this.doc !== document) document.addEventListener('keydown', this.handleKeyDown);
|
83313
83345
|
}
|
83314
83346
|
refresh() {
|
83315
83347
|
this.elements = this.doc.querySelectorAll(this.selector);
|
@@ -83335,6 +83367,7 @@ class Draggable {
|
|
83335
83367
|
this.doc.removeEventListener('mousedown', this.handleSelect);
|
83336
83368
|
this.doc.removeEventListener('touchstart', this.handleSelect);
|
83337
83369
|
this.doc.removeEventListener('keydown', this.handleKeyDown);
|
83370
|
+
if (this.doc !== document) document.removeEventListener('keydown', this.handleKeyDown);
|
83338
83371
|
const blocks = this.doc.querySelectorAll(this.selector);
|
83339
83372
|
blocks.forEach(elm => elm.classList.remove('active'));
|
83340
83373
|
}
|
@@ -83645,14 +83678,18 @@ class Draggable {
|
|
83645
83678
|
let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && elm.classList.contains('editable'));
|
83646
83679
|
if (blocks.length > 0) return;
|
83647
83680
|
if (this.onBeforeChange) this.onBeforeChange();
|
83681
|
+
let isDeleted = false;
|
83648
83682
|
blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
|
83649
83683
|
blocks.forEach(element => {
|
83650
83684
|
element.removeEventListener('mousedown', this.handleDragStart);
|
83651
83685
|
element.removeEventListener('touchstart', this.handleDragStart);
|
83652
83686
|
if (this.onDelete) this.onDelete(element);
|
83653
83687
|
element.parentNode.removeChild(element);
|
83688
|
+
isDeleted = true;
|
83654
83689
|
});
|
83655
|
-
if (this.onChange)
|
83690
|
+
if (isDeleted && this.onChange) {
|
83691
|
+
this.onChange();
|
83692
|
+
}
|
83656
83693
|
}
|
83657
83694
|
handleKeyDown(event) {
|
83658
83695
|
if (event.key === 'Delete' || event.key === 'Backspace' || event.keyCode === 46) {
|
@@ -92375,6 +92412,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92375
92412
|
});
|
92376
92413
|
let html = result[0].html;
|
92377
92414
|
let noedit = result[0].noedit;
|
92415
|
+
let html2 = '';
|
92416
|
+
if (result[0].mode === 'canvas') {
|
92417
|
+
html2 = result[0].html2;
|
92418
|
+
if (!html2) {
|
92419
|
+
html2 = `
|
92420
|
+
<div class="row">
|
92421
|
+
<div class="column pt-0 pb-0 pl-0 pr-0 flex flex-col justify-center">
|
92422
|
+
<img src="${this.opts.snippetPath}images/img-2400x1350.png" alt="">
|
92423
|
+
</div>
|
92424
|
+
</div>
|
92425
|
+
`;
|
92426
|
+
}
|
92427
|
+
}
|
92378
92428
|
let bSnippet;
|
92379
92429
|
if (html.indexOf('"row') === -1) {
|
92380
92430
|
bSnippet = true; // Just snippet (without row/column grid)
|
@@ -92453,9 +92503,22 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92453
92503
|
});
|
92454
92504
|
html = snippet.innerHTML;
|
92455
92505
|
}
|
92456
|
-
|
92506
|
+
let activeBox = this.doc.querySelector('.box-select');
|
92507
|
+
if (!activeBox) {
|
92508
|
+
activeBox = this.activeBox;
|
92509
|
+
if (!this.doc.body.contains(activeBox)) activeBox = null; // box deleted
|
92510
|
+
}
|
92511
|
+
|
92512
|
+
if (!activeBox) {
|
92513
|
+
this.doc.querySelectorAll('.is-box').forEach(box => {
|
92514
|
+
if (this.isMoreThan50PercentVisible(box)) {
|
92515
|
+
activeBox = box;
|
92516
|
+
}
|
92517
|
+
});
|
92518
|
+
}
|
92457
92519
|
const activeRow = this.doc.querySelector('.row-active');
|
92458
92520
|
if (activeRow) {
|
92521
|
+
if (html2) html = html2; // if it is canvas block, change it to normal using html2
|
92459
92522
|
this.addRow(html, activeBox);
|
92460
92523
|
} else {
|
92461
92524
|
if (activeBox) {
|
@@ -92477,41 +92540,61 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92477
92540
|
block.innerHTML = html;
|
92478
92541
|
});
|
92479
92542
|
html = snippet.innerHTML;
|
92480
|
-
|
92481
|
-
|
92482
|
-
|
92483
|
-
|
92543
|
+
this.uo.saveForUndo();
|
92544
|
+
activeBox.querySelectorAll('.is-container.container-new').forEach(elm => elm.classList.remove('container-new'));
|
92545
|
+
if (isBlock) {
|
92546
|
+
this.eb.addBlock(html, activeBox);
|
92547
|
+
} else {
|
92548
|
+
const blockTemplate = `
|
92549
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 760px;">
|
92550
|
+
<div class="is-container container-new size-18 leading-14">
|
92551
|
+
[%CONTENT%]
|
92552
|
+
</div>
|
92484
92553
|
</div>
|
92485
|
-
|
92486
|
-
|
92487
|
-
// html = blockTemplate.replace('[%CONTENT%]', html);
|
92554
|
+
`; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
|
92555
|
+
// html = blockTemplate.replace('[%CONTENT%]', html);
|
92488
92556
|
|
92489
|
-
|
92490
|
-
|
92491
|
-
|
92492
|
-
|
92493
|
-
// After snippet has been added, re-apply behavior on builder areas
|
92557
|
+
this.eb.addBlock(blockTemplate, activeBox);
|
92558
|
+
const builders = activeBox.querySelectorAll('.is-container.container-new');
|
92559
|
+
builders.forEach(builder => {
|
92560
|
+
// After snippet has been added, re-apply behavior on builder areas
|
92494
92561
|
|
92495
|
-
|
92496
|
-
|
92497
|
-
|
92498
|
-
|
92499
|
-
|
92500
|
-
|
92562
|
+
var range = document.createRange();
|
92563
|
+
range.setStart(builder, 0);
|
92564
|
+
builder.appendChild(range.createContextualFragment(html));
|
92565
|
+
this.applyBehaviorOn(builder);
|
92566
|
+
builder.classList.remove('container-new');
|
92567
|
+
});
|
92568
|
+
}
|
92501
92569
|
this.opts.onChange();
|
92502
92570
|
this.opts.onRender();
|
92503
92571
|
if (this.opts.onBlockCanvasAdd) this.opts.onBlockCanvasAdd();
|
92504
92572
|
} else {
|
92505
92573
|
let container = activeBox.querySelector('.builder-active');
|
92506
92574
|
if (container) {
|
92575
|
+
if (html2) html = html2;
|
92507
92576
|
this.addRow(html, activeBox);
|
92508
92577
|
} else {
|
92509
92578
|
container = activeBox.querySelector('.is-container');
|
92510
92579
|
if (container) {
|
92580
|
+
if (html2) html = html2;
|
92511
92581
|
this.addRow(html, activeBox);
|
92512
92582
|
}
|
92513
92583
|
}
|
92514
92584
|
}
|
92585
|
+
} else {
|
92586
|
+
// No Active Box => Add Section
|
92587
|
+
|
92588
|
+
let sectionTemplate = this.settings.sectionTemplate;
|
92589
|
+
const occurrences = this.dom.countOccurrences(html, 'column');
|
92590
|
+
if (occurrences === 1) {
|
92591
|
+
sectionTemplate = sectionTemplate.replace('is-content-1000', 'is-content-700');
|
92592
|
+
}
|
92593
|
+
html = sectionTemplate.replace('[%CONTENT%]', html);
|
92594
|
+
const wrapper = this.doc.querySelector(this.page);
|
92595
|
+
wrapper.insertAdjacentHTML('afterbegin', html);
|
92596
|
+
this.activeBox = wrapper.querySelector('.is-box');
|
92597
|
+
if (this.opts.onBlockSectionAdd) this.opts.onBlockSectionAdd();
|
92515
92598
|
}
|
92516
92599
|
}
|
92517
92600
|
this.activeCol = null;
|
@@ -92552,7 +92635,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92552
92635
|
let builderActive = box.querySelector('.builder-active');
|
92553
92636
|
if (builderActive) this.applyBehaviorOn(builderActive);else {
|
92554
92637
|
builderActive = box.querySelector('.is-builder');
|
92555
|
-
this.applyBehaviorOn(builderActive);
|
92638
|
+
if (builderActive) this.applyBehaviorOn(builderActive);
|
92556
92639
|
}
|
92557
92640
|
let cellElement = rowElement.querySelector('div');
|
92558
92641
|
if (cellElement) cellElement.click(); //change active block to the newly created
|
@@ -92565,6 +92648,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92565
92648
|
this.opts.onChange();
|
92566
92649
|
this.opts.onRender();
|
92567
92650
|
}
|
92651
|
+
isMoreThan50PercentVisible(el) {
|
92652
|
+
const rect = el.getBoundingClientRect();
|
92653
|
+
const windowHeight = this.win.innerHeight || this.doc.documentElement.clientHeight;
|
92654
|
+
|
92655
|
+
// Calculate the visible part of the element in the viewport
|
92656
|
+
const visibleHeight = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
|
92657
|
+
|
92658
|
+
// Check if more than 50% of the element is visible
|
92659
|
+
return visibleHeight / rect.height > 0.5;
|
92660
|
+
}
|
92568
92661
|
sectionDropSetup() {
|
92569
92662
|
if (this.blockContainer) {
|
92570
92663
|
this.sortableOnCanvas = [];
|