Elvis 5 JavaScript library - ColumnTree

This class renders a folder browser in HTML. It handles browsing through the Elvis folder structure similar to how this works in the Elvis desktop client. You can select folders and collections use the HitRenderer to display the assets contained in them.

Functions

init( targetId, elvisApi )

Initializes a ColumnTree folder browser.

refresh( )

Refreshes the ColumnTree, without changing any parameters.

How to use

var columnTree = new ColumnTree("#folderBrowser", elvisApi);
columnTree.pathChange = function () {
    refreshResults();
};

function refreshResults() {
    ...
    if (columnTree.containerId) {
        // collection is selected in ColumnTree
        query = "relatedTo:" + columnTree.containerId + " relationTarget:child relationType:contains " + query;
    }
    else if (columnTree.folderPath) {
        // folder is selected in ColumnTree
        query += ' ancestorPaths:"' + columnTree.folderPath + '"';
    }
    ...
}

<div id="folderBrowser">
    <!-- folder tree will be rendered here -->        
</div>

Create a ColumnTree instance. Reference the target under which HTML element it should be rendered. Also reference your instance of ElvisAPI, so the ColumnTree can perform 'browse' calls to the server.

var columnTree = new ColumnTree("#folderBrowser", elvisApi);

To browse to a specific folder using javascript, set the folderPath, and then call refresh():

columnTree.folderPath = "/Demo Zone";
columnTree.refresh();

Register an optional pathChange handler function if you want to update your page when the user selects a folder.

columnTree.pathChange = function () { refreshResults(); };