@dreamworld/device-info - npm Package Compare versions

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

demo/index.js

 import { default as DeviceInfo, selectors } from '../device-info.js';
+import { store } from './store.js';
 
 let deviceInfo = DeviceInfo.info();
-
 console.log("DeviceInfo=", deviceInfo);
 
+// Initializes redux
+DeviceInfo.initRedux(store);
+
 const handler = (details) => {
@@ -8,0 +11,0 @@ console.log("details changed=", details);

demo/my-test.js

 import { LitElement, html } from 'lit';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { store } from './store.js';
 import { default as DeviceInfo, selectors } from '../device-info.js';
 
-let info = DeviceInfo.info();
+class MyTest extends connect(store)(LitElement) {
+  deviceInfo = new DeviceInfo(this);
 
-class MyTest extends LitElement {
+  static properties = {
+    layout: { type: String },
+    touch: { type: Boolean },
+    vkb: { type: Boolean }
+  };
 
-  deviceInfo = new DeviceInfo(this);
+  render() {
+    return html`
+      Values updating through reactive controllers
+      Layout: ${this.deviceInfo.layout}<br>
+      Touch: ${this.deviceInfo.touch}<br>
+      VKB: ${this.deviceInfo.vkb}
 
-  render() {
-    return html`Layout: ${this.deviceInfo.layout}
-    Touch: ${this.deviceInfo.touch}
-    VKB: ${this.deviceInfo.vkb}`;
+      <br>
+      <br>
+      Values updating through state change
+      Layout: ${this.layout}<br>
+      Touch: ${this.touch}<br>
+      VKB: ${this.vkb}
+    `;
   }
+
+  stateChanged(state) {
+    this.layout = selectors.layout(state);
+    this.touch = selectors.touch(state);
+    this.vkb = selectors.vkb(state);
+  }
 }
 
 customElements.define('my-test', MyTest);

device-info.js

@@ -5,2 +5,3 @@ import { isTouchDevice } from '@dreamworld/web-util';
 import * as actions from "./actions.js";
+import reducer from "./reducer.js";
 export * as selectors from "./selectors.js";
@@ -28,8 +29,5 @@
 
-    //Data Structure: { $eventName: $eventHandlerFunction[] }
-    this._eventHandlerMap = {};
-
     this._manageLayout();
-    // this._manageTouch();
-    // this._manageVKB();
+    this._manageTouch();
+    this._manageVKB();
   }
@@ -43,2 +41,7 @@
     this._store = store;
+
+    store.addReducers({
+      'device-info': reducer
+    });
+
     let initialState = this.info();
@@ -104,17 +107,53 @@ this._store.dispatch({ type: actions.INIT, payload: initialState });
   static _manageTouch() {
-    //TODO: detect touch changes
-    ee.emit("change", { touch });
-    this._store &&
-      this._store.dispatch({ type: actions.TOUCH_CHANGED, payload: touch });
+    const changeHandler = () => {
+      ee.emit("change", { touch: this.touch });
+      this._store &&
+        this._store.dispatch({ type: actions.TOUCH_CHANGED, payload: this.touch });
+    };
+
+    this._listenMouseMove(changeHandler);
+    this._listenTouchEvent(changeHandler);
   }
 
   /**
+   * It starts listening on `mousemove` event.
+   * It sets `touch=false` and invokes given `changeHandler` only if touch is true
+   * @param {Object} changeHandler 
+   */
+  static _listenMouseMove(changeHandler) {
+    window.addEventListener('mousemove', (e) => {
+      if(!this.touch) {
+        return;
+      }
+
+      this.touch = false;
+      changeHandler();
+    });
+  }
+
+  /**
+   * It starts listening on `touchmove` event.
+   * It sets `touch=true` and invokes given `changeHandler` only if touch is false
+   * @param {Object} changeHandler 
+   */
+  static _listenTouchEvent(changeHandler) {
+    window.addEventListener('touchmove', (e) => {
+      if(this.touch) {
+        return;
+      }
+
+      this.touch = true;
+      changeHandler();
+    });
+  }
+
+  /**
    * Starts to manage `vkb`.
-   * It invokes all of the event handlers of `vkb-changed` whenever layout is changed.
+   * It invokes all of the event handlers of `vkb-changed` whenever virtual keyboard is changed.
    */
   static _manageVKB() {
     //TODO: detect virtual keyboard changes
-    ee.emit("change", { vkb });
-    this._store &&
-      this._store.dispatch({ type: actions.VKB_CHANGED, payload: vkb });
+    // ee.emit("change", { vkb });
+    // this._store &&
+    //   this._store.dispatch({ type: actions.VKB_CHANGED, payload: vkb });
   }
@@ -121,0 +160,0 @@

package.json

 {
   "name": "@dreamworld/device-info",
-  "version": "1.0.0-init.2",
+  "version": "1.0.0-init.3",
   "description": "It's used to get basic details of device(layout, touch and virtual keyboard).",
@@ -21,2 +21,5 @@ "main": "device-info.js",
     "lit": "^2.2.6",
+    "pwa-helpers": "^0.9.1",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.1",
     "semantic-release": "17.0.8"
@@ -23,0 +26,0 @@ },

reducer.js

@@ -8,15 +8,15 @@ import {
 
-export default (state, action) => {
+export default (state = {}, action) => {
   switch (action.type) {
     case INIT:
-      return state;
+      return { ...action.payload };
       
     case LAYOUT_CHANGED:
-      return state;
+      return { ...state, layout: action.payload };
 
     case TOUCH_CHANGED:
-      return state;
+      return { ...state, touch: action.payload };
 
     case VKB_CHANGED:
-      return state;
+      return { ...state, vkb: action.payload };
 
@@ -23,0 +23,0 @@ default:

selectors.js

@@ -0,1 +1,3 @@
+import get from 'lodash-es/get.js';
+
 /**
@@ -7,3 +9,3 @@ * It returns current layout of device.
 export const layout = (state) => {
-
+  return get(state, `device-info.layout`);
 };
@@ -17,3 +19,3 @@
 export const touch = (state) => {
-
+  return get(state, `device-info.touch`);
 };
@@ -26,3 +28,3 @@
 export const vkb = (state) => {
-
+  return get(state, `device-info.vkb`);
 };

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

15019

increased by32.83%

Number of package files

12

increased by9.09%

Lines of code

322

increased by41.85%

Worsened metrics

Dev dependency count

8

increased by60%

No dependency changes