add options to choose on which selector bind scroll event

.gitignore

@@ -0,0 +1,5 @@
+.idea
+/bourbon/*
+/.sass-cache/*
+*.DS_Store
+/nbproject/

README.md

@@ -8,3 +8,16 @@ An easy to customize, responsive timeline.
 [Demo](http://codyhouse.co/demo/vertical-timeline/index.html)
 
 [Terms](http://codyhouse.co/terms/)
+
+### Usage via JavaScript
+
+Call a `TimeLine.enable(options);` when DOM is fully loaded to activate animated fade-in of vertical-timeline blocks.
+
+## Options
+
+Available options:
+
+| Name          | type   | default            | description                            |
+| ------------- | ------ | ------------------ | -------------------------------------- |
+| timelineBlock | string | .cd-timeline-block | Class name of timeline-block           |
+| scrollElement | string | window             | Selector name to bind the scroll event |

index.html

@@ -96,6 +96,7 @@ <h2>Final Section</h2>
 		</div> <!-- cd-timeline-block -->
 	</section> <!-- cd-timeline -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="js/main.js"></script> <!-- Resource jQuery -->
+<script src="js/timeline.js"></script> <!-- Resource jQuery -->
+<script src="js/main.js"></script> <!-- Init -->
 </body>
 </html>

js/main.js

@@ -1,19 +1,8 @@
 jQuery(document).ready(function($){
-	var $timeline_block = $('.cd-timeline-block');
+    var options = {
+        timelineBlock: '.cd-timeline-block',
+        scrollElement: window
+    };
 
-	//hide timeline blocks which are outside the viewport
-	$timeline_block.each(function(){
-		if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
-			$(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
-		}
-	});
-
-	//on scolling, show/animate timeline blocks when enter the viewport
-	$(window).on('scroll', function(){
-		$timeline_block.each(function(){
-			if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
-				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
-			}
-		});
-	});
+    TimeLine.enable(options);
 });

js/timeline.js

@@ -0,0 +1,65 @@
+/**
+ * Instantiate vertical-timeline.
+ *
+ * @constructor
+ * @param {Object} options The options to override the defaults
+ */
+function TimeLine(options) {
+    if (window.jQuery) {
+        var $ = window.jQuery;
+    } else {
+        throw new Error('jQuery is required to use vertical-timeline');
+    }
+
+    'use strict';
+
+    options = options || {};
+
+    this.$timelineBlock = $(options.timelineBlock) || $('.cd-timeline-block');
+    this.$scrollElement = $(options.scrollElement) || $(window);
+
+    this.hideBlocks();
+    this.$scrollElement.on('scroll', {blocks: this.$timelineBlock}, this.onScroll);
+}
+
+/**
+ * Hide timeline blocks which are outside the viewport
+ *
+ * @returns {boolean} Returns true.
+ */
+TimeLine.prototype.hideBlocks = function() {
+    this.$timelineBlock.each(function(){
+        if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
+            $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
+        }
+    });
+
+    return true;
+};
+
+/**
+ * On scolling, show/animate timeline blocks when enter the viewport
+ *
+ * @returns {boolean} Returns true.
+ */
+TimeLine.prototype.onScroll = function(event) {
+    event.data.blocks.each(function(){
+        if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
+            $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
+        }
+    });
+
+    return true;
+};
+
+
+/**
+ * Factory method for creating a CodyHouse vertical-timeline object
+ *
+ * @param {Object} options The options to override the defaults
+ */
+TimeLine.enable = function(options) {
+    'use strict';
+
+    return new TimeLine(options);
+};