Assets Server JavaScript library - HitRenderer

This class simplifies creating HTML of the JSON search results received from the Assets Server REST API.

It provides the following features:

• Render HTML for hits.
• Render HTML with info about how many results were found.
• Render HTML for a pager to navigate larger number of results.
• Handle thumbnail clicks.

Functions

render( <data | hits | hit> )

Renders various forms of hit data as HTML. The HTML will be put into hitsTarget element as configured. For maximum flexibility, this function accepts one of the following arguments:

• <data object returned from Assets Server API> The function accepts the exact data as passed to the callback handler of the elvisAPi.search( ... ) function. So you can just pass the render function directly as callback for that search function.
• <array of hits> For when you need to render multiple hits.
• <single hit object> For when you need to render a single hit.

How to use

HitRenderer.resources = "../shared_resources/elvis_api";

var hitRenderer = new HitRenderer();

hitRenderer.hitsTarget = "#resultContainer";
hitRenderer.infoTarget = "#infoContainer";
hitRenderer.pageTarget = "#pageContainer";

hitRenderer.squareThumbs = true;
hitRenderer.metadataToDisplay = ["name", "rating"];

hitRenderer.linkRel = "lightbox[resultsGallery]";

hitRenderer.itemClick = function(hit, element, hits, index) {
    ...
};

hitRenderer.pageClick = function (start, num) {
    ...
};

Set the path to the elvis_api resources. This has to be done only once in your page. This is used by the HitRenderer to link to 'document' icons that are in the elvis_api/images folder.

HitRenderer.resources = "../shared_resources/elvis_api";

Create a HitRenderer instance. You can create multiple HitRenderer instances if you need to display hits in various places on your page. All of the following configuration properties are optional.

var hitRenderer = new HitRenderer();

Set the hitsTarget, which is the parent HTML element. Set the infoTarget. The info element displays how many results were found in total and how many are currently displayed. And set the pageTarget. This is the 'id' of the parent HTML element. The pager simplifies navigating large sets of results.

hitRenderer.hitsTarget = "#resultContainer";
hitRenderer.infoTarget = "#infoContainer";
hitRenderer.pageTarget = "#pageContainer";

Specify whether to use square thumbnails or not. If set to true, the HitRenderer will perform additional post-processing on the inserted HTML to scale and crop all thumbnails. If not specified or if set to false, thumbnails will be scaled proportionally to fit within the available space.

hitRenderer.squareThumbs = true;

Specify which metadata to display below the thumbnail. Be sure to overwrite and adjust the height of the thumbnail hit box in your own CSS so there is enough room to display all the fields.

hitRenderer.metadataToDisplay = ["name", "rating"];

You can specify a rel attribute for the links in the thumbnails. This makes it easy to use lightbox JavaScript libraries.

hitRenderer.linkRel = "lightbox[resultsGallery]";

You can register an itemClick handler function if you want to handle item clicks yourself. The HitRenderer will take care of resolving all sorts of useful data and pass it to your handler:

• hit: The hit data object for the item that was clicked. This object contains the asset id, permissions, preview and download URL, and all metadata that was fetched for the asset.
• element: A reference to the HTML element of the thumbnail that was clicked.
• hits: An array with all the hit data objects that were rendered.
• index: The index of the clicked item in the array of hit data objects.

hitRenderer.itemClick = function(hit, element, hits, index) {
    ...
};

If you specify a pageTarget, you also have to register a pageClick handler function to refresh the results and show the clicked page. The HitRenderer will automatically resolve the correct start and num you need to pass to the elvisApi.search( ... ) function to fetch the correct page.

hitRenderer.pageClick = function (start, num) {
    ...
};