This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.
Tutorial - List Reorderer 0.5 Migration
This page will walk you through the process of upgrading your existing 0.4 List Reorderer implementation to the new 0.5 API. This tutorial assumes that
- you are already familiar with HTML, Javascript and CSS
- you are familiar with what the List Reorderer is and does
- you have an existing implementation of the List Reorderer that worked with the 0.4 Infusion release.
Dependencies
If you use the Fluid-all.js
file, you don't have to change this - this file still contains everything you need.
If, however, you are including independent files, you will need to add two files to your list: FluidDOMUtilities.js
and GeometricManager.js
. You also no longer need ui.droppable.js
.
If you have... |
You will need... |
---|---|
jquery/jquery-1.2.6.js jquery/jquery.keyboard-a11y.js jquery/ui.core.js jquery/ui.draggable.js jquery/ui.droppable.js jquery/jARIA.js fluid/Fluid.js fluid/Reorderer.js |
jquery/jquery-1.2.6.js jquery/jquery.keyboard-a11y.js jquery/ui.core.js jquery/ui.draggable.js jquery/jARIA.js fluid/Fluid.js fluid/FluidDOMUtilities.js <== new! fluid/GeometricManager.js <== new! fluid/Reorderer.js |
Join the fluid-talk mailing list and ask your questions there.
Initialization
The signature of the call to reorderList()
has been significantly simplified:
Old |
New |
---|---|
fluid.reorderList(containerSelector, itemSelector, orderChangedCallback, options); |
fluid.reorderList(container, options); |
The specific changes are as follows:
- the
container
parameter can now be- a CSS-based selector
- a single-element jQuery object, or
- a DOM element
- the
itemSelector
andorderChangeCallback
are now specified through theoptions
paramter
Item Selector
Instead of passing a selector identifying the orderable items as a parameter to reorderList()
, selectors are specified using the selectors
option.
If you used to have... |
Now you would have... |
---|---|
fluid.reorderList("#myList", ".myItems"); |
var myOpts = { selectors: { movables: ".myItems" } }; fluid.reorderList("#myList", myOpts); |
If you were using the form of the itemSelector
that included movables, selectables, etc., then all of these should be moved into the selectors
option:
If you used to have... |
Now you would have... |
---|---|
var findItems = { movables: ".orderable", selectables: "li", dropTargets: "li" }; fluid.reorderList("#list2", findItems); |
var opts = { selectors: { movables: ".orderable", selectables: "li", dropTargets: "li" } }; fluid.reorderList("#list2", opts); |
Order-changed Callback
Instead of passing an order-changed callback function as a parameter to reorderList()
, the callback is specified using the events
option, in particular the afterMove
event.
If you used to have... |
Now you would have... |
---|---|
var myCallback = function() { ... }; fluid.reorderList(myElem, ".movable-item", myCallback); |
var myCallback = function() { ... }; var options = { selectors: { movables: ".movable-item" }, events: { afterMove: myCallback } }; fluid.reorderList(myElem, options); |
Options
Other changes have been made to the format of the options
object:
cssClassNames
The cssClassNames
option has been renamed to styles
:
If you used to have... |
Now you would have... |
---|---|
var myClasses = { defaultStyle: "plain", selected: "selected", dragging: "dragging }; var opts = { cssClassName: myClasses }; fluid.reorderList(jQuery("body > ol:first"), opts); |
var myClasses = { defaultStyle: "plain", selected: "selected", dragging: "dragging }; var opts = { styles: myClasses }; fluid.reorderList(jQuery("body > ol:first"), opts); |