@innovastudio/contentbuilder 1.3.18 → 1.3.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.18",
+  "version": "1.3.20",
   "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;
 }
@@ -5169,6 +5176,5 @@ button:focus-visible {
 
 /* Make slider block resizable */
 .is-builder > div > div[data-module=slider-builder].cell-active {
-  padding: 0 2px 4px !important;
   z-index: 1 !important;
 }

package/public/contentbuilder/contentbuilder.esm.js

@@ -15783,7 +15783,7 @@ class Snippets {
                     z-index:10;width:30px;height:30px;position:absolute;
                     top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;
                 }
-                .is-pop-close:focus {
+                .is-pop-close:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
 
@@ -15924,7 +15924,7 @@ class Snippets {
                     border-radius: 2px;
                 }
 
-                .is-design-list>li:focus {
+                .is-design-list>li:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
 
@@ -16023,7 +16023,7 @@ class Snippets {
                     cursor: default;
                 }
 
-                .is-category-list a:focus {
+                .is-category-list a:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
         
@@ -53080,9 +53080,13 @@ class Module {
         var moduleDesc = module.getAttribute('data-module-desc');
 
         if (moduleDesc) {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>`;
+          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                    <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>`;
         } else {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>`;
+          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                    <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>`;
         }
 
         var w = module.getAttribute('data-dialog-width');
@@ -53097,6 +53101,12 @@ class Module {
           h = '570px';
         }
 
+        if (modulename === 'slider-builder') {
+          moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
+          w = '1500px';
+          h = '80vh';
+        }
+
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
         let btnClose = moduleModal.querySelector('.is-modal-close');
@@ -54373,6 +54383,12 @@ class Video {
     let elm = e.target;
 
     if (elm.tagName.toLowerCase() === 'video') {
+      if (elm.closest('[data-html]')) {
+        this.builder.activeVideo = null;
+        this.videoTool.style.display = '';
+        return;
+      }
+
       this.builder.activeVideo = elm;
       this.videoTool.style.display = 'flex';
       let _toolwidth = this.videoTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
@@ -54380,7 +54396,8 @@ class Video {
       let w = elm.offsetWidth * this.builder.opts.zoom;
       let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
       let left = elm.getBoundingClientRect().left;
-      left = left + (w - _toolwidth); //Adjust left in case an element is outside the screen
+      left = left + (w - _toolwidth); // left = left + (w/2 - _toolwidth/2);
+      //Adjust left in case an element is outside the screen
 
       const _screenwidth = window.innerWidth;
       if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
@@ -73626,6 +73643,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 = {
@@ -74372,7 +74549,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;
 
@@ -75266,6 +75444,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);
   }