detect-it - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

lib/index.js

@@ -19,6 +19,2 @@ 'use strict';
 
-var _detectPointerEvents = require('detect-pointer-events');
-
-var _detectPointerEvents2 = _interopRequireDefault(_detectPointerEvents);
-
 var _detectPassiveEvents = require('detect-passive-events');
@@ -35,5 +31,4 @@
  *   passiveEvents: boolean,
- *   hasTouchEventsApi: boolean,
- *   hasPointerEventsApi: boolean,
  *   hasTouch: boolean,
+ *   hasMouse: boolean,
  *   maxTouchPoints: number,
@@ -46,20 +41,8 @@ *   primaryHover: 'hover' / 'none',
  *     detectTouchEvents,
- *     detectPointerEvents,
  *     detectPassiveEvents,
  *   },
  *   update() {...},
- *   pointerEventsPrefix(value) {return value, value will only have prefix if requiresPrefix},
  * }
  */
 
-function robustMax(a, b) {
-  function isNum(value) {
-    return typeof value === 'number';
-  }
-  if (isNum(a) && isNum(b)) return Math.max(a, b);
-  if (isNum(a)) return a;
-  if (isNum(b)) return b;
-  return undefined;
-}
-
 function determineDeviceType(hasTouch, anyHover, anyFine) {
@@ -86,3 +69,2 @@ /*
     detectTouchEvents: _detectTouchEvents2.default,
-    detectPointerEvents: _detectPointerEvents2.default,
     detectPassiveEvents: _detectPassiveEvents2.default
@@ -94,3 +76,2 @@ },
     detectIt.state.detectTouchEvents.update();
-    detectIt.state.detectPointerEvents.update();
     detectIt.state.detectPassiveEvents.update();
@@ -103,11 +84,9 @@ detectIt.updateOnlyOwnProperties();
 
-      detectIt.hasTouch = detectIt.state.detectTouchEvents.hasApi || detectIt.state.detectPointerEvents.hasTouch || false;
+      detectIt.hasTouch = detectIt.state.detectTouchEvents.hasApi || false;
 
       detectIt.deviceType = determineDeviceType(detectIt.hasTouch, detectIt.state.detectHover.anyHover, detectIt.state.detectPointer.anyFine);
 
-      detectIt.hasTouchEventsApi = detectIt.state.detectTouchEvents.hasApi;
-      detectIt.hasPointerEventsApi = detectIt.state.detectPointerEvents.hasApi;
+      detectIt.hasMouse = detectIt.deviceType !== 'touchOnly';
+      detectIt.maxTouchPoints = detectIt.state.detectTouchEvents.maxTouchPoints;
 
-      detectIt.maxTouchPoints = robustMax(detectIt.state.detectTouchEvents.maxTouchPoints, detectIt.state.detectPointerEvents.maxTouchPoints);
-
       detectIt.primaryHover = detectIt.state.detectHover.hover && 'hover' || detectIt.state.detectHover.none && 'none' ||
@@ -129,5 +108,3 @@ // if it's a mouseOnly device that doesn't support level 4 media queries,
     }
-  },
-
-  pointerEventsPrefix: _detectPointerEvents2.default.prefix
+  }
 };
@@ -134,0 +111,0 @@

package.json

 {
   "name": "detect-it",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Detect if a device is mouse only, touch only, or hybrid",
@@ -23,3 +23,4 @@ "main": "lib/index.js",
     "touch",
-    "hybrid"
+    "hybrid",
+    "passive events"
   ],
@@ -36,3 +37,2 @@ "author": "Rafael Pedicini <[e-mail]>",
     "detect-pointer": "^1.0.0",
-    "detect-pointer-events": "^1.0.0",
     "detect-touch-events": "^1.0.0"
@@ -44,3 +44,3 @@ },
     "babel-preset-es2015": "^6.18.0",
-    "eslint": "^3.9.1",
+    "eslint": "^3.10.1",
     "eslint-config-airbnb-base": "^10.0.1",
@@ -47,0 +47,0 @@ "eslint-plugin-import": "^2.2.0"

README.md

 # Detect It
 
-Detect if a device is mouse only, touch only, or hybrid.
+Detect if a device is mouse only, touch only, or hybrid, and if it supports passive event listeners.
 
@@ -9,4 +9,5 @@ [Live detection test][liveDetectionTest]
 
-`detect-it`'s state is a deterministic function of the state of the five micro state machines that it contains ([`detect-hover`][detectHoverRepo], [`detect-pointer`][detectPointerRepo], [`detect-touch-events`][detectTouchEventsRepo], [`detect-pointer-events`][detectPointerEventsRepo], and [`detect-passive-events`][detectPassiveEventsRepo]). `detect-it`'s `update()` function first runs the `update()` function on each micro state machine that it contains, and then updates it own state.
+`detect-it`'s state is a deterministic function of the state of the four micro state machines that it contains ([`detect-hover`][detectHoverRepo], [`detect-pointer`][detectPointerRepo], [`detect-touch-events`][detectTouchEventsRepo], and [`detect-passive-events`][detectPassiveEventsRepo]). `detect-it`'s `update()` function first runs the `update()` function on each micro state machine that it contains, and then updates it own state.
 
+Note that Detect It v2 removed support for Pointer Events detection because they're just not relevant enough (only used by IE and Edge and not supported by React). If you need Pointer Events detection, use [Detect It v1.1][detectItv1.1].
 
@@ -18,4 +19,3 @@ ### `detectIt` micro state machine
   passiveEvents: boolean,
-  hasTouchEventsApi: boolean,
-  hasPointerEventsApi: boolean,
+  hasMouse: boolean,
   hasTouch: boolean,
@@ -31,3 +31,2 @@ maxTouchPoints: whole number,
     detectTouchEvents,
-    detectPointerEvents,
     detectPassiveEvents,
@@ -38,5 +37,2 @@ },
   update() {...},
-
-  // easy access to detectPointerEvents' prefix function
-  pointerEventsPrefix(value) {...},
 }
@@ -47,3 +43,3 @@ ```
 ```terminal
-$ npm install detect-it
+$ npm install --save detect-it
 ```
@@ -59,8 +55,9 @@
 
-detectIt.passiveEvents === true // the browser supports passive event listeners
+detectIt.passiveEvents === true; // the browser supports passive event listeners
 
-detectIt.hasTouchEventsApi === true; // the browser supports the touch events api
-detectIt.hasPointerEventsApi === true; // the browser supports the pointer events api
+detectIt.hasMouse === true; // the deviceType is mouseOnly or hybrid
 
-detectIt.hasTouch === true; // this is a touch capable device (no inference about api)
+// the browser supports the touch events api, and the deviceType is touchOnly or hybrid
+detectIt.hasTouch === true;
+
 detectIt.maxTouchPoints; // max number of touch points supported
@@ -76,3 +73,3 @@
 detectIt.state.detectTouchEvents; // see the detect-touch-events repo for more info
-detectIt.state.detectPointerEvents; // see the detect-pointer-events repo for more info
+detectIt.state.detectPassiveEvents; // see the detect-passive-events repo for more info
 
@@ -82,9 +79,2 @@
 detectIt.update();
-
-// prefixing pointer events
-detectIt.pointerEventsPrefix(value) // returns the value and only adds the prefix if it is required
-
-// for example, this will add an event listener for 'MSPointerDown' if a prefix is required,
-// otherwise it will add an event listener for 'pointerdown'
-element.addEventListener(detectIt.pointerEventsPrefix('pointerdown'), function...)
 ```
@@ -100,4 +90,3 @@
   passiveEvents: false,
-  hasTouchEventsApi: false,
-  hasPointerEventsApi: false,
+  hasMouse: true,
   hasTouch: false,
@@ -116,4 +105,3 @@ maxTouchPoints: undefined,
   passiveEvents: false,
-  hasTouchEventsApi: true,
-  hasPointerEventsApi: false,
+  hasMouse: false,
   hasTouch: true,
@@ -128,8 +116,6 @@ maxTouchPoints: undefined,
 
-#### Using `detect-it` to set event listeners (or just use [`the-listener`][theListener])
+#### Using `detect-it` to set event listeners
 ```javascript
-const dIt = detectIt;
-
 // if passive events are supported by the browser
-if (dIt.passiveEvents === true) {
+if (detectIt.passiveEvents === true) {
   document.addEventListener('scroll', handleScroll, { capture: false, passive: true });
@@ -140,35 +126,20 @@ } else {
 
-// using mouse and touch events
-if (dIt.deviceType === 'mouseOnly') {
-  // only set mouse event listeners
+if (detectIt.hasMouse) {
+  // set mouse event listeners
 }
-if (dIt.deviceType === 'touchOnly' && dIt.hasTouchEventsApi) {
-  // only set touch event listeners
+if (detectIt.hasTouch) {
+  // set touch event listeners
 }
-if (dIt.deviceType === 'hybrid' && dIt.hasTouchEventsApi) {
-  // set both mouse and touch event listeners
-}
 
-// note that there are cases where a touch capable device only fires pointer events
-if (dIt.hasTouch && dIt.hasPointerEventsApi && !dIt.hasTouchEventsApi) {
-  // must set pointer event listeners to access touch capabilities of device
-  // note that dIt.hasTouch includes all touchOnly and hybrid devices
-  // (you could be more specific and just target touchOnly or hybrid devices instead)
-}
+// OR
 
-// using pointer events
-if (dIt.hasPointerEventsApi) {
-  // can set only pointer event listeners instead mouse and touch event listeners
+if (detectIt.deviceType === 'mouseOnly') {
+  // only set mouse event listeners
 }
-if (dIt.deviceType === 'mouseOnly' && dIt.hasPointerEventsApi) {
-  // can set only pointer event listeners knowing that the pointerType will only be mouse
-  // (or can just set mouse event listeners instead of pointer event listeners)
+if (detectIt.deviceType === 'touchOnly') {
+  // only set touch event listeners
 }
-if (dIt.deviceType === 'touchOnly' && dIt.hasPointerEventsApi) {
-  // only set pointer event listeners knowing that pointerType will be pen or touch
-  // (if the browser also hasTouchEventsApi, set either pointer or touch event listeners)
+if (detectIt.deviceType === 'hybrid') {
+  // set both mouse and touch event listeners
 }
-if (dIt.deviceType === 'hybrid' && dIt.hasPointerEventsApi) {
-  // only set pointer event listeners knowing that pointerType could be mouse, pen, or touch
-}
 ```
@@ -178,9 +149,7 @@
 ```javascript
-const dIt = detectIt;
-
-if (dIt.primaryPointer === 'coarse') {
+if (detectIt.primaryPointer === 'coarse') {
   // make clickable elements bigger
 }
 
-if (dIt.primaryHover === 'hover') {
+if (detectIt.primaryHover === 'hover') {
   // can add hover features
@@ -190,6 +159,4 @@ }
 
-#### Real world examples using `detect-it`
-- [`react-interactive`][reactInteractive] - a better interactive state machine than css
-- [`the-listener`][theListener] - easily set complex mouse, touch and pointer listeners without conflicts
-- [`current-input`][currentInput] - detect the current input (mouse or touch) and fix the sticky hover problem on touch devices
+#### Real world example using `detect-it`
+- [`react-interactive`][reactInteractive] - a better interactive state machine than CSS
 
@@ -201,3 +168,2 @@ ### Part of the `detect-it` family
   - [`detect-touch-events`][detectTouchEventsRepo]
-  - [`detect-pointer-events`][detectPointerEventsRepo]
   - [`detect-passive-events`][detectPassiveEventsRepo]
@@ -209,3 +175,2 @@
 - Touch events api see [MDN's Touch Events][mdnTouchEvents], or the [W3C Touch Events specification][w3cTouchEventsSpecLatest]
-- Pointer events api see [MDN's Pointer Events][mdnPointerEvents], or the [W3C Pointer Events specification][w3cPointerEventsSpecLatest]
 - General playground see the excellent suite of [touch/pointer tests and demos][touchTests] put together by Patrick H. Lauke
@@ -222,4 +187,3 @@ - Passive events see this [Passive Events Explainer][passiveExplainer]
    * A hybrid device is one that both hasTouch and any input device can hover
-   * or has a fine pointer. Note that hasTouch only reflects the capabilities
-   * of the device, but provides no inference about the api.
+   * or has a fine pointer.
    */
@@ -239,5 +203,7 @@ if (hasTouch && (anyHover || anyFine)) return 'hybrid';
 Some `hybrid` examples:
-- A touch capable Chromebook with Chrome browser registers that `hasTouch`, `anyHover`, and `anyFine` are all true (and that `hasTouchEventsApi` is true).
-- The Galaxy Note with stylus running the Chrome mobile browser registers that `hasTouch` and `anyFine` are true, but that `anyHover` is false (and that `hasTouchEventsApi` is true) - as a side note I think that since the stylus hovers effectively, the Note should register as `anyHover` true, but for some reason it doesn't.
-- The Microsoft Surface (and other Windows 10 touchscreen computers) register that `hasTouch`, `anyHover` and `anyFine` are all true for both Microsoft Edge and Chrome browsers (note that for the Edge browser `hasPointerEventsApi` is true, but `hasTouchEventsApi` is false, and for the Chrome browser `hasTouchEventsApi` is true, but `hasPointerEventsApi` is false).
+- A touch capable Chromebook with Chrome browser registers that `hasTouch`, `anyHover`, and `anyFine` are all true.
+- The Galaxy Note with stylus running the Chrome mobile browser registers that `hasTouch` and `anyFine` are true, but that `anyHover` is false - as a side note I think that since the stylus hovers effectively, the Note should register as `anyHover` true, but for some reason it doesn't.
+- The Microsoft Surface (and other Windows 10 touchscreen computers)
+  - When using the Chrome browser, `hasTouch`, `anyHover` and `anyFine` are all true because Chrome supports the Touch Events API, so the device registers as a `hybrid`.
+  - When using Microsoft's Edge browser `hasTouch` is false because Edge doesn't support the Touch Events API, so it registers as a `mouseOnly` device. To access the touch capabilities in Edge you have to use Pointer Events. If you want Edge to register as a `hybrid` device then use [Detect It v1.1][detectItv1.1] which supports Pointer Events. Note that touches will still fire mouse events, so if you don't set Pointer Event listeners, touch input will act like a mouse.
 
@@ -251,3 +217,3 @@ <!-- links -->
 [detectPassiveEventsRepo]: https://github.com/rafrex/detect-passive-events
-[detectPointerEventsRepo]: https://github.com/rafrex/detect-pointer-events
+[detectItv1.1]: https://github.com/rafrex/detect-it/tree/v1.1.0
 
@@ -262,3 +228,2 @@ [reactInteractive]: https://github.com/rafrex/react-interactive
 [w3cTouchEventsSpecLatest]: https://w3c.github.io/touch-events/
-[w3cPointerEventsSpecLatest]: https://www.w3.org/TR/pointerevents/
 [mdnPointerEvents]: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
@@ -265,0 +230,0 @@

src/index.js

 import detectHover from 'detect-hover';
 import detectPointer from 'detect-pointer';
 import detectTouchEvents from 'detect-touch-events';
-import detectPointerEvents from 'detect-pointer-events';
 import detectPassiveEvents from 'detect-passive-events';
@@ -12,5 +11,4 @@
  *   passiveEvents: boolean,
- *   hasTouchEventsApi: boolean,
- *   hasPointerEventsApi: boolean,
  *   hasTouch: boolean,
+ *   hasMouse: boolean,
  *   maxTouchPoints: number,
@@ -23,18 +21,8 @@ *   primaryHover: 'hover' / 'none',
  *     detectTouchEvents,
- *     detectPointerEvents,
  *     detectPassiveEvents,
  *   },
  *   update() {...},
- *   pointerEventsPrefix(value) {return value, value will only have prefix if requiresPrefix},
  * }
  */
 
-function robustMax(a, b) {
-  function isNum(value) { return typeof value === 'number'; }
-  if (isNum(a) && isNum(b)) return Math.max(a, b);
-  if (isNum(a)) return a;
-  if (isNum(b)) return b;
-  return undefined;
-}
-
 function determineDeviceType(hasTouch, anyHover, anyFine) {
@@ -61,3 +49,2 @@ /*
     detectTouchEvents,
-    detectPointerEvents,
     detectPassiveEvents,
@@ -69,3 +56,2 @@ },
     detectIt.state.detectTouchEvents.update();
-    detectIt.state.detectPointerEvents.update();
     detectIt.state.detectPassiveEvents.update();
@@ -78,6 +64,3 @@ detectIt.updateOnlyOwnProperties();
 
-      detectIt.hasTouch =
-        detectIt.state.detectTouchEvents.hasApi ||
-        detectIt.state.detectPointerEvents.hasTouch ||
-        false;
+      detectIt.hasTouch = detectIt.state.detectTouchEvents.hasApi || false;
 
@@ -90,10 +73,5 @@ detectIt.deviceType = determineDeviceType(
 
-      detectIt.hasTouchEventsApi = detectIt.state.detectTouchEvents.hasApi;
-      detectIt.hasPointerEventsApi = detectIt.state.detectPointerEvents.hasApi;
+      detectIt.hasMouse = detectIt.deviceType !== 'touchOnly';
+      detectIt.maxTouchPoints = detectIt.state.detectTouchEvents.maxTouchPoints;
 
-      detectIt.maxTouchPoints = robustMax(
-        detectIt.state.detectTouchEvents.maxTouchPoints,
-        detectIt.state.detectPointerEvents.maxTouchPoints,
-      );
-
       detectIt.primaryHover =
@@ -121,3 +99,2 @@ (detectIt.state.detectHover.hover && 'hover') ||
   },
-  pointerEventsPrefix: detectPointerEvents.prefix,
 };
@@ -124,0 +101,0 @@

No alert changes

Improved metrics

Dependency count

4

decreased by-20%

Worsened metrics

Total package byte prevSize

18845

decreased by-16.4%

Lines of code

171

decreased by-18.57%

Number of lines in readme file

213

decreased by-14.11%

Dependency changes

• - Removeddetect-pointer-events@^1.0.0

• - Removeddetect-pointer-events@1.0.2(transitive)