detect-it - npm Package Compare versions
Comparing version 4.0.0 to 4.0.1
@@ -6,22 +6,13 @@ 'use strict'; | ||
| // so it doesn't throw if no window or matchMedia | ||
| var w = typeof window !== 'undefined' ? window : { | ||
| screen: {}, | ||
| navigator: {} | ||
| }; | ||
| var matchMedia = w.matchMedia || function () { | ||
| return { | ||
| matches: false | ||
| }; | ||
| }; // passive events test | ||
| var w = typeof window !== 'undefined' ? window : { screen: {}, navigator: {} }; | ||
| var matchMedia = (w.matchMedia || (function () { return ({ matches: false }); })).bind(w); | ||
| // passive events test | ||
| // adapted from https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md | ||
| var passiveOptionAccessed = false; | ||
| var options = { | ||
| get passive() { | ||
| return passiveOptionAccessed = true; | ||
| } | ||
| }; // have to set and remove a no-op listener instead of null | ||
| get passive() { | ||
| return (passiveOptionAccessed = true); | ||
| }, | ||
| }; | ||
| // have to set and remove a no-op listener instead of null | ||
| // (which was used previously), because Edge v15 throws an error | ||
@@ -31,11 +22,10 @@ // when providing a null callback. | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-function | ||
| var noop = function () {}; | ||
| var noop = function () { }; | ||
| w.addEventListener && w.addEventListener('p', noop, options); | ||
| w.removeEventListener && w.removeEventListener('p', noop, false); | ||
| var supportsPassiveEvents = passiveOptionAccessed; | ||
| var supportsPointerEvents = ('PointerEvent' in w); | ||
| var onTouchStartInWindow = ('ontouchstart' in w); | ||
| var touchEventInWindow = ('TouchEvent' in w); // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| var supportsPointerEvents = 'PointerEvent' in w; | ||
| var onTouchStartInWindow = 'ontouchstart' in w; | ||
| var touchEventInWindow = 'TouchEvent' in w; | ||
| // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| // and many websites interpreted it to mean that the device is a touch only phone, | ||
@@ -49,9 +39,10 @@ // so today browsers on a desktop/laptop computer with a touch screen (primary input mouse) | ||
| // so the touchEventInWindow check needs to include an coarse pointer media query | ||
| var supportsTouchEvents = onTouchStartInWindow || touchEventInWindow && /*#__PURE__*/matchMedia('(any-pointer: coarse)').matches; | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; // userAgent is used as a backup to correct for known device/browser bugs | ||
| var supportsTouchEvents = onTouchStartInWindow || | ||
| (touchEventInWindow && matchMedia('(any-pointer: coarse)').matches); | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; | ||
| // userAgent is used as a backup to correct for known device/browser bugs | ||
| // and when the browser doesn't support interaction media queries (pointer and hover) | ||
| // see https://caniuse.com/css-media-interaction | ||
| var userAgent = w.navigator.userAgent || ''; // iPads now support a mouse that can hover, however the media query interaction | ||
| var userAgent = w.navigator.userAgent || ''; | ||
| // iPads now support a mouse that can hover, however the media query interaction | ||
| // feature results always say iPads only have a coarse pointer that can't hover | ||
@@ -62,28 +53,42 @@ // even when a mouse is connected (anyFine and anyHover are always false), | ||
| // to indicate it should be treated as a hybrid device with anyHover true | ||
| var isIPad = /*#__PURE__*/matchMedia('(pointer: coarse)').matches && | ||
| /*#__PURE__*/ | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && /*#__PURE__*/Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = ( /*#__PURE__*/matchMedia('(pointer: coarse)').matches || // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| ! /*#__PURE__*/matchMedia('(pointer: fine)').matches && onTouchStartInWindow) && // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| ! /*#__PURE__*/ /Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = /*#__PURE__*/matchMedia('(any-pointer: fine)').matches || /*#__PURE__*/matchMedia('(any-hover: hover)').matches || // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; // a hybrid device is one that both hasTouch and | ||
| var isIPad = matchMedia('(pointer: coarse)').matches && | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && | ||
| Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = (matchMedia('(pointer: coarse)').matches || | ||
| // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| (!matchMedia('(pointer: fine)').matches && onTouchStartInWindow)) && | ||
| // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| !/Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = matchMedia('(any-pointer: fine)').matches || | ||
| matchMedia('(any-hover: hover)').matches || | ||
| // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || | ||
| // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; | ||
| // a hybrid device is one that both hasTouch and | ||
| // any input can hover or has a fine pointer, or the primary pointer is not coarse | ||
| // if it's not a hybrid, then if it hasTouch it's touchOnly, otherwise it's mouseOnly | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) | ||
| ? 'hybrid' | ||
| : hasTouch | ||
| ? 'touchOnly' | ||
| : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' | ||
| ? 'mouse' | ||
| : deviceType === 'touchOnly' | ||
| ? 'touch' | ||
| : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer | ||
| ? 'touch' | ||
| : 'mouse'; | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) ? 'hybrid' : hasTouch ? 'touchOnly' : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' ? 'mouse' : deviceType === 'touchOnly' ? 'touch' : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer ? 'touch' : 'mouse'; | ||
| exports.deviceType = deviceType; | ||
@@ -90,0 +95,0 @@ exports.primaryInput = primaryInput; |
@@ -1,1 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="undefined"!=typeof window?window:{screen:{},navigator:{}},t=e.matchMedia||function(){return{matches:!1}},n=!1,s={get passive(){return n=!0}},o=function(){};e.addEventListener&&e.addEventListener("p",o,s),e.removeEventListener&&e.removeEventListener("p",o,!1);var r=n,i="PointerEvent"in e,a="ontouchstart"in e,c=a||"TouchEvent"in e&&t("(any-pointer: coarse)").matches,p=(e.navigator.maxTouchPoints||0)>0||c,u=e.navigator.userAgent||"",h=t("(pointer: coarse)").matches&&/iPad|Macintosh/.test(u)&&Math.min(e.screen.width||0,e.screen.height||0)>=768,v=(t("(pointer: coarse)").matches||!t("(pointer: fine)").matches&&a)&&!/Windows.*Firefox/.test(u),m=t("(any-pointer: fine)").matches||t("(any-hover: hover)").matches||h||!a,d=!p||!m&&v?p?"touchOnly":"mouseOnly":"hybrid",y="mouseOnly"===d?"mouse":"touchOnly"===d||v?"touch":"mouse";exports.deviceType=d,exports.primaryInput=y,exports.supportsPassiveEvents=r,exports.supportsPointerEvents=i,exports.supportsTouchEvents=c;//# sourceMappingURL=detect-it.cjs.production.js.map | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="undefined"!=typeof window?window:{screen:{},navigator:{}},t=(e.matchMedia||function(){return{matches:!1}}).bind(e),n=!1,s={get passive(){return n=!0}},o=function(){};e.addEventListener&&e.addEventListener("p",o,s),e.removeEventListener&&e.removeEventListener("p",o,!1);var r=n,i="PointerEvent"in e,a="ontouchstart"in e,c=a||"TouchEvent"in e&&t("(any-pointer: coarse)").matches,p=(e.navigator.maxTouchPoints||0)>0||c,u=e.navigator.userAgent||"",h=t("(pointer: coarse)").matches&&/iPad|Macintosh/.test(u)&&Math.min(e.screen.width||0,e.screen.height||0)>=768,v=(t("(pointer: coarse)").matches||!t("(pointer: fine)").matches&&a)&&!/Windows.*Firefox/.test(u),d=t("(any-pointer: fine)").matches||t("(any-hover: hover)").matches||h||!a,m=!p||!d&&v?p?"touchOnly":"mouseOnly":"hybrid",y="mouseOnly"===m?"mouse":"touchOnly"===m||v?"touch":"mouse";exports.deviceType=m,exports.primaryInput=y,exports.supportsPassiveEvents=r,exports.supportsPointerEvents=i,exports.supportsTouchEvents=c; | ||
| //# sourceMappingURL=detect-it.cjs.production.js.map |
| // so it doesn't throw if no window or matchMedia | ||
| var w = typeof window !== 'undefined' ? window : { | ||
| screen: {}, | ||
| navigator: {} | ||
| }; | ||
| var matchMedia = w.matchMedia || function () { | ||
| return { | ||
| matches: false | ||
| }; | ||
| }; // passive events test | ||
| var w = typeof window !== 'undefined' ? window : { screen: {}, navigator: {} }; | ||
| var matchMedia = (w.matchMedia || (function () { return ({ matches: false }); })).bind(w); | ||
| // passive events test | ||
| // adapted from https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md | ||
| var passiveOptionAccessed = false; | ||
| var options = { | ||
| get passive() { | ||
| return passiveOptionAccessed = true; | ||
| } | ||
| }; // have to set and remove a no-op listener instead of null | ||
| get passive() { | ||
| return (passiveOptionAccessed = true); | ||
| }, | ||
| }; | ||
| // have to set and remove a no-op listener instead of null | ||
| // (which was used previously), because Edge v15 throws an error | ||
@@ -26,11 +17,10 @@ // when providing a null callback. | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-function | ||
| var noop = function () {}; | ||
| var noop = function () { }; | ||
| w.addEventListener && w.addEventListener('p', noop, options); | ||
| w.removeEventListener && w.removeEventListener('p', noop, false); | ||
| var supportsPassiveEvents = passiveOptionAccessed; | ||
| var supportsPointerEvents = ('PointerEvent' in w); | ||
| var onTouchStartInWindow = ('ontouchstart' in w); | ||
| var touchEventInWindow = ('TouchEvent' in w); // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| var supportsPointerEvents = 'PointerEvent' in w; | ||
| var onTouchStartInWindow = 'ontouchstart' in w; | ||
| var touchEventInWindow = 'TouchEvent' in w; | ||
| // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| // and many websites interpreted it to mean that the device is a touch only phone, | ||
@@ -44,9 +34,10 @@ // so today browsers on a desktop/laptop computer with a touch screen (primary input mouse) | ||
| // so the touchEventInWindow check needs to include an coarse pointer media query | ||
| var supportsTouchEvents = onTouchStartInWindow || touchEventInWindow && /*#__PURE__*/matchMedia('(any-pointer: coarse)').matches; | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; // userAgent is used as a backup to correct for known device/browser bugs | ||
| var supportsTouchEvents = onTouchStartInWindow || | ||
| (touchEventInWindow && matchMedia('(any-pointer: coarse)').matches); | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; | ||
| // userAgent is used as a backup to correct for known device/browser bugs | ||
| // and when the browser doesn't support interaction media queries (pointer and hover) | ||
| // see https://caniuse.com/css-media-interaction | ||
| var userAgent = w.navigator.userAgent || ''; // iPads now support a mouse that can hover, however the media query interaction | ||
| var userAgent = w.navigator.userAgent || ''; | ||
| // iPads now support a mouse that can hover, however the media query interaction | ||
| // feature results always say iPads only have a coarse pointer that can't hover | ||
@@ -57,29 +48,43 @@ // even when a mouse is connected (anyFine and anyHover are always false), | ||
| // to indicate it should be treated as a hybrid device with anyHover true | ||
| var isIPad = /*#__PURE__*/matchMedia('(pointer: coarse)').matches && | ||
| /*#__PURE__*/ | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && /*#__PURE__*/Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = ( /*#__PURE__*/matchMedia('(pointer: coarse)').matches || // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| ! /*#__PURE__*/matchMedia('(pointer: fine)').matches && onTouchStartInWindow) && // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| ! /*#__PURE__*/ /Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = /*#__PURE__*/matchMedia('(any-pointer: fine)').matches || /*#__PURE__*/matchMedia('(any-hover: hover)').matches || // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; // a hybrid device is one that both hasTouch and | ||
| var isIPad = matchMedia('(pointer: coarse)').matches && | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && | ||
| Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = (matchMedia('(pointer: coarse)').matches || | ||
| // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| (!matchMedia('(pointer: fine)').matches && onTouchStartInWindow)) && | ||
| // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| !/Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = matchMedia('(any-pointer: fine)').matches || | ||
| matchMedia('(any-hover: hover)').matches || | ||
| // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || | ||
| // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; | ||
| // a hybrid device is one that both hasTouch and | ||
| // any input can hover or has a fine pointer, or the primary pointer is not coarse | ||
| // if it's not a hybrid, then if it hasTouch it's touchOnly, otherwise it's mouseOnly | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) | ||
| ? 'hybrid' | ||
| : hasTouch | ||
| ? 'touchOnly' | ||
| : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' | ||
| ? 'mouse' | ||
| : deviceType === 'touchOnly' | ||
| ? 'touch' | ||
| : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer | ||
| ? 'touch' | ||
| : 'mouse'; | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) ? 'hybrid' : hasTouch ? 'touchOnly' : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' ? 'mouse' : deviceType === 'touchOnly' ? 'touch' : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer ? 'touch' : 'mouse'; | ||
| export { deviceType, primaryInput, supportsPassiveEvents, supportsPointerEvents, supportsTouchEvents }; | ||
| //# sourceMappingURL=detect-it.esm.js.map |
@@ -8,22 +8,13 @@ (function (global, factory) { | ||
| // so it doesn't throw if no window or matchMedia | ||
| var w = typeof window !== 'undefined' ? window : { | ||
| screen: {}, | ||
| navigator: {} | ||
| }; | ||
| var matchMedia = w.matchMedia || function () { | ||
| return { | ||
| matches: false | ||
| }; | ||
| }; // passive events test | ||
| var w = typeof window !== 'undefined' ? window : { screen: {}, navigator: {} }; | ||
| var matchMedia = (w.matchMedia || (function () { return ({ matches: false }); })).bind(w); | ||
| // passive events test | ||
| // adapted from https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md | ||
| var passiveOptionAccessed = false; | ||
| var options = { | ||
| get passive() { | ||
| return passiveOptionAccessed = true; | ||
| } | ||
| }; // have to set and remove a no-op listener instead of null | ||
| get passive() { | ||
| return (passiveOptionAccessed = true); | ||
| }, | ||
| }; | ||
| // have to set and remove a no-op listener instead of null | ||
| // (which was used previously), because Edge v15 throws an error | ||
@@ -33,11 +24,10 @@ // when providing a null callback. | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-function | ||
| var noop = function () {}; | ||
| var noop = function () { }; | ||
| w.addEventListener && w.addEventListener('p', noop, options); | ||
| w.removeEventListener && w.removeEventListener('p', noop, false); | ||
| var supportsPassiveEvents = passiveOptionAccessed; | ||
| var supportsPointerEvents = ('PointerEvent' in w); | ||
| var onTouchStartInWindow = ('ontouchstart' in w); | ||
| var touchEventInWindow = ('TouchEvent' in w); // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| var supportsPointerEvents = 'PointerEvent' in w; | ||
| var onTouchStartInWindow = 'ontouchstart' in w; | ||
| var touchEventInWindow = 'TouchEvent' in w; | ||
| // onTouchStartInWindow is the old-old-legacy way to determine a touch device | ||
| // and many websites interpreted it to mean that the device is a touch only phone, | ||
@@ -51,9 +41,10 @@ // so today browsers on a desktop/laptop computer with a touch screen (primary input mouse) | ||
| // so the touchEventInWindow check needs to include an coarse pointer media query | ||
| var supportsTouchEvents = onTouchStartInWindow || touchEventInWindow && /*#__PURE__*/matchMedia('(any-pointer: coarse)').matches; | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; // userAgent is used as a backup to correct for known device/browser bugs | ||
| var supportsTouchEvents = onTouchStartInWindow || | ||
| (touchEventInWindow && matchMedia('(any-pointer: coarse)').matches); | ||
| var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents; | ||
| // userAgent is used as a backup to correct for known device/browser bugs | ||
| // and when the browser doesn't support interaction media queries (pointer and hover) | ||
| // see https://caniuse.com/css-media-interaction | ||
| var userAgent = w.navigator.userAgent || ''; // iPads now support a mouse that can hover, however the media query interaction | ||
| var userAgent = w.navigator.userAgent || ''; | ||
| // iPads now support a mouse that can hover, however the media query interaction | ||
| // feature results always say iPads only have a coarse pointer that can't hover | ||
@@ -64,28 +55,42 @@ // even when a mouse is connected (anyFine and anyHover are always false), | ||
| // to indicate it should be treated as a hybrid device with anyHover true | ||
| var isIPad = /*#__PURE__*/matchMedia('(pointer: coarse)').matches && | ||
| /*#__PURE__*/ | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && /*#__PURE__*/Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = ( /*#__PURE__*/matchMedia('(pointer: coarse)').matches || // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| ! /*#__PURE__*/matchMedia('(pointer: fine)').matches && onTouchStartInWindow) && // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| ! /*#__PURE__*/ /Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = /*#__PURE__*/matchMedia('(any-pointer: fine)').matches || /*#__PURE__*/matchMedia('(any-hover: hover)').matches || // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; // a hybrid device is one that both hasTouch and | ||
| var isIPad = matchMedia('(pointer: coarse)').matches && | ||
| // both iPad and iPhone can "request desktop site", which sets the userAgent to Macintosh | ||
| // so need to check both userAgents to determine if it is an iOS device | ||
| // and screen size to separate iPad from iPhone | ||
| /iPad|Macintosh/.test(userAgent) && | ||
| Math.min(w.screen.width || 0, w.screen.height || 0) >= 768; | ||
| var hasCoarsePrimaryPointer = (matchMedia('(pointer: coarse)').matches || | ||
| // if the pointer is not coarse and not fine then the browser doesn't support | ||
| // interaction media queries (see https://caniuse.com/css-media-interaction) | ||
| // so if it has onTouchStartInWindow assume it has a coarse primary pointer | ||
| (!matchMedia('(pointer: fine)').matches && onTouchStartInWindow)) && | ||
| // bug in firefox (as of v81) on hybrid windows devices where the interaction media queries | ||
| // always indicate a touch only device (only has a coarse pointer that can't hover) | ||
| // so assume that the primary pointer is not coarse for firefox windows | ||
| !/Windows.*Firefox/.test(userAgent); | ||
| var hasAnyHoverOrAnyFinePointer = matchMedia('(any-pointer: fine)').matches || | ||
| matchMedia('(any-hover: hover)').matches || | ||
| // iPads might have an input device that can hover, so assume it has anyHover | ||
| isIPad || | ||
| // if no onTouchStartInWindow then the browser is indicating that it is not a touch only device | ||
| // see above note for supportsTouchEvents | ||
| !onTouchStartInWindow; | ||
| // a hybrid device is one that both hasTouch and | ||
| // any input can hover or has a fine pointer, or the primary pointer is not coarse | ||
| // if it's not a hybrid, then if it hasTouch it's touchOnly, otherwise it's mouseOnly | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) | ||
| ? 'hybrid' | ||
| : hasTouch | ||
| ? 'touchOnly' | ||
| : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' | ||
| ? 'mouse' | ||
| : deviceType === 'touchOnly' | ||
| ? 'touch' | ||
| : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer | ||
| ? 'touch' | ||
| : 'mouse'; | ||
| var deviceType = hasTouch && (hasAnyHoverOrAnyFinePointer || !hasCoarsePrimaryPointer) ? 'hybrid' : hasTouch ? 'touchOnly' : 'mouseOnly'; | ||
| var primaryInput = deviceType === 'mouseOnly' ? 'mouse' : deviceType === 'touchOnly' ? 'touch' : // if the device is a hybrid, then if the primary pointer is coarse | ||
| // assume the primaryInput is touch, otherwise assume it's mouse | ||
| hasCoarsePrimaryPointer ? 'touch' : 'mouse'; | ||
| exports.deviceType = deviceType; | ||
@@ -92,0 +97,0 @@ exports.primaryInput = primaryInput; |
@@ -1,1 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DetectIt={})}(this,(function(e){"use strict";var t="undefined"!=typeof window?window:{screen:{},navigator:{}},n=t.matchMedia||function(){return{matches:!1}},o=!1,i={get passive(){return o=!0}},s=function(){};t.addEventListener&&t.addEventListener("p",s,i),t.removeEventListener&&t.removeEventListener("p",s,!1);var r=o,a="PointerEvent"in t,c="ontouchstart"in t,u=c||"TouchEvent"in t&&n("(any-pointer: coarse)").matches,h=(t.navigator.maxTouchPoints||0)>0||u,p=t.navigator.userAgent||"",d=n("(pointer: coarse)").matches&&/iPad|Macintosh/.test(p)&&Math.min(t.screen.width||0,t.screen.height||0)>=768,v=(n("(pointer: coarse)").matches||!n("(pointer: fine)").matches&&c)&&!/Windows.*Firefox/.test(p),f=n("(any-pointer: fine)").matches||n("(any-hover: hover)").matches||d||!c,m=!h||!f&&v?h?"touchOnly":"mouseOnly":"hybrid",y="mouseOnly"===m?"mouse":"touchOnly"===m||v?"touch":"mouse";e.deviceType=m,e.primaryInput=y,e.supportsPassiveEvents=r,e.supportsPointerEvents=a,e.supportsTouchEvents=u,Object.defineProperty(e,"__esModule",{value:!0})}));//# sourceMappingURL=detect-it.umd.production.js.map | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DetectIt={})}(this,(function(e){"use strict";var t="undefined"!=typeof window?window:{screen:{},navigator:{}},n=(t.matchMedia||function(){return{matches:!1}}).bind(t),o=!1,i={get passive(){return o=!0}},s=function(){};t.addEventListener&&t.addEventListener("p",s,i),t.removeEventListener&&t.removeEventListener("p",s,!1);var r=o,a="PointerEvent"in t,c="ontouchstart"in t,u=c||"TouchEvent"in t&&n("(any-pointer: coarse)").matches,d=(t.navigator.maxTouchPoints||0)>0||u,h=t.navigator.userAgent||"",p=n("(pointer: coarse)").matches&&/iPad|Macintosh/.test(h)&&Math.min(t.screen.width||0,t.screen.height||0)>=768,v=(n("(pointer: coarse)").matches||!n("(pointer: fine)").matches&&c)&&!/Windows.*Firefox/.test(h),f=n("(any-pointer: fine)").matches||n("(any-hover: hover)").matches||p||!c,m=!d||!f&&v?d?"touchOnly":"mouseOnly":"hybrid",y="mouseOnly"===m?"mouse":"touchOnly"===m||v?"touch":"mouse";e.deviceType=m,e.primaryInput=y,e.supportsPassiveEvents=r,e.supportsPointerEvents=a,e.supportsTouchEvents=u,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=detect-it.umd.production.js.map |
| { | ||
| "name": "detect-it", | ||
| "version": "4.0.0", | ||
| "version": "4.0.1", | ||
| "description": "Detect if a device is mouse only, touch only, or hybrid", | ||
@@ -10,4 +10,3 @@ "main": "dist/detect-it.cjs.js", | ||
| "scripts": { | ||
| "dev": "npm link && npm run watch && npm unlink -g", | ||
| "build": "rollpkg build", | ||
| "build": "rollpkg build --addUmdBuild", | ||
| "watch": "rollpkg watch", | ||
@@ -44,10 +43,10 @@ "prepublishOnly": "npm run lint && npm test && npm run build", | ||
| "devDependencies": { | ||
| "lint-staged": "^10.5.3", | ||
| "lint-staged": "^10.5.4", | ||
| "pre-commit": "^1.2.2", | ||
| "rollpkg": "^0.2.1", | ||
| "typescript": "^4.1.3" | ||
| "rollpkg": "^0.4.2", | ||
| "typescript": "^4.1.5" | ||
| }, | ||
| "pre-commit": "lintStaged", | ||
| "lint-staged": { | ||
| "src/**/*": [ | ||
| "(src/**/*|demo/src/**/*)": [ | ||
| "eslint", | ||
@@ -54,0 +53,0 @@ "prettier --write --ignore-unknown" |
| # Detect It | ||
| [](https://www.npmjs.com/package/detect-it) [](https://bundlephobia.com/result?p=detect-it)  | ||
| - **[Live detection demo](https://detect-it.rafgraph.dev)** | ||
| - Detect if a device is `mouseOnly`, `touchOnly`, or `hybrid` | ||
@@ -8,10 +11,7 @@ - Detect if the primary input is `mouse` or `touch` | ||
| [Live detection test](https://detect-it.rafgraph.dev) (code in the [demo repo](https://github.com/rafgraph/detect-it-demo)) | ||
| Detect It's state is determined using multiple media query and API detections. Detect It uses the `hover` and `pointer` media queries, the Pointer Events API and max touch points detections, and two Touch Events API detections (browsers respond differently to each Touch Events API detection depending on the device 😩 welcome to WebDev). But now you don't have to worry about any of this, just let Detect It handle the details while you optimize your app for the type of device that's being used. 😁 | ||
| Detect It has been tested on numerous real world devices (since 2016), and the tests mock multiple devices and edge cases to ensure accurate results, but it should be noted that the detection is reliant on how the browser presents the capabilities of the device as it is not possible to access the device hardware directly. | ||
| Detect It has been tested on numerous real world devices (since 2016), and the tests mock multiple devices and edge cases to ensure accurate results. The detection relies on how the browser presents the capabilities of the device as it is not possible to access the device hardware directly. | ||
| [](https://www.npmjs.com/package/detect-it) [](https://bundlephobia.com/result?p=detect-it@next)  | ||
| --- | ||
@@ -145,3 +145,3 @@ | ||
| <!-- in index.html --> | ||
| <script src="https://unpkg.com/detect-it/dist/detect-it.umd.production.js"></script> | ||
| <script src="https://unpkg.com/detect-it@4/dist/detect-it.umd.production.js"></script> | ||
| ``` | ||
@@ -165,3 +165,3 @@ | ||
| - If the browser `supportsPointerEvents` then only set Pointer Event listeners and use [`pointerType`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType) to determine if the interaction was from `mouse` or `touch`. | ||
| - Otherwise always set both Mouse Event and Touch Event listeners and use [`event-from`](https://github.com/rafgraph/event-from) to ignore Mouse Events generated from touch input. | ||
| - Otherwise always set both Mouse Event and Touch Event listeners and use [Event From](https://github.com/rafgraph/event-from) to ignore Mouse Events generated from touch input. | ||
@@ -175,3 +175,3 @@ ### Device responsive UX | ||
| - **Size** | ||
| - This can be determined using media queries, for example `(max-width: 600px)`, either applied via CSS or in JavaScript by using something like [`react-media`](https://github.com/ReactTraining/react-media). | ||
| - This can be determined using media queries, for example `(max-width: 600px)`, either applied via CSS or in JavaScript by using something like [React Media](https://github.com/ReactTraining/react-media). | ||
| - **Capabilities** | ||
@@ -185,3 +185,3 @@ - This is what **Detect It** is for - knowing at render time what the capabilities of the device are. There are a number of ways that you can use `deviceType` or `primaryInput` to optimize the UX for the capabilities of the device, however, in most cases I've found it makes sense to just use `primaryInput` and optimize the UX for `mouse` or `touch`, while ensuring that the app is still usable by both inputs. | ||
| - **Interaction** | ||
| - Is the user hovering, touching, etc. To help with this I created [React Interactive](https://github.com/rafgraph/react-interactive) which provides a callback for interactive state changes (`hover`, `mouseActive`, `touchActive`, `keyActive`) and allows you to style touch interactions in ways that feel native and are not possible with CSS pseudo classes. | ||
| - Is the user hovering, touching, etc. To help with this I created [React Interactive](https://github.com/rafgraph/react-interactive) which provides a callback for interactive state changes (`hover`, `mouseActive`, `touchActive`, `keyActive`) and allows you to style touch interactions in a way that feels native and is not possible with CSS pseudo classes. | ||
@@ -222,5 +222,5 @@ ### Setting event listeners | ||
| **Option 1**: If the device is `mouseOnly` or `touchOnly` then only set mouse or touch listeners, and if the device is `hybrid` set both mouse and touch event listeners and ignore Mouse Events caused by touch input (you can use [`event-from`](https://github.com/rafgraph/event-from) for this). | ||
| **Option 1**: If the device is `mouseOnly` or `touchOnly` then only set mouse or touch listeners, and if the device is `hybrid` set both mouse and touch event listeners and ignore Mouse Events caused by touch input (you can use [Event From](https://github.com/rafgraph/event-from) for this). | ||
| **Option 2**: Always set both mouse and touch event listeners and use [`event-from`](https://github.com/rafgraph/event-from) to ignore Mouse Events from touch input. | ||
| **Option 2**: Always set both mouse and touch event listeners and use [Event From](https://github.com/rafgraph/event-from) to ignore Mouse Events from touch input. | ||
@@ -227,0 +227,0 @@ I prefer option 2 as it's simpler to code and I haven't noticed any performance impact from setting extra listeners (note that setting Touch Event listeners on a browser that doesn't support Touch Events is fine, the browser will just ignore the event listeners). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by18.73%
298
Worsened metrics
- Total package byte prevSize
- decreased by-1.15%
71470
No dependency changes