Turn side by side diff into a module
Turn side by side diff into a module

--- a/include/controller/Controller_Commitdiff.class.php
+++ b/include/controller/Controller_Commitdiff.class.php
@@ -138,7 +138,7 @@
 
 		if (isset($this->params['sidebyside']) && ($this->params['sidebyside'] === true)) {
 			$this->tpl->assign('sidebyside', true);
-			$this->tpl->assign('extrascripts', array('commitdiff'));
+			$this->tpl->assign('extrascripts', 'commitdiff');
 		}
 
 		$treediff = new GitPHP_TreeDiff($this->project, $this->params['hash'], (isset($this->params['hashparent']) ? $this->params['hashparent'] : ''));

--- a/js/commitdiff.js
+++ b/js/commitdiff.js
@@ -1,77 +1,27 @@
 /*
- * GitPHP javascript commitdiff
+ * GitPHP Javascript commitdiff loader
  * 
- * Javascript enhancements to make side-by-side
- * commitdiff more usable
- *
+ * Initializes script modules used on the commitdiff page
+ * 
  * @author Christopher Han <xiphux@gmail.com>
  * @copyright Copyright (c) 2011 Christopher Han
  * @package GitPHP
+ * @subpackage Javascript
  */
 
-var TOCYloc = null;
-var TOCposition = null;
-var TOCtop = null;
-
-function initSBSCommitDiff() {
-	var sbsTOC = $('div.commitDiffSBS div.SBSTOC');
-	if (sbsTOC.size() < 1) {
-		return;
-	}
-
-	TOCYloc = sbsTOC.position().top;
-	TOCposition = sbsTOC.css('position');
-	TOCtop = sbsTOC.css('top');
-	$(window).scroll(function() {
-		var windowYloc = $(document).scrollTop();
-		if (windowYloc > TOCYloc) {
-			sbsTOC.css('position', 'fixed');
-			sbsTOC.css('top', '0px');
-		} else {
-			sbsTOC.css('position', TOCposition);
-			sbsTOC.css('top', TOCtop);
+define(["jquery"], function($) {
+	$(function(){
+		var toc = $('div.commitDiffSBS div.SBSTOC');
+		var content = $('div.SBSContent');
+		if ((toc.size() > 0) && (content.size() > 0)) {
+			require(["jquery", "modules/sidebysidecommitdiff"],
+				function($, sbsDiff) {
+					$(function() {
+						sbsDiff.init(toc, content);
+					});
+				}
+			);
 		}
 	});
-
-	$('a.SBSTOCItem').click(function() {
-		var clickedItem = $(this).get(0);
-		$('a.SBSTOCItem').each(function(index, value) {
-			if (clickedItem == value) {
-				$(this).parent().addClass('activeItem');
-			} else {
-				$(this).parent().removeClass('activeItem');
-			}
-		});
-		var clickedId = $(this).attr('href').substring(1);
-		$('div.diffBlob').each(function() {
-			if ($(this).attr('id') == clickedId) {
-				$(this).slideDown('fast');
-			} else {
-				$(this).slideUp('fast');
-			}
-		});
-		$('a.showAll').show();
-		if ($(document).scrollTop() > $('div.SBSContent').offset().top) {
-			$('html, body').animate({
-				scrollTop: $('div.SBSContent').offset().top
-			}, 200);
-		}
-		return false;
-	});
-	$('a.showAll').click(function() {
-		$('a.SBSTOCItem').parent().removeClass('activeItem');
-		$('div.diffBlob').slideDown('fast');
-		$(this).hide();
-		if ($(document).scrollTop() > $('div.SBSContent').offset().top) {
-			$('html, body').animate({
-				scrollTop: $('div.SBSContent').offset().top
-			}, 200);
-		}
-		return false;
-	});
-};
-
-$(document).ready(function() {
-	initSBSCommitDiff();
 });
 

--- /dev/null
+++ b/js/modules/sidebysidecommitdiff.js
@@ -1,1 +1,111 @@
+/*
+ * GitPHP javascript commitdiff
+ * 
+ * Javascript enhancements to make side-by-side
+ * commitdiff more usable
+ *
+ * @author Christopher Han <xiphux@gmail.com>
+ * @copyright Copyright (c) 2011 Christopher Han
+ * @package GitPHP
+ * @subpackage Javascript
+ */
 
+define(["jquery"],
+	function($) {
+		var toc = null;
+		var blobContent = null;
+
+		var tocYLoc = null;
+		var tocPosition = null;
+		var tocTop = null;
+
+		var pinned = false;
+
+		function scrollToTop() {
+			var contentTop = blobContent.offset().top;
+			if ($(document).scrollTop() > contentTop) {
+				$('html, body').animate({
+					scrollTop: contentTop
+				}, 200);
+			}
+		}
+
+		function markTOCItemActive(item) {
+			toc.find('a.SBSTOCItem').each(function(index, value) {
+				if (item == value) {
+					$(this).parent().addClass('activeItem');
+				} else {
+					$(this).parent().removeClass('activeItem');
+				}
+			});
+		}
+
+		function showBlob(id) {
+			blobContent.find('div.diffBlob').each(function() {
+				var jThis = $(this);
+				if (jThis.attr('id') == id) {
+					jThis.slideDown('fast');
+				} else {
+					jThis.slideUp('fast');
+				}
+			});
+		}
+
+		var windowScroll = function() {
+			var windowYLoc = $(document).scrollTop();
+			if (windowYLoc > tocYLoc) {
+				if (!pinned) {
+					toc.css('position', 'fixed');
+					toc.css('top', '0px');
+					pinned = true;
+				}
+			} else {
+				if (pinned) {
+					toc.css('position', tocPosition);
+					toc.css('top', tocTop);
+					pinned = false;
+				}
+			}
+		};
+
+		var tocClick = function() {
+			var jThis = $(this);
+
+			markTOCItemActive(jThis.get(0));
+
+			showBlob(jThis.attr('href').substring(1));
+
+			toc.find('a.showAll').show();
+
+			scrollToTop();
+
+			return false;
+		};
+
+		var showAllClick = function() {
+			toc.find('a.SBSTOCItem').parent().removeClass('activeItem');
+			blobContent.find('div.diffBlob').slideDown('fast');
+			$(this).hide();
+			scrollToTop();
+			return false;
+		};
+
+		var init = function(tocElem, blobContentElem) {
+			toc = tocElem;
+			blobContent = blobContentElem;
+
+			tocYLoc = toc.position().top;
+			tocPosition = toc.css('position');
+			tocTop = toc.css('top');
+
+			$(window).scroll(windowScroll);
+			toc.find('a.SBSTOCItem').click(tocClick);
+			toc.find('a.showAll').click(showAllClick);
+		};
+
+		return {
+			init: init
+		}
+	}
+);
+

comments