rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Check for data-interval on the first slide of carousel (#31818)

Browse Source 
* check for data-interval on the first slide of carousel

* add updateInterval method for elements of a carousel

* add test for carousel interval being set during cycle

* update activeElement as soon as slide has finished (before transition end)

* only updateInterval before using it

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mitchell Bryson 2020-11-01 12:36:50 +00:00 committed by GitHub
parent cb45642918
commit 3a5f9f5cf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/src/carousel.js
View File

@ -181,6 +181,8 @@ class Carousel {
}
if (this._config && this._config.interval && !this._isPaused) {
this._updateInterval()
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
this._config.interval
@ -409,6 +411,23 @@ class Carousel {
}
}
_updateInterval() {
const element = this._activeElement || SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
if (!element) {
return
}
const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
if (elementInterval) {
this._config.defaultInterval = this._config.defaultInterval || this._config.interval
this._config.interval = elementInterval
} else {
this._config.interval = this._config.defaultInterval || this._config.interval
}
}
_slide(direction, element) {
const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
const activeElementIndex = this._getItemIndex(activeElement)
@ -454,6 +473,7 @@ class Carousel {
}
this._setActiveIndicatorElement(nextElement)
this._activeElement = nextElement
if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
nextElement.classList.add(orderClassName)
@ -463,14 +483,6 @@ class Carousel {
activeElement.classList.add(directionalClassName)
nextElement.classList.add(directionalClassName)
const nextElementInterval = parseInt(nextElement.getAttribute('data-interval'), 10)
if (nextElementInterval) {
this._config.defaultInterval = this._config.defaultInterval || this._config.interval
this._config.interval = nextElementInterval
} else {
this._config.interval = this._config.defaultInterval || this._config.interval
}
const transitionDuration = getTransitionDurationFromElement(activeElement)
EventHandler.one(activeElement, TRANSITION_END, () => {

42
js/tests/unit/carousel.spec.js
View File

@ -636,27 +636,24 @@ describe('Carousel', () => {
carousel.next()
})
it('should get interval from data attribute in individual item', () => {
it('should update the active element to the next item before sliding', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div id="secondItem" class="carousel-item">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
].join('')
const carouselEl = fixtureEl.querySelector('#myCarousel')
const carousel = new Carousel(carouselEl, {
interval: 1814
})
expect(carousel._config.interval).toEqual(1814)
const secondItemEl = fixtureEl.querySelector('#secondItem')
const carousel = new Carousel(carouselEl)
carousel.next()
expect(carousel._config.interval).toEqual(7)
expect(carousel._activeElement).toEqual(secondItemEl)
})
it('should update indicators if present', done => {
@ -876,6 +873,35 @@ describe('Carousel', () => {
expect(window.setInterval).toHaveBeenCalled()
expect(window.clearInterval).toHaveBeenCalled()
})
it('should get interval from data attribute on the active item element', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active" data-interval="7">item 1</div>',
' <div id="secondItem" class="carousel-item" data-interval="9385">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
].join('')
const carouselEl = fixtureEl.querySelector('#myCarousel')
const secondItemEl = fixtureEl.querySelector('#secondItem')
const carousel = new Carousel(carouselEl, {
interval: 1814
})
expect(carousel._config.interval).toEqual(1814)
carousel.cycle()
expect(carousel._config.interval).toEqual(7)
carousel._activeElement = secondItemEl
carousel.cycle()
expect(carousel._config.interval).toEqual(9385)
})
})
describe('to', () => {