SCOTT EVANS Mostly about pointing microphones at loud things.

I just posted a small but welcome update to Indices.

In order to make the entire link cells clickable, the original version used a technique that caused “Save As” and “Copy Link Location” to break in most browsers. This has annoyed me for almost two years but I just found time to fix it.

The original version surrounded the cell content with a div, and put the link on that. I changed it to use CSS to expand the link:

td a, th a {
  display: block;
  height: 100%;
}

Seems to work much better.

You can download the new version (1.1) here.

Here’s a cool little hack I wrote: Indices. It takes the “vintage” looking Apache directory listings and gives them a significant facelift. I’ve wanted this for years and finally got around to doing it.

There’s a README in the download, but I thought I’d write a bit about the details of my approach.

Why?

I’ve been using a hacked-up version of Ash Young’s directory listing PHP. It worked pretty well, but I wasn’t able to get it running as the default index, so I had to softlink an index.php to every directory I cared about prettying up. And directory navigation is done with URL parameters (i.e. http://site/url?dir=somedir), which offends my delicate sense of aesthetics.

The softlink part was the real problem though; I had people asking how they could get their directory indexes to look nice, and “softlink this file to each directory” wasn’t going to work for them. So I set about finding a way to make directory listings pretty via Apache.

Getting started: adding CSS

Apache doesn’t give you a lot to work with, but it’s enough. There are a couple of mod_autoindex directives and options that got me started:

HeaderName and ReadmeName These directives allowed me to replace the HTML that appears before and after the file list. By adding IndexOptions SuppressHTMLPreamble, I was able to replace the entire HTML header — so I could use my own title and, more importantly, link to a CSS file. That was my prybar to styling the content.

IndexOptions HTMLTable This experimental option turns the file list itself into an HTML table. There’s (sadly) no semantic markup in the table, but the table itself is sort of semantic: the first column is the icon, the second is the filename, etc. Based on that knowledge, you can use gnarly CSS2 selectors and get a lot of styling.

For example, this snippet styles all of the td elements that are the third one after the first td. In the table Apache generates, that’s the “Size” column. Nice! (in its own way.) See the “table styling” section of style-nojs.css for more.

/* all other SIZE cells */
td:first-child + td + td + td {
padding-right: 5px;
}

Making the header dynamic

One problem with replacing the entire header: the title could no longer contain any information about the directory being browsed (like its name). After some digging I found that you can make the HeaderName file a PHP file with some .htaccess trickery:

# For the PHP file to execute in a header, need to have a major type of text
AddType text/html .php
AddHandler application/x-httpd-php .php

Another prybar: Now I could put server-side smarts in my listing.

I used this for my title text: urldecode($_SERVER['REQUEST_URI']). Then I added some PHP to look for a readme.html file and insert its contents before the table.

Of course, CSS2 doesn’t work in IE

Yeah, most of those neat CSS selectors don’t do anything in IE. I was still getting a lot of styling, but not everything: the “parent directory” link wasn’t getting hidden; table cell contents weren’t getting styled; etc.

Making the browser part dynamic

Finally it occurred to me: hey, javascript. I could hop around the DOM and insert semantic markup, which would allow for much simpler, universal CSS. The tradeoff is that you’re doing goofy DHTML things that might break in some browsers, and that won’t work at all for angry luddites who have javascript disabled. But everything has to work in IE, right? So I decided to give it a go.

The javascript isn’t too bad, really. It feels its way around the DOM — partially based on table position as semantic information — and adds class attributes, shuffles around some cell contents, and changes a few display things. I should document the resulting CSS so people can go nuts with styling, but for now, read the javascript.

I could have gotten a lot more carried away with the javascript. For instance, one way to attempt Apache 1.x compatibility would be to not use HTMLTable, and instead convert the non-table DOM into a table with javascript. Fortunately, I was only doing this for my Apache installation so I didn’t feel the need to try things like that.

A bit of productization

Finally, I spent some time making my code presentable and configurable. There are PHP variables to control whether you use CSS-only styling (which means you’re leaning on the CSS2 stuff) or the Javascript-and-CSS1 approach; what your title should say; what logo to use; etc. I used a few more Apache IndexOptions to clean up the output: FoldersFirst, IgnoreCase. I also wired up nice icons for most common file types (I grabbed a handful of these from somebody else’s free directory index package; can’t remember which).

The result

Here’s a sample index. It’s much nicer than the stock Apache thing. And the cool part is, you change your Apache config in one place (either a top-level .htaccess file, or in your Apache conf file), and every directory listing on your site dresses up.That’s about it. Hope this is useful to somebody.