Skip to content

Commit

Permalink
rough out a custom scrollbar
Browse files Browse the repository at this point in the history
  • Loading branch information
sjstark committed Apr 15, 2024
1 parent 58977c0 commit 8962e36
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 10 deletions.
13 changes: 13 additions & 0 deletions demo/components/demos/test/null-page.vue
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 4 additions & 5 deletions demo/components/layout/nav.vue
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -10,7 +10,7 @@ ul.layout-nav

<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->

<script lang='coffee'>
<script lang="coffee">
export default

data: -> links: [
Expand All @@ -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
Expand All @@ -48,5 +48,4 @@ a
&:not(.nuxt-link-exact-active)
transition-duration .1s
opacity 0.8

</style>
17 changes: 17 additions & 0 deletions demo/content/test.md
Original file line number Diff line number Diff line change
@@ -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>
```
18 changes: 18 additions & 0 deletions src/concerns/pagination.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
63 changes: 63 additions & 0 deletions src/ssr-carousel-scrollbar.vue
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 13 additions & 5 deletions src/ssr-carousel.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- Vue SSR Carousel -->

<template lang='pug'>
<template lang="pug">

.ssr-carousel(
v-if='$slots.default && $slots.default.length'
Expand Down Expand Up @@ -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 }}
Expand All @@ -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
Expand Down Expand Up @@ -119,6 +127,7 @@ export default
components: {
SsrCarouselArrows
SsrCarouselDots
SsrCarouselScrollbar
SsrCarouselTrack
}

Expand All @@ -127,6 +136,7 @@ export default
# UI enabling controls
showArrows: Boolean
showDots: Boolean
showScrollbar: Boolean

computed:

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -203,5 +212,4 @@ export default
position absolute
width 1px
white-space nowrap

</style>

0 comments on commit 8962e36

Please sign in to comment.