@innovastudio/contentbuilder 1.3.17 → 1.3.19

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -1969,6 +1969,8 @@ button:focus-visible {
   text-align: center;
   cursor: pointer;
   box-shadow: none;
+  background: transparent;
+  border: none;
 }
 #_cbhtml .is-modal div.is-modal-footer button,
 .is-ui .is-modal div.is-modal-footer button {
@@ -2562,27 +2564,32 @@ button:focus-visible {
   font-size: 13px;
   line-height: 1.7;
 }
-#_cbhtml .is-modal.imagesource .is-modal-content,
-.is-ui .is-modal.imagesource .is-modal-content {
+#_cbhtml .is-modal.imagesource .is-modal-content, #_cbhtml .is-modal.mediasource .is-modal-content,
+.is-ui .is-modal.imagesource .is-modal-content,
+.is-ui .is-modal.mediasource .is-modal-content {
   padding: 20px;
 }
-#_cbhtml .is-modal.imagesource .image-src,
-.is-ui .is-modal.imagesource .image-src {
+#_cbhtml .is-modal.imagesource .image-src, #_cbhtml .is-modal.mediasource .image-src,
+.is-ui .is-modal.imagesource .image-src,
+.is-ui .is-modal.mediasource .image-src {
   display: flex;
 }
-#_cbhtml .is-modal.imagesource .image-src > button,
-.is-ui .is-modal.imagesource .image-src > button {
+#_cbhtml .is-modal.imagesource .image-src > button, #_cbhtml .is-modal.mediasource .image-src > button,
+.is-ui .is-modal.imagesource .image-src > button,
+.is-ui .is-modal.mediasource .image-src > button {
   background: transparent !important;
   width: 50px;
   height: 43px;
 }
-#_cbhtml .is-modal.imagesource .input-select,
-.is-ui .is-modal.imagesource .input-select {
+#_cbhtml .is-modal.imagesource .input-select, #_cbhtml .is-modal.mediasource .input-select,
+.is-ui .is-modal.imagesource .input-select,
+.is-ui .is-modal.mediasource .input-select {
   width: 50px;
   height: 43px;
 }
-#_cbhtml .is-modal.imagesource .input-upload,
-.is-ui .is-modal.imagesource .input-upload {
+#_cbhtml .is-modal.imagesource .input-upload, #_cbhtml .is-modal.mediasource .input-upload,
+.is-ui .is-modal.imagesource .input-upload,
+.is-ui .is-modal.mediasource .input-upload {
   width: 50px;
   height: 43px;
 }

package/public/contentbuilder/contentbuilder.esm.js

@@ -5743,7 +5743,9 @@ class Util {
 
   repositionColumnTool(transition) {
     let columnTool = this.builder.colTool.columnTool;
+    if (!columnTool) return;
     let col = this.builder.activeCol;
+    if (!col) return;
 
     if (transition) {
       columnTool.style.transition = 'all 100ms ease';
@@ -73624,6 +73626,166 @@ class ContentStuff {
 
 }
 
+class MediaPicker {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    this.util = util;
+    const builderStuff = this.builder.builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+    this.id = this.builder.util.makeId();
+    const html = `
+        <div class="is-modal mediasource" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-content" style="max-width:550px;">
+
+                <label for="inpMediaSource" style="display:block">${util.out('Source')}:</label>
+                <div class="image-src">
+                    <input id="inpMediaSource" 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="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
+                        <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.onLargerImageUpload}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
+                            <input name="hidRefId" class="input-ref-id" type="hidden" value="">
+                            <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                            <input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                        </form>
+                        <iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                    </div>
+                </div>
+
+                <div style="text-align:right;margin-top:20px;">
+                    <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
+                    <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
+                </div>
+
+            </div>
+        </div>
+        `;
+    dom.appendHtml(builderStuff, html);
+    const modalMediaSelect = document.querySelector('.mediasource');
+    this.modalMediaSelect = modalMediaSelect;
+
+    if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
+      modalMediaSelect.querySelector('.input-upload').style.display = 'none';
+    }
+
+    if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+      modalMediaSelect.querySelector('.input-select').style.display = 'none';
+    }
+
+    if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
+      const inpSrc = modalMediaSelect.querySelector('.input-src');
+      const elm = modalMediaSelect.querySelector('.input-select');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        if (this.builder.opts.onFileSelectClick) {
+          this.builder.opts.onFileSelectClick({
+            targetInput: inpSrc,
+            theTrigger: elm
+          });
+        } else if (this.builder.opts.onImageSelectClick) {
+          this.builder.opts.onImageSelectClick({
+            targetInput: inpSrc,
+            theTrigger: elm
+          });
+        } else if (this.builder.opts.fileselect) {
+          let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
+          let iframe = modalFileSelect.querySelector('iframe');
+
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.fileselect;
+            this.builder.opts.assetRefresh = false;
+          }
+
+          if (iframe.src === 'about:blank') {
+            iframe.src = this.builder.opts.fileselect;
+          }
+
+          util.showModal(modalFileSelect, false, () => {
+            elm.removeAttribute('data-focus');
+            elm.focus();
+          });
+          elm.setAttribute('data-focus', true);
+          this.builder.targetInput = inpSrc;
+          this.builder.targetCallback = null;
+          this.builder.targetAssetType = 'media';
+        } else if (this.builder.opts.imageselect) {
+          let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
+          let iframe = modalImageSelect.querySelector('iframe');
+
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.imageselect;
+            this.builder.opts.assetRefresh = false;
+          }
+
+          if (iframe.src === 'about:blank') {
+            iframe.src = this.builder.opts.imageselect;
+          }
+
+          util.showModal(modalImageSelect, false, () => {
+            elm.removeAttribute('data-focus');
+            elm.focus();
+          });
+          elm.setAttribute('data-focus', true);
+          this.builder.targetInput = inpSrc;
+          this.builder.targetCallback = null;
+          this.builder.targetAssetType = 'media';
+        }
+      });
+    }
+
+    let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
+    dom.addEventListener(inputFileSelect, 'change', e => {
+      let element = inputFileSelect;
+
+      while (element.nodeName.toLowerCase() !== 'form') {
+        element = element.parentNode;
+      }
+
+      let frmUpload = element;
+      dom.addClass(frmUpload, 'please-wait');
+      modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
+
+      if (this.builder.opts.onLargerImageUpload) {
+        this.builder.opts.onLargerImageUpload(e);
+      } else {
+        frmUpload.submit();
+      }
+
+      inputFileSelect.value = ''; // Clear Input
+    });
+    const btnImageOk = modalMediaSelect.querySelector('.input-ok');
+    dom.addEventListener(btnImageOk, 'click', () => {
+      const inpSrc = modalMediaSelect.querySelector('.input-src');
+      const url = inpSrc.value;
+      if (this.builder.mediaSelectedCallback) this.builder.mediaSelectedCallback(url);
+      this.builder.hideModal(modalMediaSelect);
+    });
+    const btnImageCancel = modalMediaSelect.querySelector('.input-cancel');
+    dom.addEventListener(btnImageCancel, 'click', () => {
+      this.builder.hideModal(modalMediaSelect);
+    });
+  }
+
+  openMediaPicker(currentUrl, callback, btn) {
+    //Current value
+    const modalMediaSelect = this.modalMediaSelect;
+    const inpSrc = modalMediaSelect.querySelector('.input-src');
+    inpSrc.value = currentUrl; //mediaSelectedCallback
+
+    this.builder.mediaSelectedCallback = callback; //Show modal
+
+    modalMediaSelect.style.zIndex = '10005';
+    this.util.showModal(modalMediaSelect, false, () => {
+      if (btn) {
+        btn.removeAttribute('data-focus');
+        btn.focus();
+      }
+    });
+    if (btn) btn.setAttribute('data-focus', true);
+  }
+
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -74370,7 +74532,8 @@ class ContentBuilder {
     }
 
     this.colTool = new ColumnTool(this); // Render Column Tool
-    // Extend the onChange function
+
+    this.mediaPicker = new MediaPicker(this); // Extend the onChange function
 
     var oldget = this.opts.onChange;
 
@@ -75264,6 +75427,10 @@ class ContentBuilder {
     this.opts.assetRefresh = true; // After file upload, make open asset refreshed
   }
 
+  openMediaPicker(currentUrl, callback, btn) {
+    this.mediaPicker.openMediaPicker(currentUrl, callback, btn);
+  }
+
   openImagePicker(currentUrl, callback, btn) {
     this.colTool.openImagePicker(currentUrl, callback, btn);
   }