Control media query with JavaScript.

Usage

var MediaScreen = require('media-screen');

MediaScreen()
  .width()
  .gt(640)
  .then(function () {
    // pass
  }, function () {
    // else
  });

MediaScreen:

Media screen is the main function that accepts a single argument, which is an element to watch.

Pararmeters:

element optional: default window

Accepts:

• Dom Object.

• CSS Selector.

Also accepts list of elements. not recommended

MediaScreen();   // defaults to window
// or
MediaScreen(docuemnt.getElementById('main'));
// or
MediaScreen('.container.fluid');

Options, Conditions:

MediaScreen returns a list of options and conditions methods:

width(): option

Tell the MediaScreen to watch only the width of the element.

MediaScreen()
  .width()    
  ...

width() option returns a list of conditions.

height(): option

Tell the MediaScreen to watch only the height of the element.

MediaScreen()
  .height()
  ...

height() option returns a list of conditions.

always(): condition

Tells MediaScreen to call the handler whenever the width of the element or its height or both are changed.

MediaScreen()
  .width()
  .always()
  .then(function (dimensions) {
    // passed
  });
  ...

always condition returns only the then handler.

note: when always is called without an option 'dimension', MediaScreen will watch both dimensions.

gt(): condition

Tells MediaScreen to dispatch an event when width or height is greater than the limit.

Parameters:

• limit: {Number}.

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is greater than the limit.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is less than the limit.

MediaScreen()
  .width()
  .gt(1024, true)
  .then(...)

gt() condition returns only the then handler.

lt(): condition

Tells MediaScreen to dispatch an event when width or height is less than the limit.

Parameters:

• limit: {Number}.

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is less than the limit.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is greater than the limit.

MediaScreen()
  .height()
  .lt(1024, false, true)
  .then(...)

lt() option returns only the then() handler.

in(): condition

Tells MediaScreen to dispatch an event when width or height is between min and max arguments range.

Parameters:

• min: {Number}.

• max: {Number}.

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is between min and max arguments range.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is out of min and max arguments range.

MediaScreen()
  .height()
  .in(640, 1024, false, true)
  .then(...)

in() option returns only the then() handler.

out(): condition

Tells MediaScreen to dispatch an event when width or height is out of min and max arguments range.

Parameters:

• min: {Number}.

• max: {Number}.

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is out of min and max arguments range.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is between min and max arguments range.

MediaScreen()
  .height()
  .in(640, 1024, false, true)
  .then(...)

out() option returns only the then() handler.

landscape(): condition

Tells MediaScreen to dispatch an event when the width of the element is greater than its height.

Parameters:

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width is greater than its height.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its height is greater than its width.

MediaScreen()
  .landscape(false, true)
  .then(...)

landscape() option returns only the then() handler.

portrait(): condition

Tells MediaScreen to dispatch an event when the height of the element is greater than its width.

Parameters:

• always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its height is greater than its width.

• elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width is greater than its height.

MediaScreen()
  .portrait(false, true)
  .then(...)

portrait() option returns only the then() handler.

Handler:

then():

then has two callback handlers called whenever a condition is passed unless you set the always paramter to true, then it will be called whenever the element is resized and it still passes the condition.

Parameters:

• callback: {Function}.

• elseCalback: {Function}. optional

The callbacks will have the context of the element and a single argument object describing the current dimensions of the element.

MediaScreen()
  .portrait(false, true)
  .then(function (dimensions) {
    console.log(dimensions);  // { width: 465, height: 759 }
  }, function (dimensions) {

  })
  .MediaScreen(...)
  ...

then handler returns a MediaScreen wrapper for new query.

Thank you...