Added 'sentinel-load' event, bumped version number

lxjwlt · Sep 24, 2017 · 42b694b · 42b694b
1 parent ffe1c2c
commit 42b694b
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # SentinelJS Changelog
 
+## 0.0.4 - September 24, 2017
+
+* Added 'sentinel-load' event on library load
+
 ## 0.0.3 - September 23, 2017
 
 * Removed `extraAnimations` option

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <img src="https://www.muicss.com/static/images/sentinel.svg" width="250px">
 
-SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (602 bytes).
+SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (653 bytes).
 
 ## Introduction
 
@@ -39,15 +39,15 @@ sentinel.on('custom-element', function(el) {
 });
 ```
 
-SentinelJS is 602 bytes (minified + gzipped).
+SentinelJS is 653 bytes (minified + gzipped).
 
 ## Quickstart
 
 ```html
 <!doctype html>
 <html>
   <head>
-    <script src="//cdn.rawgit.com/muicss/sentineljs/0.0.3/dist/sentinel.min.js"></script>
+    <script src="//cdn.rawgit.com/muicss/sentineljs/0.0.4/dist/sentinel.min.js"></script>
     <script>
       // use the `sentinel` global object
       sentinel.on('.my-div', function(el) {
@@ -187,7 +187,7 @@ To make it easy to use SentinelJS asynchronously, the library dispatches a `sent
 <!doctype html>
 <html>
   <head>
-    <script src="//cdn.rawgit.com/muicss/sentineljs/0.0.3/dist/sentinel.min.js" async></script>
+    <script src="//cdn.rawgit.com/muicss/sentineljs/0.0.4/dist/sentinel.min.js" async></script>
     <script>
       // use the `sentinel-load` event to detect load time
       document.addEventListener('sentinel-load', function() {

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "sentinel-js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "authors": [
     "Andres Morey <andres@muicss.com>"

diff --git a/dist/sentinel.js b/dist/sentinel.js
@@ -1,6 +1,7 @@
-// define global object
-sentinel = this.sentinel || (function () {
-var isArray = Array.isArray,
+if (!this.sentinel) (function(doc, ev) {
+  // define global object
+  sentinel = (function(){
+    var isArray = Array.isArray,
     selectorToAnimationMap = {},
     animationCallbacks = {},
     styleEl,
@@ -133,4 +134,10 @@ return {
   }
 };
 
-})();
+  })();
+
+  // dispatch load event
+  ev = doc.createEvent('HTMLEvents');
+  ev.initEvent('sentinel-load', false, false);
+  doc.dispatchEvent(ev);
+})(document);
diff --git a/dist/sentinel.min.js b/dist/sentinel.min.js
diff --git a/examples/assets/sentineljs/sentinel.js b/examples/assets/sentineljs/sentinel.js
@@ -1,6 +1,7 @@
-// define global object
-sentinel = this.sentinel || (function () {
-var isArray = Array.isArray,
+if (!this.sentinel) (function(doc, ev) {
+  // define global object
+  sentinel = (function(){
+    var isArray = Array.isArray,
     selectorToAnimationMap = {},
     animationCallbacks = {},
     styleEl,
@@ -133,4 +134,10 @@ return {
   }
 };
 
-})();
+  })();
+
+  // dispatch load event
+  ev = doc.createEvent('HTMLEvents');
+  ev.initEvent('sentinel-load', false, false);
+  doc.dispatchEvent(ev);
+})(document);
diff --git a/examples/assets/sentineljs/sentinel.min.js b/examples/assets/sentineljs/sentinel.min.js
diff --git a/examples/async-example.html b/examples/async-example.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <script src="assets/sentineljs/sentinel.js" async></script>
+    <script>
+      document.addEventListener('sentinel-load', function() {
+        console.log('sentinel-load');
+
+        // use the `sentinel` global object
+        sentinel.on('.my-div', function(el) {
+          el.innerHTML = 'The sentinel is always watching.';
+        });
+      });
+
+      // add a new div to the DOM
+      function addDiv() {
+        var newEl = document.createElement('div');
+        newEl.className = 'my-div';
+        document.body.appendChild(newEl);
+      }
+    </script>
+  </head>
+  <body>
+    <button onclick="addDiv();">Add another DIV</button>
+    <div class="my-div"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sentinel-js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "description": "JS library that detects new DOM nodes using CSS selectors",
   "keywords": [

diff --git a/test/assets/sentineljs/sentinel.js b/test/assets/sentineljs/sentinel.js
@@ -1,6 +1,7 @@
-// define global object
-sentinel = this.sentinel || (function () {
-var isArray = Array.isArray,
+if (!this.sentinel) (function(doc, ev) {
+  // define global object
+  sentinel = (function(){
+    var isArray = Array.isArray,
     selectorToAnimationMap = {},
     animationCallbacks = {},
     styleEl,
@@ -133,4 +134,10 @@ return {
   }
 };
 
-})();
+  })();
+
+  // dispatch load event
+  ev = doc.createEvent('HTMLEvents');
+  ev.initEvent('sentinel-load', false, false);
+  doc.dispatchEvent(ev);
+})(document);
diff --git a/test/assets/sentineljs/sentinel.min.js b/test/assets/sentineljs/sentinel.min.js
diff --git a/umd-templates/web.js b/umd-templates/web.js
@@ -1,4 +1,11 @@
-// define global object
-<%= namespace %> = this.sentinel || (function (<%= param %>) {
-<%= contents %>
-})(<%= global %>);
+if (!this.<%= namespace %>) (function(doc, ev) {
+  // define global object
+  <%= namespace %> = (function(){
+    <%= contents %>
+  })();
+
+  // dispatch load event
+  ev = doc.createEvent('HTMLEvents');
+  ev.initEvent('sentinel-load', false, false);
+  doc.dispatchEvent(ev);
+})(document);