@innovastudio/contentbox 1.6.37 → 1.6.38
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@innovastudio/contentbox",
|
3
3
|
"type": "module",
|
4
|
-
"version": "1.6.
|
4
|
+
"version": "1.6.38",
|
5
5
|
"description": "",
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
7
7
|
"files": [
|
@@ -52,7 +52,7 @@
|
|
52
52
|
"ws": "^8.13.0"
|
53
53
|
},
|
54
54
|
"dependencies": {
|
55
|
-
"@innovastudio/contentbuilder": "^1.5.
|
55
|
+
"@innovastudio/contentbuilder": "^1.5.22",
|
56
56
|
"js-beautify": "^1.14.0"
|
57
57
|
}
|
58
58
|
}
|
@@ -78220,26 +78220,37 @@ class RowTool {
|
|
78220
78220
|
if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
|
78221
78221
|
let cell = util.cellSelected();
|
78222
78222
|
if (!cell) return;
|
78223
|
+
const viewportHeight = window.innerHeight;
|
78224
|
+
const newPos = util.getElementPosition(btnCellAdd);
|
78225
|
+
let top = newPos.top;
|
78226
|
+
let left = newPos.left;
|
78223
78227
|
renderQuickAdd(this.builder);
|
78224
78228
|
let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
|
78225
78229
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
78226
78230
|
tabs.style.display = 'flex';
|
78227
|
-
const newPos = util.getElementPosition(btnCellAdd);
|
78228
|
-
let top = newPos.top + window.pageYOffset;
|
78229
|
-
let left = newPos.left + window.pageXOffset;
|
78230
|
-
if (this.builder.iframe) {
|
78231
|
-
left = left + 3;
|
78232
|
-
}
|
78233
78231
|
util.showPop(quickadd, false, btnCellAdd);
|
78234
|
-
|
78235
|
-
|
78236
|
-
|
78237
|
-
|
78238
|
-
|
78239
|
-
|
78240
|
-
|
78241
|
-
|
78242
|
-
|
78232
|
+
const h = quickadd.offsetHeight;
|
78233
|
+
if (viewportHeight - top > h) {
|
78234
|
+
// pop bottom
|
78235
|
+
quickadd.style.top = top + window.pageYOffset + 35 + 'px';
|
78236
|
+
quickadd.style.left = left + 'px';
|
78237
|
+
dom.removeClass(quickadd, 'arrow-bottom');
|
78238
|
+
dom.removeClass(quickadd, 'arrow-right');
|
78239
|
+
dom.removeClass(quickadd, 'arrow-left');
|
78240
|
+
dom.removeClass(quickadd, 'center');
|
78241
|
+
dom.addClass(quickadd, 'arrow-top');
|
78242
|
+
dom.addClass(quickadd, 'left');
|
78243
|
+
} else {
|
78244
|
+
// pop top
|
78245
|
+
quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
|
78246
|
+
quickadd.style.left = left + 'px';
|
78247
|
+
dom.removeClass(quickadd, 'arrow-top');
|
78248
|
+
dom.removeClass(quickadd, 'arrow-right');
|
78249
|
+
dom.removeClass(quickadd, 'arrow-left');
|
78250
|
+
dom.removeClass(quickadd, 'center');
|
78251
|
+
dom.addClass(quickadd, 'arrow-bottom');
|
78252
|
+
dom.addClass(quickadd, 'left');
|
78253
|
+
}
|
78243
78254
|
let val = quickadd.querySelector('.active').getAttribute('data-value');
|
78244
78255
|
if (val === 'left') {
|
78245
78256
|
quickadd.setAttribute('data-mode', 'cell-left');
|
@@ -78279,21 +78290,38 @@ class RowTool {
|
|
78279
78290
|
if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
|
78280
78291
|
let cell = util.cellSelected();
|
78281
78292
|
if (!cell) return;
|
78293
|
+
const viewportHeight = window.innerHeight;
|
78282
78294
|
const newPos = util.getElementPosition(btnCellMore);
|
78283
|
-
let top = newPos.top
|
78284
|
-
let left = newPos.left
|
78295
|
+
let top = newPos.top;
|
78296
|
+
let left = newPos.left;
|
78285
78297
|
this.builder.colTool.renderColMore();
|
78286
78298
|
const columnMore = builderStuff.querySelector('.columnmore');
|
78287
|
-
|
78288
|
-
|
78289
|
-
|
78290
|
-
|
78291
|
-
|
78292
|
-
|
78293
|
-
|
78294
|
-
|
78295
|
-
|
78296
|
-
|
78299
|
+
setTimeout(() => {
|
78300
|
+
// give delay after renderColMore()
|
78301
|
+
util.showPop(columnMore, false, btnCellMore);
|
78302
|
+
const h = columnMore.offsetHeight;
|
78303
|
+
if (viewportHeight - top > h) {
|
78304
|
+
columnMore.style.top = top + window.pageYOffset + 35 + 'px';
|
78305
|
+
columnMore.style.left = left - 7 + 'px';
|
78306
|
+
dom.removeClass(columnMore, 'arrow-bottom');
|
78307
|
+
dom.removeClass(columnMore, 'arrow-right');
|
78308
|
+
dom.removeClass(columnMore, 'arrow-left');
|
78309
|
+
dom.removeClass(columnMore, 'center');
|
78310
|
+
dom.removeClass(columnMore, 'right');
|
78311
|
+
dom.addClass(columnMore, 'arrow-top');
|
78312
|
+
dom.addClass(columnMore, 'left');
|
78313
|
+
} else {
|
78314
|
+
columnMore.style.top = top + window.pageYOffset - h - 8 + 'px';
|
78315
|
+
columnMore.style.left = left - 7 + 'px';
|
78316
|
+
dom.removeClass(columnMore, 'arrow-top');
|
78317
|
+
dom.removeClass(columnMore, 'arrow-right');
|
78318
|
+
dom.removeClass(columnMore, 'arrow-left');
|
78319
|
+
dom.removeClass(columnMore, 'center');
|
78320
|
+
dom.removeClass(columnMore, 'right');
|
78321
|
+
dom.addClass(columnMore, 'arrow-bottom');
|
78322
|
+
dom.addClass(columnMore, 'left');
|
78323
|
+
}
|
78324
|
+
}, 0);
|
78297
78325
|
const btnCellLocking = columnMore.querySelector('.cell-locking');
|
78298
78326
|
if (cell.hasAttribute('data-noedit')) {
|
78299
78327
|
dom.addClass(btnCellLocking, 'on');
|
@@ -78447,32 +78475,67 @@ class RowTool {
|
|
78447
78475
|
|
78448
78476
|
//Hide Column tool (new!)
|
78449
78477
|
util.hideColumnTool();
|
78478
|
+
|
78479
|
+
/*
|
78450
78480
|
const newPos = util.getElementPosition(btnMore);
|
78451
78481
|
let top = newPos.top + window.pageYOffset;
|
78452
78482
|
let left = newPos.left + window.pageXOffset;
|
78453
|
-
|
78483
|
+
this.renderRowMore();
|
78454
78484
|
const rowMore = this.rowMore;
|
78455
|
-
|
78456
|
-
// rowMore.style.display = 'flex';
|
78485
|
+
// rowMore.style.display = 'flex';
|
78457
78486
|
util.showPop(rowMore, false, btnMore);
|
78458
78487
|
//const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
78459
78488
|
//const h = rowMore.offsetHeight;
|
78460
|
-
rowMore.style.top = top - 8 + 'px';
|
78461
|
-
|
78462
|
-
dom.removeClass(rowMore,
|
78463
|
-
dom.removeClass(rowMore,
|
78464
|
-
dom.removeClass(rowMore,
|
78465
|
-
dom.removeClass(rowMore,
|
78466
|
-
dom.removeClass(rowMore,
|
78467
|
-
|
78468
|
-
|
78469
|
-
|
78470
|
-
|
78471
|
-
|
78472
|
-
|
78473
|
-
|
78474
|
-
|
78475
|
-
|
78489
|
+
rowMore.style.top = (top - 8) + 'px';
|
78490
|
+
dom.removeClass(rowMore,'arrow-bottom');
|
78491
|
+
dom.removeClass(rowMore,'arrow-left');
|
78492
|
+
dom.removeClass(rowMore,'arrow-right');
|
78493
|
+
dom.removeClass(rowMore,'center');
|
78494
|
+
dom.removeClass(rowMore,'right');
|
78495
|
+
dom.removeClass(rowMore,'left');
|
78496
|
+
if(this.builder.opts.rowTool === 'right') {
|
78497
|
+
|
78498
|
+
rowMore.style.left = (left - rowMore.offsetWidth - 10) + 'px';
|
78499
|
+
dom.addClass(rowMore,'arrow-right');
|
78500
|
+
dom.addClass(rowMore,'left');
|
78501
|
+
} else {
|
78502
|
+
rowMore.style.left = (left + 35) + 'px';
|
78503
|
+
dom.addClass(rowMore,'arrow-left');
|
78504
|
+
dom.addClass(rowMore,'left');
|
78505
|
+
}
|
78506
|
+
*/
|
78507
|
+
|
78508
|
+
const viewportHeight = window.innerHeight;
|
78509
|
+
const newPos = util.getElementPosition(btnMore);
|
78510
|
+
let top = newPos.top;
|
78511
|
+
let left = newPos.left;
|
78512
|
+
this.renderRowMore();
|
78513
|
+
const rowMore = this.rowMore;
|
78514
|
+
setTimeout(() => {
|
78515
|
+
// give delay after renderRowMore()
|
78516
|
+
util.showPop(rowMore, false, btnMore);
|
78517
|
+
const h = rowMore.offsetHeight;
|
78518
|
+
dom.removeClass(rowMore, 'arrow-bottom');
|
78519
|
+
dom.removeClass(rowMore, 'arrow-left');
|
78520
|
+
dom.removeClass(rowMore, 'arrow-right');
|
78521
|
+
dom.removeClass(rowMore, 'center');
|
78522
|
+
dom.removeClass(rowMore, 'right');
|
78523
|
+
dom.removeClass(rowMore, 'left');
|
78524
|
+
if (this.builder.opts.rowTool === 'right') {
|
78525
|
+
rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
|
78526
|
+
dom.addClass(rowMore, 'arrow-right');
|
78527
|
+
dom.addClass(rowMore, 'left');
|
78528
|
+
} else {
|
78529
|
+
rowMore.style.left = left + 35 + 'px';
|
78530
|
+
dom.addClass(rowMore, 'arrow-left');
|
78531
|
+
dom.addClass(rowMore, 'left');
|
78532
|
+
}
|
78533
|
+
if (viewportHeight - top > h) {
|
78534
|
+
rowMore.style.top = top + window.pageYOffset - 8 + 'px';
|
78535
|
+
} else {
|
78536
|
+
rowMore.style.top = top + window.pageYOffset - h + btnMore.offsetHeight + 'px';
|
78537
|
+
}
|
78538
|
+
}, 0);
|
78476
78539
|
let btnRowHtml = rowMore.querySelector('.row-html');
|
78477
78540
|
let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
|
78478
78541
|
if (row.querySelector('[data-html]')) {
|
@@ -91350,9 +91413,25 @@ class Rte {
|
|
91350
91413
|
// Reset Zoom
|
91351
91414
|
const btnResetZoom = builderStuff.querySelector('.reset-zoom');
|
91352
91415
|
btnResetZoom.addEventListener('click', () => {
|
91416
|
+
this.rteZoomSlider.value = 100;
|
91353
91417
|
this.builder.opts.zoom = 1;
|
91354
91418
|
localStorage.setItem('_zoom', 1); // Save
|
91355
91419
|
|
91420
|
+
// setZoomOnControl
|
91421
|
+
if (this.builder.isContentBox) {
|
91422
|
+
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
91423
|
+
this.builder.setZoomOnControl(wrapper);
|
91424
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
91425
|
+
// freeform
|
91426
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
91427
|
+
this.builder.setZoomOnControl(docContainer);
|
91428
|
+
} else {
|
91429
|
+
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
91430
|
+
builders.forEach(builder => {
|
91431
|
+
this.builder.setZoomOnControl(builder);
|
91432
|
+
});
|
91433
|
+
}
|
91434
|
+
|
91356
91435
|
// setZoomOnArea
|
91357
91436
|
this.builder.setZoomOnArea();
|
91358
91437
|
});
|
@@ -99475,7 +99554,6 @@ class ContentStuff$1 {
|
|
99475
99554
|
display:flex;
|
99476
99555
|
}
|
99477
99556
|
|
99478
|
-
|
99479
99557
|
.row-outline .is-rowadd-tool,
|
99480
99558
|
.row-active .is-rowadd-tool {
|
99481
99559
|
display:block;
|
@@ -99884,6 +99962,12 @@ class ContentStuff$1 {
|
|
99884
99962
|
/*padding: 0 2px 4px !important;*/
|
99885
99963
|
z-index: 1 !important;
|
99886
99964
|
}
|
99965
|
+
|
99966
|
+
/* Row Lock will hide row tool */
|
99967
|
+
.row-lock .is-row-tool,
|
99968
|
+
.row-lock .is-rowadd-tool {
|
99969
|
+
display: none !important;
|
99970
|
+
}
|
99887
99971
|
|
99888
99972
|
div[data-html] {
|
99889
99973
|
min-height: 70px;
|
@@ -107343,7 +107427,7 @@ class Common {
|
|
107343
107427
|
|
107344
107428
|
if (topTouched && bottomTouched) {
|
107345
107429
|
block.style.top = 0;
|
107346
|
-
block.style.bottom = 0;
|
107430
|
+
if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
|
107347
107431
|
block.style.height = '';
|
107348
107432
|
}
|
107349
107433
|
if (leftTouched && rightTouched) {
|
@@ -107352,13 +107436,21 @@ class Common {
|
|
107352
107436
|
block.style.width = '';
|
107353
107437
|
}
|
107354
107438
|
if (bottomTouched && !topTouched) {
|
107355
|
-
block.style.bottom = 0;
|
107439
|
+
if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
|
107356
107440
|
block.style.height = '';
|
107357
107441
|
}
|
107358
107442
|
if (rightTouched && !leftTouched) {
|
107359
107443
|
block.style.right = 0;
|
107360
107444
|
block.style.width = '';
|
107361
107445
|
}
|
107446
|
+
|
107447
|
+
// reset
|
107448
|
+
setTimeout(() => {
|
107449
|
+
this.horizontalRulerTop.removeAttribute('data-topTouched');
|
107450
|
+
this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
107451
|
+
this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
107452
|
+
this.verticalRulerRight.removeAttribute('data-rightTouched');
|
107453
|
+
}, 10);
|
107362
107454
|
}
|
107363
107455
|
applyPixels(block) {
|
107364
107456
|
const zoom = this.zoom;
|
@@ -109060,8 +109152,12 @@ class Draggable {
|
|
109060
109152
|
target.setAttribute('data-starty', y);
|
109061
109153
|
|
109062
109154
|
// reset (from applyPercentage bottomTouched)
|
109063
|
-
target.style.
|
109064
|
-
|
109155
|
+
if (target.style.bottom) {
|
109156
|
+
if (!target.classList.contains('height-auto')) {
|
109157
|
+
target.style.height = target.offsetHeight + 'px';
|
109158
|
+
}
|
109159
|
+
target.style.bottom = '';
|
109160
|
+
}
|
109065
109161
|
this.common.applyPixels(target);
|
109066
109162
|
});
|
109067
109163
|
this.clickedBlock = this.common.getSelectedBlock();
|
@@ -109184,6 +109280,15 @@ class Draggable {
|
|
109184
109280
|
if (this.onChange) this.onChange();
|
109185
109281
|
}
|
109186
109282
|
handleSelect(event) {
|
109283
|
+
if (!this.doc.querySelector(this.selector + '.active')) {
|
109284
|
+
// Make the current scrollbar state (visible or not) to stay during the block select (drag or resize)
|
109285
|
+
let scrollbar = this.doc.documentElement.scrollHeight > this.doc.documentElement.clientHeight;
|
109286
|
+
if (!scrollbar) {
|
109287
|
+
this.doc.body.style.overflowY = 'hidden';
|
109288
|
+
} else {
|
109289
|
+
this.doc.body.style.overflowY = 'scroll';
|
109290
|
+
}
|
109291
|
+
}
|
109187
109292
|
const element = event.target;
|
109188
109293
|
if (element.classList.contains('rotate-handle')) return;
|
109189
109294
|
const block = element.closest(this.selector);
|
@@ -109233,6 +109338,9 @@ class Draggable {
|
|
109233
109338
|
this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
|
109234
109339
|
this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
|
109235
109340
|
if (this.onSelectClear) this.onSelectClear();
|
109341
|
+
|
109342
|
+
// Return back the scrollbar state when clicking on page (not block)
|
109343
|
+
this.doc.body.style.overflowY = ''; // see handleSelect()
|
109236
109344
|
}
|
109237
109345
|
|
109238
109346
|
// Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
|
@@ -145384,7 +145492,7 @@ class ContentBox {
|
|
145384
145492
|
assetRefresh: false,
|
145385
145493
|
slider: '',
|
145386
145494
|
navbar: false,
|
145387
|
-
screenMode: '
|
145495
|
+
screenMode: 'fullview',
|
145388
145496
|
onRender: function () {},
|
145389
145497
|
onChange: function () {},
|
145390
145498
|
// onImageBrowseClick: function () { },
|
@@ -149285,10 +149393,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
149285
149393
|
display: none !important;
|
149286
149394
|
}
|
149287
149395
|
.hard-select .box-select {
|
149288
|
-
|
149289
|
-
|
149290
|
-
|
149396
|
+
outline: #00da89 1px solid;
|
149397
|
+
outline-offset: -1px;
|
149398
|
+
z-index: 1;
|
149399
|
+
}
|
149400
|
+
.hard-select .box-select.box-canvas {
|
149401
|
+
outline: #ff9fda 1px solid;
|
149291
149402
|
}
|
149403
|
+
|
149292
149404
|
.hard-select .box-select .is-box-tool {
|
149293
149405
|
display: flex !important;
|
149294
149406
|
}
|