@weldsuite/helpdesk-widget-sdk 1.0.14 → 1.0.16

package/dist/index.umd.js

@@ -514,14 +514,16 @@
             const container = document.createElement('div');
             container.className = 'weld-launcher-frame';
             container.setAttribute('data-state', 'visible');
+            // Container is larger than the button to allow hover animations (scale, shadow) without clipping
+            const launcherPadding = 10;
             container.style.cssText = `
       position: fixed;
-      bottom: ${launcher.position.bottom};
-      right: ${launcher.position.right};
-      width: ${launcher.size};
-      height: ${launcher.size};
+      bottom: calc(${launcher.position.bottom} - ${launcherPadding}px);
+      right: calc(${launcher.position.right} - ${launcherPadding}px);
+      width: calc(${launcher.size} + ${launcherPadding * 2}px);
+      height: calc(${launcher.size} + ${launcherPadding * 2}px);
       z-index: 2147483003;
-      pointer-events: auto;
+      pointer-events: none;
       display: block;
     `;
             // Create iframe
@@ -535,6 +537,7 @@
       border: none;
       background: transparent;
       display: block;
+      pointer-events: auto;
     `;
             iframe.setAttribute('allow', 'clipboard-write');
             iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
@@ -655,43 +658,10 @@
             this.logger.debug('Widget iframe created');
         }
         /**
-         * Create backdrop iframe
+         * Create backdrop iframe — disabled, widget stays non-modal so users can interact with the page
          */
         async createBackdropIframe() {
-            if (!this.config.iframes.backdrop?.enabled) {
-                this.logger.debug('Backdrop disabled, skipping creation');
-                return;
-            }
-            // Create container
-            const container = document.createElement('div');
-            container.className = 'weld-backdrop-frame';
-            container.setAttribute('data-state', 'hidden');
-            container.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 2147483000;
-      background: transparent;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 200ms ease;
-    `;
-            this.appContainer?.appendChild(container);
-            // Store metadata (backdrop doesn't have an iframe, just a div)
-            // We'll create a minimal "iframe" reference for consistency
-            const dummyIframe = document.createElement('iframe');
-            dummyIframe.style.display = 'none';
-            this.iframes.set(exports.IframeType.BACKDROP, {
-                type: exports.IframeType.BACKDROP,
-                element: dummyIframe,
-                container,
-                ready: true, // Backdrop is always ready
-                visible: false,
-                createdAt: Date.now(),
-            });
-            this.logger.debug('Backdrop created');
+            this.logger.debug('Backdrop disabled, skipping creation');
         }
         /**
          * Build iframe URL with parameters
@@ -1029,11 +999,7 @@
          * Validate message origin
          */
         isOriginAllowed(origin) {
-            // If no allowed origins specified, only allow same origin
-            if (this.config.allowedOrigins?.length === 0) {
-                return origin === window.location.origin;
-            }
-            // Check if origin is in allowed list
+            // Check if origin is in allowed list (includes same-origin and programmatically added origins)
             if (this.allowedOrigins.has(origin)) {
                 return true;
             }
@@ -2405,7 +2371,7 @@
         }
     }
 
-    var version = "1.0.14";
+    var version = "1.0.16";
     var packageJson = {
     	version: version};
 
@@ -2488,6 +2454,242 @@
                 console.log('[Weld SDK] Widget close requested');
                 this.close();
             }
+            if (event.data?.type === 'weld:image:open' && event.data?.url) {
+                this.showImageLightbox(event.data.url);
+            }
+        }
+        /**
+         * Show fullscreen image lightbox on the parent page
+         */
+        showImageLightbox(url) {
+            // Remove existing lightbox if any
+            const existing = document.getElementById('weld-image-lightbox');
+            if (existing)
+                existing.remove();
+            // Zoom / pan state
+            let scale = 1;
+            let translateX = 0;
+            let translateY = 0;
+            let isDragging = false;
+            let dragStartX = 0;
+            let dragStartY = 0;
+            let lastTranslateX = 0;
+            let lastTranslateY = 0;
+            const applyTransform = () => {
+                img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+            };
+            const resetTransform = () => {
+                scale = 1;
+                translateX = 0;
+                translateY = 0;
+                applyTransform();
+                img.style.cursor = 'zoom-in';
+            };
+            const overlay = document.createElement('div');
+            overlay.id = 'weld-image-lightbox';
+            overlay.style.cssText = `
+      position: fixed;
+      inset: 0;
+      z-index: 2147483647;
+      background: rgba(0, 0, 0, 0.92);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      cursor: pointer;
+      overflow: hidden;
+    `;
+            // Close button
+            const closeBtn = document.createElement('button');
+            closeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
+            closeBtn.style.cssText = `
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    `;
+            closeBtn.onmouseenter = () => { closeBtn.style.background = 'rgba(255, 255, 255, 0.2)'; };
+            closeBtn.onmouseleave = () => { closeBtn.style.background = 'rgba(255, 255, 255, 0.1)'; };
+            // Download button
+            const downloadBtn = document.createElement('a');
+            downloadBtn.href = url;
+            downloadBtn.download = '';
+            downloadBtn.target = '_blank';
+            downloadBtn.rel = 'noopener noreferrer';
+            downloadBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+            downloadBtn.style.cssText = `
+      position: absolute;
+      top: 16px;
+      right: 64px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+      text-decoration: none;
+    `;
+            downloadBtn.onmouseenter = () => { downloadBtn.style.background = 'rgba(255, 255, 255, 0.2)'; };
+            downloadBtn.onmouseleave = () => { downloadBtn.style.background = 'rgba(255, 255, 255, 0.1)'; };
+            // Image
+            const img = document.createElement('img');
+            img.src = url;
+            img.alt = 'Full size';
+            img.draggable = false;
+            img.style.cssText = `
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 8px;
+      cursor: zoom-in;
+      transition: transform 0.2s ease;
+      user-select: none;
+    `;
+            // Click to toggle zoom
+            img.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (scale === 1) {
+                    // Zoom in to 2.5x centered on click position
+                    const rect = img.getBoundingClientRect();
+                    const clickX = e.clientX - rect.left - rect.width / 2;
+                    const clickY = e.clientY - rect.top - rect.height / 2;
+                    scale = 2.5;
+                    translateX = -clickX * 1.5;
+                    translateY = -clickY * 1.5;
+                    applyTransform();
+                    img.style.cursor = 'zoom-out';
+                }
+                else {
+                    // Zoom out - reset
+                    resetTransform();
+                }
+            });
+            // Mouse wheel zoom
+            overlay.addEventListener('wheel', (e) => {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? -0.25 : 0.25;
+                const newScale = Math.min(Math.max(scale + delta, 1), 5);
+                if (newScale === 1) {
+                    resetTransform();
+                }
+                else {
+                    scale = newScale;
+                    applyTransform();
+                    img.style.cursor = 'zoom-out';
+                }
+            }, { passive: false });
+            // Drag to pan when zoomed
+            img.addEventListener('mousedown', (e) => {
+                if (scale <= 1)
+                    return;
+                e.preventDefault();
+                isDragging = true;
+                dragStartX = e.clientX;
+                dragStartY = e.clientY;
+                lastTranslateX = translateX;
+                lastTranslateY = translateY;
+                img.style.cursor = 'grabbing';
+                img.style.transition = 'none';
+            });
+            window.addEventListener('mousemove', (e) => {
+                if (!isDragging)
+                    return;
+                translateX = lastTranslateX + (e.clientX - dragStartX);
+                translateY = lastTranslateY + (e.clientY - dragStartY);
+                applyTransform();
+            });
+            window.addEventListener('mouseup', () => {
+                if (!isDragging)
+                    return;
+                isDragging = false;
+                img.style.cursor = scale > 1 ? 'zoom-out' : 'zoom-in';
+                img.style.transition = 'transform 0.2s ease';
+            });
+            // Touch: pinch to zoom + drag to pan
+            let lastTouchDist = 0;
+            let lastTouchScale = 1;
+            overlay.addEventListener('touchstart', (e) => {
+                if (e.touches.length === 2) {
+                    e.preventDefault();
+                    const dx = e.touches[0].clientX - e.touches[1].clientX;
+                    const dy = e.touches[0].clientY - e.touches[1].clientY;
+                    lastTouchDist = Math.hypot(dx, dy);
+                    lastTouchScale = scale;
+                }
+                else if (e.touches.length === 1 && scale > 1) {
+                    isDragging = true;
+                    dragStartX = e.touches[0].clientX;
+                    dragStartY = e.touches[0].clientY;
+                    lastTranslateX = translateX;
+                    lastTranslateY = translateY;
+                    img.style.transition = 'none';
+                }
+            }, { passive: false });
+            overlay.addEventListener('touchmove', (e) => {
+                if (e.touches.length === 2) {
+                    e.preventDefault();
+                    const dx = e.touches[0].clientX - e.touches[1].clientX;
+                    const dy = e.touches[0].clientY - e.touches[1].clientY;
+                    const dist = Math.hypot(dx, dy);
+                    scale = Math.min(Math.max(lastTouchScale * (dist / lastTouchDist), 1), 5);
+                    if (scale === 1) {
+                        translateX = 0;
+                        translateY = 0;
+                    }
+                    applyTransform();
+                }
+                else if (e.touches.length === 1 && isDragging) {
+                    e.preventDefault();
+                    translateX = lastTranslateX + (e.touches[0].clientX - dragStartX);
+                    translateY = lastTranslateY + (e.touches[0].clientY - dragStartY);
+                    applyTransform();
+                }
+            }, { passive: false });
+            overlay.addEventListener('touchend', (e) => {
+                if (e.touches.length < 2) {
+                    lastTouchDist = 0;
+                }
+                if (e.touches.length === 0) {
+                    isDragging = false;
+                    img.style.transition = 'transform 0.2s ease';
+                }
+            });
+            const close = () => {
+                document.removeEventListener('keydown', handleKeyDown);
+                overlay.remove();
+            };
+            // Only close on backdrop click when not zoomed (prevent accidental close while panning)
+            overlay.addEventListener('click', (e) => {
+                if (e.target === overlay && scale <= 1)
+                    close();
+            });
+            downloadBtn.addEventListener('click', (e) => e.stopPropagation());
+            closeBtn.addEventListener('click', (e) => { e.stopPropagation(); close(); });
+            // Close on Escape
+            const handleKeyDown = (e) => {
+                if (e.key === 'Escape')
+                    close();
+            };
+            document.addEventListener('keydown', handleKeyDown);
+            overlay.appendChild(closeBtn);
+            overlay.appendChild(downloadBtn);
+            overlay.appendChild(img);
+            document.body.appendChild(overlay);
         }
         /**
          * Initialize the SDK and render widget
@@ -2599,8 +2801,6 @@
             console.log('[Weld SDK] Opening widget...');
             this.stateCoordinator.openWidget();
             this.iframeManager.showIframe(exports.IframeType.WIDGET);
-            this.iframeManager.showIframe(exports.IframeType.BACKDROP);
-            // Keep launcher visible so user can click it to close the widget
             // Send open message to the widget iframe
             const widgetIframe = this.iframeManager.getIframe(exports.IframeType.WIDGET);
             if (widgetIframe?.element?.contentWindow) {
@@ -2621,8 +2821,6 @@
             console.log('[Weld SDK] Closing widget...');
             this.stateCoordinator.closeWidget();
             this.iframeManager.hideIframe(exports.IframeType.WIDGET);
-            this.iframeManager.hideIframe(exports.IframeType.BACKDROP);
-            // Launcher stays visible
             // Send close message to the widget iframe
             const widgetIframe = this.iframeManager.getIframe(exports.IframeType.WIDGET);
             if (widgetIframe?.element?.contentWindow) {