fix: mouse pointer backdrop click (fix #357)

* fix: mouse pointer backdrop click

* refactor: code cleanup

---------

Co-authored-by: Igor Danchenko <[email protected]>

Author: aichisuan

src/consts.ts

@@ -39,6 +39,7 @@ export const CLASS_FULLSIZE = "fullsize";
 export const CLASS_FLEX_CENTER = "flex_center";
 export const CLASS_NO_SCROLL = "no_scroll";
 export const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
+export const CLASS_SLIDE = "slide";
 export const CLASS_SLIDE_WRAPPER = "slide_wrapper";
 export const CLASS_SLIDE_WRAPPER_INTERACTIVE = "slide_wrapper_interactive";
 

src/modules/Carousel.tsx

@@ -18,14 +18,14 @@ import {
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller/index.js";
 import { useDocumentContext, useLightboxProps, useLightboxState } from "../contexts/index.js";
-import { CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, MODULE_CAROUSEL } from "../consts.js";
+import { CLASS_FLEX_CENTER, CLASS_SLIDE, MODULE_CAROUSEL } from "../consts.js";
 
 function cssPrefix(value?: string) {
   return composePrefix(MODULE_CAROUSEL, value);
 }
 
 function cssSlidePrefix(value?: string) {
-  return composePrefix("slide", value);
+  return composePrefix(CLASS_SLIDE, value);
 }
 
 type CarouselSlideProps = {
@@ -37,12 +37,11 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const { currentIndex } = useLightboxState();
-  const { slideRect, close, focus } = useController();
+  const { slideRect, focus } = useController();
   const {
     render,
     carousel: { imageFit, imageProps },
     on: { click: onClick },
-    controller: { closeOnBackdropClick },
     styles: { slide: style },
   } = useLightboxProps();
   const { getOwnerDocument } = useDocumentContext();
@@ -81,24 +80,7 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
     ) : null;
   };
 
-  const handleBackdropClick: React.MouseEventHandler = (event) => {
-    const container = containerRef.current;
-    const target = event.target instanceof HTMLElement ? event.target : undefined;
-    if (
-      closeOnBackdropClick &&
-      target &&
-      container &&
-      (target === container ||
-        // detect Zoom and Video wrappers
-        (Array.from(container.children).find((x) => x === target) &&
-          target.classList.contains(cssClass(CLASS_SLIDE_WRAPPER))))
-    ) {
-      close();
-    }
-  };
-
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <div
       ref={containerRef}
       className={clsx(
@@ -107,7 +89,6 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
         cssClass(CLASS_FLEX_CENTER),
       )}
       {...makeInertWhen(offscreen)}
-      onClick={handleBackdropClick}
       style={style}
       role="region"
       aria-roledescription="slide"
@@ -119,7 +100,7 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
 
 function Placeholder() {
   const style = useLightboxProps().styles.slide;
-  return <div className={cssClass("slide")} style={style} />;
+  return <div className={cssClass(CLASS_SLIDE)} style={style} />;
 }
 
 export function Carousel({ carousel }: ComponentProps) {

src/modules/Controller/Controller.tsx

@@ -322,7 +322,7 @@ export function Controller({ children, ...props }: ComponentProps) {
     (offset: number) => pull(offset, true),
   ] as const;
 
-  usePointerSwipe(controller, ...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
+  usePointerSwipe(controller, ...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams, close);
 
   useWheelSwipe(swipeState, ...swipeParams);
 

src/modules/Controller/usePointerSwipe.ts

@@ -4,6 +4,8 @@ import { ControllerSettings } from "../../types.js";
 import { UseSensors } from "../../hooks/useSensors.js";
 import { useEventCallback } from "../../hooks/useEventCallback.js";
 import { usePointerEvents } from "../../hooks/usePointerEvents.js";
+import { cssClass } from "../../utils.js";
+import { CLASS_SLIDE, CLASS_SLIDE_WRAPPER } from "../../consts.js";
 
 enum Gesture {
   NONE,
@@ -14,7 +16,7 @@ enum Gesture {
 const SWIPE_THRESHOLD = 30;
 
 export function usePointerSwipe<T extends Element = Element>(
-  { disableSwipeNavigation }: ControllerSettings,
+  { disableSwipeNavigation, closeOnBackdropClick }: ControllerSettings,
   subscribeSensors: UseSensors<T>["subscribeSensors"],
   isSwipeValid: (offset: number) => boolean,
   containerWidth: number,
@@ -29,6 +31,7 @@ export function usePointerSwipe<T extends Element = Element>(
   onPullProgress: (offset: number) => void,
   onPullFinish: (offset: number, duration: number) => void,
   onPullCancel: (offset: number) => void,
+  onClose: () => void,
 ) {
   const offset = React.useRef<number>(0);
   const pointers = React.useRef<React.PointerEvent[]>([]);
@@ -59,6 +62,11 @@ export function usePointerSwipe<T extends Element = Element>(
     [clearPointer],
   );
 
+  const lookupPointer = React.useCallback(
+    (event: React.PointerEvent) => pointers.current.find(({ pointerId }) => event.pointerId === pointerId),
+    [],
+  );
+
   const onPointerDown = useEventCallback((event: React.PointerEvent) => {
     addPointer(event);
   });
@@ -67,36 +75,50 @@ export function usePointerSwipe<T extends Element = Element>(
     (pullDownEnabled && value > threshold) || (pullUpEnabled && value < -threshold);
 
   const onPointerUp = useEventCallback((event: React.PointerEvent) => {
-    if (pointers.current.find((x) => x.pointerId === event.pointerId) && activePointer.current === event.pointerId) {
-      const duration = Date.now() - startTime.current;
-      const currentOffset = offset.current;
+    const pointer = lookupPointer(event);
+    if (pointer) {
+      if (activePointer.current === event.pointerId) {
+        const duration = Date.now() - startTime.current;
+        const currentOffset = offset.current;
+
+        if (gesture.current === Gesture.SWIPE) {
+          if (
+            Math.abs(currentOffset) > 0.3 * containerWidth ||
+            (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)
+          ) {
+            onSwipeFinish(currentOffset, duration);
+          } else {
+            onSwipeCancel(currentOffset);
+          }
+        } else if (gesture.current === Gesture.PULL) {
+          if (exceedsPullThreshold(currentOffset, 2 * SWIPE_THRESHOLD)) {
+            onPullFinish(currentOffset, duration);
+          } else {
+            onPullCancel(currentOffset);
+          }
+        }
 
-      if (gesture.current === Gesture.SWIPE) {
+        offset.current = 0;
+        gesture.current = Gesture.NONE;
+      } else {
+        // Handle click events
+        const { target } = event;
         if (
-          Math.abs(currentOffset) > 0.3 * containerWidth ||
-          (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)
+          closeOnBackdropClick &&
+          target instanceof HTMLElement &&
+          target === pointer.target &&
+          (target.classList.contains(cssClass(CLASS_SLIDE)) || target.classList.contains(cssClass(CLASS_SLIDE_WRAPPER)))
         ) {
-          onSwipeFinish(currentOffset, duration);
-        } else {
-          onSwipeCancel(currentOffset);
-        }
-      } else if (gesture.current === Gesture.PULL) {
-        if (exceedsPullThreshold(currentOffset, 2 * SWIPE_THRESHOLD)) {
-          onPullFinish(currentOffset, duration);
-        } else {
-          onPullCancel(currentOffset);
+          onClose();
         }
       }
-
-      offset.current = 0;
-      gesture.current = Gesture.NONE;
     }
 
     clearPointer(event);
   });
 
   const onPointerMove = useEventCallback((event: React.PointerEvent) => {
-    const pointer = pointers.current.find((p) => p.pointerId === event.pointerId);
+    const pointer = lookupPointer(event);
     if (pointer) {
       const isCurrentPointer = activePointer.current === event.pointerId;