@weldsuite/helpdesk-widget-sdk 1.0.15 → 1.0.16

package/dist/react.d.ts

@@ -463,6 +463,10 @@ declare class WeldSDK {
      * Handle launcher click messages from iframe
      */
     private handleLauncherClickMessage;
+    /**
+     * Show fullscreen image lightbox on the parent page
+     */
+    private showImageLightbox;
     /**
      * Initialize the SDK and render widget
      */

package/dist/react.esm.js

@@ -510,14 +510,16 @@ class IframeManager {
         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
@@ -531,6 +533,7 @@ class IframeManager {
       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');
@@ -651,43 +654,10 @@ class IframeManager {
         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(IframeType.BACKDROP, {
-            type: 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
@@ -2188,7 +2158,7 @@ class StateCoordinator {
     }
 }
 
-var version = "1.0.15";
+var version = "1.0.16";
 var packageJson = {
 	version: version};
 
@@ -2271,6 +2241,242 @@ class WeldSDK {
             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
@@ -2382,8 +2588,6 @@ class WeldSDK {
         console.log('[Weld SDK] Opening widget...');
         this.stateCoordinator.openWidget();
         this.iframeManager.showIframe(IframeType.WIDGET);
-        this.iframeManager.showIframe(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(IframeType.WIDGET);
         if (widgetIframe?.element?.contentWindow) {
@@ -2404,8 +2608,6 @@ class WeldSDK {
         console.log('[Weld SDK] Closing widget...');
         this.stateCoordinator.closeWidget();
         this.iframeManager.hideIframe(IframeType.WIDGET);
-        this.iframeManager.hideIframe(IframeType.BACKDROP);
-        // Launcher stays visible
         // Send close message to the widget iframe
         const widgetIframe = this.iframeManager.getIframe(IframeType.WIDGET);
         if (widgetIframe?.element?.contentWindow) {