@innovastudio/contentbuilder 1.4.16 → 1.4.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -15610,9 +15610,9 @@ class HtmlUtil {
 
           html_others += htmlSection;
         }
-      });
-      if (html_footer !== '') html_footer = '<!---FOOTER--->\n' + html_footer;
-      if (html_others !== '') html_others = '<!---OTHERS--->\n' + html_others;
+      }); // if (html_footer !== '') html_footer = '<!---FOOTER--->\n' + html_footer;
+      // if (html_others !== '') html_others = '<!---OTHERS--->\n' + html_others;
+
       let contentbox = document.querySelector('[data-contentbox]');
       let disableStaticSection = false;
 
@@ -16151,7 +16151,12 @@ const prepareSvgIcons = builder => {
             <symbol viewBox="0 0 512 512" id="ion-ios-minus-empty"><path d="M384 265H128v-17h256v17z"></path></symbol>
             <symbol viewBox="0 0 512 512" id="ion-eye"><path d="M256 128c-81.9 0-145.7 48.8-224 128 67.4 67.7 124 128 224 128 99.9 0 173.4-76.4 224-126.6C428.2 198.6 354.8 128 256 128zm0 219.3c-49.4 0-89.6-41-89.6-91.3 0-50.4 40.2-91.3 89.6-91.3s89.6 41 89.6 91.3c0 50.4-40.2 91.3-89.6 91.3z"></path><path d="M256 224c0-7.9 2.9-15.1 7.6-20.7-2.5-.4-5-.6-7.6-.6-28.8 0-52.3 23.9-52.3 53.3s23.5 53.3 52.3 53.3 52.3-23.9 52.3-53.3c0-2.3-.2-4.6-.4-6.9-5.5 4.3-12.3 6.9-19.8 6.9-17.8 0-32.1-14.3-32.1-32z"></path></symbol>
             <symbol viewBox="0 0 512 512" id="ion-reply"><path d="M448 400s-36.8-208-224-208v-80L64 256l160 134.4v-92.3c101.6 0 171 8.9 224 101.9z"></path></symbol>
-            
+            <symbol viewBox="0 0 512 512" id="ion-ios-folder-outline">
+                <path d="M457 96H215c-2.791 0-4.271-.585-6.094-2.408l-22.501-22.501-.168-.162C181.365 66.333 177.361 64 169 64H57c-13.785 0-25 10.317-25 23v336c0 13.317 11.683 25 25 25h400c12.683 0 23-11.215 23-25V119c0-13.327-9.673-23-23-23zM57 80h112c3.497 0 3.737.189 6.175 2.488l22.417 22.418c4.84 4.84 10.372 7.094 17.408 7.094h242c4.448 0 7 2.552 7 7v42.376a23.885 23.885 0 0 0-8-1.376H56c-2.805 0-5.496.488-8 1.376V87c0-4.323 4.672-7 9-7zm407 343c0 4.328-2.677 9-7 9H57c-4.458 0-9-4.542-9-9V184c0-4.411 3.589-8 8-8h400c4.411 0 8 3.589 8 8v239z"/>
+            </symbol>
+            <symbol viewBox="0 0 512 512" id="ion-ios-cloud-outline">
+                <path d="M399.3 232.8c0-1.2.2-2.4.2-3.6 0-64.3-52.8-117.2-116.8-117.2-46.1 0-85.8 27.9-104.4 67-8.1-4.1-17.1-6.4-26.8-6.4-29.6 0-54.1 23.7-58.9 52C57.4 236.8 32 268.8 32 308.4c0 49.8 40.1 91.6 89.6 91.6H398c45 0 82-38.9 82-84.3 0-45.6-35.4-82.8-80.7-82.9zm-1.8 150.8l-3.2.4H122.4c-40.9 0-74.2-34.9-74.2-76.1 0-31.9 20.2-58.4 50.2-68.8l8.4-3 1.5-8.8c3.6-21.6 22.1-39.3 43.9-39.3 6.9 0 13.7 1.6 19.9 4.8l13.5 6.8 6.5-13.7c16.6-34.9 52.1-58.2 90.4-58.2 55.3 0 100.9 44.1 100.9 99.7 0 13.3-.2 20.3-.2 20.3l15.2.1c36.7.5 65.6 30.5 65.6 67.4 0 36.9-29.8 68.2-66.5 68.4z"/>
+            </symbol>
             <symbol viewBox="0 0 512 512" id="ion-wrench"><path d="M461.9 114.9l-56.5 56.7-55.1-10-9.9-55.1 56.5-56.7c-12.7-12.7-30.8-18.5-44.2-17.8-13.5.7-42.3 8.3-64.6 32-21.6 22.8-44.3 65.3-24.2 112.5 2.4 5.7 5.1 13.2-2.9 21.2-8.1 8-215 202.8-215 202.8-19.4 16.7-18 47.6-.1 65.6 18.2 17.9 48.9 19 65.6-.3 0 0 193.2-205.8 202.7-215.1 8.5-8.3 16.1-5.5 21.2-2.9 35.6 18.4 86.3 2.4 112.6-23.9 26.3-26.3 31.1-51.7 31.9-64.7.8-12.9-3.7-30-18-44.3zM91.3 443.2c-6.3 6.2-16.5 6.2-22.7 0-6.2-6.3-6.2-16.5 0-22.7 6.3-6.2 16.5-6.2 22.7 0 6.2 6.3 6.2 16.5 0 22.7z"></path></symbol>
             <symbol viewBox="0 0 512 512" id="ion-more"><path d="M113.7 304C86.2 304 64 282.6 64 256c0-26.5 22.2-48 49.7-48 27.6 0 49.8 21.5 49.8 48 0 26.6-22.2 48-49.8 48zM256 304c-27.5 0-49.8-21.4-49.8-48 0-26.5 22.3-48 49.8-48 27.5 0 49.7 21.5 49.7 48 0 26.6-22.2 48-49.7 48zM398.2 304c-27.5 0-49.8-21.4-49.8-48 0-26.5 22.2-48 49.8-48 27.5 0 49.8 21.5 49.8 48 0 26.6-22.2 48-49.8 48z"></path></symbol>
             <symbol viewBox="0 0 512 512" id="ion-code-working"><circle cx="184.166" cy="256.166" r="24"></circle><circle cx="256.166" cy="256.166" r="24"></circle><circle cx="328.166" cy="256.166" r="24"></circle><g><path d="M168 392a23.929 23.929 0 0 1-16.971-7.029l-112-112c-9.373-9.373-9.373-24.569 0-33.941l112-112c9.373-9.372 24.568-9.372 33.941 0 9.371 9.372 9.371 24.568 0 33.941L89.941 256l95.029 95.029c9.371 9.372 9.371 24.568 0 33.941A23.925 23.925 0 0 1 168 392zM344 392a23.929 23.929 0 0 0 16.971-7.029l112-112c9.373-9.373 9.373-24.569 0-33.941l-112-112c-9.373-9.372-24.568-9.372-33.941 0-9.371 9.372-9.371 24.568 0 33.941L422.059 256l-95.029 95.029c-9.371 9.372-9.371 24.568 0 33.941A23.925 23.925 0 0 0 344 392z"></path></g></symbol>
@@ -49784,6 +49789,7 @@ class Image$1 {
                         <div class="image-src">
                             <input id="inpImageLinkSource" class="input-src" type="text"/>
                             <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 class="image-larger1" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <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;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
@@ -49802,6 +49808,9 @@ class Image$1 {
                         <div class="image-link">
                             <input id="inpImageLinkLink" class="input-link" type="text" style="width:100%;border-top: none;"/>
                             <button title="${util.out('Select')}" class="input-select2" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                            
+                            <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">${this.builder.opts.otherSelectIcon}</button>
+   
                             <div class="image-larger2" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : 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;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
@@ -50064,6 +50073,43 @@ class Image$1 {
 
       let modalImageLink = builderStuff.querySelector('.imagelink');
 
+      if (this.builder.opts.onOtherSelectClick || this.builder.opts.otherSelect) {
+        modalImageLink.querySelector('.input-select-other').style.display = 'block';
+        const inputSelectOther = modalImageLink.querySelector('.input-select-other');
+        if (inputSelectOther) dom.addEventListener(inputSelectOther, 'click', e => {
+          if (this.builder.opts.onOtherSelectClick) {
+            this.builder.opts.onOtherSelectClick({
+              targetInput: modalImageLink.querySelector('.input-link'),
+              theTrigger: modalImageLink.querySelector('.input-select-other')
+            });
+          } else {
+            let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
+
+            if (this.builder.opts.assetRefresh) {
+              modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
+              this.builder.opts.assetRefresh = false;
+            }
+
+            if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
+              modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
+            }
+
+            util.showModal(modalFileSelect, false, () => {
+              inputSelectOther.removeAttribute('data-focus');
+              inputSelectOther.focus();
+            }, false);
+            inputSelectOther.setAttribute('data-focus', true);
+          }
+
+          this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
+
+          this.builder.targetCallback = null;
+          this.builder.targetAssetType = 'all';
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        });
+      }
+
       if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
         modalImageLink.querySelector('.image-larger1').style.display = 'none';
         modalImageLink.querySelector('.image-larger2').style.display = 'none';
@@ -52734,6 +52780,8 @@ class Hyperlink {
                         <input id="inpCreateLinkUrl" class="input-url" type="text"/>
                         <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                      
+                        <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">${this.builder.opts.otherSelectIcon}</button>
+
                         <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;">
                             <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;">
                                 <input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
@@ -53230,6 +53278,43 @@ class Hyperlink {
     var text = dom.getSelected();
     let modal = this.builderStuff.querySelector('.is-modal.createlink');
 
+    if (this.builder.opts.onOtherSelectClick || this.builder.opts.otherSelect !== '') {
+      modal.querySelector('.input-select-other').style.display = 'block';
+      let inputSelectOther = modal.querySelector('.input-select-other');
+      dom.addEventListener(inputSelectOther, 'click', e => {
+        if (this.builder.opts.onOtherSelectClick) {
+          this.builder.opts.onOtherSelectClick({
+            targetInput: modal.querySelector('.input-url'),
+            theTrigger: modal.querySelector('.input-select-other')
+          });
+        } else {
+          let modalFileSelect = this.builderStuff.querySelector('.is-modal.fileselect');
+
+          if (this.builder.opts.assetRefresh) {
+            modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
+            this.builder.opts.assetRefresh = false;
+          }
+
+          if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
+            modalFileSelect.querySelector('iframe').src = this.builder.opts.otherSelect;
+          }
+
+          util.showModal(modalFileSelect, false, () => {
+            inputSelectOther.removeAttribute('data-focus');
+            inputSelectOther.focus();
+          }, false);
+          inputSelectOther.setAttribute('data-focus', true);
+        }
+
+        this.builder.targetInput = modal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
+
+        this.builder.targetCallback = null;
+        this.builder.targetAssetType = 'all';
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+    }
+
     if (this.builder.opts.onFileSelectClick || this.builder.opts.fileselect !== '') {
       modal.querySelector('.input-select').style.display = 'block'; // modal.querySelector('.input-url').style.width = '444px';
 
@@ -77285,6 +77370,11 @@ class ContentBuilder {
       audioSelect: '',
       mediaSelect: '',
       // NEW: for image & video
+      // NEW: for any other file select. Will be visible on hyperlink dialog & image dialog (image link)
+      otherSelect: '',
+      otherSelectCaption: 'Select Document',
+      // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
+      otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-outline"></use></svg>',
       imageSelectWidth: '1024px',
       imageSelectHeight: '80vh',
       fileSelectWidth: '1024px',