@innovastudio/contentbuilder 1.5.22 → 1.5.24
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -17685,6 +17685,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17685
17685
|
obj.destroy();
|
17686
17686
|
}
|
17687
17687
|
});
|
17688
|
+
builder.sortableOnCanvas = [];
|
17688
17689
|
}
|
17689
17690
|
if (builder.sortableOnPage) builder.sortableOnPage.destroy();
|
17690
17691
|
let dummies = builder.doc.querySelectorAll('.block-dummy');
|
@@ -83219,6 +83220,8 @@ class Resizable {
|
|
83219
83220
|
this.doc.addEventListener('mouseup', this.handleResizeEnd);
|
83220
83221
|
this.doc.addEventListener('touchmove', this.handleResizeMove);
|
83221
83222
|
this.doc.addEventListener('touchend', this.handleResizeEnd);
|
83223
|
+
document.addEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
|
83224
|
+
document.addEventListener('touchend', this.handleResizeEnd);
|
83222
83225
|
}
|
83223
83226
|
handleResizeMove(event) {
|
83224
83227
|
if (this.isResizing) {
|
@@ -83269,6 +83272,8 @@ class Resizable {
|
|
83269
83272
|
this.doc.removeEventListener('mouseup', this.handleResizeEnd);
|
83270
83273
|
this.doc.removeEventListener('touchmove', this.handleResizeMove);
|
83271
83274
|
this.doc.removeEventListener('touchend', this.handleResizeEnd);
|
83275
|
+
document.removeEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
|
83276
|
+
document.removeEventListener('touchend', this.handleResizeEnd);
|
83272
83277
|
this.ruler.hideRulers();
|
83273
83278
|
}
|
83274
83279
|
resizeTopLeft(deltaX, deltaY) {
|
@@ -88093,6 +88098,59 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88093
88098
|
}
|
88094
88099
|
});
|
88095
88100
|
|
88101
|
+
// Canvas Mode
|
88102
|
+
const copyBlock = e => {
|
88103
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
88104
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
88105
|
+
//CTRL-C
|
88106
|
+
const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
|
88107
|
+
if (activeBlock) {
|
88108
|
+
this.copyBlock = activeBlock;
|
88109
|
+
}
|
88110
|
+
}
|
88111
|
+
};
|
88112
|
+
const pasteBlock = e => {
|
88113
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
88114
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
88115
|
+
//CTRL-V
|
88116
|
+
|
88117
|
+
const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
|
88118
|
+
let block = this.copyBlock;
|
88119
|
+
if (box && block) {
|
88120
|
+
if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
|
88121
|
+
const focusedElement = e.target;
|
88122
|
+
const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
|
88123
|
+
if (isEditable) return;
|
88124
|
+
this.uo.saveForUndo();
|
88125
|
+
let block = this.copyBlock;
|
88126
|
+
const builder = block.querySelector(this.container);
|
88127
|
+
let html = '';
|
88128
|
+
if (builder) {
|
88129
|
+
html = this.readHtml(builder);
|
88130
|
+
}
|
88131
|
+
let clonedDiv = block.cloneNode(true);
|
88132
|
+
clonedDiv.style.top = '20%';
|
88133
|
+
clonedDiv.style.left = '20%';
|
88134
|
+
if (builder) {
|
88135
|
+
const cloneBuilder = clonedDiv.querySelector(this.container);
|
88136
|
+
cloneBuilder.innerHTML = '';
|
88137
|
+
box.appendChild(clonedDiv);
|
88138
|
+
const range = document.createRange();
|
88139
|
+
cloneBuilder.appendChild(range.createContextualFragment(html));
|
88140
|
+
this.applyBehaviorOn(cloneBuilder);
|
88141
|
+
cloneBuilder.click();
|
88142
|
+
} else {
|
88143
|
+
block.parentNode.appendChild(clonedDiv);
|
88144
|
+
}
|
88145
|
+
block.classList.remove('active');
|
88146
|
+
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
88147
|
+
this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
|
88148
|
+
this.eb.refresh();
|
88149
|
+
this.opts.onChange();
|
88150
|
+
}
|
88151
|
+
}
|
88152
|
+
};
|
88153
|
+
|
88096
88154
|
// SHIFT + Right Clidk to Zoom In
|
88097
88155
|
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
88098
88156
|
//--- see loadHtml ---
|
@@ -88164,52 +88222,40 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88164
88222
|
document.addEventListener('keydown', e => {
|
88165
88223
|
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
88166
88224
|
//CTRL-C
|
88167
|
-
|
88168
|
-
if (activeBlock) {
|
88169
|
-
this.copyBlock = activeBlock;
|
88170
|
-
}
|
88225
|
+
copyBlock(e);
|
88171
88226
|
}
|
88172
88227
|
});
|
88173
88228
|
document.addEventListener('keydown', e => {
|
88174
88229
|
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
88175
88230
|
//CTRL-V
|
88176
|
-
|
88177
|
-
|
88178
|
-
|
88179
|
-
|
88180
|
-
|
88181
|
-
|
88182
|
-
|
88183
|
-
|
88184
|
-
|
88185
|
-
let block = this.copyBlock;
|
88186
|
-
const builder = block.querySelector(this.container);
|
88187
|
-
let html = '';
|
88188
|
-
if (builder) {
|
88189
|
-
html = this.readHtml(builder);
|
88190
|
-
}
|
88191
|
-
let clonedDiv = block.cloneNode(true);
|
88192
|
-
clonedDiv.style.top = '20%';
|
88193
|
-
clonedDiv.style.left = '20%';
|
88194
|
-
if (builder) {
|
88195
|
-
const cloneBuilder = clonedDiv.querySelector(this.container);
|
88196
|
-
cloneBuilder.innerHTML = '';
|
88197
|
-
box.appendChild(clonedDiv);
|
88198
|
-
const range = document.createRange();
|
88199
|
-
cloneBuilder.appendChild(range.createContextualFragment(html));
|
88200
|
-
this.applyBehaviorOn(cloneBuilder);
|
88201
|
-
cloneBuilder.click();
|
88202
|
-
} else {
|
88203
|
-
block.parentNode.appendChild(clonedDiv);
|
88204
|
-
}
|
88205
|
-
block.classList.remove('active');
|
88206
|
-
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
88207
|
-
this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
|
88208
|
-
this.eb.refresh();
|
88209
|
-
this.opts.onChange();
|
88210
|
-
}
|
88231
|
+
pasteBlock(e);
|
88232
|
+
}
|
88233
|
+
});
|
88234
|
+
}
|
88235
|
+
if (this.canvas && this.isContentBox) {
|
88236
|
+
// Copy & Paste Block
|
88237
|
+
document.addEventListener('keydown', e => {
|
88238
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
88239
|
+
copyBlock(e);
|
88211
88240
|
}
|
88212
88241
|
});
|
88242
|
+
document.addEventListener('keydown', e => {
|
88243
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
88244
|
+
pasteBlock(e);
|
88245
|
+
}
|
88246
|
+
});
|
88247
|
+
if (this.iframe) {
|
88248
|
+
this.doc.addEventListener('keydown', e => {
|
88249
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
88250
|
+
copyBlock(e);
|
88251
|
+
}
|
88252
|
+
});
|
88253
|
+
this.doc.addEventListener('keydown', e => {
|
88254
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
88255
|
+
pasteBlock(e);
|
88256
|
+
}
|
88257
|
+
});
|
88258
|
+
}
|
88213
88259
|
}
|
88214
88260
|
let previousWidth = this.win.innerWidth;
|
88215
88261
|
let timer;
|
@@ -92528,13 +92574,14 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92528
92574
|
boxes = this.doc.querySelectorAll(this.blockContainer);
|
92529
92575
|
}
|
92530
92576
|
boxes.forEach(box => {
|
92531
|
-
box.insertAdjacentHTML('afterbegin', `
|
92532
|
-
|
92533
|
-
|
92534
|
-
|
92535
|
-
|
92536
|
-
|
92537
|
-
|
92577
|
+
// box.insertAdjacentHTML('afterbegin', `
|
92578
|
+
// <div class="is-block block-dummy" style="top: 0%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
92579
|
+
// <div class="is-block block-dummy" style="top: 20%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
92580
|
+
// <div class="is-block block-dummy" style="top: 40%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
92581
|
+
// <div class="is-block block-dummy" style="top: 60%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
92582
|
+
// <div class="is-block block-dummy" style="top: 80%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
92583
|
+
// `);
|
92584
|
+
|
92538
92585
|
const obj = new Sortable(box, {
|
92539
92586
|
scroll: true,
|
92540
92587
|
group: 'shared',
|
@@ -92632,9 +92679,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92632
92679
|
bw = '540px';
|
92633
92680
|
}
|
92634
92681
|
}
|
92682
|
+
let containerClass = ''; // container's 'size-18 leading-14' is not for print
|
92683
|
+
if (this.isContentBox) containerClass = ' size-18 leading-14';
|
92635
92684
|
const blockTemplate = `
|
92636
92685
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
92637
|
-
<div class="is-container container-new">
|
92686
|
+
<div class="is-container container-new${containerClass}">
|
92638
92687
|
[%CONTENT%]
|
92639
92688
|
</div>
|
92640
92689
|
</div>
|
@@ -92684,9 +92733,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92684
92733
|
bw = '540px';
|
92685
92734
|
}
|
92686
92735
|
}
|
92736
|
+
let containerClass = ''; // container's 'size-18 leading-14' is not for print
|
92737
|
+
if (this.isContentBox) containerClass = ' size-18 leading-14';
|
92687
92738
|
const blockTemplate = `
|
92688
92739
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
92689
|
-
<div class="is-container container-new">
|
92740
|
+
<div class="is-container container-new${containerClass}">
|
92690
92741
|
[%CONTENT%]
|
92691
92742
|
</div>
|
92692
92743
|
</div>
|
@@ -92722,6 +92773,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92722
92773
|
});
|
92723
92774
|
let dummies = this.doc.querySelectorAll('.block-dummy');
|
92724
92775
|
dummies.forEach(elm => elm.parentNode.removeChild(elm));
|
92776
|
+
this.sortableOnCanvas = [];
|
92725
92777
|
}
|
92726
92778
|
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
92727
92779
|
}
|
@@ -92939,6 +92991,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
92939
92991
|
});
|
92940
92992
|
let dummies = this.doc.querySelectorAll('.block-dummy');
|
92941
92993
|
dummies.forEach(elm => elm.parentNode.removeChild(elm));
|
92994
|
+
this.sortableOnCanvas = [];
|
92942
92995
|
}
|
92943
92996
|
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
92944
92997
|
}
|