Initial implementation of javascript drilldown tree
[gitphp.git] / js / tree.js
blob:a/js/tree.js -> blob:b/js/tree.js
--- a/js/tree.js
+++ b/js/tree.js
@@ -10,11 +10,16 @@
  */
 
 function initTree() {
-	var project = window.location.href.match(/p=([^&]+)/);
-	if (!project) {
+	var url = window.location.href.match(/^([^\?]+\/)/);
+	if (!url) {
 		return;
 	}
-	project = unescape(project[1]);
+	url = url[1];
+
+	var collapsed = '[+]';
+	var expanded = '[–]';
+
+	$('table.treeTable td.expander').text(collapsed);
 
 	$('a.jsTree').live('click', function() {
 		var treeHash = $(this).attr('href').match(/h=([0-9a-fA-F]{40}|HEAD)/);
@@ -24,37 +29,58 @@
 
 		treeHash = treeHash[1];
 
-		var treeTable = $('table#' + treeHash);
-		if (treeTable && treeTable.size() > 0) {
-			if (treeTable.is(':visible'))
-				treeTable.slideUp('fast');
-			else
-				treeTable.slideDown('fast');
+		var cell = $(this).parent();
+		var row = cell.parent();
+
+		var treeRows = $('.' + treeHash);
+		if (treeRows && treeRows.size() > 0) {
+			if (treeRows.is(':visible')) {
+				treeRows.hide();
+				treeRows.find('td.expander').text(collapsed);
+				row.find('td.expander').text(collapsed);
+			} else {
+				treeRows.show();
+				treeRows.find('td.expander').each(function() {
+					if ($(this).data('loaded'))
+						$(this).text(expanded);
+				});
+				row.find('td.expander').text(expanded);
+			}
 		} else {
-			var row = jQuery(document.createElement('tr'));
-
-			var cell = jQuery(document.createElement('td'));
-			cell.attr('colspan', '4');
-			cell.attr('id', 'td' + treeHash);
-			cell.addClass('subTree');
-			cell.appendTo(row);
-
-			$(this).parent().parent().after(row);
-
-			var par = $(this).parent();
-			var htm = par.html();
-			var indent = par.html().match(/^(—+)/);
+			var indent = cell.html().match(/^(—+)/);
 			if (indent)
 				indent = indent[1];
 			else
 				indent = '';
 			indent += '—';
 
+			var img = jQuery(document.createElement('img'));
+			img.attr('src', url + "images/tree-loader.gif");
+			img.attr('alt', GITPHP_RES_LOADING);
+			img.addClass('treeSpinner');
+			img.appendTo(cell);
+
 			$.get($(this).attr('href'), { o: 'js' },
 			function(data) {
-				var subTable = jQuery(data);
-				subTable.find('td.fileName').prepend(indent);
-				$('#td' + treeHash).html(subTable);
+				var subRows = jQuery(data);
+
+				subRows.addClass(treeHash);
+
+				var classList = row.attr('class').split(/\s+/);
+				$.each(classList, function(index, item) {
+					if (item.match(/[0-9a-fA-F]{40}/)) {
+						subRows.addClass(item);
+					}
+				});
+
+				subRows.find('td.fileName').prepend(indent);
+				subRows.find('td.expander').text(collapsed);
+
+				row.after(subRows);
+
+				row.find('td.expander').text(expanded);
+				row.find('td.expander').data('loaded', true);
+				cell.children('img.treeSpinner').remove();
 			});
 		}
 

comments