Indent the expanders for nested folders
[gitphp.git] / js / tree.js
blob:a/js/tree.js -> blob:b/js/tree.js
/* /*
* GitPHP javascript tree * GitPHP javascript tree
* *
* Load subtree data into tree page asynchronously * Load subtree data into tree page asynchronously
* *
* @author Christopher Han <xiphux@gmail.com> * @author Christopher Han <xiphux@gmail.com>
* @copyright Copyright (c) 2010 Christopher Han * @copyright Copyright (c) 2010 Christopher Han
* @package GitPHP * @package GitPHP
* @subpackage Javascript * @subpackage Javascript
*/ */
   
  function expanderLink(href, text) {
  var a = jQuery(document.createElement('a'));
  a.attr('href', href);
  a.text(text);
  a.addClass('jsTree');
  a.addClass('expander');
  return a;
  };
   
function initTree() { function initTree() {
var url = window.location.href.match(/^([^\?]+\/)/); var url = window.location.href.match(/^([^\?]+\/)/);
if (!url) { if (!url) {
return; return;
} }
url = url[1]; url = url[1];
   
var collapsed = '[+]'; var collapsed = '[+]';
var expanded = '[–]'; var expanded = '[–]';
  var indent = '—';
   
$('a.jsTree').each(function() { $('a.treeLink').each(function() {
var a = jQuery(document.createElement('a')); $(this).parent().parent().find('td.expander').append(expanderLink($(this).attr('href'), collapsed));
a.attr('href', $(this).attr('href'));  
a.text(collapsed);  
a.addClass('jsTree');  
a.addClass('expander');  
$(this).parent().parent().find('td.expander').append(a);  
}); });
   
$('a.jsTree').live('click', function() { $('a.jsTree').live('click', function() {
var treeHash = $(this).attr('href').match(/h=([0-9a-fA-F]{40}|HEAD)/); var treeHash = $(this).attr('href').match(/h=([0-9a-fA-F]{40}|HEAD)/);
if (!treeHash) { if (!treeHash) {
return; return;
} }
   
treeHash = treeHash[1]; treeHash = treeHash[1];
   
var cell = $(this).parent(); var cell = $(this).parent();
var row = cell.parent(); var row = cell.parent();
   
var treeRows = $('.' + treeHash); var treeRows = $('.' + treeHash);
if (treeRows && treeRows.size() > 0) { if (treeRows && treeRows.size() > 0) {
if (treeRows.is(':visible')) { if (treeRows.is(':visible')) {
treeRows.hide(); treeRows.hide();
treeRows.each(function() { treeRows.each(function() {
if ($(this).data('parent') == treeHash) if ($(this).data('parent') == treeHash) {
$(this).data('expanded', false); $(this).data('expanded', false);
  }
}); });
row.find('a.expander').text(collapsed); row.find('a.expander').text(collapsed);
} else { } else {
treeRows.each(function() { treeRows.each(function() {
if (($(this).data('parent') == treeHash) || ($(this).data('expanded') == true)) { if (($(this).data('parent') == treeHash) || ($(this).data('expanded') == true)) {
$(this).show(); $(this).show();
$(this).data('expanded', true); $(this).data('expanded', true);
} }
}); });
row.find('a.expander').text(expanded); row.find('a.expander').text(expanded);
} }
} else { } else {
var depth = row.data('depth'); var depth = row.data('depth');
if (depth == null) if (depth == null)
depth = 0; depth = 0;
depth++; depth++;
   
var img = jQuery(document.createElement('img')); var img = jQuery(document.createElement('img'));
img.attr('src', url + "images/tree-loader.gif"); img.attr('src', url + "images/tree-loader.gif");
img.attr('alt', GITPHP_RES_LOADING); img.attr('alt', GITPHP_RES_LOADING);
img.addClass('treeSpinner'); img.addClass('treeSpinner');
img.appendTo(cell); row.find('a.treeLink').after(img);
   
$.get($(this).attr('href'), { o: 'js' }, $.get($(this).attr('href'), { o: 'js' },
function(data) { function(data) {
var subRows = jQuery(data); var subRows = jQuery(data);
   
subRows.addClass(treeHash); subRows.addClass(treeHash);
   
subRows.each(function() {  
$(this).data('parent', treeHash);  
$(this).data('expanded', true);  
$(this).data('depth', depth);  
});  
   
var classList = row.attr('class').split(/\s+/); var classList = row.attr('class').split(/\s+/);
$.each(classList, function(index, item) { $.each(classList, function(index, item) {
if (item.match(/[0-9a-fA-F]{40}/)) { if (item.match(/[0-9a-fA-F]{40}/)) {
subRows.addClass(item); subRows.addClass(item);
} }
}); });
   
subRows.each(function() { subRows.each(function() {
   
  $(this).data('parent', treeHash);
  $(this).data('expanded', true);
  $(this).data('depth', depth);
   
var fileCell = $(this).find('td.fileName'); var fileCell = $(this).find('td.fileName');
for (var i = 0; i < depth; i++) { var treeLink = $(this).find('a.treeLink');
if (i == 0) { if (treeLink && (treeLink.size() > 0)) {
var treeLink = $(this).find('a.jsTree'); fileCell.prepend(expanderLink(treeLink.attr('href'), collapsed));
if (treeLink && (treeLink.size() > 0)) { } else {
var a1 = jQuery(document.createElement('a')); fileCell.prepend(indent);
a1.attr('href', treeLink.attr('href')); }
a1.text(collapsed);  
a1.addClass('jsTree'); for (var i = 1; i < depth; i++) {
a1.addClass('expander'); fileCell.prepend(indent);
fileCell.prepend(a1);  
} else {  
fileCell.prepend('—');  
}  
} else {  
fileCell.prepend('—');  
}  
} }
}); });
   
row.after(subRows); row.after(subRows);
   
row.find('a.expander').text(expanded); row.find('a.expander').text(expanded);
cell.children('img.treeSpinner').remove(); row.find('img.treeSpinner').remove();
}); });
} }
   
return false; return false;
}); });
} };
   
$(document).ready(function() { $(document).ready(function() {
initTree(); initTree();
}); });
   
comments