From 88286fef6e8624584a7d8a5bd7da519b3c0a8e7b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 4 Dec 2020 14:33:58 +0200 Subject: [PATCH 1/3] Move touch detection to util --- js/src/carousel.js | 3 ++- js/src/dropdown.js | 16 +++++++++------- js/src/tooltip.js | 10 ++++++---- js/src/util/index.js | 5 ++++- 4 files changed, 21 insertions(+), 13 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index 299aadeda..fdae81042 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -12,6 +12,7 @@ import { getElementFromSelector, getTransitionDurationFromElement, isVisible, + isTouchEnabledDevice, reflow, triggerTransitionEnd, typeCheckConfig @@ -118,7 +119,7 @@ class Carousel extends BaseComponent { this._config = this._getConfig(config) this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element) - this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 + this._touchSupported = isTouchEnabledDevice || navigator.maxTouchPoints > 0 this._pointerEvent = Boolean(window.PointerEvent) this._addEventListeners() diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 4720ed1ab..ec01593ee 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -13,6 +13,7 @@ import { isElement, isVisible, isRTL, + isTouchEnabledDevice, noop, typeCheckConfig } from './util/index' @@ -181,10 +182,10 @@ class Dropdown extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement && - !parent.closest(SELECTOR_NAVBAR_NAV)) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop())) + if (isTouchEnabledDevice && !parent.closest(SELECTOR_NAVBAR_NAV)) { + [].concat(...document.body.children).forEach(element => { + EventHandler.on(element, 'mouseover', null, noop()) + }) } this._element.focus() @@ -381,9 +382,10 @@ class Dropdown extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.off(elem, 'mouseover', null, noop())) + if (isTouchEnabledDevice) { + [].concat(...document.body.children).forEach(element => { + EventHandler.off(element, 'mouseover', null, noop()) + }) } toggles[i].setAttribute('aria-expanded', 'false') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index df0f0c19c..be872a9bc 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -16,6 +16,7 @@ import { getUID, isElement, isRTL, + isTouchEnabledDevice, noop, typeCheckConfig } from './util/index' @@ -298,7 +299,7 @@ class Tooltip extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement) { + if (isTouchEnabledDevice) { [].concat(...document.body.children).forEach(element => { EventHandler.on(element, 'mouseover', noop()) }) @@ -355,9 +356,10 @@ class Tooltip extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children) - .forEach(element => EventHandler.off(element, 'mouseover', noop)) + if (isTouchEnabledDevice) { + [].concat(...document.body.children).forEach(element => { + EventHandler.off(element, 'mouseover', noop) + }) } this._activeTrigger[TRIGGER_CLICK] = false diff --git a/js/src/util/index.js b/js/src/util/index.js index 1bf9fe954..1a8b75d8f 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -204,6 +204,8 @@ const defineJQueryPlugin = (name, plugin) => { }) } +const isTouchEnabledDevice = 'ontouchstart' in document.documentElement + export { TRANSITION_END, getUID, @@ -221,5 +223,6 @@ export { getjQuery, onDOMContentLoaded, isRTL, - defineJQueryPlugin + defineJQueryPlugin, + isTouchEnabledDevice } From 70bba97f6cbc8875bb519bfcb70630abfa97ca3b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 8 Dec 2020 09:28:08 +0200 Subject: [PATCH 2/3] WIP --- js/src/dropdown.js | 4 ++-- js/src/tooltip.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index ec01593ee..17041dfc2 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -184,7 +184,7 @@ class Dropdown extends BaseComponent { // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html if (isTouchEnabledDevice && !parent.closest(SELECTOR_NAVBAR_NAV)) { [].concat(...document.body.children).forEach(element => { - EventHandler.on(element, 'mouseover', null, noop()) + EventHandler.on(element, 'mouseover', null, noop) }) } @@ -384,7 +384,7 @@ class Dropdown extends BaseComponent { // empty mouseover listeners we added for iOS support if (isTouchEnabledDevice) { [].concat(...document.body.children).forEach(element => { - EventHandler.off(element, 'mouseover', null, noop()) + EventHandler.off(element, 'mouseover', null, noop) }) } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index be872a9bc..c52ceeace 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -301,7 +301,7 @@ class Tooltip extends BaseComponent { // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html if (isTouchEnabledDevice) { [].concat(...document.body.children).forEach(element => { - EventHandler.on(element, 'mouseover', noop()) + EventHandler.on(element, 'mouseover', noop) }) } From 88783b3f825e91aaeba3fc8b642e16fdfeaa3e6a Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 9 Dec 2020 23:37:34 +0530 Subject: [PATCH 3/3] Change `isTouchEnabledDevice` to a function So that the presence of `ontouchstart` method can be checked in the runtime --- js/src/carousel.js | 2 +- js/src/dropdown.js | 4 ++-- js/src/tooltip.js | 4 ++-- js/src/util/index.js | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index fdae81042..3350bdf55 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -119,7 +119,7 @@ class Carousel extends BaseComponent { this._config = this._getConfig(config) this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element) - this._touchSupported = isTouchEnabledDevice || navigator.maxTouchPoints > 0 + this._touchSupported = isTouchEnabledDevice() || navigator.maxTouchPoints > 0 this._pointerEvent = Boolean(window.PointerEvent) this._addEventListeners() diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 17041dfc2..5d208a86e 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -182,7 +182,7 @@ class Dropdown extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if (isTouchEnabledDevice && !parent.closest(SELECTOR_NAVBAR_NAV)) { + if (isTouchEnabledDevice() && !parent.closest(SELECTOR_NAVBAR_NAV)) { [].concat(...document.body.children).forEach(element => { EventHandler.on(element, 'mouseover', null, noop) }) @@ -382,7 +382,7 @@ class Dropdown extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if (isTouchEnabledDevice) { + if (isTouchEnabledDevice()) { [].concat(...document.body.children).forEach(element => { EventHandler.off(element, 'mouseover', null, noop) }) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c52ceeace..1c45a9e89 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -299,7 +299,7 @@ class Tooltip extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if (isTouchEnabledDevice) { + if (isTouchEnabledDevice()) { [].concat(...document.body.children).forEach(element => { EventHandler.on(element, 'mouseover', noop) }) @@ -356,7 +356,7 @@ class Tooltip extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if (isTouchEnabledDevice) { + if (isTouchEnabledDevice()) { [].concat(...document.body.children).forEach(element => { EventHandler.off(element, 'mouseover', noop) }) diff --git a/js/src/util/index.js b/js/src/util/index.js index 1a8b75d8f..d5d3c6883 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -204,7 +204,7 @@ const defineJQueryPlugin = (name, plugin) => { }) } -const isTouchEnabledDevice = 'ontouchstart' in document.documentElement +const isTouchEnabledDevice = () => 'ontouchstart' in document.documentElement export { TRANSITION_END,