Nutella Peanut-Butter Marshmallow

    bloody-viewport

    0.0.1 • Public • Published

    viewport

    browser support

    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()

    Keywords

    none

    Install

    npm i bloody-viewport

    DownloadsWeekly Downloads

    7

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • bloodyowl