JQuery Helper Constructor for Responsive Design

Installation

$ bower install jquery.responsive

Usage

// Dispatcher instance with default breakpoint set
var dispatcher = $.responsive();
dispatcher.on('resize', function() {
    // Do something...
});

Example

CSS pseudo elements set for different resolutions

body:after {
    display: block;
    content: "mobile";
    font-size: 0;
}

@media (min-width: 768px) {
    body:after {
        display: block;
        content: "tablet"
    }
}

@media (min-width: 992px) {
    body:after {
        display: block;
        content: "desktop"
    }
}

@media (min-width: 1200px) {
    body:after {
        display: block;
        content: "largeDesktop"
    }
}

// Initializing dispatcher with media queries set
var dispatcher = $.responsive({
  breakpoints: {
      mobile: 'mobile',
      tablet: 'tablet',
      desktop: 'desktop',
      largeDesktop: 'largeDesktop'
  }
});

// Triggers 'change' event each time breakpoint changed
dispatcher.on('change', function() {
    alert('Break point changed');
});

// Conditional event handling via available handlers

var $button1 = $('#button1');
var $button2 = $('#button2');
var $button3 = $('#button3');

var customFn = function (currentView) {
    alert('View: ' + currentView);
};

// Execute function for particular breakpoints in the array
$button1.on('click', function() {
    dispatcher.if(['mobile', 'desktop'], customFn, ['mobile or desktop']);
});

// Execute function for particular breakpoints excepting those which are in the array
$button2.on('click', function() {
    dispatcher.not(['mobile', 'desktop'], customFn, ['Not mobile or desktop']);
});

// Execute function for the single breakpoint which was generated on creation of the instance
// according to the specified configuration breakpoints names
$button3.on('click', function() {
    dispatcher.ifMobile(customFn, ['mobile']);
});

// Getting current state for static dispatcher
alert(dispatcher.getBreakpoint());

// Getting current state for dynamic dispatcher
alert(dispatcher.state);

Options

Defaults

These options will be used by default.

var DEFAULT_SETTINGS = {
    breakpoints: [
        {
            name: 'mobile',
            value: 0
        },
        {
            name: 'tablet',
            value: 768
        },
        {
            name: 'desktop',
            value: 992
        },
        {
            name: 'largeDesktop',
            value: 1200
        }
    ],
    resize: true,
    proxy: null,
    interval: 100,
    indicator: document.body
};

Options Table

Key	Type	Default	Required	Description
breakpoints	Array of objects, Object	'mobile' => 0, 'tablet' => 768, 'desktop' => 992, 'largeDesktop' => 1200	No	Specifies a set of available breakpoints (states)
resize	Boolean	true	No	Specifies id dispatcher will trigger events on resize (dynamic or static dispatcher)
proxy	Function	null	No	Specifies proxy function, such as deBounce or throttle
interval	Number	100	No	Specifies interval for proxy function
indicator	DOM element	document.body	Yes, when using media queries	Specifies element with CSS preset of after pseudo-elements for different resolutions

Methods

Method	Description
is+'media'(Function, Array)	Calls function for particular breakpoint with array as arguments, such as 'mobile' = > 'isMobile' etc.
if(Array, Function, Array)	Calls function for particular array of breakpoints
not(Array, Function, Array)	Calls function for particular set of breakpoints excepting those were set in the array
getBreakpoint()	Returns current breakpoint
on(String, Function)	Event emitter listener

Events

Event	Description
resize	Called whenever the size of the user window changes
change	Called whenever breakpoint (state) changed
change.[state]	Triggered each time breakpoint (state) changed. Could be used for listening to particular state

Development dependencies installation

$ npm install

installs gulp configuration, jasmine testing framework and other things from package.json

Tests

$ karma start

License

MIT: http://rem.mit-license.org