viewport-state-manager

v0.1.3

Published

4 years ago

Babysit your viewport and adapt your UIs.

0High
0Medium
0Low

kyledetella

viewport manager responsive respond observe

ViewportStateManager

Observe changes in the viewport and adapt your UIs accordingly.

Usage

Browserify

Viewport State Manager can be consumed as a CommonJS module using browserify.

npm install viewport-state-manager

var ViewportStateManager = require('viewport-state-manager');

var manager = new ViewportStateManager({
  ranges: {
    desktop: [1025, 5000],
    tablet: [768, 1024],
    handheld: [1, 767]
  },
  callback: function (currentState, previousState) {
    // ...
  }
});

RequireJS

ViewportStateManager is AMD compliant, so you can use it with require.js.

// Configure RequireJs
requirejs.config({
  paths: {
    'viewportStateManager' : 'path/to/viewport-state-manager'
  }
});

define(['viewportStateManager'], function (ViewportStateManager) {
  var manager = new ViewportStateManager({
    ranges: {
      desktop: [1025, 5000],
      tablet: [768, 1024],
      handheld: [1, 767]
    },
    callback: function (currentState, previousState) {
      // ...
    }
  });
});

Global

<html>
  <head></head>
  <body>

  <script src="viewport-state-manager.js"></script>
  <script>
    var manager = new ViewportStateManager({
      ranges: {
        desktop: [1025, 5000],
        tablet: [768, 1024],
        handheld: [1, 767]
      },
      callback: function (currentState, previousState) {
        // ...
      }
    });
  </script>
  </body>
</html>

Options

ranges (breakpoints)

Type: Object

  // key – breakpoint name
  // value – min, max array of pixel dimensions
  tablet: [768, 1024]

default – desktop: [1025, 5000], tablet: [768, 1024], handheld: [1, 767]

callback

Function to be invoked each time a breakpoint threshold is crossed

Type: Function

 function (currentState, previousState) { /* ... */ };

currentState - Type: String - The name of the breakpoint you are currently in
previousState - Type: String - The name of the breakpoint you exited from

debounceTime

Duration of debounce set on the window resize or orientationchange events

Type: Number

default: 250

currentViewportState

The default viewport state. Note: This will automatically be set on instantiation if no argument is supplied

Type: String

default: ''

Browser Compatibility

IE9+, Chrome, Firefox, Safari, Android 2.3+, iOS 5+. You know, the good stuff!