Skip to content

Commit

Permalink
feat: add preventExcessiveDragging option to limit boundary slide ges…
Browse files Browse the repository at this point in the history 
…tures

refs ismail9k#307
  • Loading branch information
@aovcina
aovcina committed Jan 3, 2025
1 parent 42358c9 commit 9b0a964
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 22 deletions.
42 changes: 22 additions & 20 deletions docs/config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@

## Available Props

| Prop | Default | Description |
| ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
| `itemsToScroll` | 1 | Number of slides to be scrolled |
| `wrapAround` | false | Enable infinite scrolling mode. |
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
| `transition` | 300 | Sliding transition time in ms. |
| `autoplay` | 0 | Auto play time in ms. |
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
| `breakpoints` | null | An object to pass all the breakpoints settings. |
| `modelValue` | 0 | Index number of the initial slide. |
| `mouseDrag` | true | Toggle mouse dragging |
| `touchDrag` | true | Toggle pointer touch dragging |
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
| Prop | Default | Description |
|----------------------------|----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
| `itemsToScroll` | 1 | Number of slides to be scrolled |
| `wrapAround` | false | Enable infinite scrolling mode. |
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
| `transition` | 300 | Sliding transition time in ms. |
| `autoplay` | 0 | Auto play time in ms. |
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
| `breakpoints` | null | An object to pass all the breakpoints settings. |
| `modelValue` | 0 | Index number of the initial slide. |
| `mouseDrag` | true | Toggle mouse dragging |
| `touchDrag` | true | Toggle pointer touch dragging |
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
| `preventExcessiveDragging` | false | Prevents unwanted dragging behavior when the carousel reaches its first or last slide. |



## Slots
Expand Down
20 changes: 18 additions & 2 deletions src/components/Carousel/Carousel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,8 @@ export const Carousel = defineComponent({
startPosition.x = 'touches' in event ? event.touches[0].clientX : event.clientX
startPosition.y = 'touches' in event ? event.touches[0].clientY : event.clientY

console.log(startPosition)

// Attach event listeners for dragging and drag end

const moveEvent = isTouch ? 'touchmove' : 'mousemove'
Expand All @@ -391,9 +393,23 @@ export const Carousel = defineComponent({
const currentX = 'touches' in event ? event.touches[0].clientX : event.clientX
const currentY = 'touches' in event ? event.touches[0].clientY : event.clientY

const tmpDraggedX = currentX - startPosition.x
const tmpDraggedY = currentY - startPosition.y

console.log(config)

if (!config.wrapAround && config.preventExcessiveDragging) {
const isAtMinIndex = activeSlideIndex.value === minSlideIndex.value;
const isAtMaxIndex = activeSlideIndex.value === maxSlideIndex.value;

if ((Math.abs(tmpDraggedX) > Math.abs(tmpDraggedY) ?
(tmpDraggedX > 0 && isAtMinIndex) || (tmpDraggedX < 0 && isAtMaxIndex) :
(tmpDraggedY > 0 && isAtMinIndex) || (tmpDraggedY < 0 && isAtMaxIndex))) return;
}

// Calculate deltas for X and Y axes
dragged.x = currentX - startPosition.x
dragged.y = currentY - startPosition.y
dragged.x = tmpDraggedX
dragged.y = tmpDraggedY

const draggedSlides = getDraggedSlidesCount({
isVertical: isVertical.value,
Expand Down
4 changes: 4 additions & 0 deletions src/components/Carousel/carouselProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,8 @@ export const carouselProps = {
return SLIDE_EFFECTS.includes(value)
},
},
preventExcessiveDragging: {
default: false,
type: Boolean
}
}
1 change: 1 addition & 0 deletions src/shared/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,5 @@ export const DEFAULT_CONFIG: CarouselConfig = {
i18n: I18N_DEFAULT_CONFIG,
ignoreAnimations: false,
slideEffect: SLIDE_EFFECTS[0],
preventExcessiveDragging: false
}
1 change: 1 addition & 0 deletions src/shared/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface CarouselConfig {
i18n: { [key in I18nKeys]?: string }
ignoreAnimations: boolean | string[] | string
slideEffect: SlideEffect
preventExcessiveDragging: boolean
}

export type VueClass = string | Record<string, boolean> | VueClass[]

0 comments on commit 9b0a964

Please sign in to comment.