In my previous blog post I explained the line break bug and how I would go about fixing it. I’ve managed to get the functionality up and running now. Lets have a look at the code:

// ellipsis for multi-line desc messages
$('.desc').each(function (i) {
  if($(this).html().indexOf("\n") != -1) {
    $(this).html($(this).html().replace(/\n/g, "
"));
    $(this).html(createEllipsis($(this).html(), ($(this).attr("class")).match(/id\d+/) + i));
    $('.hide').hide();
  }
});
$('.ellipsisexpand').click(function () {
  var pushid = $(this).attr("class");
  pushid = 'span.' + pushid.match(/id\d+/);
  $(pushid).toggle();
  return false;
});

function createEllipsis(html, pushid) {
  return html.substring(0, html.indexOf(""))
    + "<a class="\&quot;ellipsisexpand" href="\">[...]</a><span class="\&quot;hide">"
    + html.substring(html.indexOf(""), html.length)
    + "</span>";
}

The map file:

<strong class="desc id#id#">#author|person# — #desc|strip|escape|buglink#</strong>

When using jquery you want to keep all your functionality within the $(document).ready function, which is what I have done. So, in the map file I gave the strong tag that contains the commit message a new class, called desc (see above). Then, I loop through each tag containing a class called desc with the code on line 36. Within the loop I replace all occurances of ‘\n’ with ‘<br/>’.  Next I call createEllipsis() (line  39). This function rewrites the html within the strong tag to include an ellipsis link and puts all the lines that will get expanded/collapsed in a different span tag. Lastly, line 40 hides everything that should be hidden.

Next I have a click handler that expands/collapses any span tag with the class name ‘hide’. Within this function, I also uniquely identify which span tag to toggle. This is needed because there are can be more than one span tag with the class name, ‘hide’ on any given page. I set the pushid as one of the class names to uniquely identify each span tag. Thus, each span tag that should be hidden will have two class names, hide and the pushid. See the results below:

Collapsed Example

Expanded Example

As one of my goals for this release I wanted to take on a new bug. Now, the problem is that if there are line breaks in the commit message the pushlog will just turn them into spaces. Thus the message will become one big clump of text, which doesn’t look good.

The goal is to only show the very first line of the commit message if it has any line breaks in it. Then have an ellipsis link at the end that the user can click to expand/collapse the rest of the message. Also, when the message is expanded the line breaks should be displayed properly. For example:

Current Implementation

I am trying to fix a new bug 1) I will use jquery 2) I will finish it soon 3) 2 + 2 is 4

New Implementation while collapsed

I am trying to fix a new bug [...]

New Implementation while expanded

I am trying to fix a new bug [...]
1) I will use jquery
2) I will finish it soon
3) 2 + 2 is 4 or is it 22?

I will probably keep all the new code on the client side, implemented using jquery. Right now the line breaks are turned into spaces because they use the ‘\n’ character instead of using ‘<br/>’. I want to change all the line breaks to ‘<br />’ and then add an ellipsis link to all the commit messages that need it.

I’ve added expand/collapse functionality to the pushlog before so this shouldn’t be very hard to do. Look out for my next blog post explaining my implementation.