Merge pull request #106 from BKWLD/add-no-drag

Add no-drag prop

README.md

@@ -56,6 +56,7 @@ For more examples, see the demo: https://vue-ssr-carousel.netlify.app.
 | `peek-gutter`       | `false`     | Set peek value equal to `gutter` value.
 | `feather`           | `false`     | Fades out the left and right edges using a CSS `mask-image` gradient.  Set to `true` to use the default `20px` value or as number or any CSS resolvable string to set an explicit width. This is designed to be used with `peek` properties. See https://vue-ssr-carousel.netlify.app/peeking.
 | `overflow-visible`  | `false`     | Disables the `overflow:hidden` that wraps the slide track.  You would do this if you want to handle that masking in an ancestor element.  See https://vue-ssr-carousel.netlify.app/peeking.
+| `no-drag`           | `false`     | Disables the ability to drag the carousel.
 | `show-arrows`       | `false`     | Whether to show back/forward arrows. See https://vue-ssr-carousel.netlify.app/ui.
 | `show-dots`         | `false`     | Whether to show dot style pagination dots. See https://vue-ssr-carousel.netlify.app/ui.
 | `value`             | `undefined` | Used as part of `v-model` to set the initial slide to show.  See https://vue-ssr-carousel.netlify.app/events.

cypress/e2e/ui.coffee

@@ -24,3 +24,17 @@ context 'ui', ->
 			cy.get('.ssr-carousel-dot-button[aria-label="Page 2"]').click()
 				.slideHidden 1
 				.slideVisible 2
+
+	it 'can disable dragging', ->
+		cy.get('[data-cy=no-drag]').within ->
+
+			# Try to drag but have it not take effect
+			cy.dragLeft()
+				.slideVisible 1
+				.slideHidden 2
+				.slideHidden 3
+
+			# But clicking next does still advance
+			cy.get('.ssr-carousel-next-button').click()
+				.slideHidden 1
+				.slideVisible 2

demo/components/demos/ui/no-drag.vue

@@ -0,0 +1,9 @@
+<template>
+
+<ssr-carousel no-drag show-arrows data-cy='no-drag'>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+
+</template>

demo/content/ui.md

@@ -68,3 +68,17 @@ title: 'UI Options'
   <slide :index='6'></slide>
 </ssr-carousel>
 ```
+
+## Disable dragging
+
+Also, you can use the `no-drag` prop to disable dragging.
+
+<demos-ui-no-drag></demos-ui-no-drag>
+
+```vue
+<ssr-carousel no-drag show-arrows>
+  <slide :index='1'></slide>
+  <slide :index='2'></slide>
+  <slide :index='3'></slide>
+</ssr-carousel>
+```

src/concerns/dragging.coffee

@@ -25,6 +25,9 @@ export default
 			type: Number
 			default: 1
 
+		# Turn off draggability
+		noDrag: Boolean
+
 	data: ->
 		pressing: false # The user pressing pointer down
 		dragging: false # The user has translated while pointer was down

src/ssr-carousel.vue

@@ -23,8 +23,13 @@
 		//- The overflow mask and drag target
 		.ssr-carousel-mask(
 			ref='mask'
-			:class='{ pressing, disabled, "no-mask": overflowVisible }'
-			v-on='maskListeners')
+			v-on='maskListeners'
+			:class=`{
+				pressing,
+				disabled,
+				"no-mask": overflowVisible,
+				"not-draggable": noDrag,
+			}`)
 
 			//- The container of the slides that animates
 			ssr-carousel-track(
@@ -141,8 +146,10 @@ export default
 		maskListeners: ->
 			return {} if @disabled
 			{
-				mousedown: @onPointerDown
-				touchstart: @onPointerDown
+				...(if @noDrag then {} else {
+					mousedown: @onPointerDown
+					touchstart: @onPointerDown
+				})
 				...(unless @watchesHover then {} else {
 					mouseenter: @onEnter
 					mouseleave: @onLeave
@@ -178,7 +185,7 @@ export default
 	position relative
 
 	// When pressing, show drag cursor
-	&:not(.disabled)
+	&:not(.disabled):not(.not-draggable)
 		cursor grab
 		&.pressing
 			cursor grabbing