theater UI Component

jQuery.telligent.evolution.ui.components.theater

UI Component which handles automatic setup of content theaters. Transforms <span class="ui-theater"></span> elements. The default implementation uses the evolutionTheater plugin. Overrides can be provided at the theme level to present theaters differently, either by different usage of evolutionTheater plugin or by an entirely different theater UI.

Used by:

This component is primarily used by rendered activity stories provided by IActivityStory plugins or rendered search results provided by ISearchableContentType which also implement ajax callbacks via IHttpCallback for providing theater content.

Next/Previous links

The evolutionTheater plugin provides the optional function parameters nextContent and previousContent which, when provided, instruct the plugin to render forward/back links and asynchronously return content to replace in the theater when those links are returned. The implementation of how this content is produced is provided by the plugin's consumer.

The default jQuery.telligent.evolution.ui.components.theater implementation produces content for these function parameters via ajax requests to endpoints for forward/back theater content. The URLs it uses for endpoints are provided by the current theater content. If the theater content contains an anchor element with the data-nexttheaterurl and/or data-previoustheaterurl, then previousContent and/or nextContent will be set on jQuery.evolutionTheater with functions which perform ajax requests against these data attributes' values. The same process is followed for subsequently-loaded theater content. In this way, theater content is responsible for identifying what other items may be navigated to from itself.

Comments

The default ui component implementation also bundles automatic support for adding content comments when the theater content contains comment-related markup.

Options

Data made available to instances of the component:

theaterurl: Ajax endpoint which returns rendered content to be shown within a theater
disabletheater: When true, theater does not render

Example

Given the markup...

<span class="ui-theater" data-theaterurl="[AJAX ENDPOINT]">View a Preview</span>

... and an ajax endpoint which returns an html fragment ...

<div>
    <!-- some preview image -->
    <img src="..." />
</div>

to show within the theater, the UI component automatically handles click events and renders a theater with content from the ajax endpoint using jQuery.evolutionTheater.

Recommended