Class s7sdk.set.ThumbnailGridView

The ThumbnailGridView component renders a collection of thumbnail images in a grid layout. Each thumbnail is associated with an Image Serving catalog/asset ID and is part of a set as defined in Scene7 Publishing System. When operating in standalone mode, to retrieve the set definition, the ThumbnailGridView component makes an Image Serving req=set request using the values of the serverurl and asset modifiers. The preferred way of passing the set definition to the component though is by calling the setMediaSet() API after the set definition has been retrieved and parsed by the MediaSet component.

A thumbnail is selected by clicking (or tapping) the content, or by using the selectSwatch() API in the viewer code. When a thumbnail is selected, the ThumbnailGridView component dispatches an AssetEvent.SWATCH_SELECTED_EVENT with a purpose of communicating the information associated with the thumbnail to the rest of the viewer application that usually does some in response to it, for example, display the image associated with the swatch in the PageView.

The ThumbnailGridView component can display large collections of thumbnails. Scrollbar control appears when the number of thumbnails exceeds the available space to allow vertical scrolling. Scrolling is also supported with a mouse or by using touch gestures.

ThumbnailGridView displays optional thumbnail labels. Label is represented by single number for one-page frames and by two numbers separated with "dash" for two-page frames.

Customizing Behavior Using Modifiers

Modifiers change ThumbnailGridView default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

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
serverurl	isRootPath	The Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
asset	imageSet	The Image Serving catalog or asset ID of a named image set whose definition comes from the server by means of the `req=set` command.	""
iscommand	value	The Image Serving command string that is applied to all thumbnails. If specified in the URL, all occurrences of '&' and '=' must be HTTP-encoded as `%26` and `%3D`, respectively.	""
maxloadradius	-1\|0\|preloadnbr	Specifies the component preload behavior. When set to `-1`, all thumbnails are loaded simultaneously when the component is initialized or the asset has changed. When set to `0`, only visible thumbnails are loaded. Set preloadnbr to define how many invisible rows and columns are preloaded around the visible area.	1
direction	auto\|left\|right	Specifies the way thumbnails fill in the view. Set `left` so that the view is filled in a left-to-right order. Set `right` to reverse the order so that the view is filled in from a right-to-left, top-to-bottom direction. Set `auto` so the component applies `right` mode when `locale` is set to "ja". Otherwise, `left` is used.	auto
textpos	bottom\|top\|left\|right\|none\|tooltip	Specifies where the label is drawn relative to the thumbnail image. That is, the label is centered at the specified location relative to the thumbnail. When `tooltip` is specified, no label is drawn.	bottom
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies the image format that the component uses for loading images from Image Server. Use any image format value that is supported by Image Server and the client browser. If the image format ends with "-alpha", the component renders images as transparent. For all other image format values, the component treats images as opaque.	jpeg
align	left\|center\|right	Specifies the internal horizontal alignment--or anchoring--of the thumbnails container within the component area. In `ThumbnailGridView`, the internal thumbnail container is sized so that only a whole number of thumbnails is shown. As a result, there is some padding between the internal container and the external component bounds. This modifier specifies how the internal thumbnails container is positioned horizontally inside the component.	center
enabledragging	0\|1[,overdragvalue]	Enables or disables the ability for a user to scroll the thumbnails using a mouse or using touch gestures. Set overdragvalue to set a percent value for movement in the wrong direction of the actual speed. The range is 0 - 1. If set to 1, it moves with the mouse. If set to 0 it does not let you move in the wrong direction at all.	1,0.5
scrollbar	0\|1	Enable the use of the scroll bar.	1

Defining the Appearance using CSS

You can define the appearance of the ThumbnailGridView component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the ThumbnailGridView component by using the .s7thumbnailgridview class selector. The styles that are associated with this class selector are applied to all instances of the ThumbnailGridView component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7thumbnailgridview are applied only to the particular ThumbnailGridView instance.

The styling of the sub-elements using class selectors like .s7thumb for example, must be specified in the form of the descendant class selectors, that is, they must follow the main class selector separated by a space, such as .s7thumbnailgridview .s7thumb. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7thumbnailgridview`	(None)	Represents the main body of the `ThumbnailGridView` component; it is possible to define size, position and outer borders.
`.s7thumbcell`	(None)	Defines thumbnail spacing using `margin` CSS property.
`.s7thumb`	`state=[default\|selected\|over]`	Defines the appearance of the thumbnail. The `height` and `width` properties will define the dimensions of the thumb. It is possible to apply different borders for different values of `state` attribute to implement "active" highlight. `default` value of `state` attribute corresponds to "up" state, `selected` means that the thumbnail is currently selected and `over` state turns on when user rolls over unselected thumbnail.
`.s7label`	(None)	Defines the appearance of the thumbnail labels.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.
`.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 `ThumbnailGridView` height, however it is possible to it using `top`, `bottom` or height properties. Adjusting horizontal scrollbar position within `ThumbnailGridView` 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.

Localizable Symbols

ThumbnailGridView also have a number of 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 HTML5 Viewers SDK User Guide.

Symbol	Description
`ScrollUpButton.TOOLTIP`	Define a localized tooltip of `ScrollUpButton`
`ScrollDownButton.TOOLTIP`	Define a localized tooltip of `ScrollDownButton`

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

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `ThumbnailGridView` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getFrame() Returns the index of the current frame of the image or media set.
	getHeight() Returns the current inner height of the component.
	getWidth() Returns the current inner width of the component.
	resize(width, height) Resizes the `ThumbnailGridView` component to the specified width and height.
	selectSwatch(index, triggerScroll) Selects the specified frame.
	setAsset(assetName) Changes the currently displayed set.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setLandscape() Switches component to landscape operation mode.
	setMediaSet(mediaSet, type) 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.

Class Detail

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

Example Code
This example demonstrates how to use the ThumbnailGridView component in a simple viewer. In this example a Container object,
a PageView object, a ThumbnailGridView object, a ControlBar object, a ScrubberSwatchesButton object, a ThumbnailPageButton
object, a PageScrubber object, and a Swatches object are created. When a user clicks the ScrubberSwatchesButton, the PageScrubber
and Swatches objects toggle visibility on or off to match the button selection state. When a user clicks the ThumbnailPageButton,
the ThumbnailGridView object visibility toggles on or off to match the button selection state. When a user interacts with the
PageView object, the ThumbnailGridView object, the PageScrubber object, or the Swatches object, the PageView object loads and
displays the newly selected page(s). Note that the event handlers for all of these components all call the switchToPage() function
that updates all of the component objects at once whenever the currently selected page changes.

The code below does the following:

The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the SDK components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Scene7 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!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 HTML5 Viewers 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", "http://s7d1.scene7.com/is/image/");
                params.push("Download.contenturl","http://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 ThumbnailGridView:

.s7thumbnailgridview {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	user-select:none;
	-ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:500px;
	height:250px;
 }
.s7thumbnailgridview .s7thumbcell {
	margin:5px;
 }
.s7thumbnailgridview .s7thumb {
	border:1px solid transparent;
	width:75px;
	height:75px;
 }
.s7thumbnailgridview .s7thumb[state='selected'] {
	border:1px solid #FFFFFF;
 }
.s7thumbnailgridview .s7label {
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
.s7thumbnailgridview .s7scrollbar {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	width:22px;
 }
.s7thumbnailgridview .s7scrollbar .s7scrollthumb {
	width:20px;
	position:absolute;
	backgroundRepeat:no-repeat;
	backgroundPosition:center;
	height:30px;
 }
.s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
	background-image:url(images/sdk/scrollbar_thumb_up.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
	background-image:url(images/sdk/scrollbar_thumb_over.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
	background-image:url(images/sdk/scrollbar_thumb_down.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
	background-image:url(images/sdk/scrollbar_thumb_disabled.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrolltrack {
	width:20px;
	background-color:#cbcbcb;
 }
.s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/scroll_up_up.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/scroll_up_over.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/scroll_up_down.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_up_disabled.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/scroll_down_up.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/scroll_down_over.png);
 }
.s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/scroll_down_down.png);
 }
.s7thumbnailgridview .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 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.

See:: s7sdk.SwatchDesc; s7sdk.ParameterManager; s7sdk.set.MediaSet; s7sdk.set.PageView

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the ThumbnailGridView 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.SWATCH_SELECTED_EVENT - Dispatched when a thumbnail is selected. s7sdk.event.AssetEvent

s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. If the component is initialized with setMediaSet() it dispatches instantly inside that API call. Otherwise if the component loads req=set on its own, this event is sent when component has received and parsed req=set. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component loads all images for thumbnails currently visible on the screen. It is sent both during the initial load and during consequent scroll or resize operations. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_PRELOAD_COMPLETE - Dispatched when all swatch images according to maxloadradius modifier are downloaded. The event may be sent multiple times during component's life cycle as user actions may trigger new preloading step. s7sdk.event.StatusEvent

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

See:: s7sdk.event.AssetEvent

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

{Number} getFrame()

Returns the index of the current frame of the image or media set. Usually it corresponds to the currently selected frame. If no frame has been selected it will either be the first frame in the set or the frame that was selected last.

Returns:: Index of the current frame.

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

resize(width, height)

Resizes the ThumbnailGridView component to the specified width and height.

Parameters:
{Number} width: - The width of the component, in pixels.
{Number} height: - The height of the component, in pixels.

selectSwatch(index, triggerScroll)

Selects the specified frame. Setting the frame index to -1 removes highlight from the currently selected thumbnail, but does not change the current frame index.

Parameters:
{Number} index: Frame index in the image set.
{Boolean} triggerScroll: Scroll to the newly selected thumbnail.

setAsset(assetName)

Changes the currently displayed set. The component invalidates and rebuilds using the existing serverurl and the new asset after retrieving the set definition from Image Serving. Unless the asset has not been set already, this call generates a SWAP tracking event that is managed by the TrackingManager component.

Parameters:
{String} assetName: - The catalog ID of the set.

See:: s7sdk.TrackingManager

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. .s7thumbnailgridview
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

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, type)

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; anything previously set through asset modifier will be ignored. The set is not parsed recursively; to use embedded sets you need to call this method passing in the embedded set instead.

You can filter out thumbnails that you do not wish incorporated in the thumbnail set that is displayed in the component by using type parameter. This parameter is a bit field and represents a combination of the ImageDescType values that correspond to the type of items whose associated thumbnails you want to show in the component. For example, passing in s7sdk.ItemDescType.VIDEO | s7sdk.ItemDescType.IMG will show only thumbnails that are associated either with video or images. All other items will be ignored. The default value of 0 turns the filtering off. That is, all swatches are displayed regardless of the type of the item they are associated with.

Parameters:
{MediaSetDesc | OrientationSetDesc} mediaSet: Set to extract thumbnails from.
{int} type: A bit field combination of the item types to show thumbnails for. If set to 0 the filtering is turned off.

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.ThumbnailGridView