Added client side sorting of tables.

html/base.html

@@ -18,6 +18,7 @@
   <script src="/media/js/jquery-1.7.1.min.js" type="text/javascript"></script>
   <script src="/media/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
   <script src="/media/js/jquery.autogrow-textarea.js" type="text/javascript"></script>
+  <script src="/media/js/jquery.sortElements.js" type="text/javascript"></script>
   <script src="/media/js/loader.js" type="text/javascript"></script>
   <script src="{% url 'django.views.i18n.javascript_catalog' %}" type="text/javascript"></script>
 {% if target_language %}

html/index.html

@@ -7,7 +7,7 @@
 {% if usertranslations %}
 <h2>{% trans "Your translations" %}</h2>
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Translation" %}</th>
@@ -33,7 +33,7 @@
 
 <h2>{% trans "Projects" %}</h2>
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Project" %}</th>

html/language.html

@@ -9,7 +9,7 @@
 
 {% block content %}
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Language" %}</th>

html/languages.html

@@ -8,7 +8,7 @@
 
 {% block content %}
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Language" %}</th>

html/project.html

@@ -11,7 +11,7 @@
 
 <h2>{% trans "Subprojects" %}</h2>
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Subproject" %}</th>

html/subproject.html

@@ -12,7 +12,7 @@
 
 <h2>{% trans "Translations" %}</h2>
 
-<table>
+<table class="sort">
 <thead>
 <tr>
 <th>{% trans "Language" %}</th>

media/css/style.css

@@ -114,3 +114,9 @@ div.floatbox {
 div.clearer {
     clear: both;
 }
+span.sort {
+    display: inline-block;
+}
+th.sort {
+    cursor: pointer;
+}

media/js/jquery.sortElements.js

+/**
+ * jQuery.fn.sortElements
+ * --------------
+ * @author James Padolsey (http://james.padolsey.com)
+ * @version 0.11
+ * @updated 18-MAR-2010
+ * --------------
+ * @param Function comparator:
+ *   Exactly the same behaviour as [1,2,3].sort(comparator)
+ *   
+ * @param Function getSortable
+ *   A function that should return the element that is
+ *   to be sorted. The comparator will run on the
+ *   current collection, but you may want the actual
+ *   resulting sort to occur on a parent or another
+ *   associated element.
+ *   
+ *   E.g. $('td').sortElements(comparator, function(){
+ *      return this.parentNode; 
+ *   })
+ *   
+ *   The <td>'s parent (<tr>) will be sorted instead
+ *   of the <td> itself.
+ */
+jQuery.fn.sortElements = (function(){
+    
+    var sort = [].sort;
+    
+    return function(comparator, getSortable) {
+        
+        getSortable = getSortable || function(){return this;};
+        
+        var placements = this.map(function(){
+            
+            var sortElement = getSortable.call(this),
+                parentNode = sortElement.parentNode,
+                
+                // Since the element itself will change position, we have
+                // to have some way of storing it's original position in
+                // the DOM. The easiest way is to have a 'flag' node:
+                nextSibling = parentNode.insertBefore(
+                    document.createTextNode(''),
+                    sortElement.nextSibling
+                );
+            
+            return function() {
+                
+                if (parentNode === this) {
+                    throw new Error(
+                        "You can't sort elements if any one is a descendant of another."
+                    );
+                }
+                
+                // Insert before flag:
+                parentNode.insertBefore(this, nextSibling);
+                // Remove flag:
+                parentNode.removeChild(nextSibling);
+                
+            };
+            
+        });
+       
+        return sort.call(this, comparator).each(function(i){
+            placements[i].call(getSortable.call(this));
+        });
+        
+    };
+    
+})();
\ No newline at end of file

media/js/loader.js

@@ -79,6 +79,16 @@ function load_translate_apis() {
     });
 }
 
+function cell_cmp(a, b) {
+    if (a.indexOf('%') != -1 && b.indexOf('%') != -1) {
+        a = parseFloat(a.replace(',', '.'));
+        b = parseFloat(b.replace(',', '.'));
+    }
+    if (a == b) return 0;
+    if (a > b) return 1;
+    return -1;
+}
+
 $(function() {
     $('.button').button();
     $('ul.menu li a').button();
@@ -110,4 +120,49 @@ $(function() {
             $('#' + parent_id).remove();
         });
     });
+    $('table.sort').each(function() {
+        $(this).find('thead th')
+            .each(function(){
+
+            var th = $(this),
+                thIndex = th.index(),
+                inverse = 1,
+                tbody = th.parents('table').find('tbody'),
+                thead = th.parents('table').find('thead');
+            if (th.text() == '') {
+                return;
+            }
+            // Second column contains percent with colspan
+            if (thIndex >= 1) {
+                thIndex += 1;
+            }
+            th.attr('title', gettext("Sort this column")).addClass('sort').append('<span class="sort ui-icon ui-icon-carat-2-n-s" />');
+//            .wrapInner('<span class="sort" title="' +  + '"/>')
+
+            th.click(function(){
+
+                tbody.find('td,th').filter(function(){
+                    return $(this).index() === thIndex;
+                }).sortElements(function(a, b){
+                    return inverse * cell_cmp($.text([a]), $.text([b]));
+                }, function(){
+
+                    // parentNode is the element we want to move
+                    return this.parentNode;
+
+                });
+                thead.find('span.sort').removeClass('ui-icon-carat-1-n ui-icon-carat-1-s').addClass('ui-icon-carat-2-n-s');
+                if (inverse == 1) {
+                    $(this).find('span.sort').addClass('ui-icon-carat-1-n').removeClass('ui-icon-carat-2-n-s');
+                } else {
+                    $(this).find('span.sort').addClass('ui-icon-carat-1-s').removeClass('ui-icon-carat-2-n-s');
+                }
+
+                inverse = inverse * -1;
+
+            });
+        });
+
+    });
+
 });