iPhone Native Look and Feel Wikipedia

As I mentioned before, I used the “schools edition” of Wikipedia and stored it on my iPod Touch (will work on the iPhone as well) for some hot off-line Wikipedia action. What quickly became apparent is that the set of subject index pages that come with it are actually kind of hard to navigate (small text, etc). I figured that somebody had made some set of style sheets that made web apps look like native iPhone apps, and of course someone did.

So what I did was make a basic perl script would crawl through the subject index pages (looking for “categoryname” div tags) and generate an html file that had the same look and feel. Currently all of the index goes into a single page, which gets you the “wipe” effect, but it could just as easily be put into different files. I had to modify the javascript slightly to allow it to link into the actual content pages (the default javascript assumes that all the links are internal to the file… either that or I just couldn’t figure it out). Basically, if an “a” tag has a class of “external” then it’s… external.

So if you grab iphonenav.js from the link above, and modify the click eventListener like so:

addEventListener(“click”, function(event)
{

var link = event.target;

if (link.className.indexOf(“external”) == -1){
event.preventDefault();

while (link && link.localName.toLowerCase() != “a”)
link = link.parentNode;

if (link && link.hash)
{
var page = document.getElementById(link.hash.substr(1));
showPage(page);
}
}
}, true);

You can download the perl script from my site. Just run it against “wikipedia/wp/index/subject.html”. Save the script with a .pl extension. My host seems to be trying to interpret the script, even if I have the extension be “.pl.txt”.

You can see what the end result looks like here. By the way… you should be able to just take that html file and drop it next to the main index page for the Wikipedia schools edition.

As usual with this type of thing, I’m sure people will look at the script and think “what are you doing!?” But it seems to do the job.