From ca3a63f2db2db014990334400fa737cf62aebbf2 Mon Sep 17 00:00:00 2001
From: bobisum <bobisum@gmail.com>
Date: Fri, 9 Aug 2013 17:53:37 +0300
Subject: [PATCH] Scrolling navigation script edit.

Work still in progress.
---
 _includes/installation.md |   2 +-
 _includes/intro.md        |   2 +-
 _includes/usage.md        |   2 +-
 _layouts/default.html     |  12 ++-
 js/jquery.scrollNav.js    | 197 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 209 insertions(+), 6 deletions(-)
 create mode 100644 js/jquery.scrollNav.js

diff --git a/_includes/installation.md b/_includes/installation.md
index c0c39f4..189e5ee 100644
--- a/_includes/installation.md
+++ b/_includes/installation.md
@@ -1,4 +1,4 @@
-<section>
+<section data-nav="Installation">
 	<h2>Installation</h2>
 	<p>Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features.</p>
 </section>
\ No newline at end of file
diff --git a/_includes/intro.md b/_includes/intro.md
index 367b446..b8eb62f 100644
--- a/_includes/intro.md
+++ b/_includes/intro.md
@@ -1,4 +1,4 @@
-<section>
+<section data-nav="Introduction">
 	<h2>Introduction</h2>
 	<p>Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the wor ld of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features.</p>
 </section>
\ No newline at end of file
diff --git a/_includes/usage.md b/_includes/usage.md
index b1d3e32..02534f8 100644
--- a/_includes/usage.md
+++ b/_includes/usage.md
@@ -1,4 +1,4 @@
-<section>
+<section data-nav="Usage">
 	<h2>Usage</h2>
 	<p>Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features. Welcome to the world of Packer! This introduction guide will show you what Packer is, explain why it exists, the benefits it has to offer, and how you can get started with it. If you're already familiar with Packer, the documentation provides more of a reference for all available features.</p>
 </section>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index d98610a..9b5c541 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -22,6 +22,10 @@
 		<!-- wrapper -->
 		<div class="column-wrapper">
 
+			<div id="sidebar">
+				
+			</div>
+
 			<!-- content -->
 			<div id="content">
 				{{ content | markdownify }}
@@ -31,14 +35,16 @@
 
 		<!-- scripts -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
-		<script src="js/jquery.scrollNav.min.js"></script>
+		<script src="js/jquery.scrollNav.js"></script>
 		<script>
 		$(window).load(function() {
 			$('#content').scrollNav({
 				showHeadline: false,
 				showTopLink: false,
-				sections: 'h2',
-				fixedMargin: 0
+				sections: 'section',
+				fixedMargin: 0,
+				location: '#sidebar',
+				addClass: 'testclass'
 			});
 
 		});
diff --git a/js/jquery.scrollNav.js b/js/jquery.scrollNav.js
new file mode 100644
index 0000000..0d931b9
--- /dev/null
+++ b/js/jquery.scrollNav.js
@@ -0,0 +1,197 @@
+(function($) {
+
+	$.fn.scrollNav = function(options) {
+
+		// Add loading hook to the body element
+
+		$('body').addClass('sn-loading');
+
+		var settings = {
+			sections: 'h3',
+			titleText: 'Scroll To',
+			fixedMargin: 40,
+			animated: true,
+			speed: 500,
+			showHeadline: true,
+			showTopLink: true,
+			location: 'insertBefore',
+			addClass: '',
+			addId: null
+		};
+
+		$.extend(settings, options);
+
+		// Set the variables from our page elements
+
+		var $sectionArray	= [];
+		var $container		= this;
+		var $sections		= $container.find(settings.sections);
+		var allowScroller	= true;
+
+		if(settings.addClass != '') {
+			var $nav			= $('<nav />', {'id': settings.addId, 'class': 'scroll-nav' + ' ' + settings.addClass, 'role': 'navigation'});
+		} else {
+			var $nav			= $('<nav />', {'id': settings.addId, 'class': 'scroll-nav', 'role': 'navigation'});
+		}
+
+		// Find the article container and either grab it's id or give it one
+		// Initial setup of the section array
+
+		var setupContainer = function() {
+			if ( settings.showTopLink === false ) { return; }
+
+			var containerID	= $container.attr('id');
+			var offset		= $container.offset().top;
+
+			if (containerID) {
+				$sectionArray.push({id: containerID, offset: offset, text: 'Top'});
+			}
+			else {
+				$container.attr('id', 'jumpNav-0');
+				$sectionArray.push({id: 'jumpNav-0', offset: offset, text: 'Top'});
+			}
+		};
+
+		// Find each section and give it an id
+		// Add each section and it's details to the section array
+
+		var setupSections = function() {
+			$sections.each(function(i) {
+				var sectionID	= 'jumpNav-' + (i + 1);
+				var $offset		= $(this).offset().top;
+				var $text		= $(this).data('nav');
+
+				$(this).attr('id', sectionID);
+				$sectionArray.push( {id: sectionID, offset: $offset, text: $text} );
+			});
+		};
+
+		// Populate the nav with a headline and ordered list from
+		// the section array we built
+
+		var setupNav = function() {
+			var $headline	= $('<span />', {'class': 'scroll-nav-heading', text: settings.titleText});
+			var $list		= $('<ol />', {'class': 'scroll-nav-list'});
+
+			$.each($sectionArray, function(i) {
+
+				if (i === 0) {
+					console.log($(this));
+					$(this).addClass('active');
+					var $item = $('<li />', {'class': 'scroll-nav-item active'});
+
+				} else {
+					var $item = $('<li />', {'class': 'scroll-nav-item'});
+				}
+				
+				var $link	= $('<a />', {'href': '#' + this.id, 'class': 'scroll-nav-link', text: this.text});
+
+				$list.append( $item.append($link) );
+			});
+
+			if (settings.showHeadline === true) {
+				$nav.append($headline).append($list);
+			} else {
+				$nav.append($list);
+			}
+
+		};
+
+		// Set nav to fixed after scrolling past the header and
+		// add an active class to whichever section currently in
+		// view when the user clicks or scrolls
+
+		var navScrolling = function() {
+			var navOffset = $nav.offset().top;
+
+			// Set a resize listener to change the offset values
+
+			$(window).resize(function() {
+				$.each($sectionArray, function() {
+					this.offset	= $('#' + this.id).offset().top;
+				});
+			});
+
+			// Set a scroll listener to update the fixed and
+			// active classes
+
+			$(window).scroll(function() {
+				var winTop		= $(window).scrollTop();
+				var halfVP		= $(window).height() * 0.5;
+
+				// console.log(winTop);
+				// console.log(halfVP);
+
+				if( winTop > (navOffset - settings.fixedMargin) ) { $nav.addClass('fixed'); }
+				else { $nav.removeClass('fixed'); }
+
+				$.each($sectionArray, function() {
+					// console.log("my offset:   " + $('#' + this.id).offset().top);
+					// console.log("offset:   " + this.offset);
+					// console.log("winTop:   " + winTop);
+					// console.log("winTop - settings.fixedMargin:   " + (winTop - settings.fixedMargin));
+					// console.log("winTop + halfVP:   " + (winTop + halfVP));
+
+					if( this.offset > winTop - settings.fixedMargin &&  this.offset < (winTop + halfVP) ) {
+						$nav.find('li').removeClass('active');
+						$nav.find('a[href="#' + this.id + '"]').parents('li').addClass('active');
+					}
+				});
+			});
+		};
+
+		// BUILD!!!!
+		if ($container.length !== 0) {
+			setupContainer();
+			setupSections();
+			setupNav();
+		}
+
+		// Now add the nav to our page
+
+		if ($container.length !== 0 && $sections.length !== 0) {
+			$(settings.location).prepend($nav);
+		}
+		else if ($container.length === 0) {
+			console.log("Build failed, scrollNav could not find '" + $container.selector + "'");
+		}
+		else if ($sections.length === 0) {
+			console.log("Build failed, scrollNav could not find any '" + settings.sections + "'s inside of '" + $container.selector + "'");
+		}
+
+		// Add Scrolling //
+
+		navScrolling();
+
+		/* Animate Scrolling on click*/
+
+		$('.scroll-nav-link').click(function() {
+			var elementClicked	= $(this).attr("href");
+			var destination		= $(elementClicked).offset().top;
+			allowScroller		= false;
+
+			// active on menus
+			$('.scroll-nav-item').removeClass('active');
+			$(this).parent().addClass('active');
+
+			// active on items
+			$sections.removeClass('active');
+			$(elementClicked).addClass('active');
+
+			if (settings.animated === true) {
+				$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-40 }, settings.speed );
+				allowScroller	= true;
+				return false;
+			} else {
+				allowScroller	= true;
+			}
+		});
+
+		/* End Animated Scrolling */
+
+		// Remove loading hook and add a loaded hook to the body
+
+		$('body').removeClass('sn-loading').addClass('sn-active');
+
+	};
+})(jQuery);