@dreamworld/device-info

DeviceInfo

It's used to get detail about Device like:

• 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

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.

All of the @dreamworld/* Web Components uses (are going to use) this.

Usage Guide

• There are the 3 ways to use device-info.

1. Use it Globally (Plain JS)

import DeviceInfo from "@dreamworld/device-info";

// Get info 
let deviceInfo = DeviceInfo.info(); // { layout: "small", touch: true, vkb: false, hover: true }


//Bind event: Start listening for changes
DeviceInfo.on("change", (details) => {
  //details contains only properties which are really changed.
});

//Unbind event: Stop listening for the changes.
DeviceInfo.off("change", handler);

2. Use it as Lit Reactive Controller

import { LitElement, html } from "lit";
import DeviceInfo from "@dreamworld/device-info";

class MyComponent extends LitElement {
  deviceInfo = new DeviceInfo(this, { device }); // On SSR, `device` option is mandatory. Its possible values are: 'mobile', 'tablet', 'desktop'

  // Use the controller in render()
  render() {
    return html`
      current layout: ${this.deviceInfo.layout} is touch enabled: ${this
        .deviceInfo.touch} is Virtual keyboard supported: ${this.deviceInfo.vkb} hover applicable: ${this.deviceInfo.hover}
    `;
  }
}

3. Use with redux

import { default as DeviceInfo, selectors } from "@dreamworld/device-info";

//Init redux on client side
DeviceInfo.initRedux(store,);

// Init redux on server side.
const instance = new DeviceInfo(null, { device }); // On SSR, `device` option is mandatory. Its possible values are: 'mobile', 'tablet', 'desktop'
instance.initReduxOnServer(store); 

//use selectors to read details from redux store

let layout = selectors.layout(state);
let touchEnabled = selectors.touch(state);
let virtualKeyBoardEnabled = selectors.vkb(state);
let hoverApplicable = selectors.hover(state);

It manages state at below path.

Path: device-info

name	data type	description
layout	String	Possible values: small, medium, large, hd and fullhd.
touch	Boolean	true if device touch is enabled. 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.