Add loading spinner for tree
[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 expanded = '[–]';
  var indent = '—';
   
  $('a.treeLink').each(function() {
  $(this).parent().parent().find('td.expander').append(expanderLink($(this).attr('href'), collapsed));
  });
   
$('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 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();
else treeRows.each(function() {
treeRows.show(); if ($(this).data('parent') == treeHash) {
  $(this).data('expanded', false);
  }
  });
  row.find('a.expander').text(collapsed);
  } else {
  treeRows.each(function() {
  if (($(this).data('parent') == treeHash) || ($(this).data('expanded') == true)) {
  $(this).show();
  $(this).data('expanded', true);
  }
  });
  row.find('a.expander').text(expanded);
  }
} else { } else {
var cell = $(this).parent(); var depth = row.data('depth');
var row = cell.parent(); if (depth == null)
var indent = cell.html().match(/^(—+)/); depth = 0;
if (indent) depth++;
indent = indent[1];  
else  
indent = '';  
indent += '—';  
   
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);
   
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.find('td.fileName').prepend(indent); subRows.each(function() {
   
  $(this).data('parent', treeHash);
  $(this).data('expanded', true);
  $(this).data('depth', depth);
   
  var fileCell = $(this).find('td.fileName');
  var treeLink = $(this).find('a.treeLink');
  if (treeLink && (treeLink.size() > 0)) {
  fileCell.prepend(expanderLink(treeLink.attr('href'), collapsed));
  } else {
  fileCell.prepend(indent);
  }
   
  for (var i = 1; i < depth; i++) {
  fileCell.prepend(indent);
  }
  });
   
row.after(subRows); row.after(subRows);
   
cell.children('img.treeSpinner').remove(); row.find('a.expander').text(expanded);
  row.find('img.treeSpinner').remove();
}); });
} }
   
return false; return false;
}); });
} };
   
$(document).ready(function() { $(document).ready(function() {
initTree(); initTree();
}); });
   
comments