Mediany

Mediany is a dependency-free library for JavaScript event listening with the same principles as underlies responsive web design: Declarative behaviour at different media query breakpoints.

Philosophy

Ethan Marcotte revolutionised the way websites were developed when in 2010 he published the article 'Response Web Design' on A List Apart. Instead of making dedicated mobile and desktop websites, one should adapt the CSS (let it 'respond') to the dimensions and capabilities of the user agent's viewport using media queries.

Mediany tries to apply those same principles to JavaScript: Adding and removing event listeners based on the viewport's specifications. If the user resizes their window, the rules are re-applied according to the new media query.

Installation

You can get it from npm:

npm install mediany

Or you can download the compressed version.

No polyfills

Mediany has no dependencies, but it does depend on some browser APIs:

• addEventListener and removeEventListener
• Array.prototype.forEach
• document.querySelectorAll
• window.matchMedia

No polyfills are supplied. All of the above are feature detected, so if you otherwise follow progressive enhancement ideals, you should be fine if the user's browser doesn't support one or more of these, but be advised. You are of course welcome to supply polyfills of your own.

Usage

Mediany declares a very simple API: a function named mediany, which takes a mediaQuery parameter. Then an object is returned with a single method: handle. It takes three parameters: selector, event and callback.

To apply a special click handler for links on TVs you can use:

mediany('tv').handle('a', 'click', function (event) {
    /* Handling here */
});

You can chain calls and handle multiple different events at the same break point:

mediany('(min-width: 500px)')
    .handle('a', 'click', function (event) {})
    .handle('button', 'click', function (event) {})
    .handle('form', 'submit', function (event) {});

To handle multiple different media queries, you can make successive mediany calls:

mediany('(min-width: 1000px)').handle('a', 'click', function (event) {});
mediany('(max-height: 800px)').handle('a', 'click', function (event) {});

Unlike CSS, handlers aren't overridden. So you can combine multiple handlers:

mediany('(min-width: 800px)').handle('a', 'click', function (event) {
    lightboxLibrary.open();
});

mediany('(min-width: 1000px)').handle('a', 'click', function (event) {
    lightboxLibrary.addHeadline();
});

The order in which they will fire will be determined by definition order: first in, first out.

This also means that if you want to prevent two handlers from firing at the same time, you need to ensure both min- and max:

mediany('(min-width: 800px) and (max-width: 999px)')
    .handle('a', 'click', function (event) {});

mediany('(min-width: 1000px)').handle('a', 'click', function (event) {});

What it doesn't do

• Tell you when moving from one breakpoint to another. You can look to BreakJS or other tools for that.
• Anything useful in Node.JS environments. This library is only really useful in browsers.