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.

Simple Layout Reorderer API - v0.4

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

This documentation refers to the v0.4 released version of the Reorderer code. For documentation specific to the trunk, please see Layout Reorderer API.

Simple Layout Reorderer Overview

The Simple Layout Reorderer is a convenience function for applying the Reorderer to portlets, content blocks, or other chunks of layout with minimal effort. This page provides technical details of the API. For a simple working example, see Integrating the Reorderer.

Initialization

var myReorderableLayout = fluid.reorderLayout(containerSelector,
                                              layoutSelectors,
                                              orderChangedCallback,
                                              options);

Parameters

containerSelector

The containerSelector is a CSS-based string selector that identifies the DOM element containing the layout.

On This Page
See Also
Still need help?

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

layoutSelectors

The layoutSelectors is a collection of key/value pairs defining string selectors that identify the DOM elements that are to be reorderable and the columns that contain them.

Name

Description

columns

a CSS selector that identifies the columns that contain the orderable elements

modules

a CSS selector that identifies the modules that are to be reorderable

NOTE: At this time, the DOM elements must have valid ID attributes. The selectors in the layoutSelectors object need not use these IDs, but the attributes must be present.

orderChangedCallback - optional

The orderChangedCallback is an optional function that will be called by the Reorderer each time the order of modules items changes. The orderChangedCallback function can communicate the new order of modules to the server in any fashion. For more information on the orderChangedCallback function, see Order-Changed Callback - v0.4.

options - optional

The options object is an optional collection of key/value pairs that can be used to further configure the Grid Reorderer:

Name

Description

Values

Default

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
}];

cssClassNames

an object containing 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 defaultCssClassNames (shown to the right). And class names not provided will revert to the default. 

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

avatarCreator

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

 

The item being dragged will be cloned

dropWarningId

the ID of an element that should be displayed if users attempt to move an item to a location where movement is not permitted

 

(none)

instructionMessageId

the ID of the element containing any instructional messages

 

"message-bundle:"

Dependencies

The Simple Layout 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="jquery/ui.droppable.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/Reorderer.js"></script>
<script type="text/javascript" src="fluid/LayoutCustomizer.js"></script>