diff --git a/src/concerns/dimensions.coffee b/src/concerns/dimensions.coffee index f8d3e70..3258b42 100644 --- a/src/concerns/dimensions.coffee +++ b/src/concerns/dimensions.coffee @@ -64,6 +64,10 @@ export default # Check if the drag is currently out bounds isOutOfBounds: -> @currentX > 0 or @currentX < @endX + # Helper for things that are triggered once dimensions are known so + # they can be more specific about their dependencies + dimensionsKnown: -> @carouselWidth and @viewportWidth + methods: # Measure the component width for various calculations. Using diff --git a/src/concerns/rtl.coffee b/src/concerns/rtl.coffee index fae069b..2f8a4b7 100644 --- a/src/concerns/rtl.coffee +++ b/src/concerns/rtl.coffee @@ -9,13 +9,13 @@ export default # As an easy way to support rtl, update the index to the final value # when RTL is enabled. This is change is combined with reversing the order # of the slides in `ssr-carousel-track`. We're testing for the - # carouselWidth value as way to ensure that the final pages count is known + # dimensionsKnown value as way to ensure that the final pages count is known # since it depends on knowing the width of the carousel. mounted: -> return unless @rtl - if @carouselWidth + if @dimensionsKnown then @setInitialRtlIndex() - else unwatch = @$watch 'carouselWidth', => + else unwatch = @$watch 'dimensionsKnown', => @setInitialRtlIndex() unwatch() diff --git a/src/ssr-carousel-track.vue b/src/ssr-carousel-track.vue index 12f4494..2c4dbb7 100644 --- a/src/ssr-carousel-track.vue +++ b/src/ssr-carousel-track.vue @@ -12,7 +12,7 @@ export default leftPeekingSlideIndex: Number rightPeekingSlideIndex: Number rtl: Boolean - slideWidth: Number + dimensionsKnown: Number data: -> @@ -114,12 +114,12 @@ export default slides = [...(@$slots.default || []), ...(@$slots.clones || [])] .filter (vnode) -> !vnode.text - # Reverses the slide if rtl and if the slide slide width is known. This + # Reverses the slide if rtl and if the dimensions are known. This # second condition exists to prevent the reversal from happening on SSR. # Which is important because this logic is paired with setting the # intial index to the last page which can't be known until the slide # width is known. - if @rtl and @slideWidth then slides = slides.reverse() + if @rtl and @dimensionsKnown then slides = slides.reverse() return slides # Makes a clone of the vnode properties we'll be updating so the changes diff --git a/src/ssr-carousel.vue b/src/ssr-carousel.vue index b473ec4..565f037 100644 --- a/src/ssr-carousel.vue +++ b/src/ssr-carousel.vue @@ -42,7 +42,7 @@ leftPeekingSlideIndex, rightPeekingSlideIndex, rtl, - slideWidth, + dimensionsKnown, }`) //- Render the slotted slides