Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Advanced Reorderer API - v0.5

Owned by Anastasia Cheetham
Last updated: Sept 30, 2008Version comment
2 min read

This documentation refers to version 0.5 of the Reorderer code. For documentation specific to trunk, please see Advanced Reorderer API.

Advanced use of the Reorderer

For cases where more control than that offered by any of the simple Reorderer interfaces, there is a creator function that affords much more flexibility.

Creator function

fluid.reorderer(container[, options]);

Parameters

container

The container parameter is a CSS-based selector, single-element jQuery object, or DOM element specifying the root node of the Reorderer.

On This Page
See Also
Still need help?

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

options

The options parameter is an optional collection of name-value pairs that configure the Reorderer:

Selectors

Name

Description

Values

selectors

an object containing CSS-based selectors for various parts of the Reorderer

See Reorderer Selectors - v0.5

Listeners

Name

Description

Values

Default

listeners

 

 

 
listeners: {
    onShowKeyboardDropWarning: null,
    onMove: null,
    afterMove: null
}

General options

Name

Description

Values

Default

mergePolicy

an object describing how user options should be merged in with defaults

 

 
mergePolicy: {
    "selectors.selectables": "selectors.movables",
    "selectors.dropTargets": "selectors.movables",
    keysets: "replace"
}

styles

an object containing CSS class names for styling the Reorderer. See fluid:below for a discussion of CSS styling of the Reorderer

The object may contain any of the keys defined in the default class names (shown to the right). Any class names not provided will revert to the default. 

styles: {
    defaultStyle: "orderable-default",
    selected: "orderable-selected",
    dragging: "orderable-dragging",
    mouseDrag: "orderable-dragging",
    hover: "orderable-hover",
    dropMarker: "orderable-drop-marker",
    avatar: "orderable-avatar"
};

keysets

an object containing sets of keycodes to use for directional navigation, and for the modifier key used for moving a movable item.

The object must be a list of objects containing the following keys:
  modifier : a function that returns true or false, indicating whether or not the required modifier(s) are activated
  up
  down
  right
  left 

fluid.defaultKeysets = [{
    modifier : function (evt) {
        return evt.ctrlKey;
    },
    up : fluid.keys.UP,
    down : fluid.keys.DOWN,
    right : fluid.keys.RIGHT,
    left : fluid.keys.LEFT
},
{
    modifier : function (evt) {
        return evt.ctrlKey;
    },
    up : fluid.keys.i,
    down : fluid.keys.m,
    right : fluid.keys.k,
    left : fluid.keys.j
}];

avatarCreator

a function that returns a valid DOM node to be used as the dragging avatar

 

The item being dragged will be cloned

instructionMessageId

the ID of the element containing any instructional messages

 

"message-bundle:"

Advanced options

Name

Description

Values

Default

containerRole

indicates the role, or general use, for this instance of the Reorderer

fluid.roles.LIST
fluid.roles.GRID
fluid.roles.REGIONS

fluid.roles.LIST

layoutHandlerName

 

"fluid.listLayoutHandler"
"fluid.gridLayoutHandler"
"fluid.moduleLayoutHandler"

"fluid.listLayoutHandler"

CSS Classes

The Reorderer applies CSS classes to orderable items, and updates them as they are moved. These classes can be used to apply visual cues to the various states of the orderable items. The class names are configurable. The default class names are:

   orderable-default - This class is applied to elements in their default state.
   orderable-selected - This class is applied to the element that has been selected. The selected item can then be moved using keystrokes.
   orderable-hover - This class is applied to orderable elements when the mouse hovers over them.
   orderable-dragging - This class is applied to the orderable element that is currently being moved using the keyboard.
   orderable-dragging - This class is also applied to the orderable element that is currently being moved using the mouse.
   orderable-avatar - This class is applied to the avatar, which defaults to the image of the orderable element as it is being dragged about by the mouse.
   orderable-drop-marker - This class is applied to the drop target indicator when the mouse is used to drag an item.

Dependencies

The Reorderer dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

<script type="text/javascript" src="Fluid-all.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jARIA.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.draggable.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="fluid/GeometricManager.js"></script>
<script type="text/javascript" src="fluid/Reorderer.js"></script>