I’d been looking at easy CMS systems and was turned off by the steep learning curves untile I came across Website Baker. It lacks the flexibility of most of the more powerful cousins, but more than makes up for it in simplicity. And simple is what you want for a simple, low-traffic site.

The app looks pretty cool, but some of the UI is not very repsonsive, so I decided to fix my major peeves with it. I’d been looking for some real project to use some of the Yahoo! UI Library components, and this was the perfect opportunity.

The results is the Javascript Admin module, that persists which pages were toggled in the “Pages” listing and enabled drag-and-drop for rearranging pages and sections. WB has support for “modules”, but they are intended to enhance the sites you develop with it, rather than the CMS itself. So integrating this module does require the user to add one line to the CMS source itself.

While the YUI library took care of most of the heavy lifting, this still involved a lot of fairly complex JavaScript code.

Adding JS functionality to an Existing App
Since I wanted to touch the CMS source as little as possible, I attached all my JS actions using techniques described on the Unobtrusive Javascript site. This also allows the scripts to degrade gracefully; for example the drag-and-drop doesn’t seem to work in Opera, but WB is not affected adversly and you can still use it “as before”.

Fixing up bad HTML
One problem I had to work around was the invalid HTML being generated for the CMS UI. Specifically, in the pages listing, WB uses non-unique element IDs (both an UL and a LI use the same Id “p1”, for example). I fixed that by replacing the duplicates with unique IDs generated by the script. I also had to add IDs to some elements (TRs) to be able to access them in my script.

Another problem on the same page was that the nested list was malformed and contained ULs as childring of other ULs (rather than as children of an LI). Interestingly, some — but not all — browser I tested on automatically moved the bad ULs inside the IL element they belonged to. So I had to pre-process the page to make sure the ULs were being parented by LIs.

Using the Yahoo! User Interface Library
The YUI is very nice and works quite well. For this project, I used the Dom, Event, Connection Manager and Drag and Drop scripts. I did come across an issue with Drag and Drop where a drag seems to get started while another one is still in progress, but I think I worked around it. All the APIs are very clean and easy to use.