Readability with comments

Adding comments for better readability
Add callback support on toast click

Author: apvarun

README.md

@@ -25,7 +25,13 @@ Add script at the bottom of the page
 
 ## Documentation
 
-*(coming soon)*
+```javascript
+Toastify({
+    text: "This is a toast",
+    duration: 3000,
+    
+}).showToast();
+```
 
 ## License
 

index.html

@@ -24,15 +24,20 @@ <h1>Toastify</h1>
             <h2>Usage</h2>
             <code>
                 <p>Toastify({</p>
-                <p class="pad-left">text: "Happy toasting!",</p>
-                <p class="pad-left">duration: 500</p>
+                <p class="pad-left">text: "This is a toast",</p>
+                <p class="pad-left">duration: 3000</p>
                 <p>}).showToast();</p>
             </code>
         </div>
+        <div class="repo">
+            <a class="github-button" href="https://github.com/apvarun/toastify-js" data-icon="octicon-star" data-size="large" aria-label="Star apvarun/toastify-js on GitHub">Star</a>
+        </div>
     </div>
 </body>
 
 <script type="text/javascript" src="src/toastify.js"></script>
 <script type="text/javascript" src="script.js"></script>
+<!-- GitHub Star button -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
 
-</html>
+</html>

script.css

@@ -54,3 +54,6 @@ code p{
     color: #ffffff;
     background-color: #424242;
 }
+.repo{
+    margin:10px;
+}

script.js

@@ -1,10 +1,17 @@
+// Options for the toast
 var options = {
     text: "Happy toasting!",
-    duration: 500
+    duration: 1500,
+    callback: function(){
+        this.remove();
+        Toastify.reposition();
+    }
 };
 
+// Initializing the toast
 var myToast = Toastify(options);
 
+// Toast after delay
 setTimeout(function () {
     myToast.showToast();
 }, 2000);
@@ -14,9 +21,10 @@ Toastify({
     duration: 5000
 }).showToast();
 
+// Displaying toast on manual action `Try`
 document.getElementById('new-toast').addEventListener('click', function () {
     Toastify({
         text: "This is a toast",
-        duration: 5000
+        duration: 3000
     }).showToast();
 });

src/toastify.js

@@ -1,91 +1,144 @@
-; (function (global, root) {
+; (function (global) {
 
+    // Object initialization
     var Toastify = function (options) {
 
+        // Returning a new init object
         return new Toastify.lib.init(options);
     },
+        // Library version
         version = "0.0.1";
 
+    // Defining the prototype of the object
     Toastify.lib = Toastify.prototype = {
 
         toastify: version,
 
         constructor: Toastify,
 
+        // Initializing the object with required parameters
         init: function (options) {
 
+            // Verifying and validating the input object
             if (!options) {
                 options = {};
             }
 
+            // Creating the options object
             this.options = {};
 
+            // Validating the options
             this.options.text = options.text || 'Hi there!';
             this.options.duration = options.duration || 3000;
-            this.options.root = options.root || root;
-
-            this.buildToast();
+            this.options.selector = options.selector;
+            this.options.callback = options.callback || function () { };
 
+            // Returning the current object for chaining functions
             return this;
         },
 
+        // Building the DOM element
         buildToast: function () {
 
+            // Validating if the options are defined
             if (!this.options) {
                 throw "Toastify is not initialized";
             }
 
+            // Creating the DOM object
             var divElement = document.createElement("div");
             divElement.className = 'toastify on';
+
+            // Adding the toast message
             divElement.innerHTML = this.options.text;
 
-            this.toast = divElement;
+            // Callback for on-click
+            divElement.addEventListener('click', this.options.callback);
+
+            // Returning the generated element
+            return divElement;
         },
 
+        // Displaying the toast
         showToast: function () {
 
-            var toastElement = this.toast;
+            // Creating the DOM object for the toast
+            var toastElement = this.buildToast();
 
-            var rootElement = document.getElementById(this.options.root);
+            // Getting the root element to with the toast needs to be added
+            var rootElement;
+            if (typeof this.options.selector == "undefined") {
+                rootElement = document.body;
+            } else {
+                rootElement = document.getElementById(this.options.selector);
+            }
 
             if (!rootElement) {
                 throw "Root element is not defined";
             }
 
+            // Adding the DOM element
             rootElement.insertBefore(toastElement, rootElement.firstChild);
 
-            this.reposition();
+            // Repositioning the toasts in case multiple toasts are present
+            Toastify.reposition();
 
             window.setTimeout(function () {
+
+                // Hiding the element
                 toastElement.classList.remove("on");
+
+                // Removing the element from DOM after transition end
                 window.setTimeout(function () {
+
+                    // Remove the elemenf from the DOM
                     toastElement.remove();
-                    this.reposition();
-                }.bind(this), 400);
-            }.bind(this), this.options.duration);
 
-        },
+                    // Repositioning the toasts again
+                    Toastify.reposition();
+
+                }.bind(this), 400); // Binding `this` for function invocation 
+
+            }.bind(this), this.options.duration); // Binding `this` for function invocation
 
-        reposition: function () {
+            // Supporting function chaining
+            return this;
 
-            var topOffset = 15;
-            
-            var allToasts = document.getElementsByClassName('toastify');
+        }
 
-            for (var i = 0; i < allToasts.length; i++) {
+    }
 
-                var height = allToasts[i].offsetHeight;
-                var offset = 15;
-                allToasts[i].style.top = topOffset + 'px';
+    // Positioning the toasts on the DOM
+    Toastify.reposition = function () {
 
-                topOffset += height + offset;
-            }
+        // Top margin
+        var topOffsetSize = 15;
+
+        // Get all toast messages on the DOM
+        var allToasts = document.getElementsByClassName('toastify');
 
+        // Modifying the position of each toast element
+        for (var i = 0; i < allToasts.length; i++) {
+
+            var height = allToasts[i].offsetHeight;
+
+            // Spacing between toasts
+            var offset = 15;
+
+            // Setting the position
+            allToasts[i].style.top = topOffsetSize + 'px';
+
+            topOffsetSize += height + offset;
         }
+
+        // Supporting function chaining
+        return this;
     }
 
+    // Setting up the prototype for the init object
     Toastify.lib.init.prototype = Toastify.lib;
 
+    // Adding the Toastify function to the window object
     global.Toastify = Toastify;
 
-}(window, 'root'));
+}(window));