mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

Fix JS components console error "Error: <Component> is transitioning"

Browse Source
This commit is contained in:
Pierre Vanduynslager
2017-03-28 17:43:16 -04:00
committed by Johann-S
parent ce0e2f8e76
commit 48c5efa4c3
16 changed files with 101 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/src/carousel.js
View File

@@ -120,10 +120,9 @@ const Carousel = (($) => {
// public
next() {
if (this._isSliding) {
throw new Error('Carousel is sliding')
if (!this._isSliding) {
this._slide(Direction.NEXT)
}
this._slide(Direction.NEXT)
}
nextWhenVisible() {
@@ -134,10 +133,9 @@ const Carousel = (($) => {
}
prev() {
if (this._isSliding) {
throw new Error('Carousel is sliding')
if (!this._isSliding) {
this._slide(Direction.PREV)
}
this._slide(Direction.PREV)
}
pause(event) {

14
js/src/collapse.js
View File

@@ -120,11 +120,8 @@ const Collapse = (($) => {
}
show() {
if (this._isTransitioning) {
throw new Error('Collapse is transitioning')
}
if ($(this._element).hasClass(ClassName.SHOW)) {
if (this._isTransitioning ||
$(this._element).hasClass(ClassName.SHOW)) {
return
}
@@ -204,11 +201,8 @@ const Collapse = (($) => {
}
hide() {
if (this._isTransitioning) {
throw new Error('Collapse is transitioning')
}
if (!$(this._element).hasClass(ClassName.SHOW)) {
if (this._isTransitioning ||
!$(this._element).hasClass(ClassName.SHOW)) {
return
}

19
js/src/modal.js
View File

@@ -87,7 +87,6 @@ const Modal = (($) => {
this._isShown = false
this._isBodyOverflowing = false
this._ignoreBackdropClick = false
this._isTransitioning = false
this._originalBodyPadding = 0
this._scrollbarWidth = 0
}
@@ -112,13 +111,13 @@ const Modal = (($) => {
show(relatedTarget) {
if (this._isTransitioning) {
throw new Error('Modal is transitioning')
return
}
if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)) {
if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
this._isTransitioning = true
}
const showEvent = $.Event(Event.SHOW, {
relatedTarget
})
@@ -161,17 +160,18 @@ const Modal = (($) => {
event.preventDefault()
}
if (this._isTransitioning) {
throw new Error('Modal is transitioning')
if (this._isTransitioning || !this._isShown) {
return
}
const transition = Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.FADE)
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()) {
@@ -191,6 +191,7 @@ const Modal = (($) => {
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)
if (transition) {
$(this._element)
.one(Util.TRANSITION_END, (event) => this._hideModal(event))
.emulateTransitionEnd(TRANSITION_DURATION)
@@ -307,7 +308,7 @@ const Modal = (($) => {
_hideModal() {
this._element.style.display = 'none'
this._element.setAttribute('aria-hidden', 'true')
this._element.setAttribute('aria-hidden', true)
this._isTransitioning = false
this._showBackdrop(() => {
$(document.body).removeClass(ClassName.OPEN)

32
js/src/tooltip.js
View File

@@ -124,12 +124,11 @@ const Tooltip = (($) => {
constructor(element, config) {
// private
this._isEnabled = true
this._timeout = 0
this._hoverState = ''
this._activeTrigger = {}
this._isTransitioning = false
this._tether = null
this._isEnabled = true
this._timeout = 0
this._hoverState = ''
this._activeTrigger = {}
this._tether = null
// protected
this.element = element
@@ -250,9 +249,6 @@ const Tooltip = (($) => {
const showEvent = $.Event(this.constructor.Event.SHOW)
if (this.isWithContent() && this._isEnabled) {
if (this._isTransitioning) {
throw new Error('Tooltip is transitioning')
}
$(this.element).trigger(showEvent)
const isInTheDom = $.contains(
@@ -284,9 +280,11 @@ const Tooltip = (($) => {
const container = this.config.container === false ? document.body : $(this.config.container)
$(tip)
.data(this.constructor.DATA_KEY, this)
.appendTo(container)
$(tip).data(this.constructor.DATA_KEY, this)
if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) {
$(tip).appendTo(container)
}
$(this.element).trigger(this.constructor.Event.INSERTED)
@@ -308,8 +306,7 @@ const Tooltip = (($) => {
const complete = () => {
const prevHoverState = this._hoverState
this._hoverState = null
this._isTransitioning = false
this._hoverState = null
$(this.element).trigger(this.constructor.Event.SHOWN)
@@ -319,7 +316,6 @@ const Tooltip = (($) => {
}
if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
this._isTransitioning = true
$(this.tip)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
@@ -333,9 +329,6 @@ const Tooltip = (($) => {
hide(callback) {
const tip = this.getTipElement()
const hideEvent = $.Event(this.constructor.Event.HIDE)
if (this._isTransitioning) {
throw new Error('Tooltip is transitioning')
}
const complete = () => {
if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
tip.parentNode.removeChild(tip)
@@ -344,7 +337,6 @@ const Tooltip = (($) => {
this._cleanTipClass()
this.element.removeAttribute('aria-describedby')
$(this.element).trigger(this.constructor.Event.HIDDEN)
this._isTransitioning = false
this.cleanupTether()
if (callback) {
@@ -366,7 +358,7 @@ const Tooltip = (($) => {
if (Util.supportsTransitionEnd() &&
$(this.tip).hasClass(ClassName.FADE)) {
this._isTransitioning = true
$(tip)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(TRANSITION_DURATION)

24
js/tests/visual/carousel.html
View File

@@ -45,31 +45,11 @@
<script src="../../dist/carousel.js"></script>
<script>
// Should throw an error because carousel is in transition
function testCarouselTransitionError() {
var err = false
var $carousel = $('#carousel-example-generic')
$carousel.on('slid.bs.carousel', function () {
$carousel.off('slid.bs.carousel')
if (!err) {
alert('No error thrown for : testCarouselTransitionError')
}
})
try {
$carousel.carousel('next').carousel('prev')
}
catch (e) {
err = true
console.error(e.message)
}
}
$(function () {
$(function() {
// Test to show that the carousel doesn't slide when the current tab isn't visible
$('#carousel-example-generic').on('slid.bs.carousel', function (event) {
$('#carousel-example-generic').on('slid.bs.carousel', function(event) {
console.log('slid at ', event.timeStamp)
})
testCarouselTransitionError()
})
</script>
</body>

25
js/tests/visual/collapse.html
View File

@@ -60,30 +60,5 @@
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/collapse.js"></script>
<script>
// JavaScript Test
$(function () {
testCollapseTransitionError()
});
// Should throw an error because carousel is in transition
function testCollapseTransitionError() {
var err = false
$('#collapseOne').on('hidden.bs.collapse', function (e) {
$(this).off('hidden.bs.collapse')
if (!err) {
alert('No error thrown for : testCollapseTransitionError')
}
})
try {
$('#collapseOne').collapse('hide').collapse('show')
}
catch (e) {
err = true
console.error(e.message)
}
}
</script>
</body>
</html>

21
js/tests/visual/modal.html
View File

@@ -187,26 +187,6 @@
}
}
// Should throw an error because modal is in transition
function testModalTransitionError() {
var err = false
// Close #myModal
$('#myModal').on('shown.bs.modal', function () {
$('#myModal').modal('hide').off('shown.bs.modal')
if (!err) {
alert('No error thrown for : testModalTransitionError')
}
})
try {
$('#myModal').modal('show').modal('hide')
}
catch (e) {
err = true
console.error(e.message)
}
}
$(function () {
$('[data-toggle="popover"]').popover()
$('[data-toggle="tooltip"]').tooltip()
@@ -219,7 +199,6 @@
$('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
$('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
})
testModalTransitionError()
})
</script>
</body>

19
js/tests/visual/tooltip.html
View File

@@ -41,26 +41,7 @@
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
testTooltipTransitionError()
})
// Should throw an error because tooltip is in transition
function testTooltipTransitionError() {
var err = false
$('#btnOne').on('shown.bs.tooltip', function () {
$('#btnOne').tooltip('hide').off('shown.bs.tooltip')
if (!err) {
alert('No error thrown for : testTooltipTransitionError')
}
})
try {
$('#btnOne').tooltip('show').tooltip('hide')
}
catch (e) {
err = true
console.error(e.message)
}
}
</script>
</body>
</html>