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 - Advanced Reorderer 0.5 Migration

Owned by Anastasia Cheetham
Last updated: Sept 29, 2008Version comment
3 min read

Overview

This page will walk you through the process of upgrading your existing 0.4 Reorderer implementation to the new 0.5 API.

NOTE: If you are using the List Reorderer or the Grid Reorderer, please see either Tutorial - List Reorderer 0.5 Migration or Tutorial - Grid Reorderer 0.5 Migration. If you are using the Lightbox, please see Tutorial - Lightbox 0.5 Migration. If you are using the Layout Customizer, please see Tutorial - Layout Customizer 0.5 Migration

This tutorial assumes that

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the Reorderer is and does
  • you have an existing implementation of the 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 and GeometricManager.js. You also no longer need ui.drobbable.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
On this Page
See Also
Still need help?

Join the fluid-talk mailing list and ask your questions there.

Initialization

The Reorderer constructor has been replaced by a creator function:

Old

New

 
new fluid.Reorderer (container,
                     findItems,
                     layoutHandler,
                     options);



new fluid.Reorderer (container,
                     findMovables,
                     layoutHandler,
                     options);

new fluid.reorderer (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 findItems is no longer used, and the orderable items are now specified through the options object
  • the layoutHandler is no longer passed as a parameter, but specified through the options object

The following sections describe each of these changes in more detail.

findItems/findMovables

Previously, identification of orderable and selectable items was accomplished using the findItems or findMovables paramaters. Now, item 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);

Layout Handler

Previously, you constructed a Layout Handler and passed it to the Reorderer constructor as a parameter. Now, the selection of Layout Handler is specified using the layoutHandlerName option.

If you used to have...

Now you would have...

 
var myLH = new ListLayoutHandler(...) {
    ...
};
fluid.reorderer(myElem, ".movable-item", myLH, options);

var options = {
    selectors: {
        movables: ".movable-item"
    },
    layoutHandlerName: "fluid.listLayoutHandler"
};
fluid.reorderer(myElem, options);

Layout Handler

Name to use

ListLayoutHandler

"fluid.listLayoutHandler"

GridLayoutHandler

"fluid.gridLayoutHandler"

ModuleLayoutHandler

"fluid.moduleLayoutHandler"

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);