From e84f92cfaad1de4ffb0e8e79944d84f8561deab2 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 6 Jan 2018 15:31:08 +0100 Subject: [PATCH 01/10] Fix carousel transition duration --- js/src/carousel.js | 59 +++++++++++++++++++++++++++++--------------- scss/_variables.scss | 3 ++- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index 083f2548e49c..7948ef612976 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -18,16 +18,16 @@ const Carousel = (($) => { * ------------------------------------------------------------------------ */ - const NAME = 'carousel' - const VERSION = '4.0.0-beta.3' - const DATA_KEY = 'bs.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 - const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const NAME = 'carousel' + const VERSION = '4.0.0-beta.3' + const DATA_KEY = 'bs.carousel' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key + const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key + const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const MILLISECONDS_MULTIPLIER = 1000 const Default = { interval : 5000, @@ -94,18 +94,20 @@ const Carousel = (($) => { class Carousel { constructor(element, config) { - this._items = null - this._interval = null - this._activeElement = null + this._items = null + this._interval = null + this._activeElement = null - this._isPaused = false - this._isSliding = false + this._isPaused = false + this._isSliding = false - this.touchTimeout = null + this.touchTimeout = null - this._config = this._getConfig(config) - this._element = $(element)[0] - this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + this._config = this._getConfig(config) + this._element = $(element)[0] + this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + + this._transitionDuration = this._getTransitionDuration() this._addEventListeners() } @@ -231,6 +233,23 @@ const Carousel = (($) => { return config } + _getTransitionDuration() { + // Get transition-duration of first element in the carousel + let transitionDuration = $(this._element).find(Selector.ITEM).css('transition-duration') + + // Return 0 carousel item is not found + if (!transitionDuration) { + return 0 + } + + // If multiple durations are defined, take the first + transitionDuration = transitionDuration.split(',')[0] + + // Multiply by 1000 if transition-duration is defined in seconds + return transitionDuration.indexOf('ms') > -1 ? + parseFloat(transitionDuration) : parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER + } + _addEventListeners() { if (this._config.keyboard) { $(this._element) @@ -410,7 +429,7 @@ const Carousel = (($) => { setTimeout(() => $(this._element).trigger(slidEvent), 0) }) - .emulateTransitionEnd(TRANSITION_DURATION) + .emulateTransitionEnd(this._transitionDuration) } else { $(activeElement).removeClass(ClassName.ACTIVE) diff --git a/scss/_variables.scss b/scss/_variables.scss index 31149a5e496c..ddc59b0042c3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -858,7 +858,8 @@ $carousel-control-icon-width: 20px !default; $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; - +// If multiple transitions are applied, make sure the transform transition is defined first +// eg. transform 2s ease, opacity .5s ease-out $carousel-transition: transform .6s ease !default; From 79b53355ec7162ec28a88ca6c6b2f422e0b1018e Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 9 Jan 2018 18:13:11 +0100 Subject: [PATCH 02/10] Add visual test for changed transition-duration of carousel-item --- js/tests/visual/carousel.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index f81dc951e727..387857904d88 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -5,12 +5,17 @@ Carousel +

Carousel Bootstrap Visual Test

-

Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.

+

The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.