Content selection

There are three scripts that deal with listing and selecting content.

• ContentItemRenderer.js
• PopupBrowser.js
• PopupLabelBrowser.js

ContentItemRenderer.js

This is used to list out content. This is used in several places, including public content, the home page, and course pages. Its basic usage is:

ContentItemRenderer.renderAll({
    content: [content1, content2],
    $holder: $("#someElement")
});

The content parameter must be an array of content objects. The $holder parameter must be a JQuery wrapper containing the element where the content will be rendered.

The following are additional parameters that you can pass in:

Parameter name	Possible values	Effect
sizing	[Boolean]	If true, the sizing bar will be rendered as well.
format	block	Renders the content in block format. (default)
format	table	Renders the content in table format.
format	icon	Renders the content in icon format.
format	auto	Picks a format based on the amount of content.
labels	[Array of Strings ]	When grouping by label, use these labels as the groups.
filters	[Object]	An object containing filter methods which are used to group your content. Use this when not using labels.
courseId	[Number]	When listing content in the context of a course, include the course ID for proper links.
click	[Function]	This function is called when an item is clicked. See description below.
sorting	NA	Not yet implemented.

Filters

The filter object is used to group content. The keys of the object are the HTML to be rendered for the group and the value should be a method taking in a content object and returning a boolean.

Example:

var filter = {
    '<h2>Video</h2>': function (content) {
        return content.contentType === "video";
    }
}

You can use ContentItemRenderer.standardFilters which filters the standard content types.

Click callback

When a click function is provided, it is called instead of navigating when the content is clicked. The click callback has the following signature:

function (content, courseId, $element) {}

PopupBrowser.js

In several places in Ayamel the user can select content from a pop-up window. Use this script to do that. Call the selectContent method passing in a callback which receives the selected content. If the user closes the popup browser without selecting content then the callback is never called.

PopupBrowser.selectContent(function (content) {
    console.log("Selected content: " + JSON.stringify(content));
});

This script can be used to select Ayamel content on domains other than ayamel.byu.edu. For example, it is used on the PlayGraph authoring tool, which is on the playgraph.byu.edu domain. To set up the pop-up browser for cross domain do the following before calling selectContent:

PopupBrowser.setCrossDomain(true);
PopupBrowser.setHost("http://mydomain.com/");

PopupLabelBrowser.js

This is similar to PopupBrowser.js but instead of using the standard browser to select a single content object it sorts the content by label and returns all content with the label selected by the user.

Call selectContent passing in a callback which receives an array of content objects.

PopupLabelBrowser.selectContent(function (contents) {
    console.log(contents.length + " items selected: " + JSON.stringify(contents));
});

This also supports cross-domain calls exactly like PopupBrowser.