Skip to content

Commit

Permalink
Merge branch 'use-css-transition-duration-in-js' into current
Browse files Browse the repository at this point in the history 
* use-css-transition-duration-in-js:
  Util.TRANSITION_END doesn't need to be publicly accessible anymore
  Remove unnecessary removal of FADE and SHOW in setContent
  Remove unnecessary reference to fade class
  Remove unnecessary checks on modal showBackdrop
  Add unit test for modal with long transition and no transition
  Handle transition on multiple elements (use the longest duration of all the elements)
  Add unit test for alert with long transition and no transition
  Revert "Add unit test for alert with long transition and no transition"
  Add unit test for alert with long transition and no transition
  Add unit test for collapse with long transition and no transition
  Remove static duration in js modules Handle transition with multiple properties Move shared transition handling in Util function
  Set the default (emulated) transition to 350ms to match the default value of $transition-collapse
  Add support for transition: none and transition-duration: 0
  Use css transition-duration in transitionEndEmulator
  Revert "Use css transition-duration in transitionEndEmulator"
  Use css transition-duration in transitionEndEmulator
  • Loading branch information
@pvdlg
pvdlg committed Jan 25, 2017
2 parents 92f85ea + 3c78278 commit e17a270
Show file tree
Hide file tree
Showing 11 changed files with 243 additions and 240 deletions.
18 changes: 1 addition & 17 deletions js/src/alert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const Alert = (($) => {
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 150

const Selector = {
DISMISS : '[data-dismiss="alert"]'
Expand All @@ -37,7 +36,6 @@ const Alert = (($) => {

const ClassName = {
ALERT : 'alert',
FADE : 'fade',
SHOW : 'show'
}

Expand Down Expand Up @@ -74,7 +72,7 @@ const Alert = (($) => {
return
}

this._removeElement(rootElement)
$(rootElement).transition(() => $(rootElement).removeClass(ClassName.SHOW), () => this._destroyElement(rootElement))
}

dispose() {
Expand Down Expand Up @@ -107,20 +105,6 @@ const Alert = (($) => {
return closeEvent
}

_removeElement(element) {
$(element).removeClass(ClassName.SHOW)

if (!Util.supportsTransitionEnd() ||
!$(element).hasClass(ClassName.FADE)) {
this._destroyElement(element)
return
}

$(element)
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
.emulateTransitionEnd(TRANSITION_DURATION)
}

_destroyElement(element) {
$(element)
.detach()
Expand Down
34 changes: 13 additions & 21 deletions js/src/carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const Carousel = (($) => {
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 600
const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key
const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key

Expand Down Expand Up @@ -145,9 +144,7 @@ const Carousel = (($) => {
this._isPaused = true
}

if ($(this._element).find(Selector.NEXT_PREV)[0] &&
Util.supportsTransitionEnd()) {
Util.triggerTransitionEnd(this._element)
if ($(this._element).find(Selector.NEXT_PREV)[0]) {
this.cycle(true)
}

Expand Down Expand Up @@ -357,31 +354,26 @@ const Carousel = (($) => {
direction: eventDirectionName
})

if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.SLIDE)) {
if ($(this._element).hasClass(ClassName.SLIDE)) {

$(nextElement).addClass(orderClassName)

Util.reflow(nextElement)

$(activeElement).addClass(directionalClassName)
$(nextElement).addClass(directionalClassName)
$(activeElement).transition(() => {
$(activeElement).addClass(directionalClassName)
$(nextElement).addClass(directionalClassName)
}, () => {
$(nextElement)
.removeClass(`${directionalClassName} ${orderClassName}`)
.addClass(ClassName.ACTIVE)

$(activeElement)
.one(Util.TRANSITION_END, () => {
$(nextElement)
.removeClass(`${directionalClassName} ${orderClassName}`)
.addClass(ClassName.ACTIVE)
$(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)

$(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)

this._isSliding = false

setTimeout(() => $(this._element).trigger(slidEvent), 0)

})
.emulateTransitionEnd(TRANSITION_DURATION)
this._isSliding = false

setTimeout(() => $(this._element).trigger(slidEvent), 0)
})
} else {
$(activeElement).removeClass(ClassName.ACTIVE)
$(nextElement).addClass(ClassName.ACTIVE)
Expand Down
48 changes: 16 additions & 32 deletions js/src/collapse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const Collapse = (($) => {
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 600

const Default = {
toggle : true,
Expand Down Expand Up @@ -165,34 +164,25 @@ const Collapse = (($) => {
.attr('aria-expanded', true)
}

this.setTransitioning(true)
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
const scrollSize = `scroll${capitalizedDimension}`

const start = () => {
this.setTransitioning(true)
this._element.style[dimension] = `${this._element[scrollSize]}px`
}

const complete = () => {
this.setTransitioning(false)
$(this._element)
.removeClass(ClassName.COLLAPSING)
.addClass(ClassName.COLLAPSE)
.addClass(ClassName.SHOW)

this._element.style[dimension] = ''

this.setTransitioning(false)

$(this._element).trigger(Event.SHOWN)
}

if (!Util.supportsTransitionEnd()) {
complete()
return
.css(dimension, '')
.trigger(Event.SHOWN)
}

const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
const scrollSize = `scroll${capitalizedDimension}`

$(this._element)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(TRANSITION_DURATION)

this._element.style[dimension] = `${this._element[scrollSize]}px`
$(this._element).transition(start, complete)
}

hide() {
Expand Down Expand Up @@ -231,7 +221,10 @@ const Collapse = (($) => {
.attr('aria-expanded', false)
}

this.setTransitioning(true)
const start = () => {
this.setTransitioning(true)
this._element.style[dimension] = ''
}

const complete = () => {
this.setTransitioning(false)
Expand All @@ -241,16 +234,7 @@ const Collapse = (($) => {
.trigger(Event.HIDDEN)
}

this._element.style[dimension] = ''

if (!Util.supportsTransitionEnd()) {
complete()
return
}

$(this._element)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(TRANSITION_DURATION)
$(this._element).transition(start, complete)
}

setTransitioning(isTransitioning) {
Expand Down
93 changes: 21 additions & 72 deletions js/src/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ const Modal = (($) => {
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const TRANSITION_DURATION = 300
const BACKDROP_TRANSITION_DURATION = 150
const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key

const Default = {
Expand Down Expand Up @@ -115,10 +113,6 @@ const Modal = (($) => {
throw new Error('Modal is transitioning')
}

if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)) {
this._isTransitioning = true
}
const showEvent = $.Event(Event.SHOW, {
relatedTarget
})
Expand All @@ -129,6 +123,7 @@ const Modal = (($) => {
return
}

this._isTransitioning = true
this._isShown = true

this._checkScrollbar()
Expand Down Expand Up @@ -165,38 +160,27 @@ const Modal = (($) => {
throw new Error('Modal is transitioning')
}

const transition = Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)
if (transition) {
this._isTransitioning = true
}

const hideEvent = $.Event(Event.HIDE)
$(this._element).trigger(hideEvent)

if (!this._isShown || hideEvent.isDefaultPrevented()) {
return
}

this._isTransitioning = true
this._isShown = false

this._setEscapeEvent()
this._setResizeEvent()

$(document).off(Event.FOCUSIN)

$(this._element).removeClass(ClassName.SHOW)
$(this._element).transition(() => {
$(this._element).removeClass(ClassName.SHOW)

$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)

if (transition) {
$(this._element)
.one(Util.TRANSITION_END, (event) => this._hideModal(event))
.emulateTransitionEnd(TRANSITION_DURATION)
} else {
this._hideModal()
}
$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)
}, (event) => this._hideModal(event))
}

dispose() {
Expand Down Expand Up @@ -225,9 +209,6 @@ const Modal = (($) => {
}

_showElement(relatedTarget) {
const transition = Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)

if (!this._element.parentNode ||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
// don't move modals dom position
Expand All @@ -238,35 +219,27 @@ const Modal = (($) => {
this._element.removeAttribute('aria-hidden')
this._element.scrollTop = 0

if (transition) {
Util.reflow(this._element)
}
Util.reflow(this._element)

$(this._element).addClass(ClassName.SHOW)
const start = () => {
$(this._element).addClass(ClassName.SHOW)

if (this._config.focus) {
this._enforceFocus()
if (this._config.focus) {
this._enforceFocus()
}
}

const shownEvent = $.Event(Event.SHOWN, {
relatedTarget
})

const transitionComplete = () => {
const complete = () => {
if (this._config.focus) {
this._element.focus()
}
this._isTransitioning = false
$(this._element).trigger(shownEvent)
$(this._element).trigger($.Event(Event.SHOWN, {
relatedTarget
}))
}

if (transition) {
$(this._dialog)
.one(Util.TRANSITION_END, transitionComplete)
.emulateTransitionEnd(TRANSITION_DURATION)
} else {
transitionComplete()
}
$(this._dialog).transition(start, complete)
}

_enforceFocus() {
Expand Down Expand Up @@ -326,8 +299,6 @@ const Modal = (($) => {
ClassName.FADE : ''

if (this._isShown && this._config.backdrop) {
const doAnimate = Util.supportsTransitionEnd() && animate

this._backdrop = document.createElement('div')
this._backdrop.className = ClassName.BACKDROP

Expand All @@ -352,43 +323,21 @@ const Modal = (($) => {
}
})

if (doAnimate) {
if (animate) {
Util.reflow(this._backdrop)
}

$(this._backdrop).addClass(ClassName.SHOW)

if (!callback) {
return
}

if (!doAnimate) {
callback()
return
}

$(this._backdrop)
.one(Util.TRANSITION_END, callback)
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
$(this._backdrop).transition(() => $(this._backdrop).addClass(ClassName.SHOW), callback)

} else if (!this._isShown && this._backdrop) {
$(this._backdrop).removeClass(ClassName.SHOW)

const callbackRemove = () => {
this._removeBackdrop()
if (callback) {
callback()
}
}

if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)) {
$(this._backdrop)
.one(Util.TRANSITION_END, callbackRemove)
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
} else {
callbackRemove()
}
$(this._backdrop).transition(() => $(this._backdrop).removeClass(ClassName.SHOW), callbackRemove)

} else if (callback) {
callback()
Expand Down
7 changes: 0 additions & 7 deletions js/src/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,6 @@ const Popover = (($) => {
content : '(string|element|function)'
})

const ClassName = {
FADE : 'fade',
SHOW : 'show'
}

const Selector = {
TITLE : '.popover-title',
CONTENT : '.popover-content'
Expand Down Expand Up @@ -117,8 +112,6 @@ const Popover = (($) => {
this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
this.setElementContent($tip.find(Selector.CONTENT), this._getContent())

$tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)

this.cleanupTether()
}

Expand Down
Loading

0 comments on commit e17a270

Please sign in to comment.