Merge lp:~mwhudson/loggerhead/ajaxy-changelog into lp:loggerhead

[Michael Hudson-Doyle]

[Michael Hudson-Doyle (mwhudson)]

The main point of this branch is not including the lists of files changed in the changelog view and, if the user clicks the disclosure triangle, loading this bit via AJAX (or AHAH, really).

It also thoroughly rejigs the way the animation is done to animate marginBottom instead of height (after reading the source for Fx.Slide from mootools...). If you artificially slow the anims down in custom.js you can see the difference fairly clearly. This bit could/should have been done in a different branch, oh well, sorry about that :)

[lp:~mwhudson/loggerhead/ajaxy-changelog]

307. By Michael Hudson-Doyle on 2009-03-16

merge trunk

[Paul Hummer (rockstar)]

Hi Michael-

  These changes look good. The animations look better now. I still think we
should seriously consider a lazr-js dependency, as I think that it would be a
great help to both the loggerhead project and the lazr-js project.

 vote approve
 status approved

Cheers,
Paul

--
Paul Hummer
http://theironlion.net
1024/862FF08F C921 E962 58F8 5547 6723 0E8C 1C4D 8AC5 862F F08F

review: Approve

=== modified file 'loggerhead/apps/branch.py'
--- loggerhead/apps/branch.py	2009-02-18 10:36:48 +0000
+++ loggerhead/apps/branch.py	2009-03-13 05:36:26 +0000
@@ -15,6 +15,7 @@
 from loggerhead.controllers.inventory_ui import InventoryUI
 from loggerhead.controllers.annotate_ui import AnnotateUI
 from loggerhead.controllers.revision_ui import RevisionUI
+from loggerhead.controllers.revlog_ui import RevLogUI
 from loggerhead.controllers.atom_ui import AtomUI
 from loggerhead.controllers.download_ui import DownloadUI
 from loggerhead.controllers.search_ui import SearchUI
@@ -82,6 +83,7 @@
         'changes': ChangeLogUI,
         'files': InventoryUI,
         'revision': RevisionUI,
+        '+revlog': RevLogUI,
         'download': DownloadUI,
         'atom': AtomUI,
         'search': SearchUI,
 
=== modified file 'loggerhead/controllers/changelog_ui.py'
--- loggerhead/controllers/changelog_ui.py	2008-12-05 18:52:44 +0000
+++ loggerhead/controllers/changelog_ui.py	2009-03-13 05:36:26 +0000
@@ -17,6 +17,8 @@
 # Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 #
 
+import simplejson
+
 from paste.httpexceptions import HTTPServerError
 
 from loggerhead import util
@@ -58,7 +60,10 @@
                 scan_list = revid_list[i:]
             change_list = scan_list[:pagesize]
             changes = list(history.get_changes(change_list))
-            history.add_changes(changes)
+            data = {}
+            for i, c in enumerate(changes):
+                c.index = i
+                data[str(i)] = c.revid
         except:
             self.log.exception('Exception fetching changes')
             raise HTTPServerError('Could not fetch changes')
@@ -71,9 +76,6 @@
             navigation.query = query
         util.fill_in_navigation(navigation)
 
-        # add parent & merge-point branch-nick info, in case it's useful
-        history.get_branch_nicks(changes)
-
         # Directory Breadcrumbs
         directory_breadcrumbs = (
             util.directory_breadcrumbs(
@@ -84,6 +86,7 @@
         return {
             'branch': self._branch,
             'changes': changes,
+            'data': simplejson.dumps(data),
             'util': util,
             'history': history,
             'revid': revid,
 
=== added file 'loggerhead/controllers/revlog_ui.py'
--- loggerhead/controllers/revlog_ui.py	1970-01-01 00:00:00 +0000
+++ loggerhead/controllers/revlog_ui.py	2009-03-13 05:36:26 +0000
@@ -0,0 +1,23 @@
+from loggerhead import util
+from loggerhead.controllers import TemplatedBranchView
+
+
+class RevLogUI(TemplatedBranchView):
+
+    template_path = 'loggerhead.templates.revlog'
+
+    def get_values(self, path, kwargs, headers):
+        history = self._history
+        revid = self.get_revid()
+
+        changes = list(history.get_changes([revid]))
+        history.add_changes(changes)
+        history.get_branch_nicks(changes)
+
+        return {
+            'branch': self._branch,
+            'entry': changes[0],
+            'util': util,
+            'revid': revid,
+            'url': self._branch.context_url,
+        }
 
=== added file 'loggerhead/static/images/spinner.gif'
 Binary files loggerhead/static/images/spinner.gif	1970-01-01 00:00:00 +0000 and loggerhead/static/images/spinner.gif	2009-03-16 03:05:49 +0000 differ
=== modified file 'loggerhead/static/javascript/changelog.js'
--- loggerhead/static/javascript/changelog.js	2009-02-20 03:30:31 +0000
+++ loggerhead/static/javascript/changelog.js	2009-03-16 02:58:10 +0000
@@ -53,15 +53,24 @@
     revlogs.each(
       function(item, i)
       {
-        var item_slide = item.query('.revisioninfo');
-        var open_content  = new Array();
-        var close_content = new Array();
-        open_content.push(item.query('.long_description'));
-        close_content.push(item.query('.short_description'));
-        var expand_icon = item.query('.expand_icon');
-        var collapsable = new Collapsable(item_slide, expand_icon, open_content, close_content, false);
+        var revid = revids[item.get('id').replace('log-', '')];
+        var collapsable = new Collapsable(
+          {
+            expand_icon: item.query('.expand_icon'),
+            open_node: item.query('.long_description'),
+            close_node: item.query('.short_description'),
+            source: global_path + '+revlog/' + revid,
+            source_target: item.query('.source_target'),
+            loading: item.query('.loading'),
+            is_open: false
+          });
 
-        item.query('.expand_revisioninfo').on('click',function(){collapsable.toggle();});
+        item.query('.expand_revisioninfo a').on(
+          'click',
+          function(e) {
+            e.preventDefault();
+            collapsable.toggle();
+          });
         item.collapsable = collapsable;
       });
 
 
=== modified file 'loggerhead/static/javascript/custom.js'
--- loggerhead/static/javascript/custom.js	2009-02-26 01:04:18 +0000
+++ loggerhead/static/javascript/custom.js	2009-03-16 02:58:10 +0000
@@ -75,30 +75,15 @@
   setTimeout("Y.get('#search_terms').setStyle('display','none')", 300);
 }
 
-function Collapsable(item, expand_icon, open_content, close_content, is_open)
+function Collapsable(config)
 {
-  this.is_open = is_open;
-  this.item = item;
-  this.open_content  = open_content;
-  this.close_content = close_content;
-  this.expand_icon   = expand_icon;
-
-  if (this.is_open) {
-    this.height = item.get('region').height;
-  }
-  else {
-    this.height = null;
-  }
-
-  //var expander = new Fx.Slide(this.item, { duration: 200 } );
-  if (!this.is_open)
-  {
-    this.expand_icon.set('src',this.expand_icon.get('title'));
-  }
-  else
-  {
-    this.expand_icon.set('src',this.expand_icon.get('alt'));
-  }
+  this.is_open = config.is_open;
+  this.source_target = config.source_target;
+  this.open_node = config.open_node;
+  this.close_node = config.close_node;
+  this.expand_icon = config.expand_icon;
+  this.source = config.source;
+  this.loading = config.loading;
 }
 
 function get_height(node) {
@@ -112,56 +97,90 @@
   return height;
 }
 
+Collapsable.prototype._load_finished = function(tid, res)
+{
+  var newNode = Y.Node.create(res.responseText.split('\n').splice(1).join(''));
+  this.source_target.ancestor().replaceChild(newNode, this.source_target);
+  this.source_target = null;
+  this.source = null;
+  this.loading.setStyle('display', 'none');
+  this.open();
+};
+
 Collapsable.prototype.open = function()
 {
-  if (this.height == null) {
-    this.height = get_height(this.item);
-  }
+  if (this.source) {
+    this.loading.setStyle('display', 'block');
+    Y.io(
+      this.source,
+      {
+        on: {complete: this._load_finished},
+        context: this
+      });
+    return;
+  }
+
+  var open_height = get_height(this.open_node);
+
+  var close_height;
+  if (this.close_node) {
+    close_height = this.close_node.get('region').height;
+  }
+  else {
+    close_height = 0;
+  }
+
+  var container = this.open_node.ancestor('.container');
 
   var anim = new Y.Anim(
     {
-      node: this.item,
+      node: container,
       from: {
-        height: 0
+        marginBottom: close_height - open_height
       },
       to: {
-        height: this.height
+        marginBottom: 0
       },
       duration: 0.2
     });
+
   anim.on('end', this.openComplete, this);
-  this.item.setStyle('height', 0);
-  this.item.setStyle('display', 'block');
+  container.setStyle('marginBottom', close_height - open_height);
+  if (this.close_node) {
+    this.close_node.setStyle('display', 'none');
+  }
+  this.open_node.setStyle('display', 'block');
+  this.expand_icon.set('src', this.expand_icon.get('alt'));
   anim.run();
 };
 
 Collapsable.prototype.openComplete = function()
 {
-  for (var i=0;i<this.open_content.length;++i)
-  {
-    this.open_content[i].setStyle('display','block');
-  }
-
-  for (var i=0;i<this.close_content.length;++i)
-  {
-    this.close_content[i].setStyle('display','none');
-  }
-
-  this.expand_icon.set('src',this.expand_icon.get('alt'));
   this.is_open = true;
 };
 
 Collapsable.prototype.close = function()
 {
-  var item = this.item;
+  var container = this.open_node.ancestor('.container');
+
+  var open_height = this.open_node.get('region').height;
+
+  var close_height;
+  if (this.close_node) {
+    close_height = get_height(this.close_node);
+  }
+  else {
+    close_height = 0;
+  }
+
   var anim = new Y.Anim(
     {
-      node: this.item,
+      node: container,
       from: {
-        height: this.height
+        marginBottom: 0
       },
       to: {
-        height: 0
+        marginBottom: close_height - open_height
       },
       duration: 0.2
     });
@@ -170,29 +189,18 @@
 };
 
 Collapsable.prototype.closeComplete = function () {
-  this.item.setStyle('display', 'none');
-  var i;
-  for (i=0;i<this.open_content.length;++i)
-  {
-    this.open_content[i].setStyle('display','none');
-  }
-
-  for (i=0;i<this.close_content.length;++i)
-  {
-    this.close_content[i].setStyle('display','block');
-  }
-  this.expand_icon.set('src',this.expand_icon.get('title'));
+  this.open_node.setStyle('display', 'none');
+  if (this.close_node) {
+    this.close_node.setStyle('display', 'block');
+  }
+  this.open_node.ancestor('.container').setStyle('marginBottom', 0);
+  this.expand_icon.set('src', this.expand_icon.get('title'));
   this.is_open = false;
 };
 
-Collapsable.prototype.isOpen = function()
-{
-  return this.is_open;
-};
-
 Collapsable.prototype.toggle = function()
 {
-  if (this.isOpen())
+  if (this.is_open)
   {
     this.close();
   }
 
=== modified file 'loggerhead/static/javascript/diff.js'
--- loggerhead/static/javascript/diff.js	2009-02-26 02:06:31 +0000
+++ loggerhead/static/javascript/diff.js	2009-03-16 02:15:47 +0000
@@ -151,10 +151,17 @@
     diffs.each(
       function(item, i)
       {
-        var item_slide = item.next('.diffinfo');
-        var expand_icon = item.query( '.expand_diff' );
-        var collapsable = new Collapsable(item_slide, expand_icon, [], [], true);
-        item.query('.expand_diff').on('click', function(){collapsable.toggle();});
-        item.collapsable=collapsable;
-      });
+        item.query('.expand_diff').on('click', function() { collapsable.toggle(); });
+        Y.log(item.ancestor().query('.diffinfo'));
+        var collapsable = new Collapsable(
+          {
+            expand_icon: item.query('.expand_diff'),
+            open_node: item.ancestor().query('.diffinfo'),
+            close_node: null,
+            source: null,
+            source_target: null,
+            is_open: true
+          });
+       item.collapsable=collapsable;
+       });
   });
 
=== modified file 'loggerhead/templates/changelog.pt'
--- loggerhead/templates/changelog.pt	2009-03-04 22:30:32 +0000
+++ loggerhead/templates/changelog.pt	2009-03-16 03:05:49 +0000
@@ -7,6 +7,9 @@
       <link rel="alternate" type="application/atom+xml"
             tal:attributes="href python:url(['/atom']);
                             title string:RSS feed for ${branch/friendly_name}" />
+    <script type="text/javascript">
+      var revids = <tal:block content="data" />;
+    </script>
       <script type="text/javascript"
               tal:attributes="src python:branch.static_url('/static/javascript/changelog.js')"></script>
     </metal:block>
@@ -67,7 +70,7 @@
       <table id="logentries">
         <tr class="logheader">
           <td class="revisionnumber">Rev</td>
-          <td class="expandcell">&nbsp;</td>
+          <td class="expandcell show_if_js">&nbsp;</td>
           <td class="summarycell">Summary</td>
           <td class="authorcell">Author</td>
           <td class="datecell">Date</td>
@@ -76,55 +79,45 @@
         </tr>
         <tal:block tal:repeat="entry changes">
           <a tal:attributes="name string:entry-${entry/revno}"/>
-          <tr tal:attributes="class string:blueRow${entry/parity} revision_log">
+          <tr tal:attributes="class string:blueRow${entry/parity} revision_log; id string:log-${entry/index}">
             <td class="revnro revnolink"><a tal:attributes="title python:'Show revision '+entry.revno;
                                                             href  python:url(['/revision', entry.revno], clear=1)"
                                             tal:content="python:util.trunc(entry.revno)"></a>
             </td>
-            <td class="expcell">
+            <td class="expcell show_if_js">
               <div class="expand_revisioninfo">
                 <!-- So, this is interesting. I'm using "alt" to have the correct URL for the image of the expanded icon
                      and "title" tag for the contracted URL of the image. This is a bit of a hack, but it's better than
                      other approaches I tried  :)  -->
-                <img tal:attributes="src python:branch.static_url('/static/images/treeCollapsed.png');
-                                     alt python:branch.static_url('/static/images/treeExpanded.png');
-                                     title python:branch.static_url('/static/images/treeCollapsed.png')"
-                     class="expand_icon" />
+                <a href="#">
+                  <img tal:attributes="src python:branch.static_url('/static/images/treeCollapsed.png');
+                                       alt python:branch.static_url('/static/images/treeExpanded.png');
+                                       title python:branch.static_url('/static/images/treeCollapsed.png')"
+                       class="expand_icon" />
+                </a>
               </div>
             </td>
-            <td class="summcell"><div tal:attributes="class string:short_description">
-                <a tal:attributes="title python:'Show revision '+entry.revno;
-                                   href  python:url(['/revision', entry.revno], clear=1);
-                                   class string:link"
-                   tal:content="entry/short_comment"></a>
-              </div>
-              <div tal:attributes="class string:long_description;
-                                   style string:display:none">
-                <a tal:attributes="title python:'Show revision '+entry.revno;
-                                   href  python:url(['/revision', entry.revno], clear=1);
-                                   class string:link"
-                   tal:content="structure python:util.fixed_width(entry.comment)"></a>
-              </div>
-              <div class="revisioninfo" style="display:none;">
-                <ul class="expandrev">
-                  <li class="mfrom" tal:repeat="parent python:entry.parents[1:]">
-                    <span class="revnolink">
-                      <a tal:attributes="href python:url(['/changes', parent.revno])"
-                         tal:content="parent/revno"></a>
-                    </span>
-                    <a tal:condition="parent.branch_nick"
-                       tal:attributes="href python:url(['/changes'], start_revid=parent.revno)"
-                       tal:content="python:'(' + parent.branch_nick + ')'"
-                       title="Show history" class="link"></a>
-                  </li>
-                  <li class="mto" tal:repeat="merge_point entry/merge_points">
-                    <a tal:attributes="href python:url(['/changes'], start_revid=merge_point.revno)"
-                       tal:content="python:revno_with_nick(merge_point)"
-                       title="Show history" class="link"></a>
-                  </li>
-                  <li class="committerli" tal:content="python:util.hide_email(entry.author)"></li>
-                  <tal:block content="structure python:file_change_summary(url, entry)" />
-                </ul>
+            <td class="summcell">
+              <div style="overflow: hidden">
+                <div class="container">
+                  <div class="short_description">
+                    <a tal:attributes="title python:'Show revision '+entry.revno;
+                                       href  python:url(['/revision', entry.revno], clear=1);
+                                       class string:link"
+                       tal:content="entry/short_comment"></a>
+                    <div class="loading" style="display:none;">
+                      <img tal:attributes="src python:branch.static_url('/static/images/spinner.gif')" />
+                    </div>
+                  </div>
+                  <div class="long_description" style="display: none">
+                    <a tal:attributes="title python:'Show revision '+entry.revno;
+                                       href  python:url(['/revision', entry.revno], clear=1);
+                                       class string:link"
+                       tal:content="structure python:util.fixed_width(entry.comment)"></a>
+                    <div class="source_target">
+                    </div>
+                  </div>
+                </div>
               </div>
             </td>
             <td tal:content="python:util.trunc(util.hide_email(entry.author), 20)"
 
=== modified file 'loggerhead/templates/revision.pt'
--- loggerhead/templates/revision.pt	2009-03-05 22:56:59 +0000
+++ loggerhead/templates/revision.pt	2009-03-16 02:15:47 +0000
@@ -123,28 +123,32 @@
                tal:content="item/filename">
             </a>
           </div>
-          <div class="diffinfo">
-            <div class="pseudotable unified"
-                 tal:repeat="chunk item/chunks">
-
-              <tal:block condition="not:repeat/chunk/start">
-                <div class="pseudorow context">
-                  <div class="lineNumber separate"></div>
-                  <div class="lineNumber second separate"></div>
-                  <div class="code separate"></div>
-                  <div class="clear"><!-- --></div>
+          <div style="overflow: hidden">
+            <div class="container">
+              <div class="diffinfo">
+                <div class="pseudotable unified"
+                     tal:repeat="chunk item/chunks">
+
+                  <tal:block condition="not:repeat/chunk/start">
+                    <div class="pseudorow context">
+                      <div class="lineNumber separate"></div>
+                      <div class="lineNumber second separate"></div>
+                      <div class="code separate"></div>
+                      <div class="clear"><!-- --></div>
+                    </div>
+                  </tal:block>
+
+                  <div tal:repeat="line chunk/diff"
+                       tal:attributes="class string:pseudorow ${line/type}-row">
+                    <div class="lineNumber first"
+                         tal:content="structure python:util.fill_div(line.old_lineno)"></div>
+                    <div class="lineNumber second"
+                         tal:content="structure python:util.fill_div(line.new_lineno)"></div>
+                    <div tal:attributes="class string:code ${line/type}"
+                         tal:content="structure python:util.fill_div(util.html_clean(line.line))"></div>
+                    <div class="clear"><!-- --></div>
+                  </div>
                 </div>
-              </tal:block>
-
-              <div tal:repeat="line chunk/diff"
-                   tal:attributes="class string:pseudorow ${line/type}-row">
-                <div class="lineNumber first"
-                     tal:content="structure python:util.fill_div(line.old_lineno)"></div>
-                <div class="lineNumber second"
-                     tal:content="structure python:util.fill_div(line.new_lineno)"></div>
-                <div tal:attributes="class string:code ${line/type}"
-                     tal:content="structure python:util.fill_div(util.html_clean(line.line))"></div>
-                <div class="clear"><!-- --></div>
               </div>
             </div>
           </div>
 
=== added file 'loggerhead/templates/revlog.pt'
--- loggerhead/templates/revlog.pt	1970-01-01 00:00:00 +0000
+++ loggerhead/templates/revlog.pt	2009-03-13 05:36:26 +0000
@@ -0,0 +1,21 @@
+<div class="revisioninfo">
+  <ul class="expandrev">
+    <li class="mfrom" tal:repeat="parent python:entry.parents[1:]">
+      <span class="revnolink">
+        <a tal:attributes="href python:url(['/changes', parent.revno])"
+           tal:content="parent/revno"></a>
+      </span>
+      <a tal:condition="parent.branch_nick"
+         tal:attributes="href python:url(['/changes'], start_revid=parent.revno)"
+         tal:content="python:'(' + parent.branch_nick + ')'"
+         title="Show history" class="link"></a>
+    </li>
+    <li class="mto" tal:repeat="merge_point entry/merge_points">
+      <a tal:attributes="href python:url(['/changes'], start_revid=merge_point.revno)"
+         tal:content="python:revno_with_nick(merge_point)"
+         title="Show history" class="link"></a>
+    </li>
+    <li class="committerli" tal:content="python:util.hide_email(entry.author)"></li>
+    <tal:block content="structure python:file_change_summary(url, entry)" />
+  </ul>
+</div>