Layout Customizer - Layout and Permissions - v0.3

Layout

The Layout Customizer 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.

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.

Drop Targets

The term "drop target" here refers to the place where a module can be move to, or "dropped":

There is one drop target before each module.
There is one drop target at the bottom of each column.

The drop targets for our example are shown by the red markers in the diagram below.

Drop Target Permissions

So now that you understand the notion of a drop target, we can get to the subject of the drop target permissions object itself. The Javascript object that describes the various drop target permissions is a two-dimensional array of binary numbers (i.e. 0s and 1s) where

each row describes the permissions for one module, i.e. the first row describes where the first module can or can't go
each column in that row describes the permissions for one of the drop targets, i.e. the first column refers to the first drop target, the second column refers to the second drop target, etc.

Locked Modules

Let's look at an example in detail: Suppose Module 1 in our two-column example is locked. This means that it cannot be moved out of the top position in Column 1, and nothing can be moved above it in Column 1.

Modules with Varying Precendence

The Layout Customizer also allows users to give module different precedence. Modules cannot be moved ahead of a module with a lower precedence.

Let's look at an example: The diagram below shows our example layout with various precedences. The higher the number, the higher the precedence (and if nothing is said, precedence is 0).