@servicemind.tis/tis-image-and-file-upload-and-view 1.2.15 → 1.2.16

package/fesm2022/servicemind.tis-tis-image-and-file-upload-and-view.mjs

@@ -660,167 +660,7 @@ class TisImageAndFileUploadAndViewComponent {
     openImageSelector(selectorId = this.config?.selectorId) {
         document.getElementById(selectorId)?.click();
     }
-    openCameraCapture() {
-        // Show the selection menu dialog first
-        this.showSelectionDialog();
-    }
-    showSelectionDialog() {
-        // Create modal overlay
-        const modal = document.createElement('div');
-        modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-      padding: 20px;
-      box-sizing: border-box;
-      animation: fadeIn 0.3s ease;
-    `;
-        // Add animation styles
-        const style = document.createElement('style');
-        style.textContent = `
-      @keyframes fadeIn {
-        from { opacity: 0; }
-        to { opacity: 1; }
-      }
-      @keyframes slideUp {
-        from { opacity: 0; transform: translateY(20px); }
-        to { opacity: 1; transform: translateY(0); }
-      }
-      .menu-option:hover {
-        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        border-color: #d0d0d0;
-      }
-      .menu-option:active {
-        transform: translateY(0px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-    `;
-        document.head.appendChild(style);
-        // Create menu container
-        const menuContainer = document.createElement('div');
-        menuContainer.style.cssText = `
-      background: white;
-      border-radius: 20px;
-      padding: 20px;
-      min-width: 280px;
-      max-width: 400px;
-      width: 100%;
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-      animation: slideUp 0.4s ease;
-    `;
-        // Create title
-        const title = document.createElement('h3');
-        title.textContent = 'Select Option';
-        title.style.cssText = `
-      margin: 0 0 20px 0;
-      font-size: 18px;
-      font-weight: 600;
-      text-align: center;
-      color: #333;
-    `;
-        // Create options container
-        const optionsContainer = document.createElement('div');
-        optionsContainer.style.cssText = `
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    `;
-        // Photo Library Option
-        // const photoLibraryOption = this.createMenuOption(
-        //   `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#007AFF">
-        //     <path d="M0 0h24v24H0V0z" fill="none"/>
-        //     <path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/>
-        //   </svg>`,
-        //   'Photo Library',
-        //   () => {
-        //     this.closeSelectionDialog(modal);
-        //     this.openImageSelector();
-        //   }
-        // );
-        // Take Photo Option
-        const captureOption = this.createMenuOption(`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#34C759">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h4.05l1.83-2h4.24l1.83 2H20v12zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/>
-      </svg>`, 'Take Photo', () => {
-            this.closeSelectionDialog(modal);
-            this.openAdvancedCamera();
-        });
-        // Choose Files Option
-        const filesOption = this.createMenuOption(`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FF9500">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
-      </svg>`, 'Choose Files', () => {
-            this.closeSelectionDialog(modal);
-            this.openImageSelector();
-        });
-        // Add elements to container
-        menuContainer.appendChild(title);
-        // optionsContainer.appendChild(photoLibraryOption);
-        optionsContainer.appendChild(captureOption);
-        optionsContainer.appendChild(filesOption);
-        menuContainer.appendChild(optionsContainer);
-        modal.appendChild(menuContainer);
-        document.body.appendChild(modal);
-        // Handle click outside to close
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) {
-                this.closeSelectionDialog(modal);
-            }
-        });
-        // Handle ESC key
-        const handleKeyPress = (e) => {
-            if (e.key === 'Escape') {
-                this.closeSelectionDialog(modal);
-                document.removeEventListener('keydown', handleKeyPress);
-            }
-        };
-        document.addEventListener('keydown', handleKeyPress);
-    }
-    createMenuOption(iconSvg, text, onClick) {
-        const option = document.createElement('div');
-        option.className = 'menu-option';
-        option.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 18px;
-      border-radius: 16px;
-      cursor: pointer;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      border: 1px solid #e8e8e8;
-      background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-    `;
-        option.innerHTML = `
-      <div style="flex-shrink: 0;">${iconSvg}</div>
-      <div style="flex: 1; font-size: 16px; font-weight: 500; color: #333;">${text}</div>
-      <div style="flex-shrink: 0;">
-        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#999">
-          <path d="M0 0h24v24H0V0z" fill="none"/>
-          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
-        </svg>
-      </div>
-    `;
-        option.addEventListener('click', onClick);
-        return option;
-    }
-    closeSelectionDialog(modal) {
-        if (modal.parentNode) {
-            modal.parentNode.removeChild(modal);
-        }
-    }
-    async openAdvancedCamera() {
+    async openCameraCapture() {
         // Check configuration preference and browser support
         if (this.config.useAdvancedCamera && typeof navigator !== 'undefined' && navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
             try {
@@ -880,7 +720,7 @@ class TisImageAndFileUploadAndViewComponent {
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(20, 20, 30, 0.95) 100%);
+      background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 30, 0.95) 100%);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       display: flex;
@@ -888,7 +728,7 @@ class TisImageAndFileUploadAndViewComponent {
       align-items: center;
       justify-content: center;
       z-index: 9999;
-      padding: 5px;
+      padding: 20px;
       box-sizing: border-box;
       animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     `;
@@ -1038,33 +878,35 @@ class TisImageAndFileUploadAndViewComponent {
         const buttonsDiv = document.createElement('div');
         buttonsDiv.style.cssText = `
       display: flex;
-      gap: 20px;
+      gap: 12px;
       justify-content: center;
       align-items: center;
       padding: ${this.isMobile ? '10px' : '20px'};
       padding-bottom: 0px;
       background: transparent;
+      flex-wrap: wrap;
     `;
         // Create capture button with clean design
         const captureBtn = document.createElement('button');
         captureBtn.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3">
+      <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#e3e3e3">
         <path d="M0 0h24v24H0V0z" fill="none"/>
         <path d="M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h4.05l1.83-2h4.24l1.83 2H20v12zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/>
       </svg>
+      ${this.isMobile ? '' : '&nbsp;Capture'}
     `;
         captureBtn.style.cssText = `
       background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
       color: white;
       border: none;
-      padding: ${this.isMobile ? '7px 20px' : '16px 24px'};
-      border-radius: 30px;
-      font-size: 14px;
+      padding: ${this.isMobile ? '12px' : '14px 20px'};
+      border-radius: 25px;
+      font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       width: auto;
       height: auto;
-      min-width: ${this.isMobile ? '100px' : '120px'};
+      min-width: ${this.isMobile ? '50px' : '100px'};
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
@@ -1081,26 +923,64 @@ class TisImageAndFileUploadAndViewComponent {
             captureBtn.style.transform = 'scale(1)';
             captureBtn.style.boxShadow = '0 4px 20px rgba(0, 122, 255, 0.4)';
         });
+        // Create library button with clean design
+        const libraryBtn = document.createElement('button');
+        libraryBtn.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#e3e3e3">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/>
+      </svg>
+      ${this.isMobile ? '' : '&nbsp;Upload'}
+    `;
+        libraryBtn.style.cssText = `
+      background: linear-gradient(135deg, #34C759 0%, #248A3D 100%);
+      color: white;
+      border: none;
+      padding: ${this.isMobile ? '12px' : '14px 20px'};
+      border-radius: 25px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      width: auto;
+      height: auto;
+      min-width: ${this.isMobile ? '50px' : '100px'};
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      box-shadow: 0 4px 20px rgba(52, 199, 89, 0.4);
+    `;
+        libraryBtn.addEventListener('mouseenter', () => {
+            libraryBtn.style.transform = 'scale(1.05)';
+            libraryBtn.style.boxShadow = '0 8px 25px rgba(52, 199, 89, 0.6)';
+        });
+        libraryBtn.addEventListener('mouseleave', () => {
+            libraryBtn.style.transform = 'scale(1)';
+            libraryBtn.style.boxShadow = '0 4px 20px rgba(52, 199, 89, 0.4)';
+        });
         // Create cancel button with clean design
         const cancelBtn = document.createElement('button');
         cancelBtn.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3">
+      <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#e3e3e3">
         <path d="M0 0h24v24H0V0z" fill="none"/>
         <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
       </svg>
+      ${this.isMobile ? '' : '&nbsp;Cancel'}
     `;
         cancelBtn.style.cssText = `
       background: rgba(255, 255, 255, 0.1);
       color: white;
       border: 2px solid rgba(255, 255, 255, 0.3);
-      padding: ${this.isMobile ? '7px 20px' : '16px 24px'};
-      border-radius: 30px;
-      font-size: 14px;
+      padding: ${this.isMobile ? '12px' : '14px 20px'};
+      border-radius: 25px;
+      font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       width: auto;
       height: auto;
-      min-width: ${this.isMobile ? '100px' : '120px'};
+      min-width: ${this.isMobile ? '50px' : '100px'};
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
@@ -1121,6 +1001,7 @@ class TisImageAndFileUploadAndViewComponent {
         // Add elements to modal with proper structure
         videoContainer.appendChild(video);
         buttonsDiv.appendChild(captureBtn);
+        buttonsDiv.appendChild(libraryBtn);
         buttonsDiv.appendChild(cancelBtn);
         mainContainer.appendChild(videoContainer);
         mainContainer.appendChild(buttonsDiv);
@@ -1186,6 +1067,11 @@ class TisImageAndFileUploadAndViewComponent {
                 }
             });
         }
+        // Handle library button click
+        libraryBtn.addEventListener('click', () => {
+            this.cleanupCameraModal(currentStream, modal);
+            this.openImageSelector();
+        });
         // Handle capture with modern effects
         captureBtn.addEventListener('click', () => {
             // Create capture flash effect