diff --git a/js/src/alert.js b/js/src/alert.js index 96eda4c5f..7bc3546e5 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -55,7 +55,7 @@ class Alert extends BaseComponent { const rootElement = element ? this._getRootElement(element) : this._element const customEvent = this._triggerCloseEvent(rootElement) - if (customEvent === null || customEvent.defaultPrevented) { + if (!customEvent || customEvent.defaultPrevented) { return } diff --git a/js/src/carousel.js b/js/src/carousel.js index a266ec10f..0a741ca9d 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -274,61 +274,66 @@ class Carousel extends BaseComponent { } } + _hasPointerPenTouch(event) { + return this._pointerEvent && + (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH) + } + + _start(event) { + if (this._hasPointerPenTouch(event)) { + this.touchStartX = event.clientX + } else if (!this._pointerEvent) { + this.touchStartX = event.touches[0].clientX + } + } + + _move(event) { + // ensure swiping with one touch and not pinching + if (event.touches && event.touches.length > 1) { + this.touchDeltaX = 0 + } else { + this.touchDeltaX = event.touches[0].clientX - this.touchStartX + } + } + + _end(event) { + if (this._hasPointerPenTouch(event)) { + this.touchDeltaX = event.clientX - this.touchStartX + } + + this._handleSwipe() + if (this._config.pause === 'hover') { + // If it's a touch-enabled device, mouseenter/leave are fired as + // part of the mouse compatibility events on first tap - the carousel + // would stop cycling until user tapped out of it; + // here, we listen for touchend, explicitly pause the carousel + // (as if it's the second time we tap on it, mouseenter compat event + // is NOT fired) and after a timeout (to allow for mouse compatibility + // events to fire) we explicitly restart cycling + + this.pause() + if (this.touchTimeout) { + clearTimeout(this.touchTimeout) + } + + this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval) + } + } + _addTouchEventListeners() { - const start = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { - this.touchStartX = event.clientX - } else if (!this._pointerEvent) { - this.touchStartX = event.touches[0].clientX - } - } - - const move = event => { - // ensure swiping with one touch and not pinching - if (event.touches && event.touches.length > 1) { - this.touchDeltaX = 0 - } else { - this.touchDeltaX = event.touches[0].clientX - this.touchStartX - } - } - - const end = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { - this.touchDeltaX = event.clientX - this.touchStartX - } - - this._handleSwipe() - if (this._config.pause === 'hover') { - // If it's a touch-enabled device, mouseenter/leave are fired as - // part of the mouse compatibility events on first tap - the carousel - // would stop cycling until user tapped out of it; - // here, we listen for touchend, explicitly pause the carousel - // (as if it's the second time we tap on it, mouseenter compat event - // is NOT fired) and after a timeout (to allow for mouse compatibility - // events to fire) we explicitly restart cycling - - this.pause() - if (this.touchTimeout) { - clearTimeout(this.touchTimeout) - } - - this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval) - } - } - SelectorEngine.find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => { EventHandler.on(itemImg, EVENT_DRAG_START, e => e.preventDefault()) }) if (this._pointerEvent) { - EventHandler.on(this._element, EVENT_POINTERDOWN, event => start(event)) - EventHandler.on(this._element, EVENT_POINTERUP, event => end(event)) + EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event)) + EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event)) this._element.classList.add(CLASS_NAME_POINTER_EVENT) } else { - EventHandler.on(this._element, EVENT_TOUCHSTART, event => start(event)) - EventHandler.on(this._element, EVENT_TOUCHMOVE, event => move(event)) - EventHandler.on(this._element, EVENT_TOUCHEND, event => end(event)) + EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event)) + EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event)) + EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event)) } } diff --git a/js/src/collapse.js b/js/src/collapse.js index 90bab0ec9..d29adeeb0 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -84,7 +84,7 @@ class Collapse extends BaseComponent { const filterElement = SelectorEngine.find(selector) .filter(foundElem => foundElem === element) - if (selector !== null && filterElement.length) { + if (selector && filterElement.length) { this._selector = selector this._triggerArray.push(elem) } @@ -384,7 +384,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( let config if (data) { // update parent attribute - if (data._parent === null && typeof triggerData.parent === 'string') { + if (data._parent && typeof triggerData.parent === 'string') { data._config.parent = triggerData.parent data._parent = data._getParent() } diff --git a/js/src/tab.js b/js/src/tab.js index f1b17ac79..5a3479863 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -91,7 +91,7 @@ class Tab extends BaseComponent { relatedTarget: previous }) - if (showEvent.defaultPrevented || (hideEvent !== null && hideEvent.defaultPrevented)) { + if (showEvent.defaultPrevented || (hideEvent && hideEvent.defaultPrevented)) { return } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 103524b8b..0d733eec0 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -111,6 +111,9 @@ const HOVER_STATE_SHOW = 'show' const HOVER_STATE_OUT = 'out' const SELECTOR_TOOLTIP_INNER = '.tooltip-inner' +const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}` + +const EVENT_MODAL_HIDE = 'hide.bs.modal' const TRIGGER_HOVER = 'hover' const TRIGGER_FOCUS = 'focus' @@ -220,7 +223,7 @@ class Tooltip extends BaseComponent { clearTimeout(this._timeout) EventHandler.off(this._element, this.constructor.EVENT_KEY) - EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler) + EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler) if (this.tip && this.tip.parentNode) { this.tip.parentNode.removeChild(this.tip) @@ -248,9 +251,9 @@ class Tooltip extends BaseComponent { if (this.isWithContent() && this._isEnabled) { const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW) const shadowRoot = findShadowRoot(this._element) - const isInTheDom = shadowRoot === null ? - this._element.ownerDocument.documentElement.contains(this._element) : - shadowRoot.contains(this._element) + const isInTheDom = shadowRoot ? + shadowRoot.contains(this._element) : + this._element.ownerDocument.documentElement.contains(this._element) if (showEvent.defaultPrevented || !isInTheDom) { return @@ -406,7 +409,7 @@ class Tooltip extends BaseComponent { } setElementContent(element, content) { - if (element === null) { + if (!element) { return } @@ -560,7 +563,7 @@ class Tooltip extends BaseComponent { } } - EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler) + EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler) if (this.config.selector) { this.config = { @@ -734,7 +737,8 @@ class Tooltip extends BaseComponent { _cleanTipClass() { const tip = this.getTipElement() const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX) - if (tabClass !== null && tabClass.length > 0) { + + if (tabClass && tabClass.length > 0) { tabClass.map(token => token.trim()) .forEach(tClass => tip.classList.remove(tClass)) }