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.
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.
The evolutionTheater plugin provides the optional function parameters
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.
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
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.
The default ui component implementation also bundles automatic support for adding content comments when the theater content contains comment-related markup.
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
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.