[extensions-web] Re-do the review file selector view to load one file at a time

[Jasper St. Pierre <jstpierre src gnome org>]

commit 030d141585b3ea74ed21e1151110d0607718419f
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Nov 15 12:09:06 2011 -0500

    Re-do the review file selector view to load one file at a time

 sweettooth/review/templates/review/review.html |    2 +-
 sweettooth/review/urls.py                      |    2 +-
 sweettooth/review/views.py                     |   21 ++---
 sweettooth/static/js/review.js                 |  122 ++++++++++++++++--------
 4 files changed, 90 insertions(+), 57 deletions(-)
---
diff --git a/sweettooth/review/templates/review/review.html b/sweettooth/review/templates/review/review.html
index 79ebea6..8f94d59 100644
--- a/sweettooth/review/templates/review/review.html
+++ b/sweettooth/review/templates/review/review.html
@@ -28,7 +28,7 @@
 </div>
 
 <h2 class="expanded"> Files </h2>
-<div id="files" data-fileurl="{% url review-ajax-files pk=version.pk %}">
+<div id="files" data-pk="{{ version.pk }}">
 </div>
 
 <h2 class="expanded"> Previous Versions </h2>
diff --git a/sweettooth/review/urls.py b/sweettooth/review/urls.py
index 1017530..383bbc4 100644
--- a/sweettooth/review/urls.py
+++ b/sweettooth/review/urls.py
@@ -10,7 +10,7 @@ urlpatterns = patterns('',
                                  template_object_name='version',
                                  template_name='review/list.html'),
         name='review-list'),
-    url(r'^ajax/get-files/(?P<pk>\d+)', views.ajax_get_files_view, name='review-ajax-files'),
+    url(r'^ajax/get-file/(?P<pk>\d+)', views.ajax_get_file_view, name='review-ajax-files'),
     url(r'^ajax/get-file-list/(?P<pk>\d+)', views.ajax_get_file_list_view, name='review-ajax-file-list'),
     url(r'^ajax/get-file-diff/(?P<pk>\d+)', views.ajax_get_file_diff_view, name='review-ajax-file-diff'),
     url(r'^submit/(?P<pk>\d+)', views.submit_review_view, name='review-submit'),
diff --git a/sweettooth/review/views.py b/sweettooth/review/views.py
index bd4402a..d1d6c1a 100644
--- a/sweettooth/review/views.py
+++ b/sweettooth/review/views.py
@@ -165,25 +165,20 @@ def ajax_get_file_diff_view(request, obj):
 
 @ajax_view
 @model_view(models.ExtensionVersion)
-def ajax_get_files_view(request, obj):
+def ajax_get_file_view(request, obj):
     if not can_review_extension(request.user, obj.extension):
         return HttpResponseForbidden()
 
     zipfile = obj.get_zipfile('r')
+    filename = request.GET['filename']
 
-    # filename => { html, filename }
-    files = []
-    for filename in sorted(zipfile.namelist()):
-        raw = zipfile.open(filename, 'r').read()
-
-        base, extension = os.path.splitext(filename)
-
-        file_ = dict(filename=filename)
-        file_.update(html_for_file(filename, raw))
-
-        files.append(file_)
+    try:
+        f = zipfile.open(filename, 'r')
+    except KeyError:
+        raise Http404()
 
-    return files
+    raw = f.read()
+    return html_for_file(filename, raw)
 
 @post_only_view
 @model_view(models.ExtensionVersion)
diff --git a/sweettooth/static/js/review.js b/sweettooth/static/js/review.js
index 8977f1c..9836f78 100644
--- a/sweettooth/static/js/review.js
+++ b/sweettooth/static/js/review.js
@@ -2,83 +2,121 @@
 
 define(['jquery'], function($) {
 
-    function createFileView(data) {
-        var $fileView, $table, $tr;
-
-        $tr = $('<tr>');
-        $table = $('<table>').append($tr);
-
-        if (data.num_lines) {
-            var count = data.num_lines;
-            var lines = [];
-            lines.push("<td class=\"linenumbers\"><pre>");
-            for (var i = 1; i < (count + 1); i ++) {
-                lines.push("<span rel=\"L" + i + "\">" + i + "</span>\n");
+    var REVIEW_URL_BASE = '/review/ajax';
+
+    function createFileView(filename, pk) {
+        var req = $.ajax({
+            type: 'GET',
+            dataType: 'json',
+            data: { filename: filename },
+            url: REVIEW_URL_BASE + '/get-file/' + pk,
+        });
+
+        var deferred = new $.Deferred();
+
+        req.done(function(data) {
+            var $fileView, $table, $tr;
+
+            $tr = $('<tr>');
+            $table = $('<table>').append($tr);
+
+            if (data.num_lines) {
+                var count = data.num_lines;
+                var lines = [];
+                lines.push("<td class=\"linenumbers\"><pre>");
+                for (var i = 1; i < (count + 1); i ++) {
+                    lines.push("<span rel=\"L" + i + "\">" + i + "</span>\n");
+                }
+                lines.push("</pre></td>");
+
+                $tr.append(lines.join(''));
             }
-            lines.push("</pre></td>");
 
-            $tr.append(lines.join(''));
-        }
+            $fileView = $('<div>', {'class': 'file'}).
+                appendTo($('<td>', {'width': '100%'}).appendTo($tr));
 
-        $fileView = $('<div>', {'class': 'file'}).
-            appendTo($('<td>', {'width': '100%'}).appendTo($tr));
+            $fileView.html(data.html);
 
-        $fileView.html(data.html);
+            deferred.resolve($table);
+        });
 
-        return $table;
+        return deferred;
     }
 
     $.fn.reviewify = function() {
         var $elem = $(this);
         var $fileList = $('<ul>', {'class': 'filelist'}).appendTo($elem);
-        var fileurl = $elem.data('fileurl');
+        var pk = $elem.data('pk');
 
         // Hide the file list until we're done grabbing all the elements.
         $fileList.hide();
 
         var $fileDisplay = $('<div>', {'class': 'filedisplay'}).appendTo($elem);
         $fileDisplay.css('position', 'relative');
-
+ 
+        var currentFilename;
         var $currentFile = null;
 
         var req = $.ajax({
             type: 'GET',
             dataType: 'json',
-            url: fileurl
+            url: REVIEW_URL_BASE + '/get-file-list/' + pk,
         });
 
-        req.done(function(data) {
-            $.each(data, function() {
-                var data = this;
-                var $selector = $('<a>', {'class': 'fileselector'}).text(data.filename);
+        function showTable(filename, $file, $selector) {
+            $fileList.find('li a.fileselector').removeClass('selected');
+            $selector.addClass('selected');
+
+            $file.css('position', 'relative');
+
+            if ($currentFile != null) {
+                $currentFile.css({'position': 'absolute',
+                                  'top': '0'});
+                $currentFile.fadeOut();
+                $file.fadeIn();
+            } else {
+                $file.show();
+            }
+
+            currentFilename = filename;
+            $currentFile = $file;
+        }
+
+        req.done(function(files) {
+            function createFileSelector(tag, filename) {
+                var $selector = $('<a>').
+                    addClass(tag).
+                    addClass('fileselector').
+                    text(filename);
+
                 var $file = null;
 
                 $selector.click(function() {
                     if ($selector.hasClass('selected'))
                         return;
 
-                    if ($file === null)
-                        $file = createFileView(data).hide().appendTo($fileDisplay);
-
-                    $fileList.find('li a.fileselector').removeClass('selected');
-                    $selector.addClass('selected');
-
-                    $file.css('position', 'relative');
-
-                    if ($currentFile != null) {
-                        $currentFile.css({'position': 'absolute',
-                                          'top': '0'});
-                        $currentFile.fadeOut();
-                        $file.fadeIn();
+                    if ($file === null) {
+                        var d = createFileView(filename, pk);
+                        currentFilename = filename;
+                        d.done(function($table) {
+                            $file = $table;
+                            $file.hide().appendTo($fileDisplay);
+                            if (currentFilename === filename)
+                                showTable(filename, $file, $selector);
+                        });
                     } else {
-                        $file.show();
+                        showTable(filename, $file, $selector);
                     }
 
-                    $currentFile = $file;
                 });
 
                 $('<li>').append($selector).appendTo($fileList);
-            });
+            }
+
+
+            $.each(files.both, function() { createFileSelector('both', this); });
+            $.each(files.added, function() { createFileSelector('added', this); });
+            $.each(files.deleted, function() { createFileSelector('deleted', this); });
 
             $fileList.show();