_ _        ____ _               _
   _ __ ___   ___  __| (_) __ _ / ___| |__   ___  ___| | __
  | '_ ` _ \ / _ \/ _` | |/ _` | |   | '_ \ / _ \/ __| |/ /
  | | | | | |  __/ (_| | | (_| | |___| | | |  __/ (__|   <
  |_| |_| |_|\___|\__,_|_|\__,_|\____|_| |_|\___|\___|_|\_\

This is a utility leveraging matchMedia to run code on entry and exit from mediaqueries. It also uses browser resize as a fallback for browsers that don't support matchMedia.

#angular-mediaCheck

angular-mediaCheck is sparkbox's mediaCheck updated and rewritten in AngularJS.

###Full Documentation and Demo

##Browser Support angular-mediaCheck was built with AngularJS v1.3.x (and tested/upgraded with 1.4.x) but can be used with older versions of Angular.

angular-mediaCheck has been tested in evergreen browsers and Internet Explorer IE9+. If you need to support mediaqueries and IE8 (heaven help you) using AngularJS 1.2.x or earlier, I recommend using an alternate option like respond.js + jRespond.

##Quick Look The factory instance accepts functions that will be run on mediaquery events such as enter, exit, or change (either enter / exit). Inject the mediaCheck module into your app and inject the mediaCheck factory into your controller or directive. Create an instance by assigning the mediaCheck.init() function to a variable and passing options for desired mediaqueries. mq can be passed as a parameter to the enter/exit/change functions to access the mediaQueryList object.

JavaScript:

var myApp = angular.module('myApp', ['mediaCheck']);

myApp.controller('MyCtrl', ['$scope', 'mediaCheck', function($scope, mediaCheck) {
	var mc = mediaCheck.init({
		scope: $scope,
		media: [
			{
				mq: '(max-width: 768px)', 
	            enter: function(mq) {
	                console.log('enter mobile', mq);
	            }, 
	            exit: function(mq) { 
	                console.log('exit mobile', mq); 
	            }, 
	            change: function(mq) { 
	                console.log('entered or exited mobile', mq); 
	            }
	        },
	        {
                mq: '(min-width: 1200px)', 
                enter: function(mq) {
                    console.log('entering large', mq);
                }, 
                exit: function(mq) { 
                    console.log('exiting large', mq); 
                }
            }
		], 
		debounce: 200
	});
	
	$scope.checkMobileStatus = function() {
		mc.matchCurrent('(max-width: 768px)');
	};
}]);

For full documentation and demo, please see angular-mediaCheck Documentation.

##Options

An options object should be passed as a parameter to the instance of mediaCheck.init():

var mc = mediaCheck.init({
	scope: $scope,
	media: {
		mq: string, 
		enter: function,
		exit: function,
		change: function
    }, 
	debounce: int
});

Multiple mediaqueries can be defined in a media array of objects if desired.

--

###scope

• Type: AngularJS scope object*
• Default: none

This should be your directive or controller's scope. mediaCheck does not bind anything to the $scope, but it does need access to it in order to unbind / clean up matchMedia (and associated fallback) listeners when the $scope is $destroyed. This will prevent leaks and pollution so that you do not have to remove the listeners manually in your Angular code.

*required if mediaCheck is being initialized in $scopes that will be destroyed and reinitialized throughout the application.

--

media

• Type: object | Array (required)
• Default: none

Pass a single settings object (for one mediaquery) OR an array of settings objects (for multiple mediaqueries).

{
	mq: string,
	enter: function,
	exit: function,
	change: function
}

// ...or:

[
	{
		mq: string,
		enter: function,
		exit: function,
		change: function
	},
	{
		mq: string,
		enter: function,
		exit: function,
		change: function
	}
]

A settings object should contain the following:

#####mq

• Type: string (required)
• Default: none

This is the mediaquery that will trigger the specified action(s). It should be in the form:

• (min-width: 35em)
• (max-width: 768px)

The use of (min-width and max-width) formats is not supported. These types of mediaqueries should be split into separate declarations.

#####enter

• Type: function
• Default: none

This function will execute once when entering the specified mediaquery.

#####exit

• Type: function
• Default: none

This function will execute once when exiting the specified mediaquery.

#####change

• Type: function
• Default: none

This function will execute once when the mediaquery changes state (enter OR exit).

Note: Functions are already wrapped in a $timeout in the mediaCheck service to prevent $digest errors when updating scope models. You do NOT need to wrap your functions in $timeout.

--

###debounce (IE9, Mobile IE)

• Type: integer
• Units: milliseconds
• Default: 150

This is only needed when using browsers that do not support matchMedia (IE9 and below). It sets the window resize debounce speed. This will not affect modern browsers with matchMedia support.

##matchCurrent Method

Parameter: mediaquery (optional)

• Type: string
• Default: none

The matchCurrent() method will check mediaquery breakpoints (as defined in init() options) and execute the appropriate assigned functions immediately based on the current viewport size.

The mediaquery parameter is optional. If the parameter is present, matchCurrent(mediaquery) will only check the specified mediaquery.

If more than one mediaquery was defined in init() options and NO mediaquery parameter is specified, mediaCheck will match against and execute functions for any / all mediaqueries defined in the instance options.

// create mediaCheck instance
var mc = mediaCheck.init({...});

// checks only 768 mediaquery
mc.matchCurrent('(max-width: 768px)');

// checks all mediaqueries defined in init()
mc.matchCurrent();