From d230c4ae3b369b872098b7bcc08f2dbb424f98df Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 1 Dec 2020 20:57:29 +0200 Subject: [PATCH 1/4] Remove a few `null` strict checks --- js/src/alert.js | 2 +- js/src/collapse.js | 4 ++-- js/src/tab.js | 2 +- js/src/tooltip.js | 11 ++++++----- 4 files changed, 10 insertions(+), 9 deletions(-) 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/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..cce16075c 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -248,9 +248,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 +406,7 @@ class Tooltip extends BaseComponent { } setElementContent(element, content) { - if (element === null) { + if (!element) { return } @@ -734,7 +734,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)) } From c7f5b3f9b3ae9d594d98feb3a2459f418a48bbcc Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 2 Dec 2020 14:57:22 +0200 Subject: [PATCH 2/4] carousel: move common checks to a function --- js/src/carousel.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index a266ec10f..c02c85c29 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -275,8 +275,13 @@ class Carousel extends BaseComponent { } _addTouchEventListeners() { + const hasPointerPenTouch = event => { + return this._pointerEvent && + (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH) + } + const start = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { + if (hasPointerPenTouch(event)) { this.touchStartX = event.clientX } else if (!this._pointerEvent) { this.touchStartX = event.touches[0].clientX @@ -293,7 +298,7 @@ class Carousel extends BaseComponent { } const end = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { + if (hasPointerPenTouch(event)) { this.touchDeltaX = event.clientX - this.touchStartX } From 1798dfcce74749d9ce580ad7e950fb6a891fb765 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 2 Dec 2020 15:13:11 +0200 Subject: [PATCH 3/4] carousel: move functions one level up --- js/src/carousel.js | 102 ++++++++++++++++++++++----------------------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index c02c85c29..0a741ca9d 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -274,66 +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 hasPointerPenTouch = event => { - return this._pointerEvent && - (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH) - } - - const start = event => { - if (hasPointerPenTouch(event)) { - 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 (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) - } - } - 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)) } } From 98e9388800dabcfea64f131f6769ccf4a093dc90 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 2 Dec 2020 16:25:34 +0200 Subject: [PATCH 4/4] tooltip: move repeated strings to constants --- js/src/tooltip.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index cce16075c..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) @@ -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 = {