<commit_before># media-query-facade

[![build status](https://img.shields.io/travis/tanem/media-query-facade/master.svg?style=flat-square)](https://travis-ci.org/tanem/media-query-facade)
[![npm version](https://img.shields.io/npm/v/media-query-facade.svg?style=flat-square)](https://www.npmjs.com/package/media-query-facade)
[![npm downloads](https://img.shields.io/npm/dm/media-query-facade.svg?style=flat-square)](https://www.npmjs.com/package/media-query-facade)
[![dependency status](https://david-dm.org/tanem/media-query-facade.svg?style=flat-square)](https://david-dm.org/tanem/media-query-facade)
[![devDependency status](https://david-dm.org/tanem/media-query-facade/dev-status.svg?style=flat-square)](https://david-dm.org/tanem/media-query-facade#info=devDependencies)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/media-query-facade.svg)](https://saucelabs.com/u/media-query-facade)

Do stuff via JavaScript when the media queries on a document change. For efficiency it uses [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia) under the hood.

## Installation

```
$ npm install media-query-facade --save
```

## Example

```js
var MQFacade = require('media-query-facade');

var mq = new MQFacade({
  small: 'only screen and (max-width: 480px)',
  medium: 'only screen and (min-width: 480px) and (max-width: 720px)'
});

mq.on('small', changeColour('blue'));
mq.on('medium', changeColour('green'));
mq.on('only screen and (min-width: 720px)', changeColour('red'));

function changeColour(colour){
  return function(){
    document.body.style.backgroundColor = colour;
  };
}
```

There is also an example which uses [browserify](http://browserify.org) to make this work for the browser:

```
$ npm run example
```

## API

### var mq = new MQFacade(aliases)

Initialise a new `MQFacade`. Media query `aliases` may also be provided up front.

### mq.registerAlias(alias, query)

Register an `alias` for a `query`, or register a number of aliases at once via an object.

```js
mq.registerAlias('small', '(max-width: 100px)');
mq.registerAlias({
  small: '(max-width: 100px)',
  medium: '(max-width: 200px)'
});
```

### mq.on(query, callback, context)

Register a `callback` which will be executed with the given `context` on entry of the given `query` or alias. If `context` is not specified, it will default to the `mq` instance.

```js
mq.on('(max-width: 400px)', function(){});
mq.on('smartphones', function(){}, {});
```

### mq.off(query, callback, context)

Remove all callbacks for all queries:

```js
mq.off();
```

Remove all callbacks for a `query` or alias:

```js
mq.off('(max-width: 400px)');
```

Remove a `callback` for a `query` or alias:

```js
mq.off('(max-width: 400px)', function(){});
```

Remove a `callback` with a `context` for a `query` or alias:

```js
mq.off('(max-width: 400px)', function(){}, {});
```

## Testing<commit_msg>Update README code style<commit_after># media-query-facade

[![build status](https://img.shields.io/travis/tanem/media-query-facade/master.svg?style=flat-square)](https://travis-ci.org/tanem/media-query-facade)
[![npm version](https://img.shields.io/npm/v/media-query-facade.svg?style=flat-square)](https://www.npmjs.com/package/media-query-facade)
[![npm downloads](https://img.shields.io/npm/dm/media-query-facade.svg?style=flat-square)](https://www.npmjs.com/package/media-query-facade)
[![dependency status](https://david-dm.org/tanem/media-query-facade.svg?style=flat-square)](https://david-dm.org/tanem/media-query-facade)
[![devDependency status](https://david-dm.org/tanem/media-query-facade/dev-status.svg?style=flat-square)](https://david-dm.org/tanem/media-query-facade#info=devDependencies)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/media-query-facade.svg)](https://saucelabs.com/u/media-query-facade)

Do stuff via JavaScript when the media queries on a document change. For efficiency it uses [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia) under the hood.

## Installation

```
$ npm install media-query-facade --save
```

## Example

```js
var MQFacade = require('../lib/media-query-facade')

var mq = new MQFacade({
  small: 'only screen and (max-width: 480px)',
  medium: 'only screen and (min-width: 480px) and (max-width: 720px)'
})

mq.on('small', changeColour('blue'))
mq.on('medium', changeColour('green'))
mq.on('only screen and (min-width: 720px)', changeColour('red'))

function changeColour (colour) {
  return function () {
    document.body.style.backgroundColor = colour
  }
}
```

There is also an example which uses [browserify](http://browserify.org) to make this work for the browser:

```
$ npm run example
```

## API

### var mq = new MQFacade(aliases)

Initialise a new `MQFacade`. Media query `aliases` may also be provided up front.

### mq.registerAlias(alias, query)

Register an `alias` for a `query`, or register a number of aliases at once via an object.

```js
mq.registerAlias('small', '(max-width: 100px)')
mq.registerAlias({
  small: '(max-width: 100px)',
  medium: '(max-width: 200px)'
})
```

### mq.on(query, callback, context)

Register a `callback` which will be executed with the given `context` on entry of the given `query` or alias. If `context` is not specified, it will default to the `mq` instance.

```js
mq.on('(max-width: 400px)', function () {})
mq.on('smartphones', function () {}, {})
```

### mq.off(query, callback, context)

Remove all callbacks for all queries:

```js
mq.off()
```

Remove all callbacks for a `query` or alias:

```js
mq.off('(max-width: 400px)')
```

Remove a `callback` for a `query` or alias:

```js
mq.off('(max-width: 400px)', function () {})
```

Remove a `callback` with a `context` for a `query` or alias:

```js
mq.off('(max-width: 400px)', function () {}, {})
```

## Testing
{'fraction_non_alphanumeric': 0.1883016931759877, 'fraction_numerical': 0.011287839917906618, 'mean_word_length': 4.931034482758621, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 26, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6552023', 'n_tokens_mistral': 2167, 'n_tokens_neox': 2018, 'n_words': 475}