@innovastudio/contentbuilder 1.4.113 → 1.4.115

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/public/contentbuilder/contentbuilder.css +74 -0
  3. package/public/contentbuilder/contentbuilder.esm.js +356 -158
  4. package/public/contentbuilder/contentbuilder.min.js +8 -8
  5. package/readme.txt +1 -1
package/public/contentbuilder/contentbuilder.esm.js CHANGED
@@ -5493,16 +5493,25 @@ class Util {
5493
5493
  // let top = emptyinfo.getBoundingClientRect().top;
5494
5494
  // const left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
5495
5495
 
5496
+ /*
5496
5497
  let top, left;
5497
- if (!this.builder.iframe) {
5498
- top = emptyinfo.getBoundingClientRect().top;
5499
- left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
5498
+ if(!this.builder.iframe) {
5499
+ top = emptyinfo.getBoundingClientRect().top;
5500
+ left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
5500
5501
  } else {
5501
- let adjY = this.builder.iframe.getBoundingClientRect().top;
5502
- let adjX = this.builder.iframe.getBoundingClientRect().left;
5503
- top = emptyinfo.getBoundingClientRect().top + adjY;
5504
- left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11) + adjX;
5502
+ let adjY = this.builder.iframe.getBoundingClientRect().top;
5503
+ let adjX = this.builder.iframe.getBoundingClientRect().left;
5504
+ top = emptyinfo.getBoundingClientRect().top + adjY;
5505
+ left = emptyinfo.getBoundingClientRect().left + ((emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11) + adjX;
5505
5506
  }
5507
+ */
5508
+ const newPos = this.getElementPosition(emptyinfo);
5509
+ let top = newPos.top;
5510
+ let left = newPos.left;
5511
+ let scaleX = newPos.scaleX;
5512
+ let scaleY = newPos.scaleY;
5513
+ left = left + (emptyinfo.offsetWidth * (scaleX * this.builder.opts.zoom) / 2 - 11);
5514
+ top = top - (emptyinfo.offsetHeight - emptyinfo.offsetHeight * scaleY);
5506
5515
  quickadd.style.display = 'flex';
5507
5516
  this.showPop(quickadd, false, emptyinfo);
5508
5517
  const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
@@ -5673,16 +5682,9 @@ class Util {
5673
5682
  const btnCellMore = this.colTool.querySelector('.cell-more');
5674
5683
  columnMore.classList.add('transition1');
5675
5684
  setTimeout(() => {
5676
- let top, left;
5677
- if (!this.builder.iframe) {
5678
- top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
5679
- left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
5680
- } else {
5681
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
5682
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
5683
- top = btnCellMore.getBoundingClientRect().top + adjY;
5684
- left = btnCellMore.getBoundingClientRect().left + adjX;
5685
- }
5685
+ const newPos = this.getElementPosition(btnCellMore);
5686
+ let top = newPos.top;
5687
+ let left = newPos.left;
5686
5688
  columnMore.style.top = top + 35 + 'px';
5687
5689
  columnMore.style.left = left - 7 + 'px';
5688
5690
  setTimeout(() => {
@@ -7258,6 +7260,39 @@ class Util {
7258
7260
  }
7259
7261
  return pageTemplate;
7260
7262
  }
7263
+ getElementPosition(element) {
7264
+ const iframe = this.builder.iframe;
7265
+ let top, left;
7266
+ let scaleX, scaleY;
7267
+ if (this.builder.iframe) {
7268
+ let divContentView = document.querySelector('.is-content-view');
7269
+ if (!divContentView) divContentView = iframe.parentNode;
7270
+ const divContentViewStyles = window.getComputedStyle(divContentView);
7271
+ const transform = divContentViewStyles.transform;
7272
+ if (transform !== 'none') {
7273
+ const matrixValues = transform.match(/matrix\(([0-9., -]+)\)/)[1].split(',');
7274
+ scaleX = parseFloat(matrixValues[0]);
7275
+ scaleY = parseFloat(matrixValues[3]);
7276
+ } else {
7277
+ scaleX = 1;
7278
+ scaleY = 1;
7279
+ }
7280
+ const iframeRect = iframe.getBoundingClientRect();
7281
+ top = element.getBoundingClientRect().top * scaleY + iframeRect.top;
7282
+ left = element.getBoundingClientRect().left * scaleX + iframeRect.left;
7283
+ } else {
7284
+ top = element.getBoundingClientRect().top;
7285
+ left = element.getBoundingClientRect().left;
7286
+ scaleX = 1;
7287
+ scaleY = 1;
7288
+ }
7289
+ return {
7290
+ top,
7291
+ left,
7292
+ scaleX,
7293
+ scaleY
7294
+ };
7295
+ }
7261
7296
  }
7262
7297
  class Dom {
7263
7298
  constructor(builder) {
@@ -18529,18 +18564,24 @@ class RowTool$1 {
18529
18564
  let rowMore = builderStuff.querySelector('.rowmore');
18530
18565
  dom.addClass(rowMore, 'transition1');
18531
18566
  const elm = rowTool.querySelector('.row-more');
18567
+
18568
+ /*
18532
18569
  let top, left;
18533
- if (!this.builder.iframe) {
18534
- top = elm.getBoundingClientRect().top + window.pageYOffset;
18535
- left = elm.getBoundingClientRect().left + window.pageXOffset;
18570
+ if(!this.builder.iframe) {
18571
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
18572
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
18536
18573
  } else {
18537
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
18538
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
18539
- top = elm.getBoundingClientRect().top;
18540
- left = elm.getBoundingClientRect().left;
18541
- top = top + adjY;
18542
- left = left + adjX;
18574
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
18575
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
18576
+ top = elm.getBoundingClientRect().top;
18577
+ left = elm.getBoundingClientRect().left;
18578
+ top = top + adjY;
18579
+ left = left + adjX;
18543
18580
  }
18581
+ */
18582
+ const newPos = this.builder.util.getElementPosition(elm);
18583
+ let top = newPos.top;
18584
+ let left = newPos.left;
18544
18585
 
18545
18586
  // const w = rowMore.offsetWidth;
18546
18587
  rowMore.style.top = top - 8 + 'px';
@@ -49731,6 +49772,13 @@ class Image$1 {
49731
49772
 
49732
49773
  // get active image
49733
49774
  let activeImage = this.builder.activeImage;
49775
+ let newPos = this.builder.util.getElementPosition(activeImage);
49776
+ if (this.builder.iframe) {
49777
+ let scaleX = newPos.scaleX;
49778
+ let scaleY = newPos.scaleY;
49779
+ width = width / scaleX;
49780
+ height = height / scaleY;
49781
+ }
49734
49782
  let bCircular = false;
49735
49783
  if (dom.hasClass(activeImage.parentNode, 'img-circular')) {
49736
49784
  activeImage = activeImage.parentNode;
@@ -49758,17 +49806,21 @@ class Image$1 {
49758
49806
  }
49759
49807
 
49760
49808
  // sync (target = imageResizer)
49761
-
49809
+ /*
49762
49810
  let top, left;
49763
- if (!this.builder.iframe) {
49764
- top = activeImage.getBoundingClientRect().top + window.pageYOffset;
49765
- left = activeImage.getBoundingClientRect().left + window.pageXOffset;
49811
+ if(!this.builder.iframe) {
49812
+ top = activeImage.getBoundingClientRect().top + window.pageYOffset;
49813
+ left = activeImage.getBoundingClientRect().left + window.pageXOffset;
49766
49814
  } else {
49767
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
49768
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
49769
- top = activeImage.getBoundingClientRect().top + adjY;
49770
- left = activeImage.getBoundingClientRect().left + adjX;
49815
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
49816
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
49817
+ top = activeImage.getBoundingClientRect().top + adjY;
49818
+ left = activeImage.getBoundingClientRect().left+ adjX;
49771
49819
  }
49820
+ */
49821
+ newPos = this.builder.util.getElementPosition(activeImage);
49822
+ let top = newPos.top;
49823
+ let left = newPos.left;
49772
49824
  target.style.top = top + 'px';
49773
49825
  target.style.left = left + 'px';
49774
49826
  target.style.width = activeImage.offsetWidth + 'px';
@@ -49841,7 +49893,8 @@ class Image$1 {
49841
49893
  //Trigger Change event
49842
49894
  this.builder.opts.onChange();
49843
49895
  });
49844
- document.querySelector('.moveable-control-box').style.display = 'none';
49896
+ const movControlBox = document.querySelector('.moveable-control-box');
49897
+ if (movControlBox) movControlBox.style.display = 'none';
49845
49898
  imageResizer.addEventListener('click', () => {
49846
49899
  if (!this.builder.activeImage) return;
49847
49900
  this.builder.activeImage.click();
@@ -49881,16 +49934,22 @@ class Image$1 {
49881
49934
  imageProgress.style.display = 'table';
49882
49935
  imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
49883
49936
  imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
49937
+
49938
+ /*
49884
49939
  let top, left;
49885
- if (!this.builder.iframe) {
49886
- top = img.getBoundingClientRect().top + window.pageYOffset;
49887
- left = img.getBoundingClientRect().left + window.pageXOffset;
49940
+ if(!this.builder.iframe) {
49941
+ top = img.getBoundingClientRect().top + window.pageYOffset;
49942
+ left = img.getBoundingClientRect().left + window.pageXOffset;
49888
49943
  } else {
49889
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
49890
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
49891
- top = img.getBoundingClientRect().top + adjY;
49892
- left = img.getBoundingClientRect().left + adjX;
49944
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
49945
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
49946
+ top = img.getBoundingClientRect().top + adjY;
49947
+ left = img.getBoundingClientRect().left+ adjX;
49893
49948
  }
49949
+ */
49950
+ const newPos = this.builder.util.getElementPosition(img);
49951
+ let top = newPos.top + window.pageYOffset;
49952
+ let left = newPos.left + window.pageXOffset;
49894
49953
  imageProgress.style.top = top + 'px';
49895
49954
  imageProgress.style.left = left + 'px';
49896
49955
 
@@ -49973,7 +50032,8 @@ class Image$1 {
49973
50032
  dom.addEventListener(btnImageLink, 'click', () => {
49974
50033
  //imageTool.style.display = 'none';
49975
50034
 
49976
- document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
50035
+ const movControlBox = document.querySelector('.moveable-control-box');
50036
+ if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
49977
50037
 
49978
50038
  if (this.builder.opts.onImageSettingClick) {
49979
50039
  this.builder.opts.onImageSettingClick();
@@ -50032,7 +50092,8 @@ class Image$1 {
50032
50092
  elm = modalImageLink.querySelector('.input-cancel');
50033
50093
  dom.addEventListener(elm, 'click', () => {
50034
50094
  util.hideModal(modalImageLink);
50035
- document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
50095
+ const movControlBox = document.querySelector('.moveable-control-box');
50096
+ if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
50036
50097
  });
50037
50098
 
50038
50099
  // Apply link to image
@@ -50347,7 +50408,8 @@ class Image$1 {
50347
50408
  zoomable: false
50348
50409
  });
50349
50410
  }
50350
- document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
50411
+ const movControlBox = document.querySelector('.moveable-control-box');
50412
+ if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
50351
50413
  });
50352
50414
 
50353
50415
  // Set crop proportion
@@ -50364,7 +50426,8 @@ class Image$1 {
50364
50426
  let btnCancel = modalImageEdit.querySelector('.input-cancel');
50365
50427
  dom.addEventListener(btnCancel, 'click', () => {
50366
50428
  util.hideModal(modalImageEdit);
50367
- document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
50429
+ const movControlBox = document.querySelector('.moveable-control-box');
50430
+ if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block'; //needed by Safari (prevent z-index problem)
50368
50431
  });
50369
50432
 
50370
50433
  // Apply (crop) image
@@ -50470,23 +50533,29 @@ class Image$1 {
50470
50533
  if (dom.hasClass(elm.parentNode, 'img-circular')) {
50471
50534
  elm = elm.parentNode;
50472
50535
  }
50536
+ const newPos = this.builder.util.getElementPosition(elm);
50537
+ let scaleX = newPos.scaleX;
50473
50538
  imageTool.style.display = 'flex';
50474
50539
  let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
50475
50540
 
50476
- let w = elm.offsetWidth * this.builder.opts.zoom;
50541
+ let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
50477
50542
  // let top = elm.getBoundingClientRect().top + window.pageYOffset;
50478
50543
  // let left = elm.getBoundingClientRect().left+ window.pageXOffset;
50479
50544
 
50545
+ /*
50480
50546
  let top, left;
50481
- if (!this.builder.iframe) {
50482
- top = elm.getBoundingClientRect().top + window.pageYOffset;
50483
- left = elm.getBoundingClientRect().left + window.pageXOffset;
50547
+ if(!this.builder.iframe) {
50548
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
50549
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
50484
50550
  } else {
50485
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50486
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50487
- top = elm.getBoundingClientRect().top + adjY;
50488
- left = elm.getBoundingClientRect().left + adjX;
50551
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50552
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50553
+ top = elm.getBoundingClientRect().top + adjY;
50554
+ left = elm.getBoundingClientRect().left+ adjX;
50489
50555
  }
50556
+ */
50557
+ let top = newPos.top + window.pageYOffset;
50558
+ let left = newPos.left + window.pageXOffset;
50490
50559
  let toolLeft = left + (w / 2 - _toolwidth / 2);
50491
50560
 
50492
50561
  //Adjust left in case an element is outside the screen
@@ -50504,12 +50573,13 @@ class Image$1 {
50504
50573
  imageResizer.style.left = left + 'px';
50505
50574
  imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
50506
50575
  imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
50507
- imageResizer.style.display = 'block';
50576
+ if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
50508
50577
  this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
50509
50578
 
50510
50579
  // moveable
50511
- this.builder.moveable.updateRect();
50512
- document.querySelector('.moveable-control-box').style.display = 'block';
50580
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50581
+ const movControlBox = document.querySelector('.moveable-control-box');
50582
+ if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
50513
50583
  if (elm.offsetWidth === 0) {
50514
50584
  // when there is image link applied
50515
50585
 
@@ -50525,8 +50595,9 @@ class Image$1 {
50525
50595
  imageResizer.style.left = '-10px';
50526
50596
  imageResizer.style.width = '1px';
50527
50597
  imageResizer.style.height = '1px';
50528
- this.builder.moveable.updateRect();
50529
- document.querySelector('.moveable-control-box').style.display = 'none';
50598
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50599
+ const movControlBox = document.querySelector('.moveable-control-box');
50600
+ if (movControlBox) movControlBox.style.display = 'none';
50530
50601
  }
50531
50602
  this.util.repositionColumnTool();
50532
50603
  }, 0); // refesh() is called after img onload, so no need to have a delay.
@@ -50542,23 +50613,29 @@ class Image$1 {
50542
50613
  if (dom.hasClass(elm.parentNode, 'img-circular')) {
50543
50614
  elm = elm.parentNode;
50544
50615
  }
50616
+ const newPos = this.builder.util.getElementPosition(elm);
50617
+ let scaleX = newPos.scaleX;
50545
50618
  imageTool.style.display = 'flex';
50546
50619
  let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
50547
50620
 
50548
- let w = elm.offsetWidth * this.builder.opts.zoom;
50621
+ let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
50549
50622
  // let top = elm.getBoundingClientRect().top + window.pageYOffset;
50550
50623
  // let left = elm.getBoundingClientRect().left+ window.pageXOffset;
50551
50624
 
50625
+ /*
50552
50626
  let top, left;
50553
- if (!this.builder.iframe) {
50554
- top = elm.getBoundingClientRect().top + window.pageYOffset;
50555
- left = elm.getBoundingClientRect().left + window.pageXOffset;
50627
+ if(!this.builder.iframe) {
50628
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
50629
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
50556
50630
  } else {
50557
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50558
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50559
- top = elm.getBoundingClientRect().top + adjY;
50560
- left = elm.getBoundingClientRect().left + adjX;
50631
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50632
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50633
+ top = elm.getBoundingClientRect().top + adjY;
50634
+ left = elm.getBoundingClientRect().left+ adjX;
50561
50635
  }
50636
+ */
50637
+ let top = newPos.top + window.pageYOffset;
50638
+ let left = newPos.left + window.pageXOffset;
50562
50639
  let toolLeft = left + (w / 2 - _toolwidth / 2);
50563
50640
 
50564
50641
  //Adjust left in case an element is outside the screen
@@ -50576,12 +50653,13 @@ class Image$1 {
50576
50653
  imageResizer.style.left = left + 'px';
50577
50654
  imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
50578
50655
  imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
50579
- imageResizer.style.display = 'block';
50656
+ if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
50580
50657
  this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
50581
50658
 
50582
50659
  // moveable
50583
- this.builder.moveable.updateRect();
50584
- document.querySelector('.moveable-control-box').style.display = 'block';
50660
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50661
+ const movControlBox = document.querySelector('.moveable-control-box');
50662
+ if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
50585
50663
  }
50586
50664
  }
50587
50665
  click(e) {
@@ -50600,21 +50678,28 @@ class Image$1 {
50600
50678
  if (dom.hasClass(elm.parentNode, 'img-circular')) {
50601
50679
  elm = elm.parentNode;
50602
50680
  }
50681
+ const newPos = this.builder.util.getElementPosition(elm);
50682
+ let scaleX = newPos.scaleX;
50603
50683
  let imageTool = this.imageTool;
50604
50684
  imageTool.style.display = 'flex';
50605
50685
  let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
50606
50686
 
50607
- let w = elm.offsetWidth * this.builder.opts.zoom;
50687
+ let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
50688
+
50689
+ /*
50608
50690
  let top, left;
50609
- if (!this.builder.iframe) {
50610
- top = elm.getBoundingClientRect().top + window.pageYOffset;
50611
- left = elm.getBoundingClientRect().left + window.pageXOffset;
50691
+ if(!this.builder.iframe) {
50692
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
50693
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
50612
50694
  } else {
50613
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50614
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50615
- top = elm.getBoundingClientRect().top + adjY;
50616
- left = elm.getBoundingClientRect().left + adjX;
50695
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50696
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50697
+ top = elm.getBoundingClientRect().top + adjY;
50698
+ left = elm.getBoundingClientRect().left+ adjX;
50617
50699
  }
50700
+ */
50701
+ let top = newPos.top + window.pageYOffset;
50702
+ let left = newPos.left + window.pageXOffset;
50618
50703
  let toolLeft = left + (w / 2 - _toolwidth / 2);
50619
50704
 
50620
50705
  //Adjust left in case an element is outside the screen
@@ -50631,21 +50716,29 @@ class Image$1 {
50631
50716
  // Image Resizer
50632
50717
  if (!elm.hasAttribute('data-noresize')) {
50633
50718
  let imageResizer = this.imageResizer;
50719
+
50720
+ /*
50634
50721
  let top, left;
50635
- if (!this.builder.iframe) {
50636
- top = elm.getBoundingClientRect().top + window.pageYOffset;
50637
- left = elm.getBoundingClientRect().left + window.pageXOffset;
50722
+ if(!this.builder.iframe) {
50723
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
50724
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
50638
50725
  } else {
50639
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50640
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50641
- top = elm.getBoundingClientRect().top + adjY;
50642
- left = elm.getBoundingClientRect().left + adjX;
50726
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
50727
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
50728
+ top = elm.getBoundingClientRect().top + adjY;
50729
+ left = elm.getBoundingClientRect().left+ adjX;
50643
50730
  }
50731
+ */
50732
+ const newPos = this.builder.util.getElementPosition(elm);
50733
+ let top = newPos.top + window.pageYOffset;
50734
+ let left = newPos.left + window.pageXOffset;
50735
+ let scaleX = newPos.scaleX;
50736
+ let scaleY = newPos.scaleY;
50644
50737
  imageResizer.style.top = top + 'px';
50645
50738
  imageResizer.style.left = left + 'px';
50646
- imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
50647
- imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
50648
- imageResizer.style.display = 'block';
50739
+ imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom * scaleX + 'px';
50740
+ imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom * scaleY + 'px';
50741
+ if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
50649
50742
  this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
50650
50743
 
50651
50744
  //Get & save original image width
@@ -50660,8 +50753,9 @@ class Image$1 {
50660
50753
  imageResizer.setAttribute('data-width', Math.round(imgwidthpx));
50661
50754
 
50662
50755
  // moveable
50663
- this.builder.moveable.updateRect();
50664
- document.querySelector('.moveable-control-box').style.display = 'block';
50756
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50757
+ const movControlBox = document.querySelector('.moveable-control-box');
50758
+ if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
50665
50759
 
50666
50760
  /*
50667
50761
  if(elm.getAttribute('data-mov')!=='1'){
@@ -50773,8 +50867,9 @@ class Image$1 {
50773
50867
  imageResizer.style.left = '-10px';
50774
50868
  imageResizer.style.width = '1px';
50775
50869
  imageResizer.style.height = '1px';
50776
- this.builder.moveable.updateRect();
50777
- document.querySelector('.moveable-control-box').style.display = 'none';
50870
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50871
+ const movControlBox = document.querySelector('.moveable-control-box');
50872
+ if (movControlBox) movControlBox.style.display = 'none';
50778
50873
  }
50779
50874
  let prog = false;
50780
50875
  if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
@@ -50791,8 +50886,9 @@ class Image$1 {
50791
50886
  imageResizer.style.left = '-10px';
50792
50887
  imageResizer.style.width = '1px';
50793
50888
  imageResizer.style.height = '1px';
50794
- this.builder.moveable.updateRect();
50795
- document.querySelector('.moveable-control-box').style.display = 'none';
50889
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50890
+ const movControlBox = document.querySelector('.moveable-control-box');
50891
+ if (movControlBox) movControlBox.style.display = 'none';
50796
50892
  }
50797
50893
 
50798
50894
  // NOTE:
@@ -50817,8 +50913,9 @@ class Image$1 {
50817
50913
  imageResizer.style.left = '-10px';
50818
50914
  imageResizer.style.width = '1px';
50819
50915
  imageResizer.style.height = '1px';
50820
- this.builder.moveable.updateRect();
50821
- document.querySelector('.moveable-control-box').style.display = 'none';
50916
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50917
+ const movControlBox = document.querySelector('.moveable-control-box');
50918
+ if (movControlBox) movControlBox.style.display = 'none';
50822
50919
  }
50823
50920
  } else {
50824
50921
  let imageTool = this.imageTool;
@@ -50832,8 +50929,9 @@ class Image$1 {
50832
50929
  imageResizer.style.left = '-10px';
50833
50930
  imageResizer.style.width = '1px';
50834
50931
  imageResizer.style.height = '1px';
50835
- this.builder.moveable.updateRect();
50836
- document.querySelector('.moveable-control-box').style.display = 'none';
50932
+ if (this.builder.moveable) this.builder.moveable.updateRect();
50933
+ const movControlBox = document.querySelector('.moveable-control-box');
50934
+ if (movControlBox) movControlBox.style.display = 'none';
50837
50935
  }
50838
50936
  }
50839
50937
 
@@ -50861,6 +50959,11 @@ class Image$1 {
50861
50959
  let imageResizer = document.querySelector('#divImageResizer');
50862
50960
  imageResizer.style.width = width * this.builder.opts.zoom + 'px';
50863
50961
  imageResizer.style.height = height * this.builder.opts.zoom + 'px';
50962
+ const newPos = this.builder.util.getElementPosition(imageResizer);
50963
+ let scaleX = newPos.scaleX;
50964
+ let scaleY = newPos.scaleY;
50965
+ imageResizer.style.width = width * this.builder.opts.zoom * scaleX + 'px';
50966
+ imageResizer.style.height = height * this.builder.opts.zoom * scaleY + 'px';
50864
50967
  }
50865
50968
  processImage(file, targetImg, processImageDone) {
50866
50969
  //file can also be an URL (from the same host), ex. file = "/assets/image.jpg";
@@ -58065,15 +58168,25 @@ class RowTool {
58065
58168
  let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
58066
58169
  let tabs = quickadd.querySelector('.is-pop-tabs');
58067
58170
  tabs.style.display = 'flex';
58171
+
58172
+ /*
58068
58173
  let top, left;
58069
- if (!this.builder.iframe) {
58070
- top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
58071
- left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
58174
+ if(!this.builder.iframe) {
58175
+ top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
58176
+ left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
58072
58177
  } else {
58073
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58074
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58075
- top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
58076
- left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
58178
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58179
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58180
+ top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
58181
+ left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
58182
+ }
58183
+ */
58184
+ const newPos = this.util.getElementPosition(btnCellAdd);
58185
+ let top = newPos.top + window.pageYOffset;
58186
+ let left = newPos.left + window.pageXOffset;
58187
+ if (this.builder.iframe) {
58188
+ // top = top;
58189
+ left = left + 3;
58077
58190
  }
58078
58191
 
58079
58192
  // quickadd.style.display = 'flex';
@@ -58100,16 +58213,22 @@ class RowTool {
58100
58213
  if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
58101
58214
  let cell = util.cellSelected();
58102
58215
  if (!cell) return;
58216
+
58217
+ /*
58103
58218
  let top, left;
58104
- if (!this.builder.iframe) {
58105
- top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
58106
- left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
58219
+ if(!this.builder.iframe) {
58220
+ top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
58221
+ left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
58107
58222
  } else {
58108
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58109
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58110
- top = btnCellMore.getBoundingClientRect().top + adjY;
58111
- left = btnCellMore.getBoundingClientRect().left + adjX;
58223
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58224
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58225
+ top = btnCellMore.getBoundingClientRect().top + adjY;
58226
+ left = btnCellMore.getBoundingClientRect().left + adjX;
58112
58227
  }
58228
+ */
58229
+ const newPos = this.util.getElementPosition(btnCellMore);
58230
+ let top = newPos.top + window.pageYOffset;
58231
+ let left = newPos.left + window.pageXOffset;
58113
58232
  const columnMore = builderStuff.querySelector('.columnmore');
58114
58233
 
58115
58234
  // columnMore.style.display = 'flex';
@@ -58165,7 +58284,7 @@ class RowTool {
58165
58284
  // Grid Editor Status
58166
58285
  // On/off outline button
58167
58286
  const btnGridOutline = grideditor.querySelector('.grid-outline');
58168
- const container = document.querySelector(this.builder.opts.container); // get one
58287
+ const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
58169
58288
  if (container.hasAttribute('gridoutline')) {
58170
58289
  dom.addClass(btnGridOutline, 'on');
58171
58290
  } else {
@@ -58205,16 +58324,21 @@ class RowTool {
58205
58324
  // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
58206
58325
  // const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
58207
58326
 
58327
+ /*
58208
58328
  let top, left;
58209
- if (!this.builder.iframe) {
58210
- top = btnMore.getBoundingClientRect().top + window.pageYOffset;
58211
- left = btnMore.getBoundingClientRect().left + window.pageXOffset;
58329
+ if(!this.builder.iframe) {
58330
+ top = btnMore.getBoundingClientRect().top + window.pageYOffset;
58331
+ left = btnMore.getBoundingClientRect().left + window.pageXOffset;
58212
58332
  } else {
58213
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58214
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58215
- top = btnMore.getBoundingClientRect().top + adjY;
58216
- left = btnMore.getBoundingClientRect().left + adjX;
58333
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
58334
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
58335
+ top = btnMore.getBoundingClientRect().top + adjY;
58336
+ left = btnMore.getBoundingClientRect().left + adjX;
58217
58337
  }
58338
+ */
58339
+ const newPos = this.util.getElementPosition(btnMore);
58340
+ let top = newPos.top + window.pageYOffset;
58341
+ let left = newPos.left + window.pageXOffset;
58218
58342
 
58219
58343
  // rowMore.style.display = 'flex';
58220
58344
  util.showPop(rowMore, false, btnMore);
@@ -58391,16 +58515,22 @@ class RowAddTool {
58391
58515
  let tabs = quickadd.querySelector('.is-pop-tabs');
58392
58516
  tabs.style.display = 'none';
58393
58517
  const viewportHeight = window.innerHeight;
58518
+
58519
+ /*
58394
58520
  let top, left;
58395
- if (!this.builder.iframe) {
58396
- top = btnRowAdd.getBoundingClientRect().top;
58397
- left = btnRowAdd.getBoundingClientRect().left;
58521
+ if(!this.builder.iframe) {
58522
+ top = btnRowAdd.getBoundingClientRect().top;
58523
+ left = btnRowAdd.getBoundingClientRect().left;
58398
58524
  } else {
58399
- let adjY = this.builder.iframe.getBoundingClientRect().top;
58400
- let adjX = this.builder.iframe.getBoundingClientRect().left;
58401
- top = btnRowAdd.getBoundingClientRect().top + adjY;
58402
- left = btnRowAdd.getBoundingClientRect().left + adjX;
58525
+ let adjY = this.builder.iframe.getBoundingClientRect().top;
58526
+ let adjX = this.builder.iframe.getBoundingClientRect().left;
58527
+ top = btnRowAdd.getBoundingClientRect().top + adjY;
58528
+ left = btnRowAdd.getBoundingClientRect().left + adjX;
58403
58529
  }
58530
+ */
58531
+ const newPos = util.getElementPosition(btnRowAdd);
58532
+ let top = newPos.top;
58533
+ let left = newPos.left;
58404
58534
 
58405
58535
  // quickadd.style.display = 'flex';
58406
58536
  util.showPop(quickadd, false, btnRowAdd);
@@ -66242,17 +66372,22 @@ class ElementTool {
66242
66372
  let tabs = quickadd.querySelector('.is-pop-tabs');
66243
66373
  tabs.style.display = 'none';
66244
66374
  const viewportHeight = window.innerHeight;
66375
+
66376
+ /*
66245
66377
  let top, left;
66246
- if (!this.builder.iframe) {
66247
- top = elmAdd.getBoundingClientRect().top;
66248
- left = elmAdd.getBoundingClientRect().left;
66378
+ if(!this.builder.iframe) {
66379
+ top = elmAdd.getBoundingClientRect().top;
66380
+ left = elmAdd.getBoundingClientRect().left;
66249
66381
  } else {
66250
- let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
66251
- let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
66252
-
66253
- top = elmAdd.getBoundingClientRect().top + adjY;
66254
- left = elmAdd.getBoundingClientRect().left + adjX;
66382
+ let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
66383
+ let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
66384
+ top = elmAdd.getBoundingClientRect().top + adjY ;
66385
+ left = elmAdd.getBoundingClientRect().left + adjX;
66255
66386
  }
66387
+ */
66388
+ const newPos = this.builder.util.getElementPosition(elmAdd);
66389
+ let top = newPos.top;
66390
+ let left = newPos.left;
66256
66391
 
66257
66392
  // quickadd.style.display = 'flex';
66258
66393
  util.showPop(quickadd, false, elmAdd);
@@ -66365,17 +66500,22 @@ class ElementTool {
66365
66500
  const btnMore = elementTool.querySelector('.elm-more');
66366
66501
  dom.addEventListener(btnMore, 'click', () => {
66367
66502
  const viewportHeight = window.innerHeight;
66503
+
66504
+ /*
66368
66505
  let top, left;
66369
- if (!this.builder.iframe) {
66370
- top = btnMore.getBoundingClientRect().top;
66371
- left = btnMore.getBoundingClientRect().left;
66506
+ if(!this.builder.iframe) {
66507
+ top = btnMore.getBoundingClientRect().top;
66508
+ left = btnMore.getBoundingClientRect().left;
66372
66509
  } else {
66373
- let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
66374
- let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
66375
-
66376
- top = btnMore.getBoundingClientRect().top + adjY;
66377
- left = btnMore.getBoundingClientRect().left + adjX;
66510
+ let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
66511
+ let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
66512
+ top = btnMore.getBoundingClientRect().top + adjY;
66513
+ left = btnMore.getBoundingClientRect().left + adjX;
66378
66514
  }
66515
+ */
66516
+ const newPos = this.builder.util.getElementPosition(btnMore);
66517
+ let top = newPos.top;
66518
+ let left = newPos.left;
66379
66519
 
66380
66520
  // elementMore.style.display = 'flex';
66381
66521
  util.showPop(elementMore, false, btnMore);
@@ -66541,18 +66681,24 @@ class ElementTool {
66541
66681
  dom.addClass(elementMore, 'transition1');
66542
66682
  let elmMore = elementTool.querySelector('.elm-more');
66543
66683
  const viewportHeight = window.innerHeight;
66684
+
66685
+ /*
66544
66686
  let top, left;
66545
- if (!this.builder.iframe) {
66546
- top = elmMore.getBoundingClientRect().top;
66547
- left = elmMore.getBoundingClientRect().left;
66687
+ if(!this.builder.iframe) {
66688
+ top = elmMore.getBoundingClientRect().top;
66689
+ left = elmMore.getBoundingClientRect().left;
66548
66690
  } else {
66549
- let adjY = this.builder.iframe.getBoundingClientRect().top;
66550
- let adjX = this.builder.iframe.getBoundingClientRect().left;
66551
- top = elmMore.getBoundingClientRect().top;
66552
- left = elmMore.getBoundingClientRect().left;
66553
- top = top + adjY;
66554
- left = left + adjX;
66691
+ let adjY = this.builder.iframe.getBoundingClientRect().top;
66692
+ let adjX = this.builder.iframe.getBoundingClientRect().left;
66693
+ top = elmMore.getBoundingClientRect().top;
66694
+ left = elmMore.getBoundingClientRect().left;
66695
+ top = top + adjY;
66696
+ left = left + adjX;
66555
66697
  }
66698
+ */
66699
+ const newPos = this.builder.util.getElementPosition(elmMore);
66700
+ let top = newPos.top;
66701
+ let left = newPos.left;
66556
66702
 
66557
66703
  // elementMore.style.display = 'flex';
66558
66704
  const btnMore = elementTool.querySelector('.elm-more');
@@ -73203,11 +73349,20 @@ class Tooltip {
73203
73349
  let top, left;
73204
73350
  top = elm.getBoundingClientRect().top + window.pageYOffset;
73205
73351
  left = elm.getBoundingClientRect().left + window.pageXOffset;
73352
+
73353
+ /*
73354
+ if(iframe) {
73355
+ let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
73356
+ let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
73357
+ top = elm.getBoundingClientRect().top + adjY;
73358
+ left = elm.getBoundingClientRect().left + adjX;
73359
+ }
73360
+ */
73361
+
73206
73362
  if (iframe) {
73207
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
73208
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
73209
- top = elm.getBoundingClientRect().top + adjY;
73210
- left = elm.getBoundingClientRect().left + adjX;
73363
+ const newPos = this.util.getElementPosition(elm);
73364
+ top = newPos.top;
73365
+ left = newPos.left;
73211
73366
  }
73212
73367
 
73213
73368
  //console.log(top + ' - ' + left);
@@ -75327,6 +75482,8 @@ class ContentStuff {
75327
75482
 
75328
75483
  .is-tool.is-element-tool {
75329
75484
  background: rgba(243, 243, 243, 0.9);
75485
+ border-radius: 3px;
75486
+ overflow: hidden;
75330
75487
  }
75331
75488
  .is-tool.is-element-tool button {
75332
75489
  width: 25px;
@@ -75374,6 +75531,8 @@ class ContentStuff {
75374
75531
  width: auto;
75375
75532
  left: auto;
75376
75533
  right: -30px;
75534
+ border-radius: 2px;
75535
+ overflow: hidden;
75377
75536
  }
75378
75537
 
75379
75538
  .is-tool.is-row-tool button {
@@ -75508,6 +75667,9 @@ class ContentStuff {
75508
75667
  flex-direction: row;
75509
75668
  margin-top: 0px;
75510
75669
  margin-left: -1px;
75670
+ box-shadow: none;
75671
+ border-radius: 2px;
75672
+ overflow: hidden;
75511
75673
  }
75512
75674
  .is-tool.is-col-tool button {
75513
75675
  width: 25px;
@@ -75864,6 +76026,23 @@ class ContentStuff {
75864
76026
  .padding-0[data-module="text-builder"] {
75865
76027
  padding: 0 2px 4px !important;
75866
76028
  }
76029
+
76030
+
76031
+ ${this.builder.simpleEditingBreakpoint ? `
76032
+
76033
+ @media all and (max-width: ${this.builder.simpleEditingBreakpoint}) {
76034
+ .is-tool:not(#divSpacerTool) {
76035
+ display: none !important;
76036
+ }
76037
+
76038
+ .is-builder .row-active:not([data-protected]).row-outline {
76039
+ outline: none !important;
76040
+ }
76041
+ }
76042
+
76043
+ ` : ''}
76044
+
76045
+
75867
76046
  `;
75868
76047
  builder.contentStuff.insertAdjacentHTML('afterbegin', `
75869
76048
  <style>
@@ -78969,6 +79148,9 @@ class ContentBuilder {
78969
79148
  toolbar: 'top',
78970
79149
  toolbarDisplay: 'auto',
78971
79150
  shortenHTML: true,
79151
+ simpleEditingBreakpoint: '970px',
79152
+ // iframe only
79153
+
78972
79154
  resizeHeight: false,
78973
79155
  snippetsSidebarDisplay: 'auto',
78974
79156
  // snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
@@ -79849,6 +80031,12 @@ class ContentBuilder {
79849
80031
  this.win = win;
79850
80032
  this.doc = doc;
79851
80033
  this.doc.body.classList.add('data-editor');
80034
+
80035
+ // Disable on mobile
80036
+ const viewportWidth = this.doc.body.clientWidth;
80037
+ if (viewportWidth <= 768) {
80038
+ this.hideImageResizer = true;
80039
+ }
79852
80040
  const dom = new Dom(this);
79853
80041
  this.dom = dom;
79854
80042
  const util = new Util(this); // General utilities
@@ -80006,6 +80194,12 @@ class ContentBuilder {
80006
80194
  this.win.addEventListener('resize', this.doWindowResize = () => {
80007
80195
  this.util.clearActiveCell();
80008
80196
  this.util.clearControls();
80197
+
80198
+ // Disable on mobile
80199
+ const viewportWidth = this.doc.body.clientWidth;
80200
+ if (viewportWidth <= 768) {
80201
+ this.hideImageResizer = true;
80202
+ }
80009
80203
  });
80010
80204
  }
80011
80205
 
@@ -82398,8 +82592,12 @@ class ContentBuilder {
82398
82592
 
82399
82593
  // Enable resizable on click
82400
82594
  if (!col.classList.contains('noresize')) {
82401
- this.resize = new Resize(col, this);
82402
- this.resize.enable();
82595
+ // Disable on mobile
82596
+ const viewportWidth = this.doc.body.clientWidth;
82597
+ if (viewportWidth > 768) {
82598
+ this.resize = new Resize(col, this);
82599
+ this.resize.enable();
82600
+ }
82403
82601
  }
82404
82602
  }
82405
82603
  if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);