Rework js tree drilldown to just directly insert new rows instead of using nested tables, to fix issues with uneven table widths
Rework js tree drilldown to just directly insert new rows instead of using nested tables, to fix issues with uneven table widths

--- a/css/gitphp.css
+++ b/css/gitphp.css
@@ -157,9 +157,5 @@
 #blobData .de1, #blobData .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
 #blobData  {font-family:monospace;}
 #blobData li, #blobData .li1 {font-weight: normal; vertical-align:top;}
-table.treeTable { padding: 0px 0px; width: 600px; }
-table.treeTable td.subTree { padding:0px 0px; }
-table.treeTable td.perms { width: 75px; }
-table.treeTable td.filesize { text-align: right; width: 40px; }
-table.treeTable td.link { width: 125px; text-align: right; }
+table.treeTable td.filesize { text-align: right; }
 

file:a/js/tree.js -> file:b/js/tree.js
--- a/js/tree.js
+++ b/js/tree.js
@@ -24,26 +24,16 @@
 
 		treeHash = treeHash[1];
 
-		var treeTable = $('table#' + treeHash);
-		if (treeTable && treeTable.size() > 0) {
-			if (treeTable.is(':visible'))
-				treeTable.slideUp('fast');
+		var treeRows = $('.' + treeHash);
+		if (treeRows && treeRows.size() > 0) {
+			if (treeRows.is(':visible'))
+				treeRows.hide();
 			else
-				treeTable.slideDown('fast');
+				treeRows.show();
 		} 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 cell = $(this).parent();
+			var row = cell.parent();
+			var indent = cell.html().match(/^(—+)/);
 			if (indent)
 				indent = indent[1];
 			else
@@ -52,9 +42,20 @@
 
 			$.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);
+
+				row.after(subRows);
 			});
 		}
 

--- a/templates/tree.tpl
+++ b/templates/tree.tpl
@@ -19,7 +19,9 @@
  
  <div class="page_body">
    {* List files *}
+<table cellspacing="0" class="treeTable">
      {include file='treelist.tpl'}
+</table>
  </div>
 
  {include file='footer.tpl'}

--- a/templates/treelist.tpl
+++ b/templates/treelist.tpl
@@ -9,7 +9,6 @@
  * @subpackage Template
  *}
 
-<table cellspacing="0" id="{$tree->GetHash()}" class="treeTable">
 {foreach from=$tree->GetContents() item=treeitem}
   <tr class="{cycle values="light,dark"}">
     <td class="monospace perms">{$treeitem->GetModeString()}</td>
@@ -38,5 +37,4 @@
     {/if}
   </tr>
 {/foreach}
-</table>
 

comments