From ffe1c2ce56d35547318b84ea20a6c091fa35eb99 Mon Sep 17 00:00:00 2001 From: Andres Morey Date: Sun, 24 Sep 2017 01:41:08 +0000 Subject: [PATCH] New version with improved handling for custom animations * Removed support for `extraAnimations` * Added support for custom animation names with "!" prefix * Decreased payload size * Bumped version number --- #README.md# | 196 ------------ CHANGELOG.md | 7 +- README.md | 39 ++- bower.json | 2 +- dist/sentinel.js | 290 ++++++++---------- dist/sentinel.min.js | 2 +- dist/sentinel.umd.js | 284 ++++++++--------- examples/assets/sentineljs/sentinel.js | 290 ++++++++---------- examples/assets/sentineljs/sentinel.min.js | 2 +- ...ation.html => custom-animation-names.html} | 24 +- gulpfile.js | 1 - package.json | 2 +- src/sentinel.js | 284 ++++++++--------- test/assets/sentineljs/sentinel.js | 290 ++++++++---------- test/assets/sentineljs/sentinel.min.js | 2 +- test/tests.js | 83 +++-- umd-templates/web.js | 6 +- 17 files changed, 729 insertions(+), 1075 deletions(-) delete mode 100644 #README.md# rename examples/{extra-animation.html => custom-animation-names.html} (66%) diff --git a/#README.md# b/#README.md# deleted file mode 100644 index 6fec513..0000000 --- a/#README.md# +++ /dev/null @@ -1,196 +0,0 @@ -# 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 4830812..55bb7b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # SentinelJS Changelog +## 0.0.3 - September 23, 2017 + +* Removed `extraAnimations` option +* Added support for custom animation names with "!" prefix +* Decreased size of payload + ## 0.0.2 - September 22, 2017 * New release to update NPM README @@ -7,4 +13,3 @@ ## 0.0.1 - September 18, 2017 * First release - diff --git a/README.md b/README.md index 4d70bf9..ffd85d5 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ -SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (682 bytes). +SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (602 bytes). ## Introduction @@ -18,7 +18,7 @@ SentinelJS is a tiny JavaScript library that makes it easy to set up a watch fun ``` -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. +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 trigger SentinelJS watches from your CSS using custom animation names (see below). 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) @@ -39,7 +39,7 @@ sentinel.on('custom-element', function(el) { }); ``` -SentinelJS is 682 bytes (minified + gzipped). +SentinelJS is 602 bytes (minified + gzipped). ## Quickstart @@ -47,7 +47,7 @@ SentinelJS is 682 bytes (minified + gzipped). - + ``` #### off() - Remove a watch or a callback @@ -176,7 +187,7 @@ To make it easy to use SentinelJS asynchronously, the library dispatches a `sent - + -