@innovastudio/contentbox 1.6.48 → 1.6.49
Sign up to get free protection for your applications and to get access to all the features.
@@ -1159,8 +1159,7 @@ class SideBar {
|
|
1159
1159
|
this.closeSidebar(); // Close all modeless dialogs
|
1160
1160
|
|
1161
1161
|
if (this.builder.editbox) this.builder.editbox.close();
|
1162
|
-
if (this.builder.editsection) this.builder.editsection.close();
|
1163
|
-
this.builder.animateScroll.close(); // Close anim side panel
|
1162
|
+
if (this.builder.editsection) this.builder.editsection.close(); // this.builder.animateScroll.close(); // Close anim side panel
|
1164
1163
|
|
1165
1164
|
if (toggle) return;
|
1166
1165
|
let panelId = btn.getAttribute('data-content');
|
@@ -13095,18 +13094,20 @@ class PanelBox {
|
|
13095
13094
|
</div>
|
13096
13095
|
|
13097
13096
|
<div class="div-boxcanvas">
|
13098
|
-
<div class="breakpoint-list"></div>
|
13099
13097
|
|
13100
13098
|
<div class="adjustboxheight">
|
13101
13099
|
<div class="label mt-3">${out('Height')}:</div>
|
13102
|
-
<div class="group">
|
13100
|
+
<div class="group" style="margin-top:5px">
|
13101
|
+
<button title="${out('Fixed')}" data-boxheight="set" style="width:75px">${out('Fixed')}</button>
|
13103
13102
|
<button title="${out('Decrease')}" data-boxheight="-"><svg><use xlink:href="#icon-minus"></use></svg></button>
|
13104
13103
|
<button title="${out('Increase')}" data-boxheight="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
|
13105
13104
|
<button title="${out('Clear')}" data-boxheight=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
|
13106
13105
|
</div>
|
13107
13106
|
</div>
|
13108
13107
|
|
13109
|
-
<
|
13108
|
+
<div class="breakpoint-list"></div>
|
13109
|
+
|
13110
|
+
<label class="label checkbox mt-4" style="margin-bottom:15px">
|
13110
13111
|
<input type="checkbox" class="chk-auto-layout" />
|
13111
13112
|
<span>${out('Auto Layout on Mobile')}</span>
|
13112
13113
|
</label>
|
@@ -13539,6 +13540,8 @@ class PanelBox {
|
|
13539
13540
|
newHeight = currentHeight + 50;
|
13540
13541
|
} else if (s === '-') {
|
13541
13542
|
newHeight = currentHeight - 50;
|
13543
|
+
} else if (s === 'set') {
|
13544
|
+
newHeight = currentHeight;
|
13542
13545
|
} else {
|
13543
13546
|
newHeight = '';
|
13544
13547
|
}
|
@@ -13556,7 +13559,14 @@ class PanelBox {
|
|
13556
13559
|
box.removeAttribute('data--h-' + breakpoint);
|
13557
13560
|
} else {
|
13558
13561
|
box.removeAttribute('data--h', newHeight);
|
13559
|
-
}
|
13562
|
+
} // const attributes = box.attributes;
|
13563
|
+
// for (let i = 0; i < attributes.length; i++) {
|
13564
|
+
// const attributeName = attributes[i].name;
|
13565
|
+
// if (attributeName.includes('data--h-')) {
|
13566
|
+
// box.removeAttribute(attributeName);
|
13567
|
+
// }
|
13568
|
+
// }
|
13569
|
+
|
13560
13570
|
|
13561
13571
|
box.style.height = '';
|
13562
13572
|
}
|
@@ -13920,6 +13930,9 @@ class PanelBox {
|
|
13920
13930
|
if (attributeName.includes('data--h-')) {
|
13921
13931
|
let val = attributeName.replace('data--h-', '');
|
13922
13932
|
if (!breakpoints.includes(val)) breakpoints.push(val);
|
13933
|
+
} else if (attributeName === 'data--h') {
|
13934
|
+
let val = 'default';
|
13935
|
+
if (!breakpoints.includes(val)) breakpoints.push(val);
|
13923
13936
|
}
|
13924
13937
|
}
|
13925
13938
|
|
@@ -13933,7 +13946,7 @@ class PanelBox {
|
|
13933
13946
|
for (let i = 0; i < attributes.length; i++) {
|
13934
13947
|
const attributeName = attributes[i].name;
|
13935
13948
|
|
13936
|
-
if (attributeName.includes('data--h
|
13949
|
+
if (attributeName.includes('data--h')) {
|
13937
13950
|
attributesToRemove.push(attributeName);
|
13938
13951
|
}
|
13939
13952
|
}
|
@@ -13952,19 +13965,22 @@ class PanelBox {
|
|
13952
13965
|
if (!activeBox) return;
|
13953
13966
|
const breakpoints = this.getBreakpoints(activeBox);
|
13954
13967
|
breakpoints.forEach(item => {
|
13955
|
-
|
13968
|
+
if (item === 'default') {
|
13969
|
+
s += `<button data-breakpoint="1920" style="width:60px">${out('default')}</button>`;
|
13970
|
+
} else {
|
13971
|
+
s += `<button data-breakpoint="${item}" style="width:60px">${item}px</button>`;
|
13972
|
+
}
|
13956
13973
|
});
|
13957
13974
|
|
13958
13975
|
if (s !== '') {
|
13959
13976
|
this.breakpointList.innerHTML = `
|
13960
13977
|
|
13961
|
-
|
13978
|
+
<!--<div class="label mt-1">${out('Breakpoints')}:</div>-->
|
13962
13979
|
|
13963
13980
|
<div class="flex">
|
13964
13981
|
<div class="mr-2">
|
13965
13982
|
<div class="group breakpoint-buttons" style="width:auto;display:inline-flex;max-width:135px">
|
13966
13983
|
${s}
|
13967
|
-
<button data-breakpoint="1920" style="width:60px">${out('default')}</button>
|
13968
13984
|
</div>
|
13969
13985
|
</div>
|
13970
13986
|
<div>
|
@@ -15560,8 +15576,17 @@ class PanelBlock {
|
|
15560
15576
|
|
15561
15577
|
blockOverlay() {
|
15562
15578
|
let block = this.builder.controlpanel.activeBlock;
|
15563
|
-
if (!block) return false;
|
15564
|
-
|
15579
|
+
if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
|
15580
|
+
|
15581
|
+
let children = block.children;
|
15582
|
+
let blockOverlay = null;
|
15583
|
+
|
15584
|
+
for (let i = 0; i < children.length; i++) {
|
15585
|
+
if (children[i].classList.contains('is-block-overlay')) {
|
15586
|
+
blockOverlay = children[i];
|
15587
|
+
break;
|
15588
|
+
}
|
15589
|
+
}
|
15565
15590
|
|
15566
15591
|
if (!blockOverlay) {
|
15567
15592
|
block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
|
@@ -17531,13 +17556,25 @@ class PanelColumn {
|
|
17531
17556
|
activeColumn.classList.add('xs-hidden');
|
17532
17557
|
} else if (target === 'sm') {
|
17533
17558
|
activeColumn.classList.add('sm-hidden');
|
17534
|
-
activeColumn.parentNode.classList.add('sm-autofit');
|
17559
|
+
activeColumn.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
|
17560
|
+
|
17561
|
+
activeColumn.classList.add('xs-hidden');
|
17535
17562
|
} else if (target === 'md') {
|
17536
17563
|
activeColumn.classList.add('md-hidden');
|
17537
|
-
activeColumn.parentNode.classList.add('md-autofit');
|
17564
|
+
activeColumn.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
|
17565
|
+
|
17566
|
+
activeColumn.classList.add('sm-hidden');
|
17567
|
+
activeColumn.parentNode.classList.add('sm-autofit');
|
17568
|
+
activeColumn.classList.add('xs-hidden');
|
17538
17569
|
} else if (target === '') {
|
17539
17570
|
activeColumn.classList.add('desktop-hidden');
|
17540
|
-
activeColumn.parentNode.classList.add('desktop-autofit');
|
17571
|
+
activeColumn.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
|
17572
|
+
|
17573
|
+
activeColumn.classList.add('md-hidden');
|
17574
|
+
activeColumn.parentNode.classList.add('md-autofit');
|
17575
|
+
activeColumn.classList.add('sm-hidden');
|
17576
|
+
activeColumn.parentNode.classList.add('sm-autofit');
|
17577
|
+
activeColumn.classList.add('xs-hidden');
|
17541
17578
|
}
|
17542
17579
|
}
|
17543
17580
|
|
@@ -17881,6 +17918,23 @@ class PanelRow {
|
|
17881
17918
|
let screenMode = this.builder.screenMode;
|
17882
17919
|
if (screenMode === 'desktop') prefix = 'desktop-items-';else if (screenMode === 'tablet-landscape') prefix = 'md-items-';else if (screenMode === 'tablet') prefix = 'sm-items-';else if (screenMode === 'mobile') prefix = 'xs-items-';
|
17883
17920
|
|
17921
|
+
if (this.builder.doc.body.hasAttribute('data-breakpoint')) {
|
17922
|
+
const breakpoint = this.builder.doc.body.getAttribute('data-breakpoint');
|
17923
|
+
|
17924
|
+
if (breakpoint <= 760) {
|
17925
|
+
prefix = 'xs-items-';
|
17926
|
+
} else if (760 < breakpoint && breakpoint <= 970) {
|
17927
|
+
prefix = 'sm-items-';
|
17928
|
+
} else if (970 < breakpoint && breakpoint <= 1280) {
|
17929
|
+
prefix = 'md-items-';
|
17930
|
+
} else if (1280 < breakpoint && breakpoint <= 1920) {
|
17931
|
+
prefix = 'desktop-items-';
|
17932
|
+
} else {
|
17933
|
+
// 1920<breakpoint
|
17934
|
+
prefix = 'desktop-items-';
|
17935
|
+
}
|
17936
|
+
}
|
17937
|
+
|
17884
17938
|
for (let j = 1; j <= 6; j++) {
|
17885
17939
|
activeRow.classList.remove(prefix + j);
|
17886
17940
|
}
|
@@ -18144,13 +18198,25 @@ class PanelRow {
|
|
18144
18198
|
activeRow.classList.add('xs-hidden');
|
18145
18199
|
} else if (target === 'sm') {
|
18146
18200
|
activeRow.classList.add('sm-hidden');
|
18147
|
-
activeRow.parentNode.classList.add('sm-autofit');
|
18201
|
+
activeRow.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
|
18202
|
+
|
18203
|
+
activeRow.classList.add('xs-hidden');
|
18148
18204
|
} else if (target === 'md') {
|
18149
18205
|
activeRow.classList.add('md-hidden');
|
18150
|
-
activeRow.parentNode.classList.add('md-autofit');
|
18206
|
+
activeRow.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
|
18207
|
+
|
18208
|
+
activeRow.classList.add('sm-hidden');
|
18209
|
+
activeRow.parentNode.classList.add('sm-autofit');
|
18210
|
+
activeRow.classList.add('xs-hidden');
|
18151
18211
|
} else if (target === '') {
|
18152
18212
|
activeRow.classList.add('desktop-hidden');
|
18153
|
-
activeRow.parentNode.classList.add('desktop-autofit');
|
18213
|
+
activeRow.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
|
18214
|
+
|
18215
|
+
activeRow.classList.add('md-hidden');
|
18216
|
+
activeRow.parentNode.classList.add('md-autofit');
|
18217
|
+
activeRow.classList.add('sm-hidden');
|
18218
|
+
activeRow.parentNode.classList.add('sm-autofit');
|
18219
|
+
activeRow.classList.add('xs-hidden');
|
18154
18220
|
}
|
18155
18221
|
}
|
18156
18222
|
|
@@ -22307,7 +22373,6 @@ class BlockOptions {
|
|
22307
22373
|
|
22308
22374
|
<div class="panel-pop unit-1" tabIndex="-1" aria-hidden="true">
|
22309
22375
|
<button title="px">px</button>
|
22310
|
-
<button title="px">%</button>
|
22311
22376
|
<button title="vw">vw</button>
|
22312
22377
|
<button title="vw">vh</button>
|
22313
22378
|
<button title="em">em</button>
|
@@ -22487,8 +22552,17 @@ class BlockOptions {
|
|
22487
22552
|
|
22488
22553
|
blockOverlay() {
|
22489
22554
|
let block = this.builder.controlpanel.activeBlock;
|
22490
|
-
if (!block) return false;
|
22491
|
-
|
22555
|
+
if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
|
22556
|
+
|
22557
|
+
let children = block.children;
|
22558
|
+
let blockOverlay = null;
|
22559
|
+
|
22560
|
+
for (let i = 0; i < children.length; i++) {
|
22561
|
+
if (children[i].classList.contains('is-block-overlay')) {
|
22562
|
+
blockOverlay = children[i];
|
22563
|
+
break;
|
22564
|
+
}
|
22565
|
+
}
|
22492
22566
|
|
22493
22567
|
if (!blockOverlay) {
|
22494
22568
|
block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
|
@@ -23881,38 +23955,45 @@ class Element$2 {
|
|
23881
23955
|
}
|
23882
23956
|
|
23883
23957
|
parseStyle(element, property) {
|
23884
|
-
|
23885
|
-
|
23886
|
-
|
23887
|
-
|
23888
|
-
|
23889
|
-
|
23890
|
-
|
23891
|
-
|
23892
|
-
|
23893
|
-
|
23894
|
-
|
23895
|
-
|
23896
|
-
|
23897
|
-
|
23898
|
-
|
23899
|
-
|
23900
|
-
|
23901
|
-
|
23902
|
-
|
23903
|
-
if (match) {
|
23904
|
-
const numericValue = match[1];
|
23905
|
-
const unit = match[2];
|
23906
|
-
return {
|
23907
|
-
value: numericValue,
|
23908
|
-
unit
|
23909
|
-
};
|
23958
|
+
try {
|
23959
|
+
const styleValue = element.style[property];
|
23960
|
+
const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
|
23961
|
+
|
23962
|
+
if (property === 'line-height') {
|
23963
|
+
// line-height can have no unit, ex: 1, 1.4, etc
|
23964
|
+
if (match) {
|
23965
|
+
const numericValue = match[1];
|
23966
|
+
const unit = match[2];
|
23967
|
+
return {
|
23968
|
+
value: numericValue,
|
23969
|
+
unit
|
23970
|
+
};
|
23971
|
+
} else {
|
23972
|
+
return {
|
23973
|
+
value: styleValue,
|
23974
|
+
unit: ''
|
23975
|
+
};
|
23976
|
+
}
|
23910
23977
|
} else {
|
23911
|
-
|
23912
|
-
|
23913
|
-
unit
|
23914
|
-
|
23978
|
+
if (match) {
|
23979
|
+
const numericValue = match[1];
|
23980
|
+
const unit = match[2];
|
23981
|
+
return {
|
23982
|
+
value: numericValue,
|
23983
|
+
unit
|
23984
|
+
};
|
23985
|
+
} else {
|
23986
|
+
return {
|
23987
|
+
value: '',
|
23988
|
+
unit: 'px'
|
23989
|
+
};
|
23990
|
+
}
|
23915
23991
|
}
|
23992
|
+
} catch (e) {
|
23993
|
+
return {
|
23994
|
+
value: '',
|
23995
|
+
unit: 'px'
|
23996
|
+
};
|
23916
23997
|
}
|
23917
23998
|
}
|
23918
23999
|
|
@@ -24111,13 +24192,25 @@ class Element$2 {
|
|
24111
24192
|
elm.classList.add('xs-hidden');
|
24112
24193
|
} else if (target === 'sm') {
|
24113
24194
|
elm.classList.add('sm-hidden');
|
24114
|
-
elm.parentNode.classList.add('sm-autofit');
|
24195
|
+
elm.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
|
24196
|
+
|
24197
|
+
elm.classList.add('xs-hidden');
|
24115
24198
|
} else if (target === 'md') {
|
24116
24199
|
elm.classList.add('md-hidden');
|
24117
|
-
elm.parentNode.classList.add('md-autofit');
|
24200
|
+
elm.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
|
24201
|
+
|
24202
|
+
elm.classList.add('sm-hidden');
|
24203
|
+
elm.parentNode.classList.add('sm-autofit');
|
24204
|
+
elm.classList.add('xs-hidden');
|
24118
24205
|
} else if (target === '') {
|
24119
24206
|
elm.classList.add('desktop-hidden');
|
24120
|
-
elm.parentNode.classList.add('desktop-autofit');
|
24207
|
+
elm.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
|
24208
|
+
|
24209
|
+
elm.classList.add('md-hidden');
|
24210
|
+
elm.parentNode.classList.add('md-autofit');
|
24211
|
+
elm.classList.add('sm-hidden');
|
24212
|
+
elm.parentNode.classList.add('sm-autofit');
|
24213
|
+
elm.classList.add('xs-hidden');
|
24121
24214
|
}
|
24122
24215
|
}
|
24123
24216
|
|
@@ -24238,16 +24331,19 @@ class Shadow {
|
|
24238
24331
|
});
|
24239
24332
|
const btnCleanShadow = dialog.querySelector('.btn-clean-shadow');
|
24240
24333
|
btnCleanShadow.addEventListener('click', () => {
|
24334
|
+
this.builder.editor.saveForUndo();
|
24241
24335
|
let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
|
24242
24336
|
|
24243
24337
|
if (elm) {
|
24244
24338
|
elm.style.boxShadow = '';
|
24339
|
+
this.builder.controlpanel.objDialogElement.refresh();
|
24245
24340
|
} else {
|
24246
24341
|
elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
|
24247
24342
|
if (elm) elm.style.boxShadow = '';
|
24343
|
+
this.getState();
|
24248
24344
|
}
|
24249
24345
|
|
24250
|
-
this.builder.
|
24346
|
+
this.builder.onChange();
|
24251
24347
|
}); // Adjustments
|
24252
24348
|
|
24253
24349
|
const inpAdjustX = dialog.querySelector('.inp-shadow-x');
|
@@ -107680,10 +107776,14 @@ class Common {
|
|
107680
107776
|
applyPercentage(block) {
|
107681
107777
|
const zoom = this.zoom;
|
107682
107778
|
const rect = this.getRect(block);
|
107683
|
-
|
107779
|
+
let container = block.closest('.box-canvas');
|
107780
|
+
if (block.parentNode.closest(this.selector)) {
|
107781
|
+
// block is in group
|
107782
|
+
container = block.parentNode.closest(this.selector);
|
107783
|
+
}
|
107684
107784
|
const containerRect = this.getRect(container); // if container has top/left
|
107685
107785
|
|
107686
|
-
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
107786
|
+
this.horizontalRulerTop = container.querySelector('.h-ruler-top'); // no rulers in group
|
107687
107787
|
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
107688
107788
|
this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
|
107689
107789
|
this.verticalRulerLeft = container.querySelector('.v-ruler-left');
|
@@ -107695,10 +107795,10 @@ class Common {
|
|
107695
107795
|
let bottomTouched = false;
|
107696
107796
|
let leftTouched = false;
|
107697
107797
|
let rightTouched = false;
|
107698
|
-
if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
|
107699
|
-
if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
|
107700
|
-
if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
|
107701
|
-
if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
|
107798
|
+
if (this.horizontalRulerTop && this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
|
107799
|
+
if (this.horizontalRulerBottom && this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
|
107800
|
+
if (this.verticalRulerLeft && this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
|
107801
|
+
if (this.verticalRulerRight && this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
|
107702
107802
|
let isChildBlock = false;
|
107703
107803
|
if (block.parentNode.matches(this.selector)) {
|
107704
107804
|
// child block
|
@@ -107777,10 +107877,10 @@ class Common {
|
|
107777
107877
|
|
107778
107878
|
// reset
|
107779
107879
|
setTimeout(() => {
|
107780
|
-
this.horizontalRulerTop.removeAttribute('data-topTouched');
|
107781
|
-
this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
107782
|
-
this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
107783
|
-
this.verticalRulerRight.removeAttribute('data-rightTouched');
|
107880
|
+
if (this.horizontalRulerTop) this.horizontalRulerTop.removeAttribute('data-topTouched');
|
107881
|
+
if (this.horizontalRulerBottom) this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
107882
|
+
if (this.verticalRulerLeft) this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
107883
|
+
if (this.verticalRulerRight) this.verticalRulerRight.removeAttribute('data-rightTouched');
|
107784
107884
|
}, 10);
|
107785
107885
|
}
|
107786
107886
|
applyPixels(block) {
|
@@ -108278,6 +108378,8 @@ class Ruler {
|
|
108278
108378
|
this.rulerRight = null;
|
108279
108379
|
}
|
108280
108380
|
updateRulers(block) {
|
108381
|
+
if (block.parentNode.closest(this.selector)) return; // block is in group
|
108382
|
+
|
108281
108383
|
const container = block.closest('.box-canvas');
|
108282
108384
|
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
108283
108385
|
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
@@ -108302,6 +108404,8 @@ class Ruler {
|
|
108302
108404
|
this.rulerRight = null;
|
108303
108405
|
this.elements = container.querySelectorAll(this.selector);
|
108304
108406
|
this.elements.forEach(element => {
|
108407
|
+
if (element.parentNode.closest(this.selector)) return; // block is in group
|
108408
|
+
|
108305
108409
|
if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
|
108306
108410
|
|
108307
108411
|
if (block.contains(element)) return; // In case of group moving
|
@@ -108980,7 +109084,6 @@ class Resizable {
|
|
108980
109084
|
}
|
108981
109085
|
|
108982
109086
|
this.target = event.target.parentNode; // block
|
108983
|
-
|
108984
109087
|
this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
|
108985
109088
|
event.preventDefault();
|
108986
109089
|
event.stopPropagation();
|
@@ -108999,6 +109102,8 @@ class Resizable {
|
|
108999
109102
|
this.startX = touch.clientX;
|
109000
109103
|
this.startY = touch.clientY;
|
109001
109104
|
}
|
109105
|
+
this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
|
109106
|
+
if (this.clonedTarget) this.clonedTarget.style.transition = '';
|
109002
109107
|
|
109003
109108
|
//Initial
|
109004
109109
|
this.initialWidth = parseFloat(getComputedStyle(this.target).width);
|
@@ -109485,6 +109590,7 @@ class Draggable {
|
|
109485
109590
|
const y = startY - rect.top + containerRect.top;
|
109486
109591
|
target.setAttribute('data-startx', x);
|
109487
109592
|
target.setAttribute('data-starty', y);
|
109593
|
+
target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
|
109488
109594
|
|
109489
109595
|
// reset (from applyPercentage bottomTouched)
|
109490
109596
|
if (target.style.bottom) {
|
@@ -109561,33 +109667,35 @@ class Draggable {
|
|
109561
109667
|
updateBlockStyle(target) {
|
109562
109668
|
// Block placement should must not 50% outside the container
|
109563
109669
|
const container = target.closest('.box-canvas');
|
109564
|
-
|
109565
|
-
|
109566
|
-
|
109567
|
-
|
109568
|
-
|
109569
|
-
|
109570
|
-
|
109670
|
+
if (!target.parentNode.closest('.is-group')) {
|
109671
|
+
let containerHeight = container.offsetHeight;
|
109672
|
+
let containerWidth = container.offsetWidth;
|
109673
|
+
/*
|
109674
|
+
if(target.offsetTop + target.offsetHeight>=containerHeight) {
|
109675
|
+
target.style.top = containerHeight-target.offsetHeight +'px';
|
109676
|
+
}
|
109677
|
+
if(target.offsetTop<=0) {
|
109678
|
+
target.style.top = '0px';
|
109679
|
+
}
|
109680
|
+
if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
|
109681
|
+
target.style.left = (containerWidth-target.offsetWidth) +'px';
|
109682
|
+
}
|
109683
|
+
if(target.offsetLeft<=0) {
|
109684
|
+
target.style.left = '0px';
|
109685
|
+
}
|
109686
|
+
*/
|
109687
|
+
if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
|
109571
109688
|
target.style.top = '0px';
|
109572
|
-
|
109573
|
-
|
109574
|
-
target.style.
|
109575
|
-
|
109576
|
-
|
109689
|
+
}
|
109690
|
+
if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
|
109691
|
+
target.style.top = containerHeight - target.offsetHeight + 'px';
|
109692
|
+
}
|
109693
|
+
if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
|
109577
109694
|
target.style.left = '0px';
|
109578
|
-
|
109579
|
-
|
109580
|
-
|
109581
|
-
|
109582
|
-
}
|
109583
|
-
if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
|
109584
|
-
target.style.top = containerHeight - target.offsetHeight + 'px';
|
109585
|
-
}
|
109586
|
-
if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
|
109587
|
-
target.style.left = '0px';
|
109588
|
-
}
|
109589
|
-
if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
|
109590
|
-
target.style.left = containerWidth - target.offsetWidth + 'px';
|
109695
|
+
}
|
109696
|
+
if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
|
109697
|
+
target.style.left = containerWidth - target.offsetWidth + 'px';
|
109698
|
+
}
|
109591
109699
|
}
|
109592
109700
|
|
109593
109701
|
// Replace with ruler's alignment
|
@@ -113959,6 +114067,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113959
114067
|
let clonedDiv = block.cloneNode(true);
|
113960
114068
|
clonedDiv.style.top = '20%';
|
113961
114069
|
clonedDiv.style.left = '20%';
|
114070
|
+
clonedDiv.style.transform = ''; // clear anim
|
114071
|
+
clonedDiv.style.transition = '';
|
114072
|
+
clonedDiv.style.opacity = '';
|
113962
114073
|
if (builder) {
|
113963
114074
|
const cloneBuilder = clonedDiv.querySelector(this.container);
|
113964
114075
|
cloneBuilder.innerHTML = '';
|
@@ -113968,7 +114079,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113968
114079
|
this.applyBehaviorOn(cloneBuilder);
|
113969
114080
|
cloneBuilder.click();
|
113970
114081
|
} else {
|
113971
|
-
|
114082
|
+
box.appendChild(clonedDiv);
|
113972
114083
|
}
|
113973
114084
|
block.classList.remove('active');
|
113974
114085
|
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
@@ -119029,6 +119140,23 @@ class AnimateScroll {
|
|
119029
119140
|
this.builderStuff = builderStuff;
|
119030
119141
|
let html = `
|
119031
119142
|
<style>
|
119143
|
+
|
119144
|
+
.is-modal.animatescroll {
|
119145
|
+
width: 370px !important;
|
119146
|
+
height: 85vh !important;
|
119147
|
+
top: 10vh !important;
|
119148
|
+
bottom: auto !important;
|
119149
|
+
left: auto !important;
|
119150
|
+
right: 90px !important;
|
119151
|
+
z-index: 10002 !important;
|
119152
|
+
font-size: 12px;
|
119153
|
+
max-height: 1006px;
|
119154
|
+
}
|
119155
|
+
.animatescroll .is-modal-bar {
|
119156
|
+
font-size: 12px !important;
|
119157
|
+
}
|
119158
|
+
|
119159
|
+
|
119032
119160
|
#_cbhtml .is-side.animatescroll,
|
119033
119161
|
.is-ui .is-side.animatescroll {
|
119034
119162
|
width: 370px;
|
@@ -119075,7 +119203,7 @@ class AnimateScroll {
|
|
119075
119203
|
position: absolute;
|
119076
119204
|
top: 0;
|
119077
119205
|
box-sizing: border-box;
|
119078
|
-
border-top: transparent
|
119206
|
+
border-top: transparent 208px solid !important;
|
119079
119207
|
}
|
119080
119208
|
#divEnterAnim, #divLeaveAnim, #divAnimSettings {
|
119081
119209
|
border-top: transparent 55px solid !important;
|
@@ -119163,7 +119291,7 @@ class AnimateScroll {
|
|
119163
119291
|
}
|
119164
119292
|
|
119165
119293
|
.div-anim-settings,.div-wizard-settings{
|
119166
|
-
height:
|
119294
|
+
height: 100%;
|
119167
119295
|
}
|
119168
119296
|
.div-wizard-settings{
|
119169
119297
|
padding: 10px 15px 0 18px !important;
|
@@ -119174,19 +119302,23 @@ class AnimateScroll {
|
|
119174
119302
|
}
|
119175
119303
|
</style>
|
119176
119304
|
|
119177
|
-
<div class="is-
|
119178
|
-
|
119179
|
-
<
|
119180
|
-
|
119181
|
-
|
119305
|
+
<div class="is-modal is-modal-content animatescroll keep-selection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
119306
|
+
<div class="is-modal-bar is-draggable" draggable="">
|
119307
|
+
<span>${out('Animation')}</span>
|
119308
|
+
<button class="is-modal-close" tabindex="-1" title="${out('Close')}">
|
119309
|
+
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
119310
|
+
</button>
|
119311
|
+
</div>
|
119312
|
+
<div style="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
|
119182
119313
|
|
119183
|
-
<button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:
|
119314
|
+
<button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:30px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
|
119184
119315
|
|
119185
119316
|
<div class="div-anim-settings" style="display:none">
|
119186
119317
|
|
119187
119318
|
<div class="div-anim-apply-to" style="padding:18px 10px 22px 18px;z-index:2;position:relative;">
|
119188
119319
|
<div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
|
119189
|
-
<div class="flex-wrap">
|
119320
|
+
<div class="flex-wrap" style="height:70px">
|
119321
|
+
<button title="${out('Block')}" class="cmd-target on" data-command="target" data-value="block">${out('Block')}</button>
|
119190
119322
|
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element">${out('Element')}</button>
|
119191
119323
|
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column">${out('Column')}</button>
|
119192
119324
|
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row">${out('Row')}</button>
|
@@ -119961,7 +120093,7 @@ class AnimateScroll {
|
|
119961
120093
|
</button>
|
119962
120094
|
</div>
|
119963
120095
|
|
119964
|
-
<div class="anim-preset-list" style="height: calc(
|
120096
|
+
<div class="anim-preset-list" style="height: calc(100% - 63px);
|
119965
120097
|
overflow: auto;
|
119966
120098
|
width: 347px;">
|
119967
120099
|
<div style="display:flex;
|
@@ -120015,14 +120147,15 @@ class AnimateScroll {
|
|
120015
120147
|
|
120016
120148
|
</div>
|
120017
120149
|
`;
|
120018
|
-
dom$2.appendHtml(builderStuff, html);
|
120019
|
-
|
120150
|
+
dom$2.appendHtml(builderStuff, html); // const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
|
120151
|
+
|
120152
|
+
const modalAnimateScroll = builderStuff.querySelector('.is-modal.animatescroll');
|
120020
120153
|
this.modalAnimateScroll = modalAnimateScroll;
|
120021
120154
|
const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
|
120022
120155
|
this.divEnterAnim = divEnterAnim;
|
120023
120156
|
const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
|
120024
120157
|
this.divLeaveAnim = divLeaveAnim;
|
120025
|
-
const btnClose = modalAnimateScroll.querySelector('.is-
|
120158
|
+
const btnClose = modalAnimateScroll.querySelector('.is-modal-close');
|
120026
120159
|
btnClose.addEventListener('click', () => {
|
120027
120160
|
this.close();
|
120028
120161
|
});
|
@@ -121514,7 +121647,7 @@ class AnimateScroll {
|
|
121514
121647
|
if (activeCol) section = activeCol.closest('.is-section');
|
121515
121648
|
let elms; // elms = section.querySelectorAll('*');
|
121516
121649
|
|
121517
|
-
elms =
|
121650
|
+
elms = section.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]');
|
121518
121651
|
elms.forEach(elm => {
|
121519
121652
|
elm.removeAttribute('data-center');
|
121520
121653
|
elm.removeAttribute('data-center-top');
|
@@ -121549,20 +121682,21 @@ class AnimateScroll {
|
|
121549
121682
|
elm.removeAttribute('data-hidden-onstart');
|
121550
121683
|
elm.style.transform = '';
|
121551
121684
|
elm.style.transition = '';
|
121552
|
-
elm.style.opacity = '';
|
121685
|
+
elm.style.opacity = '';
|
121686
|
+
this.restart(); // console.log(elm)
|
121553
121687
|
});
|
121554
121688
|
elms = section.querySelectorAll('.is-animated');
|
121555
121689
|
elms.forEach(elm => {
|
121556
121690
|
// if(elm.classList.contains('is-overlay-bg')) return;
|
121557
121691
|
this.cleanupBasic(elm);
|
121558
121692
|
this.cleanupDelay(elm);
|
121559
|
-
});
|
121560
|
-
|
121561
|
-
|
121562
|
-
|
121563
|
-
|
121564
|
-
|
121565
|
-
|
121693
|
+
}); // setTimeout(()=>{
|
121694
|
+
// // if (this.builder.win.skrollrr) {
|
121695
|
+
// // this.builder.win.skrollrr.refresh();
|
121696
|
+
// // }
|
121697
|
+
// this.restart();
|
121698
|
+
// },30);
|
121699
|
+
// Refresh
|
121566
121700
|
|
121567
121701
|
this.builder.settings.onRender();
|
121568
121702
|
}
|
@@ -121617,9 +121751,28 @@ class AnimateScroll {
|
|
121617
121751
|
const addPreset = box => {
|
121618
121752
|
let index = start;
|
121619
121753
|
const chkPresetAnimOnce = this.modalAnimateScroll.querySelector('#chkPresetAnimOnce');
|
121620
|
-
const rows = box.querySelectorAll('.is-container > div');
|
121621
|
-
rows.forEach(
|
121622
|
-
|
121754
|
+
const rows = box.querySelectorAll('.is-container > div, .is-block .is-block-overlay');
|
121755
|
+
rows.forEach(elm => {
|
121756
|
+
if (elm.classList.contains('is-block-overlay') && !elm.closest('clone')) {
|
121757
|
+
if (elm.querySelector('.is-container')) return;
|
121758
|
+
elm.style.transition = 'none';
|
121759
|
+
elm.classList.add('is-animated');
|
121760
|
+
|
121761
|
+
if (chkPresetAnimOnce.checked) {
|
121762
|
+
elm.classList.add('once');
|
121763
|
+
} else {
|
121764
|
+
elm.classList.remove('once');
|
121765
|
+
} // elm.classList.add('is-fadeInUp');
|
121766
|
+
// process(elm, index);
|
121767
|
+
|
121768
|
+
|
121769
|
+
elm.classList.add(presetName);
|
121770
|
+
if (index !== 0) elm.classList.add(`delay-${index * delay}ms`);
|
121771
|
+
elm.classList.remove('is-inview');
|
121772
|
+
index++;
|
121773
|
+
}
|
121774
|
+
|
121775
|
+
const cols = this.builder.editor.dom.elementChildren(elm);
|
121623
121776
|
cols.forEach(col => {
|
121624
121777
|
if (col.innerText.trim() === '' && !col.querySelector('img') && !col.querySelector('iframe') && !col.querySelector('video') && !col.querySelector('audio') && !col.querySelector('i')) return;
|
121625
121778
|
col.style.transition = 'none'; // this.cleanupBasic(col);
|
@@ -121639,8 +121792,8 @@ class AnimateScroll {
|
|
121639
121792
|
if (index !== 0) col.classList.add(`delay-${index * delay}ms`);
|
121640
121793
|
col.classList.remove('is-inview');
|
121641
121794
|
index++;
|
121642
|
-
}); //
|
121643
|
-
//
|
121795
|
+
}); // elm.setAttribute('data-bottom-top', 'transform: translateY(125px)');
|
121796
|
+
// elm.setAttribute('data-center', 'transform: translateY(0px)');
|
121644
121797
|
});
|
121645
121798
|
start++;
|
121646
121799
|
};
|
@@ -121692,6 +121845,12 @@ class AnimateScroll {
|
|
121692
121845
|
}
|
121693
121846
|
|
121694
121847
|
restart() {
|
121848
|
+
if (this.builder.controlpanel.activeBlock && this.builder.editor.activeElement) {
|
121849
|
+
// cannot handle editable block
|
121850
|
+
if (this.builder.win.pageReRender) this.builder.win.pageReRender();
|
121851
|
+
return;
|
121852
|
+
}
|
121853
|
+
|
121695
121854
|
this.noRead = true; // Save selection
|
121696
121855
|
|
121697
121856
|
let target = this.getTarget();
|
@@ -121700,6 +121859,7 @@ class AnimateScroll {
|
|
121700
121859
|
if (this.builder.editor.activeElement) this.builder.editor.activeElement.setAttribute('data-save-element', '1');
|
121701
121860
|
if (this.builder.activeBox) this.builder.activeBox.setAttribute('data-save-box', '1');
|
121702
121861
|
if (this.builder.activeSection) this.builder.activeSection.setAttribute('data-save-section', '1');
|
121862
|
+
if (this.builder.controlpanel.activeBlock) this.builder.controlpanel.activeBlock.setAttribute('data-save-block', '1');
|
121703
121863
|
this.builder.markScrollTarget(this.builder.activeSection); //--- Same as undo/redo process ---
|
121704
121864
|
|
121705
121865
|
const wrapper = this.builder.wrapperEl;
|
@@ -121775,6 +121935,14 @@ class AnimateScroll {
|
|
121775
121935
|
this.builder.activeSection = section;
|
121776
121936
|
}
|
121777
121937
|
|
121938
|
+
let block = this.builder.doc.querySelector('[data-save-block]');
|
121939
|
+
|
121940
|
+
if (block) {
|
121941
|
+
block.classList.add('active');
|
121942
|
+
block.removeAttribute('data-save-block');
|
121943
|
+
this.builder.controlpanel.activeBlock = block;
|
121944
|
+
}
|
121945
|
+
|
121778
121946
|
setTimeout(() => {
|
121779
121947
|
this.noRead = false;
|
121780
121948
|
}, 100);
|
@@ -121835,10 +122003,34 @@ class AnimateScroll {
|
|
121835
122003
|
}
|
121836
122004
|
|
121837
122005
|
clickContent() {
|
122006
|
+
// Show hide buttons
|
122007
|
+
let btns = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
122008
|
+
btns.forEach(btn => btn.style.display = 'none');
|
122009
|
+
let activeElement = this.builder.editor.inspectedElement;
|
122010
|
+
let block = this.getBlock();
|
122011
|
+
btns.forEach(btn => {
|
122012
|
+
if (block) {
|
122013
|
+
let s = btn.getAttribute('data-value');
|
122014
|
+
|
122015
|
+
if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
|
122016
|
+
btn.style.display = '';
|
122017
|
+
}
|
122018
|
+
} else if (activeElement) {
|
122019
|
+
let s = btn.getAttribute('data-value');
|
122020
|
+
|
122021
|
+
if (s !== 'block') {
|
122022
|
+
btn.style.display = '';
|
122023
|
+
}
|
122024
|
+
} else {
|
122025
|
+
let s = btn.getAttribute('data-value');
|
122026
|
+
|
122027
|
+
if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
|
122028
|
+
btn.style.display = '';
|
122029
|
+
}
|
122030
|
+
}
|
122031
|
+
});
|
121838
122032
|
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
121839
|
-
elms.forEach(elm =>
|
121840
|
-
elm.classList.remove('on');
|
121841
|
-
}); // Dynamically choose target based on selected element
|
122033
|
+
elms.forEach(elm => elm.classList.remove('on')); // Dynamically choose target based on selected element
|
121842
122034
|
|
121843
122035
|
let currentTarget = this.readTarget();
|
121844
122036
|
|
@@ -121867,11 +122059,23 @@ class AnimateScroll {
|
|
121867
122059
|
} else if (currentTarget.name === 'section') {
|
121868
122060
|
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=section]');
|
121869
122061
|
btn.classList.add('on');
|
122062
|
+
} else if (currentTarget.name === 'block') {
|
122063
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
|
122064
|
+
btn.classList.add('on');
|
121870
122065
|
}
|
121871
122066
|
} else {
|
121872
|
-
//
|
121873
|
-
|
121874
|
-
|
122067
|
+
// let block = this.getBlock();
|
122068
|
+
if (block) {
|
122069
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
|
122070
|
+
btn.classList.add('on');
|
122071
|
+
} else if (activeElement) {
|
122072
|
+
// no animation on the selected element
|
122073
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
|
122074
|
+
btn.classList.add('on');
|
122075
|
+
} else {
|
122076
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=box]');
|
122077
|
+
btn.classList.add('on');
|
122078
|
+
}
|
121875
122079
|
}
|
121876
122080
|
|
121877
122081
|
this.read();
|
@@ -123228,17 +123432,41 @@ class AnimateScroll {
|
|
123228
123432
|
if (section) activeElement = section;
|
123229
123433
|
}
|
123230
123434
|
|
123435
|
+
if (target === 'block') {
|
123436
|
+
const block = this.getBlock();
|
123437
|
+
if (block) activeElement = block;
|
123438
|
+
}
|
123439
|
+
|
123231
123440
|
return {
|
123232
123441
|
'element': activeElement ? activeElement : false,
|
123233
123442
|
'name': target ? target : false
|
123234
123443
|
};
|
123235
123444
|
}
|
123236
123445
|
|
123446
|
+
getBlock() {
|
123447
|
+
let block = this.builder.doc.querySelector('.is-block.active');
|
123448
|
+
if (!block) return false;
|
123449
|
+
|
123450
|
+
if (block.classList.contains('editable')) {
|
123451
|
+
return false;
|
123452
|
+
} else {
|
123453
|
+
return block;
|
123454
|
+
}
|
123455
|
+
}
|
123456
|
+
|
123237
123457
|
readTarget(s) {
|
123238
123458
|
if (!s) {
|
123239
123459
|
// element (inspectedElement first)
|
123240
123460
|
let activeElement = this.builder.editor.inspectedElement; // if(!activeElement) return false;
|
123241
123461
|
|
123462
|
+
let block = this.getBlock(); // if(block && !activeElement) {
|
123463
|
+
// return this.readTarget('block');
|
123464
|
+
// }
|
123465
|
+
|
123466
|
+
if (block) {
|
123467
|
+
return this.readTarget('block');
|
123468
|
+
}
|
123469
|
+
|
123242
123470
|
if (!activeElement) {
|
123243
123471
|
return this.readTarget('bg');
|
123244
123472
|
}
|
@@ -123282,6 +123510,10 @@ class AnimateScroll {
|
|
123282
123510
|
} else {
|
123283
123511
|
let activeElement;
|
123284
123512
|
|
123513
|
+
if (s === 'block') {
|
123514
|
+
activeElement = this.getBlock();
|
123515
|
+
}
|
123516
|
+
|
123285
123517
|
if (s === 'element') {
|
123286
123518
|
activeElement = this.builder.editor.activeElement;
|
123287
123519
|
}
|
@@ -123323,6 +123555,7 @@ class AnimateScroll {
|
|
123323
123555
|
}
|
123324
123556
|
|
123325
123557
|
if (!activeElement) {
|
123558
|
+
if (s === 'block') return this.readTarget('box');
|
123326
123559
|
if (s === 'element') return this.readTarget('column');
|
123327
123560
|
if (s === 'column') return this.readTarget('row');
|
123328
123561
|
if (s === 'row') return this.readTarget('container');
|
@@ -123367,6 +123600,7 @@ class AnimateScroll {
|
|
123367
123600
|
'name': s
|
123368
123601
|
};
|
123369
123602
|
} else {
|
123603
|
+
if (s === 'block') return this.readTarget('box');
|
123370
123604
|
if (s === 'element') return this.readTarget('column');
|
123371
123605
|
if (s === 'column') return this.readTarget('row');
|
123372
123606
|
if (s === 'row') return this.readTarget('container');
|
@@ -123461,6 +123695,7 @@ class AnimateScroll {
|
|
123461
123695
|
if (modalEditBox) modalEditBox.style.display = '';
|
123462
123696
|
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
123463
123697
|
if (modalEditSection) modalEditSection.style.display = '';
|
123698
|
+
localStorage.setItem('_animationmodal', '1');
|
123464
123699
|
}
|
123465
123700
|
|
123466
123701
|
close() {
|
@@ -123468,6 +123703,7 @@ class AnimateScroll {
|
|
123468
123703
|
|
123469
123704
|
this.builder.doc.body.classList.remove('selection-only');
|
123470
123705
|
document.body.classList.remove('selection-only');
|
123706
|
+
localStorage.removeItem('_animationmodal');
|
123471
123707
|
}
|
123472
123708
|
|
123473
123709
|
}
|
@@ -124112,6 +124348,7 @@ class Timeline {
|
|
124112
124348
|
<div class="flex-wrap">
|
124113
124349
|
<div class="flex-wrap" style="margin-right:15px;width: 120px;">
|
124114
124350
|
<select class="input-target">
|
124351
|
+
<option value="block">${out('Block')}</option>
|
124115
124352
|
<option value="element">${out('Element')}</option>
|
124116
124353
|
<option value="column">${out('Column')}</option>
|
124117
124354
|
<option value="row">${out('Row')}</option>
|
@@ -124677,9 +124914,40 @@ class Timeline {
|
|
124677
124914
|
}
|
124678
124915
|
|
124679
124916
|
clickContent() {
|
124680
|
-
let inpTarget = this.modalTimeline.querySelector('.input-target');
|
124681
|
-
|
124682
|
-
|
124917
|
+
let inpTarget = this.modalTimeline.querySelector('.input-target'); // inpTarget.value = 'element'; // default
|
124918
|
+
// Show/hide target options
|
124919
|
+
|
124920
|
+
let options = inpTarget.querySelectorAll('option');
|
124921
|
+
options.forEach(opt => opt.style.display = 'none');
|
124922
|
+
let activeElement = this.builder.editor.inspectedElement;
|
124923
|
+
let block = this.getBlock();
|
124924
|
+
options.forEach(opt => {
|
124925
|
+
if (block) {
|
124926
|
+
let s = opt.getAttribute('value');
|
124927
|
+
|
124928
|
+
if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
|
124929
|
+
opt.style.display = '';
|
124930
|
+
}
|
124931
|
+
|
124932
|
+
inpTarget.value = 'block'; // default
|
124933
|
+
} else if (activeElement) {
|
124934
|
+
let s = opt.getAttribute('value');
|
124935
|
+
|
124936
|
+
if (s !== 'block') {
|
124937
|
+
opt.style.display = '';
|
124938
|
+
}
|
124939
|
+
|
124940
|
+
inpTarget.value = 'element'; // default
|
124941
|
+
} else {
|
124942
|
+
let s = opt.getAttribute('value');
|
124943
|
+
|
124944
|
+
if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
|
124945
|
+
opt.style.display = '';
|
124946
|
+
}
|
124947
|
+
|
124948
|
+
inpTarget.value = 'box'; // default
|
124949
|
+
}
|
124950
|
+
}); // Dynamically choose target based on selected element
|
124683
124951
|
|
124684
124952
|
let currentTarget = this.readTarget();
|
124685
124953
|
|
@@ -124700,12 +124968,17 @@ class Timeline {
|
|
124700
124968
|
inpTarget.value = 'box';
|
124701
124969
|
} else if (currentTarget.name === 'section') {
|
124702
124970
|
inpTarget.value = 'section';
|
124703
|
-
}
|
124971
|
+
} else if (currentTarget.name === 'block') {
|
124972
|
+
inpTarget.value = 'block';
|
124973
|
+
} // this.read();
|
124704
124974
|
|
124705
|
-
this.read();
|
124706
|
-
} else {
|
124707
|
-
this.clearSettings();
|
124708
124975
|
}
|
124976
|
+
/*else {
|
124977
|
+
this.clearSettings();
|
124978
|
+
}*/
|
124979
|
+
|
124980
|
+
|
124981
|
+
this.read();
|
124709
124982
|
}
|
124710
124983
|
|
124711
124984
|
clearSettings() {
|
@@ -125900,16 +126173,39 @@ class Timeline {
|
|
125900
126173
|
if (section) activeElement = section;
|
125901
126174
|
}
|
125902
126175
|
|
126176
|
+
if (target === 'block') {
|
126177
|
+
const block = this.getBlock();
|
126178
|
+
if (block) activeElement = block;
|
126179
|
+
}
|
126180
|
+
|
125903
126181
|
return {
|
125904
126182
|
'element': activeElement ? activeElement : false,
|
125905
126183
|
'name': target ? target : false
|
125906
126184
|
};
|
125907
126185
|
}
|
125908
126186
|
|
126187
|
+
getBlock() {
|
126188
|
+
let block = this.builder.doc.querySelector('.is-block.active');
|
126189
|
+
if (!block) return false;
|
126190
|
+
|
126191
|
+
if (block.classList.contains('editable')) {
|
126192
|
+
return false;
|
126193
|
+
} else {
|
126194
|
+
return block;
|
126195
|
+
}
|
126196
|
+
}
|
126197
|
+
|
125909
126198
|
readTarget(s) {
|
125910
126199
|
if (!s) {
|
125911
126200
|
// element (inspectedElement first)
|
125912
126201
|
let activeElement = this.builder.editor.inspectedElement;
|
126202
|
+
let block = this.getBlock(); // if(block && !activeElement) {
|
126203
|
+
// return this.readTarget('block');
|
126204
|
+
// }
|
126205
|
+
|
126206
|
+
if (block) {
|
126207
|
+
return this.readTarget('block');
|
126208
|
+
}
|
125913
126209
|
|
125914
126210
|
if (!activeElement) {
|
125915
126211
|
return this.readTarget('bg');
|
@@ -125946,6 +126242,10 @@ class Timeline {
|
|
125946
126242
|
} else {
|
125947
126243
|
let activeElement;
|
125948
126244
|
|
126245
|
+
if (s === 'block') {
|
126246
|
+
activeElement = this.getBlock();
|
126247
|
+
}
|
126248
|
+
|
125949
126249
|
if (s === 'element') {
|
125950
126250
|
activeElement = this.builder.editor.activeElement;
|
125951
126251
|
}
|
@@ -125987,6 +126287,7 @@ class Timeline {
|
|
125987
126287
|
}
|
125988
126288
|
|
125989
126289
|
if (!activeElement) {
|
126290
|
+
if (s === 'block') return this.readTarget('box');
|
125990
126291
|
if (s === 'element') return this.readTarget('column');
|
125991
126292
|
if (s === 'column') return this.readTarget('row');
|
125992
126293
|
if (s === 'row') return this.readTarget('container');
|
@@ -126023,6 +126324,7 @@ class Timeline {
|
|
126023
126324
|
'name': s
|
126024
126325
|
};
|
126025
126326
|
} else {
|
126327
|
+
if (s === 'block') return this.readTarget('box');
|
126026
126328
|
if (s === 'element') return this.readTarget('column');
|
126027
126329
|
if (s === 'column') return this.readTarget('row');
|
126028
126330
|
if (s === 'row') return this.readTarget('container');
|
@@ -134307,11 +134609,20 @@ class Section {
|
|
134307
134609
|
if (target === 'xs') {
|
134308
134610
|
section.classList.add('xs-hidden');
|
134309
134611
|
} else if (target === 'sm') {
|
134310
|
-
section.classList.add('sm-hidden');
|
134612
|
+
section.classList.add('sm-hidden'); // hide all others smaller than tablet portrait
|
134613
|
+
|
134614
|
+
section.classList.add('xs-hidden');
|
134311
134615
|
} else if (target === 'md') {
|
134312
|
-
section.classList.add('md-hidden');
|
134616
|
+
section.classList.add('md-hidden'); // hide all others smaller than tablet landscape
|
134617
|
+
|
134618
|
+
section.classList.add('sm-hidden');
|
134619
|
+
section.classList.add('xs-hidden');
|
134313
134620
|
} else if (target === '') {
|
134314
|
-
section.classList.add('desktop-hidden');
|
134621
|
+
section.classList.add('desktop-hidden'); // hide all others smaller than desktop
|
134622
|
+
|
134623
|
+
section.classList.add('md-hidden');
|
134624
|
+
section.classList.add('sm-hidden');
|
134625
|
+
section.classList.add('xs-hidden');
|
134315
134626
|
}
|
134316
134627
|
}
|
134317
134628
|
|
@@ -145491,7 +145802,7 @@ class IframePanel {
|
|
145491
145802
|
|
145492
145803
|
if (hasPin) {
|
145493
145804
|
setTimeout(() => {
|
145494
|
-
this.builder.scrollToMarkedTarget(); //
|
145805
|
+
this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
|
145495
145806
|
}, 300);
|
145496
145807
|
} // Sync with external buttons
|
145497
145808
|
|
@@ -145549,7 +145860,7 @@ class IframePanel {
|
|
145549
145860
|
|
145550
145861
|
if (hasPin) {
|
145551
145862
|
setTimeout(() => {
|
145552
|
-
this.builder.scrollToMarkedTarget(); //
|
145863
|
+
this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
|
145553
145864
|
}, 300);
|
145554
145865
|
} // Sync with external buttons
|
145555
145866
|
|
@@ -150400,6 +150711,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
150400
150711
|
z-index:1;
|
150401
150712
|
}
|
150402
150713
|
|
150714
|
+
/* Group color */
|
150715
|
+
.block-active,
|
150716
|
+
.is-group.active {
|
150717
|
+
background-color: #81ffd538;
|
150718
|
+
}
|
150719
|
+
.block-active .is-block {
|
150720
|
+
outline: #51e1b2a3 2px solid;
|
150721
|
+
outline-offset: 2px;
|
150722
|
+
}
|
150403
150723
|
|
150404
150724
|
i.bi, i.icon { display: inline-flex; }
|
150405
150725
|
|
@@ -151253,6 +151573,23 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
151253
151573
|
}
|
151254
151574
|
}, 300);
|
151255
151575
|
if (this.eb) this.eb.refresh(); // freeform
|
151576
|
+
|
151577
|
+
if (localStorage.getItem('_animationmodal') != null) {
|
151578
|
+
const box = this.wrapperEl.querySelector('.is-box');
|
151579
|
+
const section = this.wrapperEl.querySelector('.is-section');
|
151580
|
+
|
151581
|
+
if (box) {
|
151582
|
+
box.classList.add('box-select');
|
151583
|
+
this.activeBox = box;
|
151584
|
+
}
|
151585
|
+
|
151586
|
+
if (section) {
|
151587
|
+
section.classList.add('section-select');
|
151588
|
+
this.activeSection = section;
|
151589
|
+
}
|
151590
|
+
|
151591
|
+
this.animateScroll.edit();
|
151592
|
+
}
|
151256
151593
|
} // pageSetup
|
151257
151594
|
|
151258
151595
|
|
@@ -152901,8 +153238,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
152901
153238
|
if (element) element.classList.add('scroll-target');
|
152902
153239
|
}
|
152903
153240
|
|
152904
|
-
scrollToMarkedTarget() {
|
152905
|
-
|
153241
|
+
scrollToMarkedTarget(reRender = true) {
|
153242
|
+
// used by: addIdea, section.js, iframerpanel.js (reRender=false, during resize)
|
153243
|
+
if (this.win.pageReRender && reRender) {
|
153244
|
+
this.win.pageReRender();
|
153245
|
+
}
|
153246
|
+
|
152906
153247
|
let scrollTarget = this.doc.querySelector('.scroll-target');
|
152907
153248
|
|
152908
153249
|
if (scrollTarget) {
|