@dreamworld/device-info - npm Package Compare versions

Comparing version 1.0.0-init.4 to 1.0.0-init.5

actions.js

@@ -19,2 +19,7 @@ /**
  */
-export const VKB_CHANGED = 'DEVICE_INFO_VKB_CHANGED';
+export const VKB_CHANGED = 'DEVICE_INFO_VKB_CHANGED';
+
+/**
+ * Dispatched whenever hover is applicable OR not applicable
+ */
+export const HOVER_CHANGED = `DEVICE_INFO_HOVER_CHANGED`;

device-info.js

@@ -1,5 +0,3 @@
-import { isTouchDevice } from "@dreamworld/web-util";
+import EventEmitter from "@dreamworld/event-emitter";
 import forEach from "lodash-es/forEach.js";
-import debounce from "lodash-es/debounce.js";
-import EventEmitter from "@dreamworld/event-emitter";
 import * as actions from "./actions.js";
@@ -26,7 +24,9 @@ import reducer from "./reducer.js";
     this.layout = this._getCurrentLayout();
-    this.touch = isTouchDevice();
-    this.vkb = isTouchDevice();
+    this.touch = !window.matchMedia('(any-pointer: fine)').matches;
+    this.vkb = !window.matchMedia('(any-pointer: fine)').matches;
+    this.hover = window.matchMedia('(any-hover: hover)').matches;
 
     this._manageLayout();
     this._manageTouch();
+    this._manageHover();
     this._manageVKB();
@@ -59,2 +59,3 @@ }
       vkb: this.vkb,
+      hover: this.hover
     };
@@ -101,3 +102,3 @@ }
     forEach(mediaQueriesBylayout, (query) => {
-      window.matchMedia(query).addListener(mediaChangeHandler);
+      window.matchMedia(query).addEventListener('change', mediaChangeHandler);
     });
@@ -111,4 +112,5 @@ }
   static _manageTouch() {
-    const changeHandler = () => {
-      ee.emit("change", { touch: this.touch });
+    const changeHandler = (e) => {
+      this.touch = !e.matches;
+      ee.emit("change", { touch: this.touch, vkb: this.touch });
       this._store &&
@@ -118,52 +120,30 @@ this._store.dispatch({
           payload: this.touch,
+        }) &&
+        this._store.dispatch({
+          type: actions.VKB_CHANGED,
+          payload: this.touch,
         });
     };
 
-    this._listenMouseMove(changeHandler);
-    this._listenTouchEvents(changeHandler);
+    window.matchMedia('(any-pointer: fine)').addEventListener('change', changeHandler);
   }
 
   /**
-   * It starts listening on `mousemove` event.
-   * It sets `touch=false` and invokes given `changeHandler` only if touch is true
-   * @param {Object} changeHandler
+   * It starts listening on `any-hover` media query and update `hover` property
    */
-  static _listenMouseMove(changeHandler) {
-    window.addEventListener(
-      "mousemove",
-      debounce((e) => {
-        if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) {
-          return;
-        }
+  static _manageHover() {
+    const changeHandler = (e) => {
+      this.hover = e.matches;
+      ee.emit("change", { hover: this.hover });
+      this._store &&
+        this._store.dispatch({
+          type: actions.HOVER_CHANGED,
+          payload: this.hover
+        });
+    };
 
-        if (!this.touch) {
-          return;
-        }
-
-        this.touch = false;
-        changeHandler();
-      }, 200)
-    );
+    window.matchMedia('(any-hover: hover)').addEventListener('change', changeHandler);
   }
 
   /**
-   * It starts listening on `touchmove` and `touchstart` events.
-   * It sets `touch=true` and invokes given `changeHandler` only if touch is false
-   * @param {Object} changeHandler
-   */
-  static _listenTouchEvents(changeHandler) {
-    const eventHandler = debounce((e) => {
-      if (this.touch) {
-        return;
-      }
-
-      this.touch = true;
-      changeHandler();
-    }, 200);
-
-    window.addEventListener("touchmove", eventHandler);
-    window.addEventListener("touchstart", eventHandler);
-  }
-
-  /**
    * Starts to manage `vkb`.
@@ -173,6 +153,3 @@ * It dispatches `change` event whenever `vkb` is changed.
   static _manageVKB() {
-    //TODO: detect virtual keyboard changes
-    // ee.emit("change", { vkb });
-    // this._store &&
-    //   this._store.dispatch({ type: actions.VKB_CHANGED, payload: vkb });
+    //Futute enhancement: Detect virtual keyboard is supported OR not. Currently it's managed by `touch` and alias of it.
   }
@@ -211,2 +188,3 @@
     this.vkb = this.constructor.vkb;
+    this.hover = this.constructor.hover;
     this._onChange = this._onChange.bind(this);
@@ -228,8 +206,9 @@ this._init();
    */
-  _onChange({ layout, touch, vkb }) {
+  _onChange({ layout, touch, vkb, hover }) {
     this.layout = this.constructor.layout;
     this.touch = this.constructor.touch;
     this.vkb = this.constructor.vkb;
+    this.hover = this.constructor.hover;
     this.host.requestUpdate();
   }
 }

package.json

 {
   "name": "@dreamworld/device-info",
-  "version": "1.0.0-init.4",
+  "version": "1.0.0-init.5",
   "description": "It's used to get basic details of device(layout, touch and virtual keyboard).",
@@ -39,5 +39,4 @@ "main": "device-info.js",
     "@dreamworld/event-emitter": "^1.0.0",
-    "@dreamworld/web-util": "^1.5.0",
     "lodash-es": "^4.17.21"
   }
 }

README.md

@@ -5,5 +5,6 @@ # DeviceInfo
 
- - Screen Size: small, medium, large, hd and fullhd
- - Pointer Interface: Mouse vs Touch
- - Keyboard Interface: Virtual vs Physical
+- Screen Size: small, medium, large, hd and fullhd
+- Pointer Interface: Mouse vs Touch
+- Keyboard Interface: Virtual vs Physical
+- Hover Interface: Hover is applicable to the element OR not
 
@@ -14,5 +15,5 @@ Many UI components need to adjust their look & feel and/or behaviours based on this detail. They can use this to get this information; and get updated when any of this information is changed.
 
-## Usage pattern
+## Usage Guide
 
-- We can use this controller with 2 methods
+### Use it Globally (Plain JS)
 
@@ -23,11 +24,6 @@ ```javascript
 //Get info
-let deviceInfo = DeviceInfo.info(); // { layout: "small", touch: true, vkb: false }
-```
+let deviceInfo = DeviceInfo.info(); // { layout: "small", touch: true, vkb: false, hover: true }
 
-### Use it Globally (Plain JS)
 
-```javascript
-import DeviceInfo from "@dreamworld/device-info";
-
-//Bind event
+//Bind event: Start listening for changes
 DeviceInfo.on("change", (details) => {
@@ -37,3 +33,3 @@ //details contains only properties which are really changed.
 
-//Unbind event
+//Unbind event: Stop listening for the changes.
 DeviceInfo.off("change", handler);
@@ -55,3 +51,3 @@ ```
       current layout: ${this.deviceInfo.layout} is touch enabled: ${this
-        .deviceInfo.touch} is Virtual keyboard supported: ${this.deviceInfo.vkb}
+        .deviceInfo.touch} is Virtual keyboard supported: ${this.deviceInfo.vkb} hover applicable: ${this.deviceInfo.hover}
     `;
@@ -73,4 +69,5 @@ }
 let layout = selectors.layout(state);
-let isTouchEnabled = selectors.touch(state);
-let isVKBEnabled = selectors.vkb(state);
+let touchEnabled = selectors.touch(state);
+let virtualKeyBoardEnabled = selectors.vkb(state);
+let hoverApplicable = selectors.hover(state);
 ```
@@ -86,3 +83,11 @@
 | touch         | Boolean    | `true` if device touch is enabled. `false` otherwise. |
-| vkb           | Boolean    | `true` if device virtual keyboard is supported. `false` otherwise. |
- 
+| vkb           | Boolean    | `true` if device virtual keyboard is enabled. `false` otherwise. |
+| hover         | Boolean    | `true` if hover is applicable to the elements. `false` otherwise. |
+ 
+# Future Enhancements
+
+At present `vkb` and `touch` both always has the same value. We assumed that whenver user is `touch` interface, then Virtual Keyboard will also be used. 
+ 
+But, that's not always true. e.g. A Windows Laptop user may be using `touch` interface for pointing and though physical keyboard is being used. In future, this implementation will be enhanced to detect based on - viewport is resized when user focus into an input element. Because, if viewport is resized on input focus then it's said that virtual keyboard is used.
+
+Note: `vkb` is mainly needed because iOS devices behave differently then the Android Devices when a virtual keyboard is opened. So, to ensure common experience on all the device we use **fit** style for the dialog when dialog's content has any input elelement. In future, iOS many change this behaviour and we may remove `vkb` also.

reducer.js

@@ -5,3 +5,4 @@ import {
   TOUCH_CHANGED,
-  VKB_CHANGED
+  VKB_CHANGED,
+  HOVER_CHANGED
 } from './actions.js';
@@ -23,2 +24,5 @@
 
+    case HOVER_CHANGED:
+      return { ...state, hover: action.payload };
+
     default:
@@ -25,0 +29,0 @@ return state;

selectors.js

@@ -27,2 +27,10 @@ import get from 'lodash-es/get.js';
   return get(state, `device-info.vkb`);
+};
+
+/**
+ * It returns `true` if currently hover is applicable to the elements. `false` otherwise.
+ * @param {Object} state 
+ */
+ export const hover = (state) => {
+  return get(state, `device-info.hover`);
 };

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16558

increased by7.76%

Dependency count

2

decreased by-33.33%

Number of lines in readme file

87

increased by7.41%

Worsened metrics

Lines of code

337

decreased by-0.88%

Dependency changes

• - Removed@dreamworld/web-util@^1.5.0

• - Removed@dreamworld/web-util@1.7.2(transitive)

• - Removedbowser@2.11.0(transitive)