refactor: move dragging functionality into composable function

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -49,6 +49,8 @@ import {
 } from './Carousel.types'
 import { carouselProps } from './carouselProps'
 
+import { useDragging } from '@/composables'
+
 export const Carousel = defineComponent({
   name: 'VueCarousel',
   props: carouselProps,
@@ -331,11 +333,7 @@ export const Carousel = defineComponent({
     /**
      * Carousel Event listeners
      */
-    let isTouch = false
-    const startPosition = { x: 0, y: 0 }
-    const dragged = reactive({ x: 0, y: 0 })
     const isHover = ref(false)
-    const isDragging = ref(false)
 
     const handleMouseEnter = (): void => {
       isHover.value = true
@@ -376,93 +374,6 @@ export const Carousel = defineComponent({
       document.removeEventListener('keydown', handleArrowKeys)
     }
 
-    function handleDragStart(event: MouseEvent | TouchEvent): void {
-      // Prevent drag initiation on input elements or if already sliding
-      const targetTagName = (event.target as HTMLElement).tagName
-      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTagName) || isSliding.value) {
-        return
-      }
-
-      // Detect if the event is a touchstart or mousedown event
-      isTouch = event.type === 'touchstart'
-
-      // For mouse events, prevent default to avoid text selection
-      if (!isTouch) {
-        event.preventDefault()
-        if ((event as MouseEvent).button !== 0) {
-          // Ignore non-left-click mouse events
-          return
-        }
-      }
-
-      // Initialize start positions for the drag
-      startPosition.x = 'touches' in event ? event.touches[0].clientX : event.clientX
-      startPosition.y = 'touches' in event ? event.touches[0].clientY : event.clientY
-
-      // Attach event listeners for dragging and drag end
-
-      const moveEvent = isTouch ? 'touchmove' : 'mousemove'
-      const endEvent = isTouch ? 'touchend' : 'mouseup'
-      document.addEventListener(moveEvent, handleDragging, { passive: false })
-      document.addEventListener(endEvent, handleDragEnd, { passive: true })
-    }
-
-    const handleDragging = throttle((event: TouchEvent | MouseEvent): void => {
-      isDragging.value = true
-
-      // Get the current position based on the interaction type (touch or mouse)
-      const currentX = 'touches' in event ? event.touches[0].clientX : event.clientX
-      const currentY = 'touches' in event ? event.touches[0].clientY : event.clientY
-
-      // Calculate deltas for X and Y axes
-      dragged.x = currentX - startPosition.x
-      dragged.y = currentY - startPosition.y
-
-      const draggedSlides = getDraggedSlidesCount({
-        isVertical: isVertical.value,
-        isReversed: isReversed.value,
-        dragged,
-        effectiveSlideSize: effectiveSlideSize.value,
-        threshold: config.dragThreshold,
-      })
-
-      activeSlideIndex.value = config.wrapAround
-        ? currentSlideIndex.value + draggedSlides
-        : getNumberInRange({
-            val: currentSlideIndex.value + draggedSlides,
-            max: maxSlideIndex.value,
-            min: minSlideIndex.value,
-          })
-
-      // Emit a drag event for further customization if needed
-      emit('drag', { deltaX: dragged.x, deltaY: dragged.y })
-    })
-
-    function handleDragEnd(): void {
-      handleDragging.cancel()
-
-      // Prevent accidental clicks when there is a slide drag
-      if (activeSlideIndex.value !== currentSlideIndex.value && !isTouch) {
-        const preventClick = (e: MouseEvent) => {
-          e.preventDefault()
-          window.removeEventListener('click', preventClick)
-        }
-        window.addEventListener('click', preventClick)
-      }
-
-      slideTo(activeSlideIndex.value)
-
-      // Reset drag state
-      dragged.x = 0
-      dragged.y = 0
-      isDragging.value = false
-
-      const moveEvent = isTouch ? 'touchmove' : 'mousemove'
-      const endEvent = isTouch ? 'touchend' : 'mouseup'
-      document.removeEventListener(moveEvent, handleDragging)
-      document.removeEventListener(endEvent, handleDragEnd)
-    }
-
     /**
      * Autoplay
      */
@@ -497,6 +408,33 @@ export const Carousel = defineComponent({
      */
     const isSliding = ref(false)
 
+    const onDrag = ({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {
+      const draggedSlides = getDraggedSlidesCount({
+        isVertical: isVertical.value,
+        isReversed: isReversed.value,
+        dragged: { x: deltaX, y: deltaY },
+        effectiveSlideSize: effectiveSlideSize.value,
+      })
+
+      activeSlideIndex.value = config.wrapAround
+        ? currentSlideIndex.value + draggedSlides
+        : getNumberInRange({
+            val: currentSlideIndex.value + draggedSlides,
+            max: maxSlideIndex.value,
+            min: minSlideIndex.value,
+          })
+
+      emit('drag', { deltaX, deltaY })
+    }
+    const onDragEnd = () => {
+      slideTo(activeSlideIndex.value)
+    }
+    const { dragged, isDragging, handleDragStart } = useDragging({
+      isSliding: isSliding.value,
+      onDrag,
+      onDragEnd,
+    })
+
     function slideTo(slideIndex: number, skipTransition = false): void {
       if (!skipTransition && isSliding.value) {
         return

src/composables/useDragging.ts

@@ -0,0 +1,93 @@
+import { ref, reactive } from 'vue'
+
+import { throttle } from '@/utils'
+
+export interface UseDraggingOptions {
+  onDrag?: (data: { deltaX: number; deltaY: number }) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
+  isSliding?: boolean
+}
+
+export function useDragging(options: UseDraggingOptions = {}) {
+  let isTouch = false
+  const startPosition = { x: 0, y: 0 }
+  const dragged = reactive({ x: 0, y: 0 })
+  const isDragging = ref(false)
+
+  const handleDragStart = (event: MouseEvent | TouchEvent): void => {
+    // Prevent drag initiation on input elements or if already sliding
+    const targetTagName = (event.target as HTMLElement).tagName
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTagName) || options.isSliding) {
+      return
+    }
+
+    isTouch = event.type === 'touchstart'
+
+    if (!isTouch) {
+      event.preventDefault()
+      if ((event as MouseEvent).button !== 0) {
+        return
+      }
+    }
+
+    startPosition.x = isTouch
+      ? (event as TouchEvent).touches[0].clientX
+      : (event as MouseEvent).clientX
+    startPosition.y = isTouch
+      ? (event as TouchEvent).touches[0].clientY
+      : (event as MouseEvent).clientY
+
+    const moveEvent = isTouch ? 'touchmove' : 'mousemove'
+    const endEvent = isTouch ? 'touchend' : 'mouseup'
+    document.addEventListener(moveEvent, handleDragging, { passive: false })
+    document.addEventListener(endEvent, handleDragEnd, { passive: true })
+
+    options.onDragStart?.()
+  }
+
+  const handleDragging = throttle((event: TouchEvent | MouseEvent): void => {
+    isDragging.value = true
+
+    const currentX = isTouch
+      ? (event as TouchEvent).touches[0].clientX
+      : (event as MouseEvent).clientX
+    const currentY = isTouch
+      ? (event as TouchEvent).touches[0].clientY
+      : (event as MouseEvent).clientY
+
+    dragged.x = currentX - startPosition.x
+    dragged.y = currentY - startPosition.y
+
+    options.onDrag?.({ deltaX: dragged.x, deltaY: dragged.y })
+  })
+
+  const handleDragEnd = (): void => {
+    handleDragging.cancel()
+
+    if (!isTouch) {
+      const preventClick = (e: MouseEvent) => {
+        e.preventDefault()
+        window.removeEventListener('click', preventClick)
+      }
+      window.addEventListener('click', preventClick)
+    }
+
+    options.onDragEnd?.()
+
+    dragged.x = 0
+    dragged.y = 0
+    isDragging.value = false
+
+    const moveEvent = isTouch ? 'touchmove' : 'mousemove'
+    const endEvent = isTouch ? 'touchend' : 'mouseup'
+    document.removeEventListener(moveEvent, handleDragging)
+    document.removeEventListener(endEvent, handleDragEnd)
+  }
+
+  return {
+    dragged,
+    isDragging,
+    handleDragStart,
+  }
+}