@innovastudio/contentbuilder 1.4.98 → 1.4.100

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -4215,14 +4215,16 @@ class Util {
   Note:
   - hideModal will remove the modal element, so calling show modal multiple times won't attach multiple events (safe).
   */
-  showModal(modal, overlayStay, cancelCallback, animated) {
+  showModal(modal, overlayStay, cancelCallback, animated, overflowHidden) {
     const dom = this.dom;
     dom.addClass(modal, 'active');
     modal.setAttribute('aria-hidden', false);
+    if (overflowHidden) document.body.style.overflow = 'hidden';
     const handleKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
 
+        if (overflowHidden) document.body.style.overflow = '';
         if (dom.hasClass(modal, 'active')) this.hideModal(modal); // check first in case programmatically ESC key that already call hideModal is triggered (see _hideModal)
 
         modal.removeEventListener('keydown', handleKeyDown);
@@ -4286,6 +4288,7 @@ class Util {
       if (!overlayStay) {
         let overlay = modal.querySelector('.is-modal-overlay');
         dom.addEventListener(overlay, 'click', () => {
+          if (overflowHidden) document.body.style.overflow = '';
           this.hideModal(modal);
           modal.removeEventListener('keydown', handleKeyDown);
           const btnClose = modal.querySelector('.is-modal-close');
@@ -4295,6 +4298,7 @@ class Util {
       }
     }
     const close = () => {
+      if (overflowHidden) document.body.style.overflow = '';
       if (dom.hasClass(modal, 'active')) this.hideModal(modal); // check first in case programmatically ESC key that already call hideModal is triggered (see _hideModal)
 
       modal.removeEventListener('keydown', handleKeyDown);
@@ -49926,7 +49930,7 @@ class Image$1 {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
@@ -50146,7 +50150,7 @@ class Image$1 {
             util.showModal(modalImageSelect, false, () => {
               btnImageSelect.removeAttribute('data-focus');
               btnImageSelect.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modalImageLink.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -50201,7 +50205,7 @@ class Image$1 {
             util.showModal(modalFileSelect, false, () => {
               btnImageSelect2.removeAttribute('data-focus');
               btnImageSelect2.focus();
-            }, true);
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect2.setAttribute('data-focus', true);
             this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = null;
@@ -50227,7 +50231,7 @@ class Image$1 {
             util.showModal(modalImageSelect, false, () => {
               btnImageSelect2.removeAttribute('data-focus');
               btnImageSelect2.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect2.setAttribute('data-focus', true);
             this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = null;
@@ -53012,7 +53016,7 @@ class Hyperlink {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -53041,7 +53045,7 @@ class Hyperlink {
             if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
               modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
             }
-            util.showModal(modalFileSelect, false, null, false);
+            util.showModal(modalFileSelect, false, null, false, this.builder.assetPanelFullScreen);
           }
           this.builder.targetInput = modal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = null;
@@ -54931,7 +54935,7 @@ class Video {
           util.showModal(modalVideoSelect, false, () => {
             inpSelectVideo.removeAttribute('data-focus');
             inpSelectVideo.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           inpSelectVideo.setAttribute('data-focus', true);
         }
         this.builder.targetInput = videoModal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -55124,7 +55128,7 @@ class Audio {
           util.showModal(modalAudioSelect, false, () => {
             inpSelectAudio.removeAttribute('data-focus');
             inpSelectAudio.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           inpSelectAudio.setAttribute('data-focus', true);
         }
         this.builder.targetInput = audioModal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -59257,7 +59261,7 @@ class ColumnTool {
             util.showModal(modalImageSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
           }
           this.builder.targetInput = imageSource.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -60100,7 +60104,7 @@ class ColumnTool {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = this.cellSettings.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -60165,7 +60169,7 @@ class ColumnTool {
             util.showModal(modalMediaSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
             this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = () => {
@@ -60185,7 +60189,7 @@ class ColumnTool {
             util.showModal(modalImageSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
             this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = () => {
@@ -60598,7 +60602,7 @@ class ColumnTool {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
   readImageAdjust(elm, useTarget) {
@@ -68850,7 +68854,10 @@ class Rte {
           if (iframe.src === 'about:blank') {
             iframe.src = this.builder.opts.imageselect;
           }
-          util.showModal(modalImageSelect);
+          util.showModal(modalImageSelect, false, () => {
+            inputImageSelect.removeAttribute('data-focus');
+            inputImageSelect.focus();
+          }, false, this.builder.assetPanelFullScreen);
         }
         this.builder.targetInput = modalInsertImage.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
         this.builder.targetCallback = null;
@@ -75960,7 +75967,7 @@ class MediaPicker {
           this.builder.util.showModal(modal, false, () => {
             elm.removeAttribute('data-focus');
             elm.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           elm.setAttribute('data-focus', true);
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = null;
@@ -76123,7 +76130,7 @@ class MediaPicker {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
 }
@@ -78984,24 +78991,25 @@ class ContentBuilder {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '80vw',
-      imageSelectHeight: '80vh',
-      fileSelectWidth: '80vw',
-      fileSelectHeight: '80vh',
-      videoSelectWidth: '80vw',
-      videoSelectHeight: '80vh',
-      audioSelectWidth: '80vw',
-      audioSelectHeight: '80vh',
-      mediaSelectWidth: '80vw',
-      mediaSelectHeight: '80vh',
-      otherSelectWidth: '80vw',
-      otherSelectHeight: '80vh',
+      imageSelectWidth: '88vw',
+      imageSelectHeight: '88vh',
+      fileSelectWidth: '88vw',
+      fileSelectHeight: '88vh',
+      videoSelectWidth: '88vw',
+      videoSelectHeight: '88vh',
+      audioSelectWidth: '88vw',
+      audioSelectHeight: '88vh',
+      mediaSelectWidth: '88vw',
+      mediaSelectHeight: '88vh',
+      otherSelectWidth: '88vw',
+      otherSelectHeight: '88vh',
       imageSelectMaxWidth: '1600px',
       fileSelectMaxWidth: '1600px',
       videoSelectMaxWidth: '1600px',
       audioSelectMaxWidth: '1600px',
       mediaSelectMaxWidth: '1600px',
       otherSelectMaxWidth: '1600px',
+      assetPanelFullScreen: false,
       codeEditorWidth: '80vw',
       codeEditorHeight: '80vh',
       codeEditorMaxWidth: '1600px',
@@ -79690,6 +79698,26 @@ class ContentBuilder {
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
     }
+    if (this.assetPanelFullScreen) {
+      this.imageSelectWidth = '100vw';
+      this.imageSelectHeight = '100vh';
+      this.fileSelectWidth = '100vw';
+      this.fileSelectHeight = '100vh';
+      this.videoSelectWidth = '100vw';
+      this.videoSelectHeight = '100vh';
+      this.audioSelectWidth = '100vw';
+      this.audioSelectHeight = '100vh';
+      this.mediaSelectWidth = '100vw';
+      this.mediaSelectHeight = '100vh';
+      this.otherSelectWidth = '100vw';
+      this.otherSelectHeight = '100vh';
+      this.imageSelectMaxWidth = '100vw';
+      this.fileSelectMaxWidth = '100vw';
+      this.videoSelectMaxWidth = '100vw';
+      this.audioSelectMaxWidth = '100vw';
+      this.mediaSelectMaxWidth = '100vw';
+      this.otherSelectMaxWidth = '100vw';
+    }
 
     // if(this.opts.largerImageHandler!=='') {
     //     this.opts.mediaHandler = this.opts.largerImageHandler;
@@ -81056,7 +81084,10 @@ class ContentBuilder {
       let modal = this.builderStuff.querySelector('.is-modal.otherselect');
       iframe = modal.querySelector('iframe');
       if (iframe.src === 'about:blank') iframe.src = this.opts.otherSelect;
-      this.util.showModal(modal);
+      this.util.showModal(modal, false, () => {
+        theTrigger.removeAttribute('data-focus');
+        theTrigger.focus();
+      }, false, this.assetPanelFullScreen);
       this.targetInput = targetInput; // used by selectAsset() (see contentbuilder.js)
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
@@ -81121,7 +81152,10 @@ class ContentBuilder {
         iframe = modal.querySelector('iframe');
         if (iframe.src === 'about:blank') iframe.src = this.opts.fileSelect;
       }
-      this.util.showModal(modal);
+      this.util.showModal(modal, false, () => {
+        theTrigger.removeAttribute('data-focus');
+        theTrigger.focus();
+      }, false, this.assetPanelFullScreen);
       this.targetInput = targetInput; // used by selectAsset() (see contentbuilder.js)
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
@@ -81532,8 +81566,8 @@ class ContentBuilder {
       });
     }
   }
-  showModal(modal, overlayStay, cancelCallback, animated) {
-    this.util.showModal(modal, overlayStay, cancelCallback, animated);
+  showModal(modal, overlayStay, cancelCallback, animated, overflowHidden) {
+    this.util.showModal(modal, overlayStay, cancelCallback, animated, overflowHidden);
   }
   hideModal(modal) {
     this.util._hideModal(modal); // this _hideModal will also trigger cancelCallback defined by showModal. This is done by programmatically click the overlay.
@@ -81544,13 +81578,13 @@ class ContentBuilder {
       selector: selector
     });
   }
-  createModal(modal, selector, overlayStay, cancelCallback, animated) {
+  createModal(modal, selector, overlayStay, cancelCallback, animated, overflowHidden) {
     let embeddedModal = this.builderStuff.querySelector(selector);
     if (!embeddedModal) {
       this.builderStuff.appendChild(modal);
       embeddedModal = this.builderStuff.querySelector(selector);
     }
-    this.showModal(embeddedModal, overlayStay, cancelCallback, animated);
+    this.showModal(embeddedModal, overlayStay, cancelCallback, animated, overflowHidden);
     new Draggable$1({
       selector: '.is-draggable'
     });
@@ -81979,31 +82013,56 @@ class ContentBuilder {
       }
     }
   }
+  async upscaleImage(src, callback) {
+    const width = 512;
+    const height = 512;
+    const img = new Image();
+    img.src = src;
+    img.onload = async () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, width, height);
+      const resizedBase64 = canvas.toDataURL('image/jpeg');
+      let image = resizedBase64;
+      image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
+      const messages = {
+        image: image,
+        folder_path: ''
+      };
+      const response = await fetch(this.upscaleImageUrl, {
+        signal: this.signal,
+        // Abort
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(messages)
+      });
+      const result = await response.json();
+      callback([result.url]);
+    };
+  }
   async generateImage(prompt, callback) {
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
 
-    let model = 'realistic-vision-v3';
-    let negative_prompt = '';
-    if (model.includes('realistic-vision')) {
-      if (negative_prompt === '') negative_prompt = 'duplicate, (deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck, bad_prompt_version2, bad-hands-5, badhandv4, bad anatomy, deformed, mutated, amputated, missing finger, extra finger, fused fingers, missing leg, extra leg, fused legs, missing digit, extra digit, fused digits, missing hand, extra hand, fused hands, missing arm, extra arm, fused arms, missing limb, extra limb, fused limbs, fused bodies, merged bodies, extra bodies, dual bodies, extra navel, elongated body, missing joint, extra joint, fused joints, deformed hip, twisted limbs, twisted legs, twisted arms, missing head, extra head, double head, twins, missing ear, extra ear, deformed ear, black and white, monochrome, multiple views, blurry, text, signature, head out of frame, paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, grayscale, glans, bad hands, error, extra digit, fewer digits, cropped, jpeg artifacts, watermark, username, bad feet, poorly drawn hands, poorly drawn face, mutation, too many fingers, long neck, long body, long arms, cross-eyed, mutated hands, polar lowres, bad body, bad proportions, gross proportions, cropped head , bad eyes, extra breast, missing breast, fused breasts, unnatural proportions, necklace';
-    }
-    let width = 1024;
-    let height = 1024;
-    let steps = 25;
-    let guidance = 7.5;
-    let scheduler = 'dpmsolver++';
-    let output_format = 'jpeg';
+    let model = this.imageModel || 'realistic-vision-v3';
+    let negative_prompt = this.imageNegativePrompt || 'duplicate, (deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck, bad_prompt_version2, bad-hands-5, badhandv4, bad anatomy, deformed, mutated, amputated, missing finger, extra finger, fused fingers, missing leg, extra leg, fused legs, missing digit, extra digit, fused digits, missing hand, extra hand, fused hands, missing arm, extra arm, fused arms, missing limb, extra limb, fused limbs, fused bodies, merged bodies, extra bodies, dual bodies, extra navel, elongated body, missing joint, extra joint, fused joints, deformed hip, twisted limbs, twisted legs, twisted arms, missing head, extra head, double head, twins, missing ear, extra ear, deformed ear, black and white, monochrome, multiple views, blurry, text, signature, head out of frame, paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, grayscale, glans, bad hands, error, extra digit, fewer digits, cropped, jpeg artifacts, watermark, username, bad feet, poorly drawn hands, poorly drawn face, mutation, too many fingers, long neck, long body, long arms, cross-eyed, mutated hands, polar lowres, bad body, bad proportions, gross proportions, cropped head , bad eyes, extra breast, missing breast, fused breasts, unnatural proportions, necklace';
+    let steps = this.imageSteps || 25;
+    let guidance = this.imageGuidance || 7.5;
+    let scheduler = this.imageScheduler || 'dpmsolver++';
     const messages = {
-      model: 'realistic-vision-v3',
+      model,
       prompt: prompt,
-      negative_prompt: negative_prompt,
-      width: width,
-      height: height,
-      steps: steps,
-      guidance: guidance,
-      scheduler: scheduler,
-      output_format: output_format,
+      negative_prompt,
+      width: 512,
+      height: 512,
+      steps,
+      guidance,
+      scheduler,
+      output_format: 'jpeg',
       folder_path: ''
     };
     try {
@@ -82023,7 +82082,9 @@ class ContentBuilder {
         return;
       }
       const imageUrl = result.url;
-      callback([imageUrl]);
+
+      //callback([imageUrl]);
+      this.upscaleImage(imageUrl, callback);
     } catch (error) {
       if (error.name === 'AbortError') ; else {
         // CORS or code errors goes here