Detect New Elements Using CSS Selectors – sentinel.js

Category: Javascript , Recommended | September 20, 2017
Author: muicss
Views Total: 161
Official Page: Go to website
Last Update: September 20, 2017
License: MIT

Preview:

Detect New Elements Using CSS Selectors – sentinel.js

Description:

sentinel.js is a small (2kb minified) JavaScript library which adds a watch for a single or multiple CSS selectors with callback and extra animation support.

How to use it:

Install the sentinel.js into your project.

$ npm install --save sentinel-js

var sentinel = require('sentinel-js');

Or directly download and load the sentinel.js script into your document.

<script src="sentinel.js"></script>

The basic usage.

  • cssSelectors: CSS selectors
  • callbackFn: callback function
  • extraAnimation: triggers extra animations
// sentinel.on(cssSelectors, callbackFn[, extraAnimation])

sentinel.on('.myElement', function(el) {
  // add an input box
  var inputEl = document.createElement('input');
  el.appendChild(inputEl);
}, 'anim1, anim2');

Remove a watch or a callback.

sentinel.off(cssSelectors[, callbackFn])

Reset all the watches and callbacks.

sentinel.reset();