@innovastudio/contentbuilder 1.4.18 → 1.4.19

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbuilder",
3
3
  "type": "module",
4
- "version": "1.4.18",
4
+ "version": "1.4.19",
5
5
  "description": "",
6
6
  "main": "public/contentbuilder/contentbuilder.esm.js",
7
7
  "files": [
@@ -16235,7 +16235,26 @@ const prepareSvgIcons = builder => {
16235
16235
  <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
16236
16236
  </symbol>
16237
16237
 
16238
+ <symbol id="icon-list-search" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
16239
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
16240
+ <path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
16241
+ <path d="M18.5 18.5l2.5 2.5"></path>
16242
+ <path d="M4 6h16"></path>
16243
+ <path d="M4 12h4"></path>
16244
+ <path d="M4 18h4"></path>
16245
+ </symbol>
16246
+ <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
16247
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
16248
+ <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
16249
+ </symbol>
16250
+ <symbol id="icon-folder-media" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
16251
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
16252
+ <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
16238
16253
 
16254
+ <path d="M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5"></path>
16255
+ <path d="M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4"></path>
16256
+ <path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
16257
+ </symbol>
16239
16258
 
16240
16259
  <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
16241
16260
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -49788,7 +49807,9 @@ class Image$1 {
49788
49807
  <label for="inpImageLinkSource" style="display:block">${util.out('Source')}:</label>
49789
49808
  <div class="image-src">
49790
49809
  <input id="inpImageLinkSource" class="input-src" type="text"/>
49791
- <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
49810
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;">
49811
+ ${this.builder.opts.selectIcon}
49812
+ </button>
49792
49813
 
49793
49814
  <div class="image-larger1" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
49794
49815
  <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
@@ -49807,7 +49828,9 @@ class Image$1 {
49807
49828
  <label for="inpImageLinkLink" style="margin-top:14px;display:block">${util.out('Link')}:</label>
49808
49829
  <div class="image-link">
49809
49830
  <input id="inpImageLinkLink" class="input-link" type="text" style="width:100%;border-top: none;"/>
49810
- <button title="${util.out('Select')}" class="input-select2" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
49831
+ <button title="${util.out('Select')}" class="input-select2" style="flex:none;">
49832
+ ${this.builder.opts.selectIcon}
49833
+ </button>
49811
49834
 
49812
49835
  <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">${this.builder.opts.otherSelectIcon}</button>
49813
49836
 
@@ -52778,10 +52801,12 @@ class Hyperlink {
52778
52801
  <label for="inpCreateLinkUrl">${util.out('Link')}:</label>
52779
52802
  <div class="link-src">
52780
52803
  <input id="inpCreateLinkUrl" class="input-url" type="text"/>
52781
- <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
52782
-
52783
- <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">${this.builder.opts.otherSelectIcon}</button>
52784
-
52804
+ <button title="${util.out('Select')}" class="input-select">
52805
+ ${this.builder.opts.selectIcon}
52806
+ </button>
52807
+ <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">
52808
+ ${this.builder.opts.otherSelectIcon}
52809
+ </button>
52785
52810
  <div class="div-anyfile-upload" style="position: relative; flex: 0 0 auto; width: 43px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
52786
52811
  <form class="form-upload-larger" target="frameTargetAnyfileUpload" method="post" action="${this.builder.opts.fileHandler}" enctype="multipart/form-data" style="overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
52787
52812
  <input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
@@ -54941,7 +54966,9 @@ class Video {
54941
54966
  <label for="inpVideoLinkSource" style="display:block">${util.out('Source')}:</label>
54942
54967
  <div class="video-url">
54943
54968
  <input id="inpVideoLinkSource" class="input-url" type="text"/>
54944
- <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
54969
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;">
54970
+ ${this.builder.opts.selectIcon}
54971
+ </button>
54945
54972
  <div class="video-larger1 input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
54946
54973
  <form class="form-upload-larger" target="frameTargetVideoUpload" method="post" action="${this.builder.opts.videoHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
54947
54974
  <input id="hidRefId5" name="hidRefId" type="hidden" value="" />
@@ -55188,7 +55215,9 @@ class Audio {
55188
55215
  <label for="inpAudioLinkSource" style="display:block">${util.out('Source')}:</label>
55189
55216
  <div class="audio-url">
55190
55217
  <input id="inpAudioLinkSource" class="input-url" type="text"/>
55191
- <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
55218
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;">
55219
+ ${this.builder.opts.selectIcon}
55220
+ </button>
55192
55221
  <div class="audio-file-upload input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
55193
55222
  <form class="form-upload-larger" target="frameTargetAudioUpload" method="post" action="${this.builder.opts.audioHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
55194
55223
  <input id="hidRefAudio" name="hidRefId" type="hidden" value="" />
@@ -57540,7 +57569,9 @@ class RowTool {
57540
57569
  <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
57541
57570
  <span>${util.out('Image')}</span>
57542
57571
  </button>
57543
- <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
57572
+ <button title="${util.out('Select')}" class="input-select">
57573
+ ${this.builder.opts.selectIcon}
57574
+ </button>
57544
57575
  <button title="${util.out('Remove')}" class="input-row-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
57545
57576
  <button title="${util.out('Adjust')}" class="input-row-bgimageadjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
57546
57577
  </div>
@@ -58764,7 +58795,7 @@ class ColumnTool {
58764
58795
  <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
58765
58796
  <span>${util.out('Image')}</span>
58766
58797
  </button>
58767
- <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
58798
+ <button title="${util.out('Select')}" class="input-select">${this.builder.opts.selectIcon}</button>
58768
58799
  <button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
58769
58800
  <button title="${util.out('Adjust')}" class="input-cell-bgimageadjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
58770
58801
  </div>
@@ -58931,7 +58962,12 @@ class ColumnTool {
58931
58962
  <input id="inpCellLinkSource" class="input-src" type="text" style="height:38px;">
58932
58963
  <!--<button title="${util.out('Clear')}" class="input-clear"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
58933
58964
  </div>-->
58934
- <button title="${util.out('Select')}" class="input-select" style="flex:none;width:40px;height:38px;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
58965
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;width:40px;height:38px;">${this.builder.opts.selectIcon}</button>
58966
+
58967
+ <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:40px;height:38px;">
58968
+ ${this.builder.opts.otherSelectIcon}
58969
+ </button>
58970
+
58935
58971
  <div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
58936
58972
  <form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
58937
58973
  <input id="hidRefId4" name="hidRefId" type="hidden" value="">
@@ -60341,6 +60377,46 @@ class ColumnTool {
60341
60377
  });
60342
60378
  }); // Click to Open Image Select Dialog (.is-modal.columnsettings)
60343
60379
 
60380
+ if (this.builder.opts.onOtherSelectClick || this.builder.opts.otherSelect !== '') {
60381
+ this.cellSettings.querySelector('.input-select-other').style.display = 'flex';
60382
+ let inputSelectOther = this.cellSettings.querySelector('.input-select-other');
60383
+ dom.addEventListener(inputSelectOther, 'click', e => {
60384
+ if (this.builder.opts.onOtherSelectClick) {
60385
+ this.builder.opts.onOtherSelectClick({
60386
+ targetInput: this.cellSettings.querySelector('.input-src'),
60387
+ theTrigger: this.cellSettings.querySelector('.input-select-other')
60388
+ });
60389
+ } else {
60390
+ let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
60391
+
60392
+ if (this.builder.opts.assetRefresh) {
60393
+ modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
60394
+ this.builder.opts.assetRefresh = false;
60395
+ }
60396
+
60397
+ if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
60398
+ modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
60399
+ }
60400
+
60401
+ util.showModal(modalFileSelect, false, () => {
60402
+ inputSelectOther.removeAttribute('data-focus');
60403
+ inputSelectOther.focus();
60404
+ }, false);
60405
+ inputSelectOther.setAttribute('data-focus', true);
60406
+ }
60407
+
60408
+ this.builder.targetInput = this.cellSettings.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
60409
+
60410
+ this.builder.targetCallback = () => {
60411
+ this.applyClick();
60412
+ };
60413
+
60414
+ this.builder.targetAssetType = 'all';
60415
+ e.preventDefault();
60416
+ e.stopImmediatePropagation();
60417
+ });
60418
+ }
60419
+
60344
60420
  if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
60345
60421
  this.cellSettings.querySelector('.image-larger4').style.display = 'none';
60346
60422
  }
@@ -68715,7 +68791,10 @@ class Rte {
68715
68791
  </div>
68716
68792
  </div>
68717
68793
  <label for="inpInsertImageSrc" style="margin:10px 0 5px;display:block;">${util.out('Or Specify Image Source')}:</label>
68718
- ${(this.builder.opts.onImageSelectClick + '').replace(/\s/g, '') !== 'function(){}' || this.builder.opts.imageselect !== '' ? `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"><button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button></div>` : `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"></div>`}
68794
+ ${(this.builder.opts.onImageSelectClick + '').replace(/\s/g, '') !== 'function(){}' || this.builder.opts.imageselect !== '' ? `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}">
68795
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;">
68796
+ ${this.builder.opts.selectIcon}
68797
+ </button></div>` : `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"></div>`}
68719
68798
  <div style="text-align:right">
68720
68799
  <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
68721
68800
  <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -76596,7 +76675,9 @@ class MediaPicker {
76596
76675
  <label for="inpMediaSource" style="display:block">${util.out('Source')}:</label>
76597
76676
  <div class="image-src">
76598
76677
  <input id="inpMediaSource" class="input-src" type="text">
76599
- <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
76678
+ <button title="${util.out('Select')}" class="input-select" style="flex:none;">
76679
+ ${this.builder.opts.selectIcon}
76680
+ </button>
76600
76681
  <div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
76601
76682
  <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
76602
76683
  <input name="hidRefId" class="input-ref-id" type="hidden" value="">
@@ -77370,11 +77451,13 @@ class ContentBuilder {
77370
77451
  audioSelect: '',
77371
77452
  mediaSelect: '',
77372
77453
  // NEW: for image & video
77373
- // NEW: for any other file select. Will be visible on hyperlink dialog & image dialog (image link)
77454
+ // selectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>',
77455
+ selectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-folder"></use></svg>',
77456
+ // NEW: for any other file select. Will be visible on hyperlink dialog, image dialog (image link), and Column Settings dialog (on Click tab)
77374
77457
  otherSelect: '',
77375
77458
  otherSelectCaption: 'Select Document',
77376
77459
  // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
77377
- otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-outline"></use></svg>',
77460
+ otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
77378
77461
  imageSelectWidth: '1024px',
77379
77462
  imageSelectHeight: '80vh',
77380
77463
  fileSelectWidth: '1024px',