theater UI Component

Ben Tiedt — Tue, 19 Nov 2019 20:28:46 GMT

Current Revision posted to API Documentation by Ben Tiedt on 11/19/2019 20:28:46

jQuery.telligent.evolution.ui.components.theater

[[ui JavaScript API Module|UI Component]] which handles automatic setup of content theaters. Transforms <span class="ui-theater"></span> elements. The default implementation uses the [[evolutionTheater jQuery Plugin|evolutionTheater plugin]]. [[ui JavaScript API Module|Overrides can be provided]] at the theme level to present theaters differently, either by different usage of [[evolutionTheater jQuery Plugin|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 jQuery Plugin|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 [[evolutionTheater jQuery Plugin|jQuery.evolutionTheater]].