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
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
containerparameter can now bea CSS-based selector
a single-element jQuery object, or
a DOM element
the
findItemsis no longer used, and the orderable items are now specified through theoptionsobjectthe
layoutHandleris no longer passed as a parameter, but specified through theoptionsobject
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);
|