Javascript: Reverse Order Lists

06/25/2007 03:12 PM by Chris Toohey

I had a need to track document edit history in a given document, and then display said history in a "history log". This is a no-brainer for anyone who's written one of these before. You basically save history as a new item in a multi-value text field. However, as this was an application that contained parallel-type workflow and often has the users referring to said document edit history in their comments on the document, etc. - I wanted to give them a little more than just a simple block of text.

So, I looked to the 'blogging world. See, the majority of weblogs out there number their comments (and no, this 'blog doesn't). Since the comments are often inline and not categorized, the easiest way of referring to a prior comment is by it's number. For example, if my comment is going to be #10 but my intended response should be directed to the comment at position #2, my comment might look something like this:

@2:

STFU!

Make sense? So, I thought that I would do the same - simply append the latest edit to a field in the document called "history". To get the numbered affect, I would create a Computed Text element with the following @Formula:

@If(history = ""; ""; @Implode("<li>" + history + "</li>"))

Surround said element with this markup:

<ol>
<Computed Text>
</ol>

Pretty simple - this gives me a list of items in the history, now 1-10 (should there be 10 total items in the history field).

This was fine until the users requested that they get this same functionality, but they wanted the latest revisions to appear at the top of the list. Basically, they wanted the document edit history to be sorted in reverse order.

This was easy enough to do at the formula end, basically prepending the latest revision to the history field, but not so easy to the Ordered List logic that I had built into the UI of the application.

After a lot of tinkering, I thought that the best thing to do would be to maintain the simple @Formula to display the imploded, markup-surrounded history items and let something that's much more user-manageable take over. So I looked to Javascript to solve this problem.

So, I wrote a function that would go through my markup, get all Ordered List elements, and reverse their order. Since the history items are already in reverse order, it was simply a matter of removing the prepending number from each item and create a descending list of item numbering, starting from the ubound of the given Ordered List array of <li>s.

This worked, but what if I didn't want ALL of my Ordered List elements to appear in reverse order? I changed my markup on the target Ordered List for the history elements to the following:

<ol class="reverse">
<Computed Text>
</ol>

I then added a quick check to run my reverse sorting on only those Ordered List elements which contained the classname "reverse". Here's the resultant function, which I then could trigger via the onload of my page to get the desired effect!

function reverseols() {
   var ols= document.getElementsByTagName("ol");
   for (var x=0; x < ols.length; x++) {
      if (ols[x].className == "reverse") {
         ols[x].style.listStyle='none';
         var li=ols[x].getElementsByTagName('li');
         for(var i=0; i < li.length; i++)    {
            li[i].insertBefore(document.createTextNode(i+1+'. '), li[i].firstChild);
            ols[x].insertBefore(li[i], ols[x].firstChild);
         }
      }
   }
}