From 14ec4fdfc10a965477314078c1a9531a1d02fb8f Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 1 Feb 2016 00:06:07 +0100 Subject: Carousel - Do not prevent on keydown for input and textarea --- js/src/carousel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 34cab4391..0ed4b7b5f 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -229,11 +229,10 @@ const Carousel = (($) => { } _keydown(event) { - event.preventDefault() - if (/input|textarea/i.test(event.target.tagName)) { return } + event.preventDefault() switch (event.which) { case 37: this.prev(); break -- cgit v1.2.3 From edc43a4ea63312d95bd0779832c534cd3c14895b Mon Sep 17 00:00:00 2001 From: J2TeaM Date: Wed, 7 Sep 2016 02:55:48 +0700 Subject: Remove classes at one time --- js/src/carousel.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index ff00d8aaf..ea14d0c9a 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -353,15 +353,10 @@ const Carousel = (($) => { $(activeElement) .one(Util.TRANSITION_END, () => { $(nextElement) - .removeClass(directionalClassName) - .removeClass(direction) + .removeClass(directionalClassName + ' ' + direction) + .addClass(ClassName.ACTIVE) - $(nextElement).addClass(ClassName.ACTIVE) - - $(activeElement) - .removeClass(ClassName.ACTIVE) - .removeClass(direction) - .removeClass(directionalClassName) + $(activeElement).removeClass(ClassName.ACTIVE + ' ' + direction + ' ' + directionalClassName) this._isSliding = false -- cgit v1.2.3 From 4f5a7c96e73071d2d75a0fa135797c9ee15969ed Mon Sep 17 00:00:00 2001 From: J2TeaM Date: Wed, 7 Sep 2016 03:17:19 +0700 Subject: Fix eslint (prefer-template) --- js/src/carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index ea14d0c9a..92d91ff2f 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -353,10 +353,10 @@ const Carousel = (($) => { $(activeElement) .one(Util.TRANSITION_END, () => { $(nextElement) - .removeClass(directionalClassName + ' ' + direction) + .removeClass(`${directionalClassName} ${direction}`) .addClass(ClassName.ACTIVE) - $(activeElement).removeClass(ClassName.ACTIVE + ' ' + direction + ' ' + directionalClassName) + $(activeElement).removeClass(`${ClassName.ACTIVE} ${direction} ${directionalClassName}`) this._isSliding = false -- cgit v1.2.3 From 8ff7edaab4f55b6612df3fe670aa9b9ac0984eae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Oct 2016 08:27:41 -0700 Subject: version bump to alpha 5 --- js/src/carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index ff00d8aaf..54249039e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -3,7 +3,7 @@ import Util from './util' /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): carousel.js + * Bootstrap (v4.0.0-alpha.5): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -18,7 +18,7 @@ const Carousel = (($) => { */ const NAME = 'carousel' - const VERSION = '4.0.0-alpha.4' + const VERSION = '4.0.0-alpha.5' const DATA_KEY = 'bs.carousel' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -- cgit v1.2.3 From 0974267b8c2b137d563d36c2390b4491fb1e0309 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 1 Nov 2016 14:32:36 +1100 Subject: Move from $.proxy to es6 arrow functions. (#21049) --- js/src/carousel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 54249039e..17bfebc68 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -161,7 +161,7 @@ const Carousel = (($) => { if (this._config.interval && !this._isPaused) { this._interval = setInterval( - $.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval + (document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval ) } } @@ -219,14 +219,14 @@ const Carousel = (($) => { _addEventListeners() { if (this._config.keyboard) { $(this._element) - .on(Event.KEYDOWN, $.proxy(this._keydown, this)) + .on(Event.KEYDOWN, (event) => this._keydown(event)) } if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) { $(this._element) - .on(Event.MOUSEENTER, $.proxy(this.pause, this)) - .on(Event.MOUSELEAVE, $.proxy(this.cycle, this)) + .on(Event.MOUSEENTER, (event) => this.pause(event)) + .on(Event.MOUSELEAVE, (event) => this.cycle(event)) } } -- cgit v1.2.3 From c2616fb74e6bdc0cd46a5678a2c5cffcbe422106 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 22 Nov 2016 01:36:00 +1100 Subject: Make JS compliant with the new ESLint rules. --- js/src/carousel.js | 55 +++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 27 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 17bfebc68..b7f3b3a7a 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -161,7 +161,8 @@ const Carousel = (($) => { if (this._config.interval && !this._isPaused) { this._interval = setInterval( - (document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval + (document.visibilityState ? this.nextWhenVisible : this.next).bind(this), + this._config.interval ) } } @@ -169,9 +170,9 @@ const Carousel = (($) => { to(index) { this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0] - let activeIndex = this._getItemIndex(this._activeElement) + const activeIndex = this._getItemIndex(this._activeElement) - if (index > (this._items.length - 1) || index < 0) { + if (index > this._items.length - 1 || index < 0) { return } @@ -186,7 +187,7 @@ const Carousel = (($) => { return } - let direction = index > activeIndex ? + const direction = index > activeIndex ? Direction.NEXT : Direction.PREVIOUS @@ -255,19 +256,19 @@ const Carousel = (($) => { } _getItemByDirection(direction, activeElement) { - let isNextDirection = direction === Direction.NEXT - let isPrevDirection = direction === Direction.PREVIOUS - let activeIndex = this._getItemIndex(activeElement) - let lastItemIndex = (this._items.length - 1) - let isGoingToWrap = (isPrevDirection && activeIndex === 0) || - (isNextDirection && activeIndex === lastItemIndex) + const isNextDirection = direction === Direction.NEXT + const isPrevDirection = direction === Direction.PREVIOUS + const activeIndex = this._getItemIndex(activeElement) + const lastItemIndex = this._items.length - 1 + const isGoingToWrap = isPrevDirection && activeIndex === 0 || + isNextDirection && activeIndex === lastItemIndex if (isGoingToWrap && !this._config.wrap) { return activeElement } - let delta = direction === Direction.PREVIOUS ? -1 : 1 - let itemIndex = (activeIndex + delta) % this._items.length + const delta = direction === Direction.PREVIOUS ? -1 : 1 + const itemIndex = (activeIndex + delta) % this._items.length return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex] @@ -275,7 +276,7 @@ const Carousel = (($) => { _triggerSlideEvent(relatedTarget, directionalClassname) { - let slideEvent = $.Event(Event.SLIDE, { + const slideEvent = $.Event(Event.SLIDE, { relatedTarget, direction: directionalClassname }) @@ -291,7 +292,7 @@ const Carousel = (($) => { .find(Selector.ACTIVE) .removeClass(ClassName.ACTIVE) - let nextIndicator = this._indicatorsElement.children[ + const nextIndicator = this._indicatorsElement.children[ this._getItemIndex(element) ] @@ -302,13 +303,13 @@ const Carousel = (($) => { } _slide(direction, element) { - let activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0] - let nextElement = element || activeElement && + const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0] + const nextElement = element || activeElement && this._getItemByDirection(direction, activeElement) - let isCycling = Boolean(this._interval) + const isCycling = Boolean(this._interval) - let directionalClassName = direction === Direction.NEXT ? + const directionalClassName = direction === Direction.NEXT ? ClassName.LEFT : ClassName.RIGHT @@ -317,7 +318,7 @@ const Carousel = (($) => { return } - let slideEvent = this._triggerSlideEvent(nextElement, directionalClassName) + const slideEvent = this._triggerSlideEvent(nextElement, directionalClassName) if (slideEvent.isDefaultPrevented()) { return } @@ -335,7 +336,7 @@ const Carousel = (($) => { this._setActiveIndicatorElement(nextElement) - let slidEvent = $.Event(Event.SLID, { + const slidEvent = $.Event(Event.SLID, { relatedTarget: nextElement, direction: directionalClassName }) @@ -389,13 +390,13 @@ const Carousel = (($) => { static _jQueryInterface(config) { return this.each(function () { let data = $(this).data(DATA_KEY) - let _config = $.extend({}, Default, $(this).data()) + const _config = $.extend({}, Default, $(this).data()) if (typeof config === 'object') { $.extend(_config, config) } - let action = typeof config === 'string' ? config : _config.slide + const action = typeof config === 'string' ? config : _config.slide if (!data) { data = new Carousel(this, _config) @@ -417,20 +418,20 @@ const Carousel = (($) => { } static _dataApiClickHandler(event) { - let selector = Util.getSelectorFromElement(this) + const selector = Util.getSelectorFromElement(this) if (!selector) { return } - let target = $(selector)[0] + const target = $(selector)[0] if (!target || !$(target).hasClass(ClassName.CAROUSEL)) { return } - let config = $.extend({}, $(target).data(), $(this).data()) - let slideIndex = this.getAttribute('data-slide-to') + const config = $.extend({}, $(target).data(), $(this).data()) + const slideIndex = this.getAttribute('data-slide-to') if (slideIndex) { config.interval = false @@ -459,7 +460,7 @@ const Carousel = (($) => { $(window).on(Event.LOAD_DATA_API, () => { $(Selector.DATA_RIDE).each(function () { - let $carousel = $(this) + const $carousel = $(this) Carousel._jQueryInterface.call($carousel, $carousel.data()) }) }) -- cgit v1.2.3 From 297c47c3fdbb58e3d9824afdee83ef3c4b9d141a Mon Sep 17 00:00:00 2001 From: Johann Date: Fri, 2 Dec 2016 18:52:19 +0100 Subject: [V4] Throw error when a plugin is in transition (#17823) * Throw error when a plugin is in transition * Add unit tests about plugins in transition --- js/src/carousel.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index e56d4f0f2..7fda8f615 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -116,9 +116,10 @@ const Carousel = (($) => { // public next() { - if (!this._isSliding) { - this._slide(Direction.NEXT) + if (this._isSliding) { + throw new Error('Carousel is sliding') } + this._slide(Direction.NEXT) } nextWhenVisible() { @@ -129,9 +130,10 @@ const Carousel = (($) => { } prev() { - if (!this._isSliding) { - this._slide(Direction.PREVIOUS) + if (this._isSliding) { + throw new Error('Carousel is sliding') } + this._slide(Direction.PREVIOUS) } pause(event) { -- cgit v1.2.3 From 94e2d80af4554080b286d8b4012f75902932342a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 19:53:16 -0800 Subject: pull in js changes from #18830 --- js/src/carousel.js | 46 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 14 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index b7f3b3a7a..f987fc186 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -45,7 +45,9 @@ const Carousel = (($) => { const Direction = { NEXT : 'next', - PREVIOUS : 'prev' + PREVIOUS : 'prev', + LEFT : 'left', + RIGHT : 'right' } const Event = { @@ -62,8 +64,10 @@ const Carousel = (($) => { CAROUSEL : 'carousel', ACTIVE : 'active', SLIDE : 'slide', - RIGHT : 'right', - LEFT : 'left', + RIGHT : 'carousel-item-right', + LEFT : 'carousel-item-left', + NEXT : 'carousel-item-next', + PREVIOUS : 'carousel-item-prev', ITEM : 'carousel-item' } @@ -71,7 +75,7 @@ const Carousel = (($) => { ACTIVE : '.active', ACTIVE_ITEM : '.active.carousel-item', ITEM : '.carousel-item', - NEXT_PREV : '.next, .prev', + NEXT_PREV : '.carousel-item-next, .carousel-item-prev', INDICATORS : '.carousel-indicators', DATA_SLIDE : '[data-slide], [data-slide-to]', DATA_RIDE : '[data-ride="carousel"]' @@ -275,10 +279,10 @@ const Carousel = (($) => { } - _triggerSlideEvent(relatedTarget, directionalClassname) { + _triggerSlideEvent(relatedTarget, eventDirectionName) { const slideEvent = $.Event(Event.SLIDE, { relatedTarget, - direction: directionalClassname + direction: eventDirectionName }) $(this._element).trigger(slideEvent) @@ -309,16 +313,30 @@ const Carousel = (($) => { const isCycling = Boolean(this._interval) - const directionalClassName = direction === Direction.NEXT ? - ClassName.LEFT : - ClassName.RIGHT + let directionalClassName + let orderClassName + let eventDirectionName + + if (direction === Direction.NEXT) { + directionalClassName = ClassName.LEFT + orderClassName = ClassName.NEXT + eventDirectionName = Direction.LEFT + } else { + directionalClassName = ClassName.RIGHT + orderClassName = ClassName.PREV + eventDirectionName = Direction.RIGHT + } + + // const directionalClassName = direction === Direction.NEXT ? + // ClassName.LEFT : + // ClassName.RIGHT if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { this._isSliding = false return } - const slideEvent = this._triggerSlideEvent(nextElement, directionalClassName) + const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName) if (slideEvent.isDefaultPrevented()) { return } @@ -338,13 +356,13 @@ const Carousel = (($) => { const slidEvent = $.Event(Event.SLID, { relatedTarget: nextElement, - direction: directionalClassName + direction: eventDirectionName }) if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) { - $(nextElement).addClass(direction) + $(nextElement).addClass(orderClassName) Util.reflow(nextElement) @@ -355,13 +373,13 @@ const Carousel = (($) => { .one(Util.TRANSITION_END, () => { $(nextElement) .removeClass(directionalClassName) - .removeClass(direction) + .removeClass(orderClassName) $(nextElement).addClass(ClassName.ACTIVE) $(activeElement) .removeClass(ClassName.ACTIVE) - .removeClass(direction) + .removeClass(orderClassName) .removeClass(directionalClassName) this._isSliding = false -- cgit v1.2.3 From 01f81dd5528c532641789056a14c56d9a4bab0a1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 20:27:21 -0800 Subject: fix js for previous --- js/src/carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index f987fc186..c0d572f0a 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -45,7 +45,7 @@ const Carousel = (($) => { const Direction = { NEXT : 'next', - PREVIOUS : 'prev', + PREV : 'prev', LEFT : 'left', RIGHT : 'right' } @@ -67,7 +67,7 @@ const Carousel = (($) => { RIGHT : 'carousel-item-right', LEFT : 'carousel-item-left', NEXT : 'carousel-item-next', - PREVIOUS : 'carousel-item-prev', + PREV : 'carousel-item-prev', ITEM : 'carousel-item' } -- cgit v1.2.3 From 1afb6959fac4659394c53cba1ebabd3f22714e26 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 21:05:57 -0800 Subject: remove commented out code --- js/src/carousel.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index a8c16283e..304d0160f 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -328,10 +328,6 @@ const Carousel = (($) => { eventDirectionName = Direction.RIGHT } - // const directionalClassName = direction === Direction.NEXT ? - // ClassName.LEFT : - // ClassName.RIGHT - if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { this._isSliding = false return -- cgit v1.2.3 From dab6a41e049de64653c8b91c28acf212137b0452 Mon Sep 17 00:00:00 2001 From: Matheus Azzi Date: Sat, 15 Oct 2016 22:55:48 -0300 Subject: Carousel: Only prevents default for ARROW_LEFT and ARROW_RIGHT keys Fixes 2 bugs: 1. All keydowns were being prevented. Because of that the user wasn't able to navigate in the whole page using ARROW_UP/ARROW_DOWN. 2. Even when is an input or textarea the keydowns were being prevented. Because of that the user wasn't able to type any text on these elements. --- js/src/carousel.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 304d0160f..78f8eb468 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -245,9 +245,11 @@ const Carousel = (($) => { switch (event.which) { case ARROW_LEFT_KEYCODE: + event.preventDefault() this.prev() break case ARROW_RIGHT_KEYCODE: + event.preventDefault() this.next() break default: -- cgit v1.2.3 From b0508a975d711d6b24c01f57dd5445c22699fac4 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 23 Dec 2016 11:56:09 +0100 Subject: Closes: #21412: Fix unit test for carousel --- js/src/carousel.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 78f8eb468..9a1a668b2 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -241,7 +241,6 @@ const Carousel = (($) => { if (/input|textarea/i.test(event.target.tagName)) { return } - event.preventDefault() switch (event.which) { case ARROW_LEFT_KEYCODE: -- cgit v1.2.3