Draft: Add Scrollbar for Carousel

demo/components/demos/test/null-page.vue

@@ -0,0 +1,13 @@
+<
+<!--  -->
+
+<template>
+  <ssr-carousel :slides-per-page="null" show-scrollbar>
+    <slide :index="1" :style="{ width: '65%', height: '30vw' }"></slide>
+    <slide :index="2" :style="{ width: '50%', height: '30vw' }"></slide>
+    <slide :index="3" :style="{ width: '30%', height: '30vw' }"></slide>
+    <slide :index="4" :style="{ width: '65%', height: '30vw' }"></slide>
+    <slide :index="5" :style="{ width: '50%', height: '30vw' }"></slide>
+    <slide :index="6" :style="{ width: '30%', height: '30vw' }"></slide>
+  </ssr-carousel>
+</template>

demo/components/layout/nav.vue

@@ -1,6 +1,6 @@
 <!-- The navigation menu -->
 
-<template lang='pug'>
+<template lang="pug">
 
 ul.layout-nav
 	li(v-for='link in links' :key='link.path')
@@ -10,7 +10,7 @@ ul.layout-nav
 
 <!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-<script lang='coffee'>
+<script lang="coffee">
 export default
 
 	data: -> links: [
@@ -23,13 +23,13 @@ export default
 		{ title: 'Peeking', path: '/peeking' }
 		{ title: 'Accessibility', path: '/accessibility' }
 		{ title: 'Miscellaneous', path: '/misc' }
+		{ title: 'Test', path: '/test' }
 	]
-
 </script>
 
 <!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-<style lang='stylus' scoped>
+<style lang="stylus" scoped>
 
 li
 	display inline-block
@@ -48,5 +48,4 @@ a
 		&:not(.nuxt-link-exact-active)
 			transition-duration .1s
 			opacity 0.8
-
 </style>

demo/content/test.md

@@ -0,0 +1,17 @@
+---
+title: 'Test'
+---
+
+## Tab capture
+
+When tabbing through the carousel, the focus moves from slide 1 to slide 2, then to the arrows, and finally to the dots.  It never reaches slide 3 unless the user interacts with one of the navigation UI elements.
+
+<demos-test-null-page></demos-test-null-page>
+
+```vue
+<ssr-carousel :slides-per-page="null" show-dots>
+  <slide :index="1" to="#1"></slide>
+  <slide :index="2" to="#2"></slide>
+  <slide :index="3" to="#3"></slide>
+</ssr-carousel>
+```

src/concerns/pagination.coffee

@@ -133,6 +133,13 @@ export default
 			then @tweenToX @endX
 			else @goto @pages - 1
 
+		# Go to a percentage of the carousel (useful for scrollbars)
+		gotoPercentage: (percentage) ->
+			targetPercentage = Math.max 0, Math.min 100, percentage
+			@targetX = @getXFromPercentage percentage
+			console.log(percentage, @targetX)
+			@startTweening()
+
 		# Tween to a specific index
 		tweenToIndex: (index) ->
 			@targetX = @getXForIndex index
@@ -154,6 +161,17 @@ export default
 			x += @makeIncompletePageOffset index
 			return Math.round @applyXBoundaries x
 
+		# Calculate the X value given a percentage
+		getXFromPercentage: (percentage) ->
+			x = (@measuredTrackWidth - @carouselWidth) * (percentage / 100) * -1
+
+			console.log('width: ', @measuredTrackWidth - @carouselWidth)
+
+			console.log('x: ', x)
+
+
+			return Math.round @applyXBoundaries x
+
 		# Creates a px value to represent adjustments that should be made to
 		# account for incommplete pages of slides when looping is enabled. Like
 		# when there is 3 slotted slides and 2 slides per page and you have looped

src/ssr-carousel-scrollbar.vue

@@ -0,0 +1,63 @@
+<!-- Scroll bar navigation for carousel -->
+
+<template lang="pug">
+
+.ssr-carousel-scrollbar
+	.ssr-carousel-bar-container(
+		role='scrollbar'
+		ref='container'
+		@click='onScrollbarClick'
+	)
+		.ssr-carousel-bar(:style='barStyle')
+
+</template>
+
+<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+<script lang="coffee">
+export default
+	name: 'SsrCarouselScrollbar'
+
+	props:
+		trackTranslateX: Number
+		measuredTrackWidth: Number
+		carouselWidth: Number
+
+	computed:
+		percentage: -> (-1 * @trackTranslateX) / (@measuredTrackWidth - @carouselWidth) * 100
+
+		barStyle: ->
+			"--left-offset": "#{@percentage}" if @percentage
+
+	methods:
+		onScrollbarClick: (e) ->
+			containerWidth = @$refs.container.getBoundingClientRect().width
+			clickLocation = e.offsetX
+			percentage = Math.floor(clickLocation / containerWidth * 100)
+
+			@$emit("gotoPercentage", percentage)
+</script>
+
+<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+<style lang="stylus">
+
+.ssr-carousel-scrollbar
+	margin-top 10px
+	display block
+	height 12px
+	width 100%
+	background red
+
+.ssr-carousel-bar-container
+	background black
+	position relative
+	width 100%
+	height 100%
+
+.ssr-carousel-bar
+	background orange
+	position absolute
+	circle(12px)
+	left "calc((100% - %s) *(var(--left-offset)/100))" % @width
+</style>

src/ssr-carousel.vue

@@ -1,6 +1,6 @@
 <!-- Vue SSR Carousel -->
 
-<template lang='pug'>
+<template lang="pug">
 
 .ssr-carousel(
 	v-if='$slots.default && $slots.default.length'
@@ -65,6 +65,13 @@
 		@goto='gotoDot')
 		template(#dot='props'): slot(name='dot' v-bind='props')
 
+	//- Scrollbar navigation
+	ssr-carousel-scrollbar(
+		v-if='showScrollbar'
+		v-bind='{ trackTranslateX, measuredTrackWidth, carouselWidth }'
+		@gotoPercentage='gotoPercentage'
+	)
+
 	//- Live region, for announcing the current slide position
 	.ssr-carousel-visually-hidden(aria-live='polite' aria-atomic='true')
 		| {{ currentSlideMessage }}
@@ -73,11 +80,12 @@
 
 <!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-<script lang='coffee'>
+<script lang="coffee">
 
 # Child components
 import SsrCarouselArrows from './ssr-carousel-arrows'
 import SsrCarouselDots from './ssr-carousel-dots'
+import SsrCarouselScrollbar from './ssr-carousel-scrollbar'
 import SsrCarouselTrack from './ssr-carousel-track'
 
 # Concerns
@@ -119,6 +127,7 @@ export default
 	components: {
 		SsrCarouselArrows
 		SsrCarouselDots
+		SsrCarouselScrollbar
 		SsrCarouselTrack
 	}
 
@@ -127,6 +136,7 @@ export default
 		# UI enabling controls
 		showArrows: Boolean
 		showDots: Boolean
+		showScrollbar: Boolean
 
 	computed:
 
@@ -155,12 +165,11 @@ export default
 					mouseleave: @onLeave
 				})
 			}
-
 </script>
 
 <!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-<style lang='stylus'>
+<style lang="stylus">
 
 // Prevent webkit from doing elastic dragging horizontally on drag
 .ssr-carousel
@@ -203,5 +212,4 @@ export default
 	position absolute
 	width 1px
 	white-space nowrap
-
 </style>