Skip to content

Commit 9c73b3f

Browse files
antoniandreantoniandre
committed
Fix slide slots, autoplay pause/resume & cleanup.
1 parent 4c3a396 commit 9c73b3f

File tree

2 files changed

+44
-49
lines changed

2 files changed

+44
-49
lines changed

‎src/components/vueperslides/vueperslide.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ export default {
4141
id: this._uid,
4242
image: this.image,
4343
title: this.title,
44-
titleSlot: this.$slots.slideTitle,
44+
titleSlot: this.$slots['slide-title'],
4545
content: this.content,
46-
contentSlot: this.$slots.slideContent,
46+
contentSlot: this.$slots['slide-content'],
4747
link: this.link,
4848
style: {}
4949
})
@@ -53,8 +53,8 @@ export default {
5353
if (this.clone) return
5454
5555
this.updateSlide({
56-
titleSlot: this.$slots.slideTitle,
57-
contentSlot: this.$slots.slideContent,
56+
titleSlot: this.$slots['slide-title'],
57+
contentSlot: this.$slots['slide-content'],
5858
style: ((this.$el.attributes || {}).style || {}).value
5959
})
6060
},

‎src/components/vueperslides/vueperslides.vue

+40-45
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
:class="vueperslidesClasses"
55
aria-label="Slideshow"
66
:style="vueperslidesStyles")
7-
p -{{slides.focus}}-{{slides.current}}-
87
.vueperslide__content-wrapper.vueperslide__content-wrapper--outside-top(
98
v-if="slidesCount && conf.slideContentOutside === 'top'"
109
:class="conf.slideContentOutsideClass")
@@ -31,9 +30,9 @@
3130
:link="lastSlide.link"
3231
:style="conf.refreshClonesOnDrag ? getLastSlideStyle() : lastSlide.style"
3332
aria-hidden="true")
34-
template(v-if="lastSlide.titleSlot" v-slot:slide-title)
33+
template(v-if="lastSlide.titleSlot" slot="slide-title")
3534
vnodes(:vnodes="lastSlide.titleSlot")
36-
template(v-if="lastSlide.contentSlot" v-slot:slide-content)
35+
template(v-if="lastSlide.contentSlot" slot="slide-content")
3736
vnodes(:vnodes="lastSlide.contentSlot")
3837
slot(:currentSlide="slides.current")
3938
vueper-slide.vueperslide--clone(
@@ -45,13 +44,13 @@
4544
:link="firstSlide.link"
4645
:style="conf.refreshClonesOnDrag ? getFirstSlideStyle() : firstSlide.style"
4746
aria-hidden="true")
48-
template(v-if="firstSlide.titleSlot" v-slot:slide-title)
47+
template(v-if="firstSlide.titleSlot" slot="slide-title")
4948
vnodes(:vnodes="firstSlide.titleSlot")
50-
template(v-if="firstSlide.contentSlot" v-slot:slide-content)
49+
template(v-if="firstSlide.contentSlot" slot="slide-content")
5150
vnodes(:vnodes="firstSlide.contentSlot")
5251

53-
.vueperslides__paused(v-if="conf.pauseOnHover && $slots.pausedIcon")
54-
slot(name="pausedIcon")
52+
.vueperslides__paused(v-if="conf.pauseOnHover && $slots['pause-icon']")
53+
slot(name="pause-icon")
5554
.vueperslides__arrows(
5655
:class="{ 'vueperslides__arrows--outside': conf.arrowsOutside }"
5756
v-if="conf.arrows && slidesCount > 1 && !disable")
@@ -61,7 +60,7 @@
6160
aria-label="Previous"
6261
@keyup.left="previous()"
6362
@keyup.right="next()")
64-
slot(name="arrowLeft")
63+
slot(name="arrow-left")
6564
svg(viewBox="0 0 24 24")
6665
path(d="M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z")
6766
button.vueperslides__arrow.vueperslides__arrow--next(
@@ -70,7 +69,7 @@
7069
aria-label="Next"
7170
@keyup.left="previous()"
7271
@keyup.right="next()")
73-
slot(name="arrowRight")
72+
slot(name="arrow-right")
7473
svg(viewBox="0 0 24 24")
7574
path(d="M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z")
7675
.vueperslides__bullets(
@@ -199,7 +198,8 @@ export default {
199198
this.setBreakpointConfig(this.getCurrentBreakpoint())
200199
}
201200
202-
this.goToSlide(this.conf.initSlide - 1, { animation: false })
201+
const options = { animation: false, autoPlaying: this.conf.autoplay }
202+
this.goToSlide(this.conf.initSlide - 1, options)
203203
this.bindEvents()
204204
205205
// Give it a tick to be mounted in the DOM.
@@ -284,15 +284,15 @@ export default {
284284
const bp = (this.breakpoints && this.breakpoints[breakpoint]) || {}
285285
const slideMultipleChanged = bp.slideMultiple && bp.slideMultiple !== this.conf.slideMultiple
286286
const visibleSlidesChanged = bp.visibleSlides && bp.visibleSlides !== this.conf.visibleSlides
287-
console.log('changing breakpoint', bp, slideMultipleChanged, this.slides.focus)
288287
289288
// this.conf gets updated by itself when this.breakpointsData.current changes.
290289
this.breakpointsData.current = breakpoint
290+
this.slides.current = this.getFirstVisibleSlide(this.slides.focus)
291291
292292
if (slideMultipleChanged || visibleSlidesChanged) {
293-
this.slides.current = this.slides.focus
294-
this.goToSlide(this.slides.current)
293+
this.goToSlide(this.slides.current, { breakpointChange: true })
295294
}
295+
else this.updateCurrentTranslation()
296296
},
297297
298298
bindEvents () {
@@ -473,9 +473,7 @@ export default {
473473
474474
// Dragging did not pass conditions to change slide, snap back to current slide.
475475
cancelSlideChange () {
476-
if (!this.conf.fade) {
477-
this.updateCurrentTranslation()
478-
}
476+
if (!this.conf.fade) this.updateCurrentTranslation()
479477
},
480478
481479
getCurrentMouseX (e) {
@@ -488,7 +486,7 @@ export default {
488486
getBasicTranslation () {
489487
let translation = this.slides.current / this.conf.visibleSlides
490488
491-
if (this.conf.infinite) translation += 1 / this.conf.visibleSlides// A clone is prepended to the slides track.
489+
if (this.conf.infinite) translation += 1 / this.conf.visibleSlides // A clone is prepended to the slides track.
492490
493491
return translation
494492
},
@@ -503,7 +501,6 @@ export default {
503501
* the value of the current drag.
504502
*/
505503
updateCurrentTranslation (nextSlideIsClone = null, currentMouseX = null) {
506-
// let dragging = currentMouseX
507504
let translation = this.getBasicTranslation()
508505
509506
if (this.conf.infinite && nextSlideIsClone !== null) {
@@ -610,19 +607,6 @@ export default {
610607
611608
newIndex += index < 0 ? missingItems : 0
612609
newIndex = this.getFirstVisibleSlide(newIndex)
613-
614-
// When using slideMultiple & breakpoints, on breakpoint change if slideMultiple has
615-
// changed, the slideshow will snap to the current slide. but current slide is always the
616-
// first of visible slides so by playing around breakpoints we lose the original slide on
617-
// focus. this.slides.focus is here to never lose it.
618-
// E.g.
619-
// slideMultiple = 3, currentSlide = 9 (10th slide), means this is the only visible slide,
620-
// now change breakpoint and slideMultiple = 2, so go to slide index 8 (shows slide 9 & 10)
621-
// now current slide is 8. If we change back to previous breakpoint (slideMultiple = 3),
622-
// current slide index becomes 6! and so on.
623-
if (this.getFirstVisibleSlide(this.slides.focus) !== newIndex) {
624-
this.slides.focus = newIndex
625-
}
626610
}
627611
628612
// Disable sliding if already on edge with disableArrowsOnEdges.
@@ -634,12 +618,12 @@ export default {
634618
},
635619
636620
// animation = slide transition will be animated.
637-
// autoPlaying = go to the next slide by autoplay - no user intervention.
621+
// autoPlaying = going to the next slide from autoplay - no user intervention.
638622
// jumping = after reaching a clone, the callback jumps back to original slide with no animation.
639-
goToSlide (index, { animation = true, autoPlaying = false, jumping = false } = {}) {
623+
goToSlide (index, { animation = true, autoPlaying = false, jumping = false, breakpointChange = false } = {}) {
640624
if (!this.slidesCount || this.disable) return
641625
642-
if (this.conf.autoplay) this.pauseAutoplay()
626+
if (this.conf.autoplay && autoPlaying) this.pauseAutoplay()
643627
644628
this.transition.animated = animation
645629
setTimeout(() => (this.transition.animated = false), this.transitionSpeed)
@@ -681,21 +665,27 @@ export default {
681665
}
682666
683667
this.slides.current = nextSlide
684-
this.slides.focus = nextSlide
668+
// Don't change the focus slide if calling goToSlide from breakpoint change.
669+
// The focused slide is to keep track which slide to snap to when switching
670+
// between 2 breakpoints that have multiple visible slides.
671+
if (!breakpointChange) this.slides.focus = nextSlide
685672
686673
// Only apply sliding transition when the slideshow animation type is `slide`.
687674
if (!this.conf.fade) this.updateCurrentTranslation(nextSlideIsClone)
688675
689676
this.slides.activeId = this.slides.list[this.slides.current].id
690677
691-
if (this.conf.autoplay && !(this.conf.pauseOnHover && this.mouseOver)) this.resumeAutoplay()
678+
if (this.conf.autoplay && autoPlaying && !(this.conf.pauseOnHover && this.mouseOver)) {
679+
this.resumeAutoplay()
680+
}
692681
693682
if (this.slidesCount) {
694-
if (this.$slots.default[this.slides.current]) {
695-
// First use of goToSlide is while init, so should not propagate an event.
696-
if (this.isReady && !jumping) this.emit('slide')
683+
// First use of goToSlide is while init, so should not propagate an event.
684+
if (this.$slots.default[this.slides.current] && this.isReady && !jumping) {
685+
this.emit('slide')
697686
}
698687
688+
// Focus the current bullet for accessibility.
699689
if (this.isReady && this.conf.bullets && !autoPlaying && !jumping && this.$refs.bullet && this.$refs.bullet[this.slides.current]) {
700690
this.$refs.bullet[this.slides.current].focus()
701691
}
@@ -754,6 +744,8 @@ export default {
754744
755745
beforeDestroy () {
756746
this.removeEventListeners()
747+
document.removeEventListener('scroll', this.onScroll)
748+
window.removeEventListener('resize', this.onResize)
757749
},
758750
759751
computed: {
@@ -766,7 +758,7 @@ export default {
766758
...((this.$props.breakpoints && this.$props.breakpoints[this.breakpointsData.current]) || {})
767759
}
768760
769-
// Overrides: once config from breakpoints is imported, we can use the conf object
761+
// Overrides: once config from breakpoints is imported, we can use the `conf` object
770762
// and be sure all the options are up to date.
771763
// ------------------------------- //
772764
conf.slideMultiple = conf.slideMultiple ? conf.visibleSlides : 1
@@ -775,8 +767,9 @@ export default {
775767
conf.infinite = false
776768
}
777769
778-
conf.arrowsOutside = conf.arrowsOutside || (conf.visibleSlides > 1 && conf.arrowsOutside === null)
779-
conf.bulletsOutside = conf.bulletsOutside || (conf.visibleSlides > 1 && conf.bulletsOutside === null)
770+
// Place arrows & bullets outside by default if visibleSlides > 1.
771+
if (conf.visibleSlides > 1 && conf.arrowsOutside === null) conf.arrowsOutside = true
772+
if (conf.visibleSlides > 1 && conf.bulletsOutside === null) conf.bulletsOutside = true
780773
781774
if (this.touchEnabled !== conf.touchable) this.toggleTouchableOption(conf.touchable)
782775
// ------------------------------- //
@@ -799,10 +792,12 @@ export default {
799792
return this.slidesCount ? this.slides.list[this.slidesCount - 1] : {}
800793
},
801794
currentSlide () {
802-
console.log(this.slidesCount, this.slides.current, this.slides.list[this.slides.current])
803-
804795
// Means it didn't have time to update this.slidesCount on hot-reload.
805-
if (this.slides.current > this.slidesCount - 1) this.goToSlide(0, { animation: false })
796+
if (this.slides.current > this.slidesCount - 1) {
797+
this.goToSlide(0, { animation: false })
798+
console.log('Does not seem to ever happen in the end.')
799+
debugger
800+
}
806801
807802
return (this.slidesCount && this.slides.list[this.slides.current]) || {}
808803
},

0 commit comments

Comments
 (0)