Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

This page is intended to house information, discussion and resources related to the application of the Reorderer to add keyboard support to uPortal's channel reorganization functionality.

Layout Markup & Data

This tree structure is a representation of a tab with columns and portlets. The astricks in the structure are drop targets. In this tree structure, 'mov' indicates whether or not a portlet can be moved from its position, 'prec' indicates the portlet's precedence and 'rem' indicates whether or not a portlet can be deleted by the user.

There are two Javascript data structures below the tree which represent what would be provided to the reorderer with the tree markup.

This tree represents a single tab of a layout with 3 columns. The first column has 3 portlets, the second 2 and the third 3. The asterisks represent possible drop targets. The total number of drop targets on a tab is equal to the number of columns plus the number of portlets.

t1(mov=T,prec=50,rem=F) {
    c1(mov=T,rem=F) {
        *
        p1(mov=T,prec=90,rem=T)
        *
        p2(mov=F,prec=80,rem=F)
        *
        p3(mov=T,prec=50,rem=F)
        *
        p4(mov=T,rem=F)
        *
    }
    c2(mov=T,rem=T) {
        *
        p5(mov=F,prec,70,rem=F)
        *
        p6(mov=T,rem=T)
        *
    }
    c3(mov=T,rem=T) {
        *
        p7(mov=T,prec=60,rem=T)
        *
        p8(mov=T,rem=T)
        *
        p9(mov=T,rem=T)
        *
    }
}

The following data structure will be included in the init to describe the portlet elements and their containers

var layout = {
    id:"t2",
    columns:[
        { id:"c1", children:["portlet1","portlet2","portlet3","portlet4"]},
        { id:"c2", children:["portlet5","portlet6"]   },
        { id:"c3", children:["portlet7","portlet8","portlet9"]}
    ]
}

The following data structure will be included in the init and describes for each orderable element where it can be moved

Each row in the table represents the permissions for a single portlet being moved. Each column in the row indicates the drop permissions of the moved portlet with respect to each other portlet.

The pair of booleans indicate whether or not the portlet being moved can be dropped before and after the target portlet.

For example, dropTargets[2][1] = [0,1] which means that portlet 3 can not be dropped before portlet 2, but it can be dropped after portlet 2.

var dropTargetPerms = [
    [[0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0]],    // portlet1
    [[0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0]],    // portlet2
    [[0,0], [0,1], [1,1], [1,1], [0,1], [1,1], [0,1], [1,1], [1,1]],    // portlet3
    [[0,0], [0,0], [0,1], [1,1], [0,1], [1,1], [0,1], [1,1], [1,1]],    // portlet4
    [[0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0]],    // portlet5
    [[0,0], [0,0], [0,1], [1,1], [0,1], [1,1], [0,1], [1,1], [1,1]],    // portlet6
    [[0,0], [0,1], [1,1], [1,1], [0,1], [1,1], [1,1], [1,1], [1,1]],    // portlet7
    [[0,0], [0,0], [0,1], [1,1], [0,1], [1,1], [0,1], [1,1], [1,1]],    // portlet8
    [[0,0], [0,0], [0,1], [1,1], [0,1], [1,1], [0,1], [1,1], [1,1]]     // portlet9
];
  • No labels