v1.0 Release – Expand/Collapse for the Files Touched Patch

In my goals blog post I stated that I wanted to add expand/collapse functionality to the files touched patch. Why you ask? Well the whole goal is to get the pushlog to show more information but in an unobtrusive manner. Right now this isn’t happening. Adding expand/collapse functionality will allow the user to decide when he wants to see the files and when he doesn’t.

I recently wrote a white paper on the ergonomics of touch screens. One thing that I learnt from that exercise is that it is the application’s job to adapt to the user and not the other way around. The application will not succeed if the user is forced to adapt to the application. I think this concept applies to this situation where the pushlog provides the user the ability to hide or show the files touched instead of always showing them, which forces the user to adapt to the new look of the pushlog.

The Implementation

The map file

pushlogentry = '<tr class="parity#parity# #hidden# id#id#"><td>#push%pushinfo#</td><td class="age"><a href="{url}rev/#node|short#{sessionvars%urlparameter}">#node|short#</a></td><td><strong class="filerow">#author|person# &mdash; #desc|strip|escape|buglink#</strong><span class="filetouch fileid#id#">{filesTouched}</span> <span class="logtags">{inbranch%inbranchtag}{branches%branchtag}{tags%tagtag}</span>#mergerollup%mergehidden#</td></tr>n'

pushlog.tmpl

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

  // hide files touched
  $('.filetouch').hide();
  // Add expand/collapse link
  $('.filerow').each ( function(i) {
    if($(this).next().html() != "") {
      var pushid = ($(this).next().attr("class")).match(/fileidd+/);
      $(this).html($(this).html() + "<br/><span class="filelink">hidden files <a class="expandfile fileid" + pushid + "" href="#">[Expand]</a></span>");
    }
  });
 
  // add click handler to unhide hidden things
  $('.expandfile').click(function () {
    if ($(this).text() == "[Expand]")
      $(this).text("[Collapse]");
    else
      $(this).text("[Expand]");
 
    var pushid = $(this).attr("class");
    pushid = '.' + pushid.match(/fileidd+/);
    $(pushid).toggle();
    return false;
  });

The above pushlog.tmpl code is placed inside $(document).ready(). As you can see I basically hide all the files touched data on line 40. Then, I go through each files touched span and create the appropriate expand/collapse link on line 42. Lastly, I have the click handler that is responsible for displaying or hiding the files touched span. One important thing to note is that I must have a unique id (“fileid” in this case) for each expand/collapse link so that I know which files touched span to toggle. Without this unique id clicking on any one link would cause all links to expand/collapse, which we obviously don’t want.

There we have it, a nice and easy solution to this problem.