@innovastudio/contentbuilder 1.5.34 → 1.5.36
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -81534,10 +81534,14 @@ class Common {
|
|
81534
81534
|
applyPercentage(block) {
|
81535
81535
|
const zoom = this.zoom;
|
81536
81536
|
const rect = this.getRect(block);
|
81537
|
-
|
81537
|
+
let container = block.closest('.box-canvas');
|
81538
|
+
if (block.parentNode.closest(this.selector)) {
|
81539
|
+
// block is in group
|
81540
|
+
container = block.parentNode.closest(this.selector);
|
81541
|
+
}
|
81538
81542
|
const containerRect = this.getRect(container); // if container has top/left
|
81539
81543
|
|
81540
|
-
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
81544
|
+
this.horizontalRulerTop = container.querySelector('.h-ruler-top'); // no rulers in group
|
81541
81545
|
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
81542
81546
|
this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
|
81543
81547
|
this.verticalRulerLeft = container.querySelector('.v-ruler-left');
|
@@ -81549,10 +81553,10 @@ class Common {
|
|
81549
81553
|
let bottomTouched = false;
|
81550
81554
|
let leftTouched = false;
|
81551
81555
|
let rightTouched = false;
|
81552
|
-
if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
|
81553
|
-
if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
|
81554
|
-
if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
|
81555
|
-
if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
|
81556
|
+
if (this.horizontalRulerTop && this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
|
81557
|
+
if (this.horizontalRulerBottom && this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
|
81558
|
+
if (this.verticalRulerLeft && this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
|
81559
|
+
if (this.verticalRulerRight && this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
|
81556
81560
|
let isChildBlock = false;
|
81557
81561
|
if (block.parentNode.matches(this.selector)) {
|
81558
81562
|
// child block
|
@@ -81631,10 +81635,10 @@ class Common {
|
|
81631
81635
|
|
81632
81636
|
// reset
|
81633
81637
|
setTimeout(() => {
|
81634
|
-
this.horizontalRulerTop.removeAttribute('data-topTouched');
|
81635
|
-
this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
81636
|
-
this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
81637
|
-
this.verticalRulerRight.removeAttribute('data-rightTouched');
|
81638
|
+
if (this.horizontalRulerTop) this.horizontalRulerTop.removeAttribute('data-topTouched');
|
81639
|
+
if (this.horizontalRulerBottom) this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
81640
|
+
if (this.verticalRulerLeft) this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
81641
|
+
if (this.verticalRulerRight) this.verticalRulerRight.removeAttribute('data-rightTouched');
|
81638
81642
|
}, 10);
|
81639
81643
|
}
|
81640
81644
|
applyPixels(block) {
|
@@ -82132,6 +82136,8 @@ class Ruler {
|
|
82132
82136
|
this.rulerRight = null;
|
82133
82137
|
}
|
82134
82138
|
updateRulers(block) {
|
82139
|
+
if (block.parentNode.closest(this.selector)) return; // block is in group
|
82140
|
+
|
82135
82141
|
const container = block.closest('.box-canvas');
|
82136
82142
|
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
82137
82143
|
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
@@ -82156,6 +82162,8 @@ class Ruler {
|
|
82156
82162
|
this.rulerRight = null;
|
82157
82163
|
this.elements = container.querySelectorAll(this.selector);
|
82158
82164
|
this.elements.forEach(element => {
|
82165
|
+
if (element.parentNode.closest(this.selector)) return; // block is in group
|
82166
|
+
|
82159
82167
|
if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
|
82160
82168
|
|
82161
82169
|
if (block.contains(element)) return; // In case of group moving
|
@@ -82834,7 +82842,6 @@ class Resizable {
|
|
82834
82842
|
}
|
82835
82843
|
|
82836
82844
|
this.target = event.target.parentNode; // block
|
82837
|
-
|
82838
82845
|
this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
|
82839
82846
|
event.preventDefault();
|
82840
82847
|
event.stopPropagation();
|
@@ -82853,6 +82860,8 @@ class Resizable {
|
|
82853
82860
|
this.startX = touch.clientX;
|
82854
82861
|
this.startY = touch.clientY;
|
82855
82862
|
}
|
82863
|
+
this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
|
82864
|
+
if (this.clonedTarget) this.clonedTarget.style.transition = '';
|
82856
82865
|
|
82857
82866
|
//Initial
|
82858
82867
|
this.initialWidth = parseFloat(getComputedStyle(this.target).width);
|
@@ -83339,6 +83348,7 @@ class Draggable {
|
|
83339
83348
|
const y = startY - rect.top + containerRect.top;
|
83340
83349
|
target.setAttribute('data-startx', x);
|
83341
83350
|
target.setAttribute('data-starty', y);
|
83351
|
+
target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
|
83342
83352
|
|
83343
83353
|
// reset (from applyPercentage bottomTouched)
|
83344
83354
|
if (target.style.bottom) {
|
@@ -83415,33 +83425,35 @@ class Draggable {
|
|
83415
83425
|
updateBlockStyle(target) {
|
83416
83426
|
// Block placement should must not 50% outside the container
|
83417
83427
|
const container = target.closest('.box-canvas');
|
83418
|
-
|
83419
|
-
|
83420
|
-
|
83421
|
-
|
83422
|
-
|
83423
|
-
|
83424
|
-
|
83428
|
+
if (!target.parentNode.closest('.is-group')) {
|
83429
|
+
let containerHeight = container.offsetHeight;
|
83430
|
+
let containerWidth = container.offsetWidth;
|
83431
|
+
/*
|
83432
|
+
if(target.offsetTop + target.offsetHeight>=containerHeight) {
|
83433
|
+
target.style.top = containerHeight-target.offsetHeight +'px';
|
83434
|
+
}
|
83435
|
+
if(target.offsetTop<=0) {
|
83436
|
+
target.style.top = '0px';
|
83437
|
+
}
|
83438
|
+
if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
|
83439
|
+
target.style.left = (containerWidth-target.offsetWidth) +'px';
|
83440
|
+
}
|
83441
|
+
if(target.offsetLeft<=0) {
|
83442
|
+
target.style.left = '0px';
|
83443
|
+
}
|
83444
|
+
*/
|
83445
|
+
if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
|
83425
83446
|
target.style.top = '0px';
|
83426
|
-
|
83427
|
-
|
83428
|
-
target.style.
|
83429
|
-
|
83430
|
-
|
83447
|
+
}
|
83448
|
+
if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
|
83449
|
+
target.style.top = containerHeight - target.offsetHeight + 'px';
|
83450
|
+
}
|
83451
|
+
if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
|
83431
83452
|
target.style.left = '0px';
|
83432
|
-
|
83433
|
-
|
83434
|
-
|
83435
|
-
|
83436
|
-
}
|
83437
|
-
if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
|
83438
|
-
target.style.top = containerHeight - target.offsetHeight + 'px';
|
83439
|
-
}
|
83440
|
-
if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
|
83441
|
-
target.style.left = '0px';
|
83442
|
-
}
|
83443
|
-
if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
|
83444
|
-
target.style.left = containerWidth - target.offsetWidth + 'px';
|
83453
|
+
}
|
83454
|
+
if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
|
83455
|
+
target.style.left = containerWidth - target.offsetWidth + 'px';
|
83456
|
+
}
|
83445
83457
|
}
|
83446
83458
|
|
83447
83459
|
// Replace with ruler's alignment
|
@@ -87813,6 +87825,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87813
87825
|
let clonedDiv = block.cloneNode(true);
|
87814
87826
|
clonedDiv.style.top = '20%';
|
87815
87827
|
clonedDiv.style.left = '20%';
|
87828
|
+
clonedDiv.style.transform = ''; // clear anim
|
87829
|
+
clonedDiv.style.transition = '';
|
87830
|
+
clonedDiv.style.opacity = '';
|
87816
87831
|
if (builder) {
|
87817
87832
|
const cloneBuilder = clonedDiv.querySelector(this.container);
|
87818
87833
|
cloneBuilder.innerHTML = '';
|
@@ -87822,7 +87837,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87822
87837
|
this.applyBehaviorOn(cloneBuilder);
|
87823
87838
|
cloneBuilder.click();
|
87824
87839
|
} else {
|
87825
|
-
|
87840
|
+
box.appendChild(clonedDiv);
|
87826
87841
|
}
|
87827
87842
|
block.classList.remove('active');
|
87828
87843
|
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|