Package Exports

conditioner-core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (conditioner-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Conditioner

Declaratively link JavaScript modules to your elements and mount them based on contextual parameters like viewport size and element visibilty.

Features

Progressive Enhancement!
Declarative way to bind logic to elements
Perfectly fits with Responsive Design
Dynamic import support
No dependencies
Small footprint
Easy to extend with plugins

Example

Mount a SectionToggler module, but only do it on narrow viewports.

<h2 data-module="/ui/SectionToggler.js"
    data-context="@media (max-width:30em)"> ... </h2>

Conditioner will unmount the SectionToggler when the context is no longer fitting. So when the user resizes or rotates the viewport and suddenly it's wider than 30em the SectionToggler will be unmounted.

Installation

Install from npm:

npm install conditioner-core --save

Setup

When dynamic imports are supported Conditioner can be imported using the import statement.

Importing Conditioner in a page using the dynamic import statement:

<script>
(async () => {

    // get conditioner module
    const conditioner = await import('./conditioner-nano.js');

    // parse the DOM
    conditioner.hydrate( document.documentElement );

})();
</script>

Using Conditioner in a module:

import * as conditioner from 'conditioner-core';

conditioner.hydrate( document.documentElement );

API

Method	Description
`hydrate(context)`	Mount modules in a certain part of the DOM
`addPlugin(plugin)`	Add a plugin to Conditioner to extend its core functionality

Mount all modules on the page.

conditioner.hydrate( document.documentElement );

Resources

Version 1.x

Version History

2.0.0

Total rewrite of Conditioner, resulting in an ES6 codebase and a smaller and more plugin oriented API.

1.2.3

Replaced this with window to fix Browserify root problems

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.

License

MIT