Rework js tree drilldown to just directly insert new rows instead of using nested tables, to fix issues with uneven table widths
[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,21 +29,36 @@
 
 		treeHash = treeHash[1];
 
+		var cell = $(this).parent();
+		var row = cell.parent();
+
 		var treeRows = $('.' + treeHash);
 		if (treeRows && treeRows.size() > 0) {
-			if (treeRows.is(':visible'))
+			if (treeRows.is(':visible')) {
 				treeRows.hide();
-			else
+				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 cell = $(this).parent();
-			var row = cell.parent();
 			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) {
@@ -54,8 +74,13 @@
 				});
 
 				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