Layout Reorderer Integration - Layout - v0.5
This documentation refers to version 0.5 of the Layout Reorderer code. For documentation specific to trunk, please see Layout Reorderer Selectors Tutorial.
Organizing chunks of content
The Layout Reorderer is a special case of a Reorderer. It can be used to provide the ability to organize arbitrary chunks of content, or "modules," provided they are laid out according to certain guidelines.
Join the fluid-talk mailing list and ask your questions there.
The Layout Reorderer understands each particular layout that it is working with via two Javascript objects that describe it: the layout object and the dropTargetPerms object. To use the Layout Reorderer, you will have to create these objects to pass in on initialization. The format of these objects is described below.
Layout
The Layout Reorderer works with modules of content that are organized into columns, as in the image below. In this example, we have five content modules organized into two columns: three in the left column and two in the right.
Conceptually, the Layout Reorderer considers each content module to be a "child" of its containing column. So in the example to the left, Modules 1, 2 and 3 are "children" of Column 1, and Modules 4 and 5 are "children" of Column 2. The columns themselves must be contained within some form of container.
The Javascript object that describes the layout does so by specifying the IDs of the DOM elements and the relationships between them. The format for the layout object for the example on the left is:
var layout = {
id:"module_container",
columns:[
{ id:"column_1", children:["module-1", "module-2", "module-3"]},
{ id:"column_2", children:["module-4", "module-5"]}
]
};
Let's look at this object in more detail:
The layout object contains two members: id and columns. The id member is simply the ID of the main container. In this example, let's say that's module-container.
The columns member is itself an object that describes the columns and their contents. It is an array, where each element in the array is in turn an object that describes one column. In our example, we have two columns, so the array has two rows, each containing an object:
columns:[
{ id:"column_1", children:["module-1", "module-2", "module-3"]},
{ id:"column_2", children:["module-4", "module-5"]}
]
The object in each row has two members, id and children. Since each of these object describes one column, the id member is the ID of that column. The children member is an array of the IDs of all of the children of that column. In our example, the first column has three children (modules 1 through 3), so the object describing it looks like this:
{
id : "column_1",
children : ["module-1", "module-2", "module-3"]
}
In the snippet above, the object has been spread out over a few lines to make it easier to see, but it's the same as in the earlier snippets.