Following on from last timelast time.

Next comes the javascript. This script is "borrowed" from Paul Sowden’s excellent article on A List Apart, Alternative Style: Working With Alternate Style Sheets. Here’s the script:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute(”rel”).indexOf(”style”) != -1
&& a.getAttribute(”title”)) {
a.disabled = true;
if(a.getAttribute(”title”) == title) a.disabled = false;
}
}
}

You’ll need to include this on any page you want this to work on, either in script tags in the page, or in an externally linked javascript file.

From there, you just need to put a button on link on your pages somewhere to changeswitch the stylesheets. At the bottom of this post you will see .

This is a simple toggle button. Press it once & it switches to the showrevisions stylesheet, press it again & it switches back. You can format it any way you like, but to include this on a page, here’s the code:

<p id="revisionlink">This article has been revised, <input id="revisionsbutton" value="Show Revisions" onclick="if (this.value=='Show Revisions') {setActiveStyleSheet('Show All Revisions'); this.value= 'Hide Revisions'; } else {setActiveStyleSheet('Default Stylesheet'); this.value= 'Show Revisions'; }" type="button"></p> <span id="revisionslegend"><del>This is deleted text</del> <ins>This is inserted text</ins></span>

That’s it for the main part. However, I took this one step further. For some of my posts, I don’t make any revisions (yes, sometimes I do get it right the 1^st time). So I implememted a very simple pattern match check on the individual archive template of Movable Type. This uses Brad Choate’s great Regex plugin for Movable Type. Despite the fact that it isn’t listed as such, this plugin works fine with MT version 3.01. So install this plugin (very simple, it’s 3 files), then include this code on your individual archive template:

<MTIfMatches expr="[MTEntryBody][MTEntryMore]" pattern="m/(<del)|(<ins)/i">
<p id="revisionlink">This article has been revised, <input id="revisionsbutton" type="button" value="Show Revisions" onclick="if (this.value==’Show Revisions’) {setActiveStyleSheet(’Show All Revisions’); this.value= ‘Hide Revisions’; } else {setActiveStyleSheet(’Default Stylesheet’); this.value= ‘Show Revisions’; }" /></p>
</MTIfMatches>

The id tags revisionlink & revisionsbutton are set so I can style them in CSS, you can do whatever you want. Ditto for the text. All this is doing is checking both the Entry Body & Entry More (extended section) for the <del> or <ins> tags, then if they exists, show the button. Simple, yet effective!