conditioner-js

ConditionerJS

ConditionerJS is a JavaScript library for loading and unloading behavior based on the current user context.

Example

Load a Google Map module only if the screen is wider than 40em and the HTML element has been seen by the user.

<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>

When the module has loaded ConditionerJS will automatically unload it once the conditions are no longer valid (for instance when the user resizes the viewport).

Documentation

The documentation and a selection of demos can be found at conditionerjs.com

Installation

Package

npm install conditioner-js

bower install conditioner-js

Manual

Add the conditioner.js file (found in the dist/dev folder) to your project. You'll also have to add the monitors and utilities folder. The dev version of the conditioner framework includes logging statements, the dist/min folder contains a minimized version without these statements to limit file size.

Running tests

Run gulp test to spin up the test suite.

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 file should contain all modules. If you want the best of both worlds you might be interested in WebPack.

• AMD Loader / CommonJS Preprocessor
• Modern browser, IE8 is supported but requires a bit of shimming.

Resources

• Frizz Free JavaScript With ConditionerJS
• Presenting ConditionerJS At JavaScript MVC #9
• Presenting ConditionerJS At Kabisa

Version History

1.2.0

• Fixed unload handler not called
• Renamed .on method to addConditionMonitor and .is method to matchesCondition
• Added .removeConditionMonitor
• Fixed problem where .is/matchesCondition method did not clean up Promise
• Removed global and multiline flags from quick regex test issue 94

1.1.0

• The supported property has been added which is used to determine if a module can be loaded at all
• Improved getModule method API
• Constructor now set when extending a module
• Performance optimisations

1.0.1

• Fixed memory leaks

1.0.0

• Bind multiple modules to the same DOM node.
• New was statement to make tests sticky element:{was visible}.
• Alternative more human readable option format data-options=“map.zoom:10, map.type:terrain”.
• Support for other AMD loaders, if you follow AMD specs you should be fine.
• Browserify support, for conditional loading you'll still need an AMD loader though.
• Separate loading state attribute for binding CSS loading animations.
• Configure the paths and attributes Conditioner uses.
• getModule and getModules methods to access moduleControllers more directly.
• New is and on methods for manually testing conditions once or continually.
• destroy method to destroy previously initialised nodes.
• Writing your own monitors is now a lot easier.
• Fixes and small improvements.

Read the 1.0.0 closed issue list for a complete overview.

Feedback

Always interested in your opinion, please let me know on Twitter or contact met via [e-mail]

License

MIT