RxJS ScreenViewer
Module for definition screen type by RXJS. There is Flow in code.
For why? More comfortably using adaptive site created by screen types, than using particular sizes. This addition absctract layer give to you flexible and maintainable.
Installation
ES6 via npm
npm i screen-viewer
Dependencies
For compile code with babel, we should install package:
# For using ES6 import npm i babel-plugin-syntax-dynamic-import # For compile with flowtype npm i babel-preset-flow # For strip flowtype declarations npm i babel-plugin-transform-flow-strip-types # Module use object spread operator npm i babel-plugin-transform-object-rest-spread
ScreenViewer as global object in browser
Pass to your html page code below
<!-- Include RxJS library --> <!-- Include screen-viewer module -->
And use in you scripts some as:
var resize$ = RxObservable ; ScreenViewer ;
How it works
Module define some kind of size (in this case it's screen width), that it receive and compare it with needed screen type.
For example, module receive value 940, that corresponds screen type tablet. All corresponds values are shown below. If value is 1300, then it will be desktop.
/** * Screen types map * @type */screenMap = // Everything is less map: '768': 'mobile' '1280': 'tablet' // type as default default: 'desktop'
Module works by Rx streams. In our case it works with resizes of screen. Which is stream will be observable decide developer.
In common cases uses free streams by three events: - Full page loaded (onload) - Full document loaded (DOMContentLoaded) - Resize screen (onresize)
Usage
Set module (it use RxJS, that why module shold be accessible in environment).
index.js:
// ES6 modules; // or CommonJSconst screenViewer = default;
You can set up types map, if you need it.
screenViewer
init$ method receive array of streams filtered by size of screen.
; /** * Observable after full load page * @type */const load$ = Observable /** * Observable from DOMContentLoaded event (as ready event jQuery) * @type */const ready$ = Observable /** * Observable from resize event * @type */const resize$ = Observable /** * Init module * @type */const screen$ = screenViewer
Now we can subscribe to stream, that will change data in moment when type of screen changed.
screen$