Fixes and Improvements to Image Reorderer

Colin Clark colinbdclark at
Wed Aug 26 03:17:32 UTC 2009

Hey everyone,

Based on a user inquiry on the Infusion users list, I stumbled across  
the fact that the Image Reorderer is in need of some serious care and  
feeding for Infusion 1.2. In its default configuration, it was largely  
broken. Our examples encouraged users to implement an archaic ID-based  
style of communicating with the server that required a lot of extra  
work. And our documentation for the afterMove event was syntactically  
broken. Ouch.

Jacob and I have been working on a new example page for the Image  
Reorderer. I removed all of the ID-based cruft and replaced it with  
simplified markup using the standard Fluid conventions. Jacob managed  
to shave off 65% of the original markup, and vastly simplified the CSS  
to go with it. He also introduced some new visual styling, which he  
thinks improves the contrast. I'd like to hear feedback from other  
designers in the community. Take a look here:

As this matures for Infusion 1.2, I'd like to promote it to a full- 
fledged template. Our users do regularly take our example markup and  
cut & paste them into their applications, so it needs to be exemplary  
and easy to use.

I've also been working on new documentation for the afterMove event,  
explaining how users might listen for this event and use it to send  
information back to the server. Here's a working draft of this tutorial:

Along with this new example and tutorial, I have ensured that the out- 
of-the-box Image Reorderer is now working as it should. This required  
a fair bit of dancing around legacy code in order to maintain  
backwards compatibility, and I'm still thinking about better  
strategies for enabling a simpler style by default without breaking  
compatibility with existing users of the id-based strategy. More on  
that later.

Still to do:
  * Lots of QA
  * Make it fully progressively enhanceable, so that users without  
JavaScript can reorder items using plain old form fields
  * Finish the afterMove tutorial

Feedback, comments, edits, and more code are much appreciated.


Colin Clark
Technical Lead, Fluid Project

More information about the fluid-work mailing list