From a1c00ffc8ace89b6417962acdcc6a2c14f288ba8 Mon Sep 17 00:00:00 2001
From: tekla_to <tekla_to@o2.pl>
Date: Fri, 24 Oct 2014 18:25:58 +0200
Subject: [PATCH 1/2] add options to choose on which selector bind scroll event

---
 .gitignore     |  5 ++++
 README.md      | 12 ++++++++++
 index.html     |  3 ++-
 js/main.js     | 21 ++++------------
 js/timeline.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 89 insertions(+), 17 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 js/timeline.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2844ab8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.idea
+/bourbon/*
+/.sass-cache/*
+*.DS_Store
+/nbproject/
\ No newline at end of file
diff --git a/README.md b/README.md
index ea151f7..84edc0d 100644
--- a/README.md
+++ b/README.md
@@ -8,3 +8,15 @@ 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 |
\ No newline at end of file
diff --git a/index.html b/index.html
index c8e9fcb..a410ee5 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 1cec44d..85d8d28 100644
--- a/js/main.js
+++ b/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);
 });
\ No newline at end of file
diff --git a/js/timeline.js b/js/timeline.js
new file mode 100644
index 0000000..f5bfeb1
--- /dev/null
+++ b/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);
+};
\ No newline at end of file

From 2ccabe7659d2d6dc02408bcacdb72940c614d8e5 Mon Sep 17 00:00:00 2001
From: tekla_to <tekla_to@o2.pl>
Date: Fri, 24 Oct 2014 18:28:58 +0200
Subject: [PATCH 2/2] fix markdown

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 84edc0d..d6cf5cc 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ Call a `TimeLine.enable(options);` when DOM is fully loaded to activate animated
 ## Options
 
 Available options:
+
 | Name          | type   | default            | description                            |
 | ------------- | ------ | ------------------ | -------------------------------------- |
 | timelineBlock | string | .cd-timeline-block | Class name of timeline-block           |