Conditioner.js

A javascript library for loading and unloading behavior based on environment conditions.

Introduction

Environment aware

Conditioner automatically loads and unloads modules based on the state of their surroundings.

You define the required state, conditioner takes it from there.

Frizz free

Modules loaded with Conditioner live on their own little islands.

Conditioner exposes an API to facilitate safe communication between modules.

Example

Suppose you have a Google Maps module which transforms an anchor to a full blown Google Map. It would make sense to only activate the maps module if there's enough real estate on the screen to render a decent sized map. And to save a request and some bits and bytes you might only want to start loading the map once the map container becomes visible to the user.

The following HTML snippet shows how to setup this Google Map using Conditioner. There are two things going on, the Map module is bound using the data-module attribute and the required conditions are set via the data-conditions attribute.

<a href="http://maps.google.com/?ll=51.741,3.822"
   data-module="ui/Map"
   data-conditions="media:{(min-width:40em)} and element:{was visible}"> ... </a>

Now the HTML is setup, we only have to tell the Conditioner to look for modules in a certain section of the DOM and we're done.

We can accomplish this by calling the init method.

conditioner.init();

The map module specified above is located right below this paragraph, it should be loading right now (if your window is at least 40ems wide). Go on and resize that browser window, Conditioner will load and unload the map on the fly.

Coast of Holland at Google Maps

Requirements

Conditioner expects an AMD loader to be available. It's been tested with RequireJS, Almond and Curl. As long as your AMD loader follows the AMD spec it should be fine.

If you're not "into" AMD and prefer Browserify that's fine too but keep in mind that your optimized/minimized file should contain all modules. If you want the best of both worlds you might be interested in WebPack

Conditioner requires a modern browser to function. Older browsers are going to need some shims to function correctly (view the gh_pages branch on GitHub for the complete list).

If you are in some way forced to support IE8 and want to use Media Queries in your conditions (for modern browsers), first call the authorities. Then, while your waiting to be rescued, add the or not media:{supported} condition to always load the module if support is lacking.

Download

Download Conditioner v1.0.1 as zip or
$ git clone https://github.com/rikschennink/conditioner.git

Author

Rik Schennink Follow @rikschennink