import {
defineJQueryPlugin,
- emulateTransitionEnd,
getElementFromSelector,
- getTransitionDurationFromElement,
isRTL,
isVisible,
reflow,
return
}
- const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+ const { classList, scrollHeight, style } = this._element
+ const isModalOverflowing = scrollHeight > document.documentElement.clientHeight
+
+ // return if the following background transition hasn't yet completed
+ if ((!isModalOverflowing && style.overflowY === 'hidden') || classList.contains(CLASS_NAME_STATIC)) {
+ return
+ }
if (!isModalOverflowing) {
- this._element.style.overflowY = 'hidden'
+ style.overflowY = 'hidden'
}
- this._element.classList.add(CLASS_NAME_STATIC)
- const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
- EventHandler.off(this._element, 'transitionend')
- EventHandler.one(this._element, 'transitionend', () => {
- this._element.classList.remove(CLASS_NAME_STATIC)
+ classList.add(CLASS_NAME_STATIC)
+ this._queueCallback(() => {
+ classList.remove(CLASS_NAME_STATIC)
if (!isModalOverflowing) {
- EventHandler.one(this._element, 'transitionend', () => {
- this._element.style.overflowY = ''
- })
- emulateTransitionEnd(this._element, modalTransitionDuration)
+ this._queueCallback(() => {
+ style.overflowY = ''
+ }, this._dialog)
}
- })
- emulateTransitionEnd(this._element, modalTransitionDuration)
+ }, this._dialog)
+
this._element.focus()
}
return null
}
-const emulateTransitionEnd = (element, duration) => {
- let called = false
- const durationPadding = 5
- const emulatedDuration = duration + durationPadding
-
- function listener() {
- called = true
- element.removeEventListener(TRANSITION_END, listener)
- }
-
- element.addEventListener(TRANSITION_END, listener)
- setTimeout(() => {
- if (!called) {
- triggerTransitionEnd(element)
- }
- }, emulatedDuration)
-}
-
const typeCheckConfig = (componentName, config, configTypes) => {
Object.keys(configTypes).forEach(property => {
const expectedTypes = configTypes[property]
}
}
+const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+ if (!waitForTransition) {
+ execute(callback)
+ return
+ }
+
+ const durationPadding = 5
+ const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+ let called = false
+
+ const handler = ({ target }) => {
+ if (target !== transitionElement) {
+ return
+ }
+
+ called = true
+ transitionElement.removeEventListener(TRANSITION_END, handler)
+ execute(callback)
+ }
+
+ transitionElement.addEventListener(TRANSITION_END, handler)
+ setTimeout(() => {
+ if (!called) {
+ triggerTransitionEnd(transitionElement)
+ }
+ }, emulatedDuration)
+}
+
/**
* Return the previous/next element of a list.
*
getTransitionDurationFromElement,
triggerTransitionEnd,
isElement,
- emulateTransitionEnd,
typeCheckConfig,
isVisible,
isDisabled,
onDOMContentLoaded,
isRTL,
defineJQueryPlugin,
- execute
+ execute,
+ executeAfterTransition
}
describe('triggerTransitionEnd', () => {
it('should trigger transitionend event', done => {
- fixtureEl.innerHTML = '<div style="transition: all 300ms ease-out;"></div>'
+ fixtureEl.innerHTML = '<div></div>'
const el = fixtureEl.querySelector('div')
+ const spy = spyOn(el, 'dispatchEvent').and.callThrough()
el.addEventListener('transitionend', () => {
- expect().nothing()
+ expect(spy).toHaveBeenCalled()
done()
})
})
})
- describe('emulateTransitionEnd', () => {
- it('should emulate transition end', () => {
- fixtureEl.innerHTML = '<div></div>'
-
- const el = document.querySelector('div')
- const spy = spyOn(window, 'setTimeout')
-
- Util.emulateTransitionEnd(el, 10)
- expect(spy).toHaveBeenCalled()
- })
-
- it('should not emulate transition end if already triggered', done => {
- fixtureEl.innerHTML = '<div></div>'
-
- const el = fixtureEl.querySelector('div')
- const spy = spyOn(el, 'removeEventListener')
-
- Util.emulateTransitionEnd(el, 10)
- Util.triggerTransitionEnd(el)
-
- setTimeout(() => {
- expect(spy).toHaveBeenCalled()
- done()
- }, 20)
- })
- })
-
describe('typeCheckConfig', () => {
const namePlugin = 'collapse'
})
})
+ describe('executeAfterTransition', () => {
+ it('should immediately execute a function when waitForTransition parameter is false', () => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
+ const eventListenerSpy = spyOn(el, 'addEventListener')
+
+ Util.executeAfterTransition(callbackSpy, el, false)
+
+ expect(callbackSpy).toHaveBeenCalled()
+ expect(eventListenerSpy).not.toHaveBeenCalled()
+ })
+
+ it('should execute a function when a transitionend event is dispatched', () => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
+
+ Util.executeAfterTransition(callbackSpy, el)
+
+ el.dispatchEvent(new TransitionEvent('transitionend'))
+
+ expect(callbackSpy).toHaveBeenCalled()
+ })
+
+ it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', done => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
+
+ Util.executeAfterTransition(callbackSpy, el)
+
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalled()
+ done()
+ }, 70)
+ })
+
+ it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', done => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
+
+ Util.executeAfterTransition(callbackSpy, el)
+
+ setTimeout(() => {
+ el.dispatchEvent(new TransitionEvent('transitionend'))
+ }, 50)
+
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalledTimes(1)
+ done()
+ }, 70)
+ })
+
+ it('should not trigger a transitionend event if another transitionend event had already happened', done => {
+ const el = document.createElement('div')
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
+
+ Util.executeAfterTransition(() => {}, el)
+
+ // simulate a event dispatched by the browser
+ el.dispatchEvent(new TransitionEvent('transitionend'))
+
+ const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
+
+ setTimeout(() => {
+ // setTimeout should not have triggered another transitionend event.
+ expect(dispatchSpy).not.toHaveBeenCalled()
+ done()
+ }, 70)
+ })
+
+ it('should ignore transitionend events from nested elements', done => {
+ fixtureEl.innerHTML = [
+ '<div class="outer">',
+ ' <div class="nested"></div>',
+ '</div>'
+ ].join('')
+
+ const outer = fixtureEl.querySelector('.outer')
+ const nested = fixtureEl.querySelector('.nested')
+ const callbackSpy = jasmine.createSpy('callback spy')
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
+
+ Util.executeAfterTransition(callbackSpy, outer)
+
+ nested.dispatchEvent(new TransitionEvent('transitionend', {
+ bubbles: true
+ }))
+
+ setTimeout(() => {
+ expect(callbackSpy).not.toHaveBeenCalled()
+ }, 20)
+
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalled()
+ done()
+ }, 70)
+ })
+ })
+
describe('getNextActiveElement', () => {
it('should return first element if active not exists or not given and shouldGetNext is either true, or false with cycling being disabled', () => {
const array = ['a', 'b', 'c', 'd']
projects / thirdparty / bootstrap.git / commitdiff
