Dorward

Rawdog and the Wordpress Upgrade Issue

02 September 2006

I've been using rawdog to handle RSS and ATOM feeds for some time now, and I've finally got around to doing something about the Wordpress Upgrade issue.

Every now and again the entire content of a feed will be dumped into the generated page. One common reason for this seems to be an upgrade of the backend software that generates a website and rebuilds the entire feed with enough changes to cause every article in it to be recognised by rawdog as changed.

Sometimes this results in several pages of previously read articles appearing in the HTML view that rawdog generates.

So, its time for a quick and dirty JavaScript solution (and I mean quick and dirty, there are all sorts of things about it that are less then optimal)

First we modify the stylesheet so that we can display items in feeds differently. We can just slap a display: none on them, but I'd prefer to get some idea of what I've hidden, so I'll use:

.seen-it {
    overflow: hidden;
    height: 3em;
    font-size: 0.5em;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.5; /* Non-standard until CSS 3 comes out */
}

Now we need a way to make feeds that we aren't interested in members of this class. We can already identify which items are part of a feed using Rawdog's built in functionality to make them all a member of the same class

<div class="item feed-__feed_hash__">

We can make use of that with:

<button onclick="seenIt('item feed-__feed_hash__', 
        this.parentNode.parentNode.parentNode.parentNode);">
  X
</button>

Here we pass two variables to the seenIt function, the class name of the block, and the div that acts as the container for the new items found during the period during which the item was found. (If the item was added to the feed at 12:45 and Rawdog was being run hourly on the half hour, then it would appear in the 12:30-13:30 block).

This will have to be modified depending on the Rawdog template in use so that the requisite number of parentNode calls are in place.

If this wasn't a quick and dirty version 0.001 I'd probably write something to climb the DOM looking for an element of a suitable class instead of hard coding the number of parentNode calls.

So we come to the seenIt function.

function seenIt(classes, node) {
  for (var i = 0; i < node.childNodes.length; i++) {
    if (node.childNodes[i].className && 
        node.childNodes[i].className == classes) {
    node.childNodes[i].className += ' seen-it';
  }
}

This is very simple and just loops over the children of the container looking for members that are the same class as the one calling the function. It then adds an extra class so that the style we wrote earlier applies.