From 6b1d26baeb69d044c531ec7fbd0d21e1d23eb5a7 Mon Sep 17 00:00:00 2001 From: Andres Morey Date: Fri, 22 Sep 2017 13:48:47 +0000 Subject: [PATCH] bumped version number --- #README.md# | 196 +++++++++++++++++++++ CHANGELOG.md | 4 + README.md | 4 +- bower.json | 2 +- dist/sentinel.js | 10 +- dist/sentinel.min.js | 2 +- dist/sentinel.umd.js | 10 +- examples/assets/sentineljs/sentinel.js | 10 +- examples/assets/sentineljs/sentinel.min.js | 2 +- examples/extra-animation.html | 36 ++++ package.json | 2 +- src/sentinel.js | 10 +- test/assets/sentineljs/sentinel.js | 10 +- test/assets/sentineljs/sentinel.min.js | 2 +- 14 files changed, 268 insertions(+), 32 deletions(-) create mode 100644 #README.md# create mode 100644 examples/extra-animation.html diff --git a/#README.md# b/#README.md# new file mode 100644 index 0000000..6fec513 --- /dev/null +++ b/#README.md# @@ -0,0 +1,196 @@ +# Sentineljs + + + +SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (682 bytes). + +## Introduction + +SentinelJS is a tiny JavaScript library that makes it easy to set up a watch function that will notify you anytime a new node is added to the DOM that matches a given CSS rule. Among other things, you can take advantage of this to implement custom-elements and make other in-place modifications to new DOM elements: + +```html + + +``` + +SentinelJS uses dynamically-defined CSS animation rules (`@keyframes`) to hook into browser `animationstart` events when a new node matching a given CSS selector is added to the DOM. In general this should be more performant than using a Mutation Observer to watch the entire `document` tree for changes and iterating through all new child nodes recursively. SentinelJS performs one hash key lookup on calls to the `animationstart` event so the performance overhead is minimal. If you define the `animation-name` property on a CSS rule that overlaps with the selector in your SentinelJS watch function then only one of those animations will be called which could cause unexpected behavior. To get around this you can use the `extraAnimations` argument to SentinelJS to add extra animation names to the SentinelJS CSS. + +The latest version of SentinelJS can be found in the `dist/` directory in this repository: + * [sentinel.js](https://raw.githubusercontent.com/muicss/sentineljs/master/dist/sentinel.js) + * [sentinel.min.js](https://raw.githubusercontent.com/muicss/sentineljs/master/dist/sentinel.min.js) + +You can also use it as a CJS or AMD module: + +```bash +$ npm install --save sentinel-js +``` + +```javascript +var sentinel = require('sentinel-js'); + +sentinel.on('custom-element', function(el) { + // A new has been detected + el.innerHTML = 'The sentinel is always watching.'; +}); +``` + +SentinelJS is 682 bytes (minified + gzipped). + +## Quickstart + +```html + + + + + + + + +
+ + +``` + +[View Demo »](https://jsfiddle.net/muicss/rbqLbjzf/) + +## Browser Support + + * IE10+ + * Opera 12+ + * Safari 5+ + * Chrome + * Firefox + * iOS 6+ + * Android 4.4+ + +## Documentation + +### API + +#### on() - Add a watch for new DOM nodes + +``` +on(cssSelectors, callbackFn[, extraAnimation]) + + * cssSelectors {Array or String} - A single selector string or an array + * callbackFn {Function} - The callback function + * extraAnimation {String} - Trigger extra animations (e.g. "anim1, anim2") (optional) + +Examples: + +1. Set up a watch for a single CSS selector: + + sentinel.on('.my-div', function(el) { + // add an input box + var inputEl = document.createElement('input'); + el.appendChild(inputEl); + }); + +2. Set up a watch for multiple CSS selectors: + + sentinel.on(['.my-div1', '.my-div2'], function(el) { + // add an input box + var inputEl = document.createElement('input'); + el.appendChild(inputEl); + }); + +3. Trigger extra animations: + + sentinel.on('.my-div', function(el) { + // add an input box + var inputEl = document.createElement('input'); + el.appendChild(inputEl); + }, 'anim1, anim2'); +``` + +#### off() - Remove a watch or a callback + +``` +off(cssSelectors[, callbackFn]) + + * cssSelectors {Array or String} - A single selector string or an array + * callbackFn {Function} - The callback function you want to remove the watch for (optional) + +Examples: + +1. Remove a callback: + + function myCallback(el) { /* do something awesome */ } + + // add listener + sentinel.on('.my-div', myCallback); + + // remove listener + sentinel.off('.my-div', myCallback); + +2. Remove a watch: + + // add multiple callbacks + sentinel.on('.my-div', function fn1(el) {}); + sentinel.on('.my-div', function fn2(el) {}); + + // remove all callbacks + sentinel.off('.my-div'); +``` + +#### reset() - Remove all watches and callbacks + +``` +reset() + +Examples: + +1. Remove all watches and callbacks from the sentinel library: + + // add multiple callbacks + sentinel.on('.my-div1', function fn1(el) {}); + sentinel.on('.my-div2', function fn2(el) {}); + + // remove all watches and callbacks + sentinel.reset(); +``` + +### Async Loading + +To make it easy to use SentinelJS asynchronously, the library dispatches a `sentinel-load` event that will notify you when the library is ready to be used: + +```html + + + + + + + +
+ + +``` + +Icons made by [Freepik](http://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f8340c..4830812 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # SentinelJS Changelog +## 0.0.2 - September 22, 2017 + +* New release to update NPM README + ## 0.0.1 - September 18, 2017 * First release diff --git a/README.md b/README.md index dd5d938..4d70bf9 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ SentinelJS is 682 bytes (minified + gzipped). - + + + + + + +
test
+ + diff --git a/package.json b/package.json index 0de9ddf..c6a00f5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sentinel-js", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "description": "JS library that detects new DOM nodes using CSS selectors", "keywords": [ diff --git a/src/sentinel.js b/src/sentinel.js index 977085f..34f82ef 100644 --- a/src/sentinel.js +++ b/src/sentinel.js @@ -144,16 +144,16 @@ function resetFn() { * @param {Event} ev - The DOM event */ function animationStartHandler(ev) { - var callbacks = animationCallbacks[ev.animationName] || [], - l = callbacks.length; - - // exit if a callback hasn't been registered - if (!l) return; + var callbacks = animationCallbacks[ev.animationName]; + + // exit if callbacks haven't been registered + if (!callbacks) return; // stop other callbacks from firing ev.stopImmediatePropagation(); // iterate through callbacks + var l = callbacks.length; for (var i=0; i < l; i++) callbacks[i](ev.target); } diff --git a/test/assets/sentineljs/sentinel.js b/test/assets/sentineljs/sentinel.js index 83ede1d..ea9c495 100644 --- a/test/assets/sentineljs/sentinel.js +++ b/test/assets/sentineljs/sentinel.js @@ -150,16 +150,16 @@ function resetFn() { * @param {Event} ev - The DOM event */ function animationStartHandler(ev) { - var callbacks = animationCallbacks[ev.animationName] || [], - l = callbacks.length; - - // exit if a callback hasn't been registered - if (!l) return; + var callbacks = animationCallbacks[ev.animationName]; + + // exit if callbacks haven't been registered + if (!callbacks) return; // stop other callbacks from firing ev.stopImmediatePropagation(); // iterate through callbacks + var l = callbacks.length; for (var i=0; i < l; i++) callbacks[i](ev.target); } diff --git a/test/assets/sentineljs/sentinel.min.js b/test/assets/sentineljs/sentinel.min.js index c409314..291cfae 100644 --- a/test/assets/sentineljs/sentinel.min.js +++ b/test/assets/sentineljs/sentinel.min.js @@ -1 +1 @@ -sentinel=function(){function e(){var e=document,n=e.head;["animationstart","mozAnimationStart","webkitAnimationStart"].map(function(n){e.addEventListener(n,r,!0)}),a=e.createElement("style"),a.id="sentineljs",n.insertBefore(a,n.firstChild),o=a.sheet,s=!0}function n(n,t,i){t&&(s||e(),n=Array.isArray(n)?n:[n],n.map(function(e){var n=l[e];if(!n){var r,a;n="sentinel-"+Math.random().toString(16).slice(2),r="@keyframes "+n+"{from{transform:none;}to{transform:none;}}",a=o.cssRules.length,o.insertRule(r,a),o.cssRules[a]._id=e,r=e+"{animation-duration:0.0001s;animation-name:"+n,i&&(r+=","+i),r+=";}",a+=1,o.insertRule(r,a),o.cssRules[a]._id=e,l[e]=n}(f[n]=f[n]||[]).push(t)}))}function t(e,n){e=Array.isArray(e)?e:[e],e.map(function(e){var t=l[e];if(t){var i,r=f[t];if(n)for(i=r.length;i--;)r[i]===n&&r.splice(i,1);else r=[];if(!r.length){var a=o.cssRules;for(i=a.length;i--;)a[i]._id==e&&o.deleteRule(i);delete l[e],delete f[t]}}})}function i(){l={},f={},s=!1;var e=a.parentNode;e&&e.removeChild(a)}function r(e){var n=f[e.animationName]||[],t=n.length;if(t){e.stopImmediatePropagation();for(var i=0;i