Class s7sdk.set.TableOfContents

Extends s7sdk.common.Button.

The TableOfContents is a composite component which consists of a button and a drop-down list which contains MediaSetDesc element indexes and labels. Depending on showdefault modifier, it can show only elements which have explicit label defined, or all elements in the set.

The drop-down panel is positioned dynamically based on the available real estate around TableOfContents button. Specific positioning logic and animation is controlled with bearing modifier. Number of visible items in the drop-down is controlled with maxitems modifier, and can be additionally reduced if there is not enough real estate to show all configured number of items. If it is not possible to show all items in the drop-down panel, a vertical scroll bar will appear on desktop systems, and native scroll will be enabled on touch devices.

The component does not support asset modifier, it should be used only in conjunction with MediaSet component.

This component supports different operation modes in landscape and portrait device orientation. This mode is enabled when the component is initialized through setMediaSet() API call with OrientationSetDesc instance passed as an argument. By default the component will pick up a MediaSetDesc instance for landscape orientation, and will re-build appropriately when setLandscape() or setPortrait() methods are called. OrientationSetDesc instance can be returned by MediaSet component.

The following modifiers are supported:

Modifier	Syntax	Description	Default
bearing	[fit-lateral\|fit-vertical][,autoHideDelay]	Controls the direction and timing of the drop-down panel appearance. When set to `fit-vertical`, the component first shifts the base panel position to the bottom of `TableOfContents` and rolls out the panel either to the right or to the left from such base location. With each attempt the component checks if the panel is clipped by an outside container, which is either an instance of the `Container` component or an element that has `overflow:hidden` set in CSS. If all attempts fail, the component tries to shift the base panel position to the top and repeat roll out attempts in a right and left direction. When set to `fit-lateral`, the component uses a similar logic but shifts the base first to the right, trying down and up roll out directions. Then, it shifts the base to the left, trying down and up roll out directions. Set `autoHideDelay` to set the delay, in seconds, for the drop-down auto-hide timer which hides the panel when the user is idle.	fit-vertical,2
maxitems	value	The maximum number of items in the drop-down panel. Additionally, you can decrease the number of visible items in the drop-down. This is useful if the drop-down becomes cropped by either an instance of the `Container` component or an element that has `overflow:hidden` set in the CSS. When set to `0`, the component shows as many items as possible given the container to which it is added.	0
showdefault	0\|1	When set to `1` the component populates the drop-down panel with elements for all `MediaSetDesc` items, including those that do not have a defined label. When set to `0` only items with explicit labels show in the drop-down panel.	1

Defining the Appearance using CSS

The CSS class for styling the TableOfContents is .s7tableofcontents. The component has the following four states: up, over, down and disabled. You can style these states by adding the state attribute selector to the CSS class. It is recommended that you define common CSS under the main class and only define the necessary distinctions when you use attribute selectors.

CSS Class	Attribute Selector	Description
`.s7tableofcontents`	`state=[up\|over\|down\|disabled]`	Define the appearance of `TableOfContents` button for each state.
`.s7panel`	(None)	Define the appearance of the drop-down panel. Use `margin` property to control internal spacing between panel boundary and contents. It is not possible to explicitly position the panel relative to the `TableOfContents` button or set its size in CSS, component manages panel position and size programmatically.
`.s7item`	state=[over\|selected]	Define the appearance of the drop-down item, which includes both index and label. `over` attribute is applied with mouse is over the item, `selected` when item is currently selected. It is possible to set item's height and internal padding.
`.s7index`	(None)	Define the appearance of the element index inside drop-down element. `min-width` and `max-width` CSS properties can be used to limit the width of the indexes column in the drop-down panel.
`.s7label`	(None)	Define the appearance of the element label inside drop-down element. `min-width` and `max-width` CSS properties can be used to limit the width of the labels column in the drop-down panel.
`.s7scrollbar`	(None)	Defines the size and appearance of the scrollbar. The width is controlled by the `width` property. The height by default is the same as drop-down panel height, however it is possible to it using `top`, `bottom` or height properties. Adjusting horizontal scrollbar position within drop-down panel using `left` or `right` properties is not supported.
`.s7scrollthumb`	`state=[up\|over\|down]`	Defines the appearance of the scrollbars thumb. Thumb size is controlled with `width` and `height` properties. Horizontal alignment can be adjusted using `left` property, which sets thumb position within scroll bar container. Any value set for `top` property will be ignored and overridden by the scroll bar logic
`.s7scrolltrack`	(None)	Defines the appearance of the scrollbars track. It is possible to set the width and horizontal offset inside scroll bar area. The height of scroll track is automatically set to fill the space between top and bottom scroll buttons, setting custom scroll track height is not supported.
`.s7scrollupbutton`	`state=[up\|over\|down\|disabled]`	Defines the appearance of the scroll bar "up" button. Button can be styled just like any other SDK button. It is possible to set horizontal and/or vertical offset within scroll bar area using `left`, `right` or `top` properties.
`.s7scrolldownbutton`	`state=[up\|over\|down\|disabled]`	Defines the appearance of the scroll bar "down" button. Button can be styled just like any other SDK button. It is possible to set horizontal and/or vertical offset within scroll bar area using `left`, `right` or `top` properties.

Localized Symbols

TableOfContents also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`TableOfContents.TOOLTIP`	Tooltip for `TableOfContents` component.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.set.TableOfContents(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `TableOfContents` component.
	hidePanel() Hides the TableOfContents panel.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setCurrentFrameIndex(idx) Set current frame to specific index.
	setLandscape() Switches component to landscape operation mode.
	setMediaSet(mediaSet) Sets the image or eCatalog set or `OrientationSetDesc` instance which contains two instances of `MediaSetDesc` for landscape and portrait orientations separately.
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setPortrait() Switches component to portrait operation mode.

Methods borrowed from class s7sdk.common.Button:: activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setLabel

Class Detail

s7sdk.set.TableOfContents(container, settings, compId)

Example Code
This example demonstrates how to use.
 
<!DOCTYPE html>
<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />
        
        <title>PageView Example</title>

        <!--
        To run this example locally you need to replace this with an absolute SDK path.
        For more information check the Adobe Experience Viewers HTML5 SDK User Guide or the examples
        included in the package.
        -->
        <script language="javascript" type="text/javascript"
                src="../js/s7sdk/utils/Utils.js"></script>

        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.common.Button');
            s7sdk.Util.lib.include('s7sdk.common.ControlBar');
            s7sdk.Util.lib.include('s7sdk.common.Container');
			s7sdk.Util.lib.include('s7sdk.set.MediaSet');
            s7sdk.Util.lib.include('s7sdk.set.PageView');
            s7sdk.Util.lib.include('s7sdk.set.PageScrubber');
            s7sdk.Util.lib.include('s7sdk.set.ThumbnailGridView');
            s7sdk.Util.lib.include('s7sdk.set.Swatches');
            s7sdk.Util.lib.include('s7sdk.set.TableOfContents');
            s7sdk.Util.lib.include('s7sdk.share.Share');
        </script>

        <style type="text/css" media="screen">
            .s7pageview {
                height: 480px;
                width: 640px;
                top: 40px;
                left: 20px;
                position: relative;
                border: solid 1px #cccccc;
            }
            .s7thumbnailgridview {
                height: 480px;
                width: 640px;
                top: 40px;
                left: 20px;
                position: absolute;
                border: solid 1px #cccccc;
            }
            .s7controlbar{
                position: relative;
                background-color: #cccccc;
                top: 5px;
                left: 20px;
                width: 640px;
                position: absolute;
                z-index: 1;
            }
            .s7scrubberswatchesbutton {
                position: absolute;
                top: 2px;
                left: 5px;
            }
            .s7thumbnailpagebutton {
                position: absolute;
                top: 2px;
                left: 30px;
            }
            .s7tableofcontents {
                position: absolute;
                top: 2px;
                left: 60px;
            }
            .s7pagescrubber {
                height: 55px;
                width: 640px;
                top: 540px;
                left: 0px;
                position: absolute;
				z-index:100;
            }
            .s7swatches {
                position: absolute;
                top: 500px;
                width: 700px;
            }
            .s7download  {
                position: absolute;
                top: 2px;
                left: 90px;
            }
            .s7print  {
                position: absolute;
                top: 2px;
                left: 120px;
            }
        </style>

    </head>
    <body>

        <script type="text/javascript" language="JavaScript">
            var params, container, pageView, pageScrubber, controls, 
                scrubberSwatchesBtn, thumbnailPageBtn, gridView, swatches, mediaSet, tableOfContents, downLoad;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager(null,null,{ "asset" : "MediaSet.asset" });

            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "https://s7d1.scene7.com/is/image/");
                params.push("Download.contenturl","https://s7d1.scene7.com/is/content/");
                params.push("MediaSet.asset", "Viewers/eCat-Sample");
                params.push("MediaSet.labelkey", "toc");

				mediaSet = new s7sdk.set.MediaSet(null, params);
				mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed);
				
             	// Create the Container component object
                container = new s7sdk.common.Container(null, params, "s7container");

                // Create the PageScrubber component object
                pageScrubber = new s7sdk.set.PageScrubber(container,params,"pagescrubber");
                // Create the PageView component object
                pageView = new s7sdk.set.PageView(container, params, "pageview");
                // Create the ThumbnailGridView component object
                gridView = new s7sdk.set.ThumbnailGridView(container, params, "gridview");

                // Create the ControlBar component object
                controls = new s7sdk.common.ControlBar(container, params, "controls");

                // Attach the PageView and GridView objects to the ControlBar
                controls.attachView(pageView, false);
                controls.attachView(gridView, false);

                // Create the ScrubberSwatchesButton component object
                scrubberSwatchesBtn = new s7sdk.common.ScrubberSwatchesButton("controls", params, "scrubberswatches");

                // Create the ThumbnailPageButton component object
                thumbnailPageBtn = new s7sdk.common.ThumbnailPageButton("controls", params, "thumbnailpage");

                tableOfContents = new s7sdk.set.TableOfContents("controls", params, "tableofcontents");
                tableOfContents.addEventListener(s7sdk.AssetEvent.ITEM_SELECTED_EVENT, onTableOfContentSelected);
                // Create the Swatches component object
                swatches = new s7sdk.set.Swatches(container, params, "swatches");

                // Create the Download component object
                downLoad = new s7sdk.common.Download('controls', params, 'download');

                // Create the Download component object
                print = new s7sdk.share.Print("controls", params, "print");                

                // Hide the ThumbnailGridView and Swatches objects by default
				gridView.setCSS(".s7thumbnailgridview", "visibility", "hidden");
				swatches.setCSS(".s7swatches", "visibility", "hidden");

                // Add an event listener for PageView selection events
                pageView.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageViewSelected, false);

                // Add an event listener for ThumbnailGridView swatch selection events
                gridView.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onGridViewSwatchSelected, false);

                // Add an event listener for ScrubberSwatchesButton click events
                scrubberSwatchesBtn.addEventListener("click", onScrubberSwatchesButton, false);

                // Add an event listener for ThumbnailPageButton click events
                thumbnailPageBtn.addEventListener("click", onThumbnailPageButton, false);

                // Add an event listener for PageScrubber selection events
                pageScrubber.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageScrubberSelected, false);

                // Add an event listener for Swatches selection events
                swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onSwatchSelected, false);

                // Add an event listener for Download metadata ready events
                downLoad.addEventListener(s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY, onMetadataReady, false);

                // hide Download
                downLoad.setCSS(".s7download", "display", "none");

                // set downloadable asset explicitly
                downLoad.setDownloadableAsset("Viewers/Fantastico2007");
            }

            // Define an event handler function to show the Download when download if available
            function onMetadataReady(event){
                downLoad.setCSS(".s7download", "display", downLoad.canDownload() ? "block" : "none");
            }

            // Define an event handler function to switch pages for PageView item selections
            function onPageViewSelected(event){
                switchToPage(event);
            }

            // Define an event handler function to switch pages for ThumbnailGridView swatch selections
            function onGridViewSwatchSelected(event){
                switchToPage(event);
            }

            // Define an event handler function to respond to ScrubberSwatchesButton clicks
            function onScrubberSwatchesButton(event){
                if(scrubberSwatchesBtn.isSelected()){
                    swatches.setCSS(".s7swatches", "visibility", "inherit");
                    pageScrubber.setCSS(".s7pagescrubber", "display", "none");
                }else{
                    swatches.setCSS(".s7swatches", "visibility", "hidden");
                    pageScrubber.setCSS(".s7pagescrubber", "display", "block");
                }
            }

            // Define an event handler function to respond to ThumbnailGridView clicks
            function onThumbnailPageButton(event){
                if(thumbnailPageBtn.isSelected()){
					pageView.setCSS(".s7pageview", "visibility", "hidden");
					gridView.setCSS(".s7thumbnailgridview", "visibility", "inherit");
                }else{
					pageView.setCSS(".s7pageview", "visibility", "inherit");
					gridView.setCSS(".s7thumbnailgridview", "visibility", "hidden");
                }
            }

            // Define an event handler function to switch pages for PageScrubber item selections
            function onPageScrubberSelected(event){
                switchToPage(event)
            }

            // Define an event handler function to switch pages for Swatches selections
            function onSwatchSelected(event){
                switchToPage(event)
            }

            // Define an event handler function to switch pages for TableOfContent item selections
            function onTableOfContentSelected(event){
                switchToPage(event);
            }
            
           // Define a function to update all components to display the currently selected page
            function switchToPage(event){
            	print.setCurrentFrameIndex(event.s7event.frame);
                pageView.setCurrentFrameIndex(event.s7event.frame);
                swatches.selectSwatch(event.s7event.frame);
                gridView.selectSwatch(event.s7event.frame, true);
                pageScrubber.setCurrentFrameIndex(event.s7event.frame);
                tableOfContents.setCurrentFrameIndex(event.s7event.frame);
                // If the ThumbnailGridView is showing, hide it and deselect the ThumbnailPageButton
                if(thumbnailPageBtn.isSelected()){
                    thumbnailPageBtn.setSelected(false);
                    onThumbnailPageButton();
                }
            }

            function onSetParsed(e) {
				print.setMediaSet(e.s7event.asset);
                downLoad.setMediaSet(e.s7event.asset);
            	tableOfContents.setMediaSet(e.s7event.asset);
				pageView.setMediaSet(e.s7event.asset);
				gridView.setMediaSet(e.s7event.asset);
				swatches.setMediaSet(e.s7event.asset);
				pageScrubber.setMediaSet(e.s7event.asset);
            }
            
            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer		
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>

    </body>
</html>

Default styles for TableOfContents:

.s7tableofcontents {
	width:28px;
	height:28px;
	position:relative;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7tableofcontents[state='up'] {
	background-image:url(images/sdk/tableofcontents_up.png);
 }
.s7tableofcontents[state='over'] {
	background-image:url(images/sdk/tableofcontents_over.png);
 }
.s7tableofcontents[state='down'] {
	background-image:url(images/sdk/tableofcontents_down.png);
 }
.s7tableofcontents[state='disabled'] {
	background-image:url(images/sdk/tableofcontents_disabled.png);
 }
.s7tableofcontents .s7panel {
	margin:5px;
	position:absolute;
	background-color:#dddddd;
	box-shadow:2px 2px 3px #C0C0C0;
	display:inline-block;
	z-index:10000;
	overflow:hidden;
 }
.s7tableofcontents .s7panel *, *:before, *:after {
	box-sizing:content-box;
 }
.s7tableofcontents .s7panel .s7item {
	cursor:default;
	font-family:Helvetica,sans-serif;
	font-size:14px;
	height:19px;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	white-space:nowrap;
	padding:5px 10px;
 }
.s7tableofcontents .s7panel .s7index {
	float:left;
	min-width:40px;
	max-width:70px;
	padding-right:5px;
	pointer-events:none;
	display:inline-block;
 }
.s7tableofcontents .s7panel .s7label {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:40px;
	max-width:240px;
	text-align:right;
	pointer-events:none;
	float:right;
	display:inline-block;
 }
.s7tableofcontents .s7panel .s7item[state='selected'] {
	color:rgb(255, 255, 255);
	background-color:rgb(178, 178, 178);
 }
.s7tableofcontents .s7panel .s7item[state='over'] {
	background-color:rgb(102, 102, 102);
	color:rgb(224, 224, 224);
 }
.s7tableofcontents .s7panel .s7scrollbar {
	background-color:transparent;
	position:absolute;
	width:25px;
	right:0px;
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollthumb {
	width:20px;
	position:absolute;
	backgroundRepeat:no-repeat;
	backgroundPosition:center;
	height:30px;
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollthumb[state='up'] {
	background-image:url(images/sdk/scrollbar_thumb_up.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollthumb[state='over'] {
	background-image:url(images/sdk/scrollbar_thumb_over.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollthumb[state='down'] {
	background-image:url(images/sdk/scrollbar_thumb_down.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollthumb[state='disabled'] {
	background-image:url(images/sdk/scrollbar_thumb_disabled.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolltrack {
	width:20px;
	background-color:rgb(178, 178, 178);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollupbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/scroll_up_up.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/scroll_up_over.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/scroll_up_down.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_up_disabled.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolldownbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/scroll_down_up.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/scroll_down_over.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/scroll_down_down.png);
 }
.s7tableofcontents .s7panel .s7scrollbar .s7scrolldownbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_down_disabled.png);
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }

Parameters:
{String|Container} container: The reference to Container instance, ControlBar instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the component DOM element.

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the TableOfContents component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.AssetEvent.

The events supported by the component are:

s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT - Dispatched when the current page has changed. s7sdk.event.AssetEvent

Parameters:
{String} type: Event name, for example s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.AssetEvent

hidePanel()

Hides the TableOfContents panel.

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7tableofcontents
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

setCurrentFrameIndex(idx)

Set current frame to specific index.

Parameters:
{Number} idx: new frame index

setLandscape()

Switches component to landscape operation mode. If the component was originally initialized through setMediaSet() API call with OrientationSetDesc instance passed as an argument, it will re-build using MediaSetDesc instance specific to landscape orientation. Otherwise, if component was initialized with asset modifier, using setAsset() API or setMediaSet() API call with MediaSetDesc passed as an argument, the call to this method is ignored.

setMediaSet(mediaSet)

Sets the image or eCatalog set or OrientationSetDesc instance which contains two instances of MediaSetDesc for landscape and portrait orientations separately. This will re-set the component to use the new set content.

Parameters:
{MediaSetDesc | OrientationSetDesc} mediaSet: Set to extract items from.

See:: s7sdk.set.MediaSet; s7sdk.MediaSetDesc; s7sdk.OrientationSetDesc

setModifier(modObj)

Sets 1-N # of modifiers for the component.

Parameters:
{Object} modObj: A simple JSON object with name:value pairs of valid modifiers for a particular component

setPortrait()

Switches component to portrait operation mode. If the component was originally initialized through setMediaSet() API call with OrientationSetDesc instance passed as an argument, it will re-build using MediaSetDesc instance specific to portrait orientation. Otherwise, if component was initialized with asset modifier, using setAsset() API or setMediaSet() API call with MediaSetDesc passed as an argument, the call to this method is ignored.

Namespaces

Classes in s7sdk.set

Class s7sdk.set.TableOfContents