@dreamworld/device-info - npm Package Compare versions

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

device-info.js

@@ -1,4 +0,5 @@
-import { isTouchDevice } from '@dreamworld/web-util';
-import forEach from 'lodash-es/forEach.js';
-import EventEmitter from '@dreamworld/event-emitter';
+import { isTouchDevice } from "@dreamworld/web-util";
+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";
@@ -9,7 +10,7 @@ import reducer from "./reducer.js";
 const mediaQueriesBylayout = {
-  "small": "only screen and (max-width: 600px)",
-  "medium": "only screen and (min-width: 600px) and (max-width: 999px)",
-  "large": "only screen and (min-width: 1000px) and (max-width: 1299px)",
-  "hd": "only screen and (min-width: 1300px) and (max-width: 1899px)",
-  "fullhd": "only screen and (min-width: 1900px)"
+  small: "only screen and (max-width: 600px)",
+  medium: "only screen and (min-width: 600px) and (max-width: 999px)",
+  large: "only screen and (min-width: 1000px) and (max-width: 1299px)",
+  hd: "only screen and (min-width: 1300px) and (max-width: 1899px)",
+  fullhd: "only screen and (min-width: 1900px)",
 };
@@ -35,3 +36,3 @@
   /**
-   *
+   * It initializes redux state
    * @param {Object} store
@@ -43,3 +44,3 @@ */
     store.addReducers({
-      'device-info': reducer
+      "device-info": reducer,
     });
@@ -59,3 +60,3 @@
       touch: this.touch,
-      vkb: this.vkb
+      vkb: this.vkb,
     };
@@ -79,3 +80,3 @@ }
    * Starts to manage `layout`.
-   * It invokes all of the event handlers of `layout-changed` whenever layout is changed.
+   * It dispatches `change` event whenever `layout` is changed.
    */
@@ -86,3 +87,3 @@ static _manageLayout() {
         if (window.matchMedia(query).matches) {
-          if(this.layout === layout) {
+          if (this.layout === layout) {
             return false;
@@ -94,3 +95,6 @@ }
           this._store &&
-            this._store.dispatch({ type: actions.LAYOUT_CHANGED, payload: layout });
+            this._store.dispatch({
+              type: actions.LAYOUT_CHANGED,
+              payload: layout,
+            });
           return false;
@@ -108,3 +112,3 @@ }
    * Starts to manage `touch`.
-   * It invokes all of the event handlers of `touch-changed` whenever layout is changed.
+   * It dispatches `change` event whenever `touch` is changed.
    */
@@ -115,7 +119,10 @@ static _manageTouch() {
       this._store &&
-        this._store.dispatch({ type: actions.TOUCH_CHANGED, payload: this.touch });
+        this._store.dispatch({
+          type: actions.TOUCH_CHANGED,
+          payload: this.touch,
+        });
     };
 
     this._listenMouseMove(changeHandler);
-    this._listenTouchEvent(changeHandler);
+    this._listenTouchEvents(changeHandler);
   }
@@ -126,23 +133,30 @@
    * It sets `touch=false` and invokes given `changeHandler` only if touch is true
-   * @param {Object} changeHandler 
+   * @param {Object} changeHandler
    */
   static _listenMouseMove(changeHandler) {
-    window.addEventListener('mousemove', (e) => {
-      if(!this.touch) {
-        return;
-      }
+    window.addEventListener(
+      "mousemove",
+      debounce((e) => {
+        if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) {
+          return;
+        }
 
-      this.touch = false;
-      changeHandler();
-    });
+        if (!this.touch) {
+          return;
+        }
+
+        this.touch = false;
+        changeHandler();
+      }, 200)
+    );
   }
 
   /**
-   * It starts listening on `touchmove` event.
+   * It starts listening on `touchmove` and `touchstart` events.
    * It sets `touch=true` and invokes given `changeHandler` only if touch is false
-   * @param {Object} changeHandler 
+   * @param {Object} changeHandler
    */
-  static _listenTouchEvent(changeHandler) {
-    window.addEventListener('touchmove', (e) => {
-      if(this.touch) {
+  static _listenTouchEvents(changeHandler) {
+    const eventHandler = debounce((e) => {
+      if (this.touch) {
         return;
@@ -153,3 +167,6 @@ }
       changeHandler();
-    });
+    }, 200);
+
+    window.addEventListener("touchmove", eventHandler);
+    window.addEventListener("touchstart", eventHandler);
   }
@@ -159,3 +176,3 @@
    * Starts to manage `vkb`.
-   * It invokes all of the event handlers of `vkb-changed` whenever virtual keyboard is changed.
+   * It dispatches `change` event whenever `vkb` is changed.
    */
@@ -170,3 +187,3 @@ static _manageVKB() {
   /**
-   * It's used to bind event handlers of events like `layout-changed`, `touch-changed` and `vkb-changed`
+   * It's used to bind given eventHandler of given eventName
    * @param {String} eventName
@@ -184,3 +201,3 @@ * @param {Object} eventHandler
   /**
-   * It's used to unbind event handlers of events like `layout-changed`, `touch-changed` and `vkb-changed`
+   * It's used to unbind given eventHandler of given eventName
    * @param {String} eventName
@@ -190,2 +207,6 @@ * @param {Object} eventHandler
   static off(eventName, eventHandler) {
+    if (eventName !== "change") {
+      throw `unsupported eventName=${eventName}`;
+    }
+
     ee.off(eventName, eventHandler);
@@ -216,7 +237,7 @@ }
   _onChange({ layout, touch, vkb }) {
-    this.layout = layout || this.layout;
-    this.touch = touch || this.touch;
-    this.vkb = vkb || this.vkb;
+    this.layout = this.constructor.layout;
+    this.touch = this.constructor.touch;
+    this.vkb = this.constructor.vkb;
     this.host.requestUpdate();
   }
 }

package.json

 {
   "name": "@dreamworld/device-info",
-  "version": "1.0.0-init.3",
+  "version": "1.0.0-init.4",
   "description": "It's used to get basic details of device(layout, touch and virtual keyboard).",
@@ -5,0 +5,0 @@ "main": "device-info.js",

README.md

@@ -81,1 +81,2 @@ # DeviceInfo
 | vkb           | Boolean    | `true` if device virtual keyboard is supported. `false` otherwise. |
+ 

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

15365

increased by2.3%

Lines of code

340

increased by5.59%

No dependency changes