bloody-viewport

viewport

horizontal viewport based router

install

$ npm install bloody-viewport

require

var viewport = require("bloody-viewport")

api

viewport() > v

creates a viewport router

v defines a viewport instance

v.use(options) > v

options

range {Array}

array containing the viewport boundaries (eg. [0, 310] means 0 <= viewport <= 310).

on {Function}

callback when arriving within the given viewport boundaries.

off {Function}

callback when leaving the given viewport boundaries.

v.init() > v

inits v (to use after having your ranges configured), executes the right callbacks and starts listening to window resizes.

v.update(viewportWidth {Number}) > v

Executes the callbacks matching viewportWidth.

v.destroy()

Removes all ranges and stops listening to resizes.

examples

var viewport = require("bloody-viewport")
var router = viewport()
 
router
  .use({
    // viewportWidth <= 320
    range : [0, 320],
    on : function(){
      mobileHeader.init()
    },
    off : function(){
      mobileHeader.destroy()
    }
  })
  .use({
    // 240 <= viewportWidth <= 768
    range : [240, 768],
    on : function(){
      sideNav.init()
    },
    off : function(){
      sideNav.destroy()
    }
  })
  .use({
    // viewportWidth > 1024
    range : [1024, Infinity],
    on : function(){
      backgroundResizer.init()
    },
    off : function(){
      backgroundResizer.destroy()
    }
  })
  .init()