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 are loaded separate from each other preventing them from getting into fights.

Conditioner exposes an API that allows for structured peace negotiations 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:{seen}"> ... </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 is based on RequireJS so you'll need RequireJS to make it fly. RequireJS is awesome at what it does, to not leverage that awesomeness and write a module loader of our own would just be silly. Get RequireJS

Conditioner requires a modern browser to function. If you require IE8 support and want to use media queries as conditions you can use the or not media:{supported} condition to still load a module on IE8.

Download

As the library is still being worked on I would advice not to use it in any big project for now.

The latest version of the library can be downloaded below:

The library does not include the default tests as these might differ for each project. At the moment the following tests are available for download.

License

MIT license