@naniteninja/profile-comparison-lib 1.0.15 → 1.0.16

package/fesm2022/naniteninja-profile-comparison-lib.mjs

@@ -2086,6 +2086,7 @@ class ProfileComparisonLibComponent {
         let isDragging = false;
         let dragStartX = 0;
         let activeFrame = null;
+        let edgeDragEmitted = false; // Track whether we have emitted edgeDrag for the current gesture
         const initialTranslateXLeft = -24; // starting CSS value percent
         const initialTranslateXRight = 24;
         const onMouseMove = (e) => {
@@ -2098,6 +2099,19 @@ class ProfileComparisonLibComponent {
             if (Math.abs(deltaX) > 5) {
                 this.wasDragging = true;
             }
+            // Check for edge drag swiping (both mouse and touch support!)
+            const leftRect = leftFrame.getBoundingClientRect();
+            const rightRect = rightFrame.getBoundingClientRect();
+            const overlapPx = Math.max(0, leftRect.right - leftRect.left); // Frame width
+            const maxDisplacementPx = overlapPx / 3;
+            if (!edgeDragEmitted && Math.abs(deltaX) > maxDisplacementPx * 1.05) {
+                // Only trigger swipe outward:
+                // Left frame dragged further left (deltaX < 0) or Right frame dragged further right (deltaX > 0)
+                if ((activeFrame === leftFrame && deltaX < 0) || (activeFrame === rightFrame && deltaX > 0)) {
+                    edgeDragEmitted = true;
+                    this.edgeDrag.emit(deltaX < 0 ? 'left' : 'right');
+                }
+            }
             // Clamp delta to the pre-calculated displacement limit
             deltaPercent = Math.max(-initialMaxDisplacementPercent, Math.min(initialMaxDisplacementPercent, deltaPercent));
             // Calculate actual frame displacement in pixels for text coordination
@@ -2206,6 +2220,8 @@ class ProfileComparisonLibComponent {
         };
         const resetDrag = () => {
             isDragging = false;
+            activeFrame = null;
+            edgeDragEmitted = false; // Reset edge drag flag on release
             const leftContent = leftFrame.querySelector('.profile-comparison__content--left');
             const rightContent = rightFrame.querySelector('.profile-comparison__content--right');
             // Smoother rebound transition
@@ -2303,6 +2319,7 @@ class ProfileComparisonLibComponent {
                 e.preventDefault();
                 isDragging = true;
                 this.wasDragging = false;
+                activeFrame = frame; // Track which frame is active
                 dragStartX = e.clientX;
                 // Lighten shadow on grab, then slowly return to normal while holding
                 const activeGlass = frame === leftFrame ? leftGlass : rightGlass;
@@ -2337,6 +2354,7 @@ class ProfileComparisonLibComponent {
                 e.stopPropagation();
                 isDragging = true;
                 this.wasDragging = false;
+                activeFrame = frame; // Track which frame is active
                 dragStartX = e.touches[0].clientX;
                 const activeGlass = frame === leftFrame ? leftGlass : rightGlass;
                 if (activeGlass) {
@@ -2349,25 +2367,10 @@ class ProfileComparisonLibComponent {
                         }
                     });
                 }
-                // Track whether we have already emitted an edgeDrag for this touch gesture
-                let edgeDragEmitted = false;
-                const containerWidthForEdge = leftFrame.parentElement?.clientWidth || 360;
-                const leftRectEdge = leftFrame.getBoundingClientRect();
-                const rightRectEdge = rightFrame.getBoundingClientRect();
-                const overlapPxEdge = Math.max(0, leftRectEdge.right - rightRectEdge.left);
-                const maxDisplacementPxEdge = overlapPxEdge / 3;
                 const onTouchMove = (ev) => {
-                    const rawDeltaX = ev.touches[0].clientX - dragStartX;
-                    // When the user pulls past the edge limit and hasn't yet signalled
-                    // the parent, emit once so the parent can slide to next/prev.
-                    if (!edgeDragEmitted && Math.abs(rawDeltaX) > maxDisplacementPxEdge * 1.1) {
-                        edgeDragEmitted = true;
-                        this.edgeDrag.emit(rawDeltaX < 0 ? 'left' : 'right');
-                    }
                     onMouseMove({ clientX: ev.touches[0].clientX });
                 };
                 const onTouchEnd = () => {
-                    edgeDragEmitted = false; // reset for next gesture
                     resetDrag();
                     document.removeEventListener('touchmove', onTouchMove);
                     document.removeEventListener('touchend', onTouchEnd);