@innovastudio/contentbox 1.6.38 → 1.6.39
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +2 -2
- package/public/contentbox/contentbox.esm.js +105 -49
- package/public/contentbox/contentbox.min.js +2 -2
- package/readme.txt +10 -0
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.39",
|
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.24",
|
56
56
|
"js-beautify": "^1.14.0"
|
57
57
|
}
|
58
58
|
}
|
@@ -43148,6 +43148,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
43148
43148
|
obj.destroy();
|
43149
43149
|
}
|
43150
43150
|
});
|
43151
|
+
builder.sortableOnCanvas = [];
|
43151
43152
|
}
|
43152
43153
|
if (builder.sortableOnPage) builder.sortableOnPage.destroy();
|
43153
43154
|
let dummies = builder.doc.querySelectorAll('.block-dummy');
|
@@ -108682,6 +108683,8 @@ class Resizable {
|
|
108682
108683
|
this.doc.addEventListener('mouseup', this.handleResizeEnd);
|
108683
108684
|
this.doc.addEventListener('touchmove', this.handleResizeMove);
|
108684
108685
|
this.doc.addEventListener('touchend', this.handleResizeEnd);
|
108686
|
+
document.addEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
|
108687
|
+
document.addEventListener('touchend', this.handleResizeEnd);
|
108685
108688
|
}
|
108686
108689
|
handleResizeMove(event) {
|
108687
108690
|
if (this.isResizing) {
|
@@ -108732,6 +108735,8 @@ class Resizable {
|
|
108732
108735
|
this.doc.removeEventListener('mouseup', this.handleResizeEnd);
|
108733
108736
|
this.doc.removeEventListener('touchmove', this.handleResizeMove);
|
108734
108737
|
this.doc.removeEventListener('touchend', this.handleResizeEnd);
|
108738
|
+
document.removeEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
|
108739
|
+
document.removeEventListener('touchend', this.handleResizeEnd);
|
108735
108740
|
this.ruler.hideRulers();
|
108736
108741
|
}
|
108737
108742
|
resizeTopLeft(deltaX, deltaY) {
|
@@ -113556,6 +113561,59 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113556
113561
|
}
|
113557
113562
|
});
|
113558
113563
|
|
113564
|
+
// Canvas Mode
|
113565
|
+
const copyBlock = e => {
|
113566
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
113567
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
113568
|
+
//CTRL-C
|
113569
|
+
const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
|
113570
|
+
if (activeBlock) {
|
113571
|
+
this.copyBlock = activeBlock;
|
113572
|
+
}
|
113573
|
+
}
|
113574
|
+
};
|
113575
|
+
const pasteBlock = e => {
|
113576
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
113577
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
113578
|
+
//CTRL-V
|
113579
|
+
|
113580
|
+
const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
|
113581
|
+
let block = this.copyBlock;
|
113582
|
+
if (box && block) {
|
113583
|
+
if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
|
113584
|
+
const focusedElement = e.target;
|
113585
|
+
const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
|
113586
|
+
if (isEditable) return;
|
113587
|
+
this.uo.saveForUndo();
|
113588
|
+
let block = this.copyBlock;
|
113589
|
+
const builder = block.querySelector(this.container);
|
113590
|
+
let html = '';
|
113591
|
+
if (builder) {
|
113592
|
+
html = this.readHtml(builder);
|
113593
|
+
}
|
113594
|
+
let clonedDiv = block.cloneNode(true);
|
113595
|
+
clonedDiv.style.top = '20%';
|
113596
|
+
clonedDiv.style.left = '20%';
|
113597
|
+
if (builder) {
|
113598
|
+
const cloneBuilder = clonedDiv.querySelector(this.container);
|
113599
|
+
cloneBuilder.innerHTML = '';
|
113600
|
+
box.appendChild(clonedDiv);
|
113601
|
+
const range = document.createRange();
|
113602
|
+
cloneBuilder.appendChild(range.createContextualFragment(html));
|
113603
|
+
this.applyBehaviorOn(cloneBuilder);
|
113604
|
+
cloneBuilder.click();
|
113605
|
+
} else {
|
113606
|
+
block.parentNode.appendChild(clonedDiv);
|
113607
|
+
}
|
113608
|
+
block.classList.remove('active');
|
113609
|
+
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
113610
|
+
this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
|
113611
|
+
this.eb.refresh();
|
113612
|
+
this.opts.onChange();
|
113613
|
+
}
|
113614
|
+
}
|
113615
|
+
};
|
113616
|
+
|
113559
113617
|
// SHIFT + Right Clidk to Zoom In
|
113560
113618
|
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
113561
113619
|
//--- see loadHtml ---
|
@@ -113627,53 +113685,41 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113627
113685
|
document.addEventListener('keydown', e => {
|
113628
113686
|
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
113629
113687
|
//CTRL-C
|
113630
|
-
|
113631
|
-
if (activeBlock) {
|
113632
|
-
this.copyBlock = activeBlock;
|
113633
|
-
}
|
113688
|
+
copyBlock(e);
|
113634
113689
|
}
|
113635
113690
|
});
|
113636
113691
|
document.addEventListener('keydown', e => {
|
113637
113692
|
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
113638
113693
|
//CTRL-V
|
113639
|
-
|
113640
|
-
const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
|
113641
|
-
let block = this.copyBlock;
|
113642
|
-
if (box && block) {
|
113643
|
-
if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
|
113644
|
-
const focusedElement = e.target;
|
113645
|
-
const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
|
113646
|
-
if (isEditable) return;
|
113647
|
-
this.uo.saveForUndo();
|
113648
|
-
let block = this.copyBlock;
|
113649
|
-
const builder = block.querySelector(this.container);
|
113650
|
-
let html = '';
|
113651
|
-
if (builder) {
|
113652
|
-
html = this.readHtml(builder);
|
113653
|
-
}
|
113654
|
-
let clonedDiv = block.cloneNode(true);
|
113655
|
-
clonedDiv.style.top = '20%';
|
113656
|
-
clonedDiv.style.left = '20%';
|
113657
|
-
if (builder) {
|
113658
|
-
const cloneBuilder = clonedDiv.querySelector(this.container);
|
113659
|
-
cloneBuilder.innerHTML = '';
|
113660
|
-
box.appendChild(clonedDiv);
|
113661
|
-
const range = document.createRange();
|
113662
|
-
cloneBuilder.appendChild(range.createContextualFragment(html));
|
113663
|
-
this.applyBehaviorOn(cloneBuilder);
|
113664
|
-
cloneBuilder.click();
|
113665
|
-
} else {
|
113666
|
-
block.parentNode.appendChild(clonedDiv);
|
113667
|
-
}
|
113668
|
-
block.classList.remove('active');
|
113669
|
-
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
113670
|
-
this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
|
113671
|
-
this.eb.refresh();
|
113672
|
-
this.opts.onChange();
|
113673
|
-
}
|
113694
|
+
pasteBlock(e);
|
113674
113695
|
}
|
113675
113696
|
});
|
113676
113697
|
}
|
113698
|
+
if (this.canvas && this.isContentBox) {
|
113699
|
+
// Copy & Paste Block
|
113700
|
+
document.addEventListener('keydown', e => {
|
113701
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
113702
|
+
copyBlock(e);
|
113703
|
+
}
|
113704
|
+
});
|
113705
|
+
document.addEventListener('keydown', e => {
|
113706
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
113707
|
+
pasteBlock(e);
|
113708
|
+
}
|
113709
|
+
});
|
113710
|
+
if (this.iframe) {
|
113711
|
+
this.doc.addEventListener('keydown', e => {
|
113712
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
113713
|
+
copyBlock(e);
|
113714
|
+
}
|
113715
|
+
});
|
113716
|
+
this.doc.addEventListener('keydown', e => {
|
113717
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
113718
|
+
pasteBlock(e);
|
113719
|
+
}
|
113720
|
+
});
|
113721
|
+
}
|
113722
|
+
}
|
113677
113723
|
let previousWidth = this.win.innerWidth;
|
113678
113724
|
let timer;
|
113679
113725
|
const debounce = (func, delay) => {
|
@@ -117991,13 +118037,14 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
117991
118037
|
boxes = this.doc.querySelectorAll(this.blockContainer);
|
117992
118038
|
}
|
117993
118039
|
boxes.forEach(box => {
|
117994
|
-
box.insertAdjacentHTML('afterbegin', `
|
117995
|
-
|
117996
|
-
|
117997
|
-
|
117998
|
-
|
117999
|
-
|
118000
|
-
|
118040
|
+
// box.insertAdjacentHTML('afterbegin', `
|
118041
|
+
// <div class="is-block block-dummy" style="top: 0%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
118042
|
+
// <div class="is-block block-dummy" style="top: 20%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
118043
|
+
// <div class="is-block block-dummy" style="top: 40%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
118044
|
+
// <div class="is-block block-dummy" style="top: 60%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
118045
|
+
// <div class="is-block block-dummy" style="top: 80%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
118046
|
+
// `);
|
118047
|
+
|
118001
118048
|
const obj = new Sortable(box, {
|
118002
118049
|
scroll: true,
|
118003
118050
|
group: 'shared',
|
@@ -118095,9 +118142,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
118095
118142
|
bw = '540px';
|
118096
118143
|
}
|
118097
118144
|
}
|
118145
|
+
let containerClass = ''; // container's 'size-18 leading-14' is not for print
|
118146
|
+
if (this.isContentBox) containerClass = ' size-18 leading-14';
|
118098
118147
|
const blockTemplate = `
|
118099
118148
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
118100
|
-
<div class="is-container container-new">
|
118149
|
+
<div class="is-container container-new${containerClass}">
|
118101
118150
|
[%CONTENT%]
|
118102
118151
|
</div>
|
118103
118152
|
</div>
|
@@ -118147,9 +118196,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
118147
118196
|
bw = '540px';
|
118148
118197
|
}
|
118149
118198
|
}
|
118199
|
+
let containerClass = ''; // container's 'size-18 leading-14' is not for print
|
118200
|
+
if (this.isContentBox) containerClass = ' size-18 leading-14';
|
118150
118201
|
const blockTemplate = `
|
118151
118202
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
118152
|
-
<div class="is-container container-new">
|
118203
|
+
<div class="is-container container-new${containerClass}">
|
118153
118204
|
[%CONTENT%]
|
118154
118205
|
</div>
|
118155
118206
|
</div>
|
@@ -118185,6 +118236,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
118185
118236
|
});
|
118186
118237
|
let dummies = this.doc.querySelectorAll('.block-dummy');
|
118187
118238
|
dummies.forEach(elm => elm.parentNode.removeChild(elm));
|
118239
|
+
this.sortableOnCanvas = [];
|
118188
118240
|
}
|
118189
118241
|
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
118190
118242
|
}
|
@@ -118402,6 +118454,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
118402
118454
|
});
|
118403
118455
|
let dummies = this.doc.querySelectorAll('.block-dummy');
|
118404
118456
|
dummies.forEach(elm => elm.parentNode.removeChild(elm));
|
118457
|
+
this.sortableOnCanvas = [];
|
118405
118458
|
}
|
118406
118459
|
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
118407
118460
|
}
|
@@ -133679,6 +133732,8 @@ class Section {
|
|
133679
133732
|
this.builder.activeBox = section.querySelector('.box-select');
|
133680
133733
|
}
|
133681
133734
|
|
133735
|
+
if (this.builder.eb) this.builder.eb.refresh(); // freeform
|
133736
|
+
|
133682
133737
|
this.builder.onRender();
|
133683
133738
|
this.builder.onChange();
|
133684
133739
|
}
|
@@ -145562,7 +145617,7 @@ class ContentBox {
|
|
145562
145617
|
toolbar: 'top',
|
145563
145618
|
toolbarDisplay: 'auto',
|
145564
145619
|
toolbarAddSnippetButton: false,
|
145565
|
-
paste: '
|
145620
|
+
paste: 'text',
|
145566
145621
|
builderMode: '',
|
145567
145622
|
rowcolOutline: true,
|
145568
145623
|
elementSelection: true,
|
@@ -148925,6 +148980,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
148925
148980
|
this.editor = new ContentBuilder({
|
148926
148981
|
controlPanel: this.settings.controlPanel,
|
148927
148982
|
canvas: this.settings.canvas,
|
148983
|
+
docContainer: this.settings.wrapper,
|
148928
148984
|
consoleLog: this.settings.consoleLog,
|
148929
148985
|
isContentBox: true,
|
148930
148986
|
speechTranscribeUrl: this.settings.speechTranscribeUrl,
|