clarify documentation

Jesse Martin · Jesse Martin · commit 7205c3a84e36 · 2014-08-20T15:37:12.000-07:00
diff --git a/README.md b/README.md
@@ -16,3 +16,7 @@ var hello = new Notif({ text: 'Hello! This is a test message.' }); // shows the
 hello.close(); // removes the notification from the dom
 hello.show(); // renders and shows the notification again
 ```
+
+```js
+var helloAgain = new Notif({ text: 'A slightly more advanced message.' }).close({ duration: 3000 }); // renders and shows the notification, then waits 3000 ms and closes the message
+```
diff --git a/example/index.html b/example/index.html
@@ -7,17 +7,19 @@
 </head>
 <body>
 <h1>Notif example</h1>
-<p>This page will show a notification after 2 seconds, then hide it 5 seconds later.</p>
 <script type="text/javascript">
-  // show a notification 2 seconds after page load
-  window.setTimeout(function () {
-    var testNotif = new Notif({ text: 'This is a test message' });
+  // show a hello notification
+  var hello = new Notif({ text: 'Hello there!' });
 
-    // close it 5 seconds later
-    window.setTimeout(function () {
-      testNotif.close();
-    }, 5000);
+  // close it 5 seconds later
+  window.setTimeout(function () {
+    hello.close();
+  }, 5000);
 
+  // say hello again 2 seconds after page load
+  window.setTimeout(function () {
+    // a more elegant way of closing a notification after a duration of time:
+    var helloAgain = new Notif({ text: 'Hello, again.' }).close({ duration: 5000 });
   }, 2000);
 </script>
 </body>
diff --git a/notif.js b/notif.js
@@ -5,7 +5,9 @@ var Notif = (function () {
     this.text = opts.text;
     this.target = document.body;
     this.show();
+    return this;
   }
+
   Notif.prototype.render = function () {
     var container = document.createElement('div');
     container.className = 'notif-container';
@@ -23,17 +25,20 @@ var Notif = (function () {
     container.appendChild(closeBtn);
     return container;
   };
-  Notif.prototype.show = function (opts) {
+
+  Notif.prototype.show = function () {
     this.notifEl = this.render();
     this.target.appendChild(this.notifEl);
+    return this;
+  };
+
+  Notif.prototype.close = function (opts) {
     if (opts && opts.duration > 0) {
-      window.setTimeout((function () {
-        this.close();
-      }).bind(this), opts.duration);
+      window.setTimeout(this.close.bind(this), opts.duration);
+    } else {
+      this.target.removeChild(this.notifEl);
     }
-  };
-  Notif.prototype.close = function () {
-    this.target.removeChild(this.notifEl);
+    return this;
   };
 
   return Notif;
