Solved: Clickable icons

This patch also reverses the design change to attach events to "li" elements rather than anchors. It does away with a lot of event bubbling and weird code. The "bullet" feature already existed in the settings page and has just been fixed to work better.

Along with changing the CSS and JS files, this patch requires a new "images" sub-folder to be created with the following two files:

http://www.lullabot.com/files/icons/lullacons_pack1/folder-closed-white.png
http://www.lullabot.com/files/icons/lullacons_pack1/folder-open-white.png

Images can not be included in a patch, so anyone wishing to test this feature has to do that manuallly.

Also, here is the promised screenshot.

I installed an Arabic site and added an RTL stylesheet. The layout seems fairly straightforward.

I expect a lot of trouble with different themes and different margins though. The CSS essentially has to make a wild guess where the list-style icon is going to end up, so it can position the invisible link directly over it. I may end up having to hard-code the bullet icon margins.

Having for nbsp entities to make the invisible link pretty much 12px wide also seems naive. This will require advice from a CSS guru.

And here is a zipped copy of the module with the new images, to make it easier to test.

I have now failed to attract assistance from several channels. Fortunately, I have a few ideas how to make the margins/width more robust, and I'll try them out before soliciting for more tests.

However, my schedule for getting this milestone (alpha3) ready is June 9, so by then I will either have a known bug report I haven't solved, or the change will be in HEAD (which is, after all, still unstable) where it will hopefully get more attention. :)

Goes to show that you can always improve on your first version.

This one completely does away with static margins and positions, and instead shifts the overlay dynamically by the exact amount needed (querying the CSS values from JS). The Javascript becomes a bit more complex, but I've taken care to add good comments. Tested on English and Arabic (RTL) - the RTL code is a bit trickier as the overlay must be shifted to the other side of the text link, requiring an individual shift for each single menu item, but it works perfectly.

Also, the ugly nbsp stuff is gone. Instead of using a display:inline link padded to the right width with nbsp, I now have a float:left display:block link set to the exact dimensions of the icon image.

The CSS code has a background:blue;opacity:0.3 rule that helps visualize exactly how the overlay covers the icon image. This is debug code which must be removed later.

I may end up pushing this patch back in favor of more straight-forward improvements, however, seeing as it is more complex than I expected. alpha3 will be out on Tuesday, but this patch might not be in it.

(Remember that this patch doesn't include the "images/" directory mentioned above.)

Here is the zipped image folder for convenience.

Fixed some minor commenting styles and pixel offsets and removed the debug code, but nothing of substance changed.

This goes in now.

The greatest feature to happen to this module this year has just landed!

Will release alpha3 shortly.