JSPM – lifecycle-events@0.2.1

Package Exports

lifecycle-events

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 (lifecycle-events) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lifecycle events

Polyfill-like lib enabling lifecycle events for HTML elements: enteredView, leftView, attached and detached.

It is 2.1 kB gzipped.

A. Use as polyfill:

Include lifecycle.min.js:

<script src="lifecycle.min.js"></script>
<script>lifecycle('*');</script>

<script>
  $('.my-element').on('attached', function(){});
  $('.my-other-element').on('enteredView', function(){});
</script>

B. Custom use:

Install browserify module:

$ npm install lifecycle-events

Code:

var lifecycle = require('lifecycle-events');


//Enable lifecycle events for the Node/NodeList passed
lifecycle.enable(element);
element.addEventListener('enteredView', function(){});
element.addEventListener('attached', function(){});


//Enable only viewport events
lifecycle.enableViewport('.item');


//Enable only mutation events within container passed
lifecycle.enableMutation('.item', '.feed');


//Disable lifecycle events for previously added selector
lifecycle.disable('*');


//Disable all lifecycle events
lifecycle.disable();

Customize callback names

By default, Polymer’s event names are used for events. You can redefine event names, defined in lifecycle.defaults:

lifecycle.defaults.attachedCallbackName = 'appended';
lifecycle.defaults.detachedCallbackName = 'removed';
lifecycle.defaults.enteredViewCallbackName = 'appeared';
lifecycle.defaults.leftViewCallbackName = 'disappeared';

TODO

Optimize enabled selectors. For example, avoid extra enabling if you have '*' enabled. And so on.

License

MIT