Class s7sdk.set.InteractiveSwatches

The InteractiveSwatches component is used to render the list of swatches that are associated with interactive actions.

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Image Serving root path. If no domain is specified, then the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
maxloadradius	-1\|0\|preloadnbr	Specifies the component preload behavior. When set to `-1`, all swatches will be loaded simultaneously when component is initialized or asset changed. When set to `0`, only visible swatches will be loaded. preloadnbr defines how many invisible rows/columns around visible area will be preloaded.	1
direction	auto\|left\|right	Specifies the way swatches fill in the view. `left` sets left-to-right fill order; `right` reverses the order so that the view is filled in right-to-left, top-to-bottom direction. When `auto` is set, component applies `right` mode when `locale` is set to "ja", and uses `left` otherwise.	auto
textpos	bottom\|top\|left\|right\|none\|tooltip	Specifies where the label is drawn relative to the swatch thumbnail image. That is, the label is centered at the specified location relative to the swatch thumbnail. When `tooltip` is specified, no label will be drawn.	bottom
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies image format to be used by the component for loading images from Image Server, can be any value supported by Image Server and client browser. If image_format ends with "-alpha", component renders images as transparent content; for all other image_format values component treats images as opaque.	jpeg
autoscroll	0\|1	Enables or disables the ability for interactive swatches to scroll automatically along with media transition, e.g. video playback.	1
displaymode	continuous\|segment	Populates InteractiveSwatches continuously with thumbnails regardless of segment boundaries or allow empty space to observe segment boundaries.	segment
enablescrollbuttons	0\|1	Displays or hides the scroll buttons. When the scroll buttons are hidden, the user can use their mouse or use touch gestures to scroll.	1
scrollstep	step	Specifies the number of swatches to scroll for each tap of the corresponding scroll button. If the specified value is greater than the number of interactive swatches visible, each tap will only scroll by the number of visible swatches to prevent omission of any swatch.	3
enabledragging	0\|1[,overdragvalue]	Enables or disables the ability for a user to scroll the swatches with a mouse or by using touch gestures. The overdragvalue is in the 0 - 1 range and it is a % value for the movement in the wrong direction of the actual speed. 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

Defining the Appearance using CSS

The CSS class for styling the InteractiveSwatches is .s7interactiveswatches. It is recommended that you define common CSS under the main class and only define the necessary distinctions when you use attribute selectors.

The styling of the main swatch area are defined with nested class .s7swatches, i.e. .s7interactiveswatches .s7swatches.

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 .s7interactiveswatches .s7swatches .s7thumb. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7interactiveswatches`	(None)	Define the position of `InteractiveSwatches`.
`.s7banner`	(None)	Defines the appearance of the banner.
`.s7scrollleftbutton`	(None)	Defines the appearance of the left scroll button.
`.s7scrollrightbutton`	(None)	Defines the appearance of the right scroll button.
`.s7scrollupbutton`	(None)	Defines the appearance of the up scroll button.
`.s7scrolldownbutton`	(None)	Defines the appearance of the down scroll button.
`.s7swatches`	(None)	Define the position of the main swatch area that includes sub-elements styled by the selectors below.
`.s7thumbcell`	(None)	Defines thumbnail spacing using `margin` CSS property.
`.s7thumb`	`state=[default\|selected\|over]`	Defines the appearance of thumbnails. The `height` and `width` properties will define the dimensions of the thumb. `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`.

Localized Symbols

InteractiveSwatches 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 HTML5 Viewers SDK User Guide.

Symbol	Description
`InteractiveSwatches.BANNER`	Define a localized banner of `InteractiveSwatches`

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

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `InteractiveSwatches` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getHeight() Returns the current inner height of the component.
	getInteractiveData() Returns the array of interactive data for each interactive data section associated with the currently displayed list of interactive swatches.
	getInteractiveDataProperties() Get the global properties of the interactive data associated with the currently displayed list of interactive swatches.
	getWidth() Returns the current inner width of the component.
	resize(w, h) Resize the component.
	setActiveInteractiveDataIndex(index, immediate) Set the index of interactive data item that is currently active and trigger appropriate actions.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setInteractiveData(interactiveData, properties) Changes the currently displayed list of interactive swatches by providing an array of interactive data for each interactive data section.
	setModifier(modObj) Sets 1-N # of modifiers for the component.

Class Detail

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

Example Code
This example demonstrates how to use interactive swatches components in a simple video viewer. In this example a VideoPlayer, PlayPauseButton and
InteractiveSwatches components are put together to constuct a simple interactive video viewer. 

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 InteractiveSwatches component.
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 several modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. A VideoPlayer is used in conjunction to parse and
process Interactive Data from WebVTT served by ImageServing. It notifies the application when interactive data is available
and also when the active interactive data segment is being updated.  This information is, in turn, applied to the
InteractiveSwatches.  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" />		
        <!-- removed height=device-height, -->
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <!-- Hiding the Safari on iPhone OS UI components -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-touch-fullscreen" content="YES" />
        <!-- Specifying a per-page Home screen icon -->
        <link rel="apple-touch-icon" href=""/>
        <link rel="apple-touch-startup-image" href="" />

        <title>InteractiveSwatches 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.Container');
            s7sdk.Util.lib.include('s7sdk.event.Event');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
            s7sdk.Util.lib.include('s7sdk.set.MediaSet');
            s7sdk.Util.lib.include('s7sdk.set.InteractiveSwatches');
        </script>

        <style>
            html, body {
                padding:0px;
                margin:0px;
            }
            .s7videoplayer {
                width:768px;
                height:432px;   
                
            }
            .s7videotoolbar {
                display:block;
                position: absolute; 
                top: 432px;
                width: 768px;
                height: 32px;
                z-index: 5000;
                padding: 0px;
                background-color: #ccc;
            }
            .s7interactiveswatches {
                top: 0px;
                left: 768px;
                width: 100px;
                height: 464px;
            }
            .s7interactiveswatches .s7banner {
                color: #000000;
                text-align: center;
            }
        </style>

    </head>
    <body>

        <div id="s7toolbar" class="s7videotoolbar"></div> 
        <script language="JavaScript" type="text/javascript">
            var params, container, videoPlayer, s7videotoolbar, playPauseButton, videoPlaying,
            interactiveSwatches, interactiveData = null, enableInteractiveData = false;

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

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();


            // 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("MediaSet.asset", "Scene7SharedAssets/Adobe_QBP-AVS");
                params.push("videoserverurl","http://s7d1.scene7.com/is/content/");
                params.push("contenturl","http://s7d1.scene7.com/skins/");

                // specify interactiveData modifier to VideoPlayer
                params.push("VideoPlayer.interactiveData", "Scene7SharedAssets/adobe_qbc_final_id");

                // Create the Container component object
                container = new s7sdk.common.Container(null, params, "s7container");

                // Note: Any component supporting the setMediaSet API can be driven
                //       by the MediaSet component.

                // Create VideoPlayer component object
                videoPlayer = new s7sdk.video.VideoPlayer(container,params,"s7viewer");
                // Add an event listener for the parsed interactive data available from VideoPlayer
                videoPlayer.addEventListener(s7sdk.event.InteractiveDataEvent.NOTF_INTERACTIVE_DATA, onInteractiveData, false);
                // Add an event listener for the active interaction data updated event
                videoPlayer.addEventListener(s7sdk.event.InteractiveDataEvent.NOTF_ACTIVE_INTERACTIVE_DATA_UPDATED, onActiveInteractiveDataUpdated, false);

                // Create VideoPlayer PlayPauseButton object
                playPauseButton = new s7sdk.common.PlayPauseButton("s7toolbar", params, "playPauseBtn");

                // Add an event listener for PlayPauseButton click events
                playPauseButton.addEventListener("click", onClickPlayPause);

                // Add an event listener for VideoPlayer capability change events
                videoPlayer.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE, onNotifyVideoState, false);
                playPauseButton.setSelected(true);

                // Create the Swatches component object
                interactiveSwatches = new s7sdk.set.InteractiveSwatches(container, params,"s7InteractiveSwatches");
                // Add event listeners for interactive swatches quickview, and URL events
                interactiveSwatches.addEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED, interactiveSwatchActivateHandler, false);
                interactiveSwatches.addEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED, interactiveSwatchActivateHandler, false);
                // Add event listeners for interactive swatches visible swatches notification event
                interactiveSwatches.addEventListener(s7sdk.event.InteractiveSwatchesEvent.NOTF_VISIBLE_INTERACTIVE_SWATCHES, interactiveSwatchVisibleEventHandler, false);

                // Create the MediaSet component object
                // Note: The MediaSet constructor does not require the first or last parameter
                mediaSet = new s7sdk.set.MediaSet(null, params, null);
                // Add an event listener for mediaset parsed events
                // Note: This event will be emitted every time the MediaSet.setAsset function is called.
                mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false);
            }

            // Define an event handler function to update the video player and swatches when the mediaset is parsed
            function onSetParsed(event) {
                var mediasetDesc = event.s7event.asset;
                
                // just in case, check what is returned is of type MediaSetDesc
                if (mediasetDesc instanceof s7sdk.MediaSetDesc) {
                    var asset = null;
                    if (mediasetDesc.type == s7sdk.ItemDescType.VIDEO_SET || mediasetDesc.type == s7sdk.ItemDescType.VIDEO_GROUP) {
                        // MBR set
                        asset = mediasetDesc;
                    }
                    else {
                        // single video
                        asset = mediasetDesc.items[0];
                    }
                    
                    if (asset) {
                        videoPlayer.setItem(asset);
                    }
                }
                else
                    throw new Error("Failed to get meta data for video: " + event.s7event.asset);
            }
                    

            // Define an event handler function to update the PlayPauseButton object when the VideoPlayer changes state
            function onNotifyVideoState(event){
                playPauseButton.setSelected(event.s7event.state.hasCapability(s7sdk.VideoCapabilityState.PLAY));
            }

            // Define an event handler function to update the VideoPlayer object when the PlayPauseButton is clicked
            function onClickPlayPause(event){ 
                if(!playPauseButton.isSelected()){
                    videoPlayer.play();
                }else{
                    videoPlayer.pause();
                }
            }

            // Define an event handler function to update parsed interactive data to InteractiveSwatches
            function onInteractiveData(event) {
                var data = event.s7event.data;
                enableInteractiveData = !!(data && data.interactiveData);
                interactiveData = data ? data.interactiveData : null;
                interactiveSwatches.setInteractiveData(interactiveData, data.properties);
            }
            
            // Define an event handler function to update the interactive data segment to InteractiveSwatches to trigger auto-scrolling
            function onActiveInteractiveDataUpdated(event) {
                var idx = event.s7event.data;
                if (interactiveData && enableInteractiveData && idx != -1) {
                    interactiveSwatches.setActiveInteractiveDataIndex(idx);
                }
            }
            
            /*
            * Define an event handler function to handle the swatch interactive action.
            * This implementation pauses video playback.
            * For simplicity, QuickView action is not demonstrated in this example.  However,
            * <code>event.s7event.data</code> will contain the QuickView data for
            * custom implementation as needed. 
            */
            function interactiveSwatchActivateHandler(event) {
                // remember previous state of video playback
                if (videoPlayer.getCapabilityState().hasCapability(s7sdk.VideoCapabilityState.PAUSE)) {
                    videoPlaying = true;
                    s7sdk.Logger.log(s7sdk.Logger.INFO, "Pause video");
                    videoPlayer.pause();
                }

                // handle QuickView event as needed.
                if (event.type == s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED) {
                    if(event.s7event.data) {
                        s7sdk.Logger.log(s7sdk.Logger.DEBUG, "QuickView event can be implemented here");
                    }
                }
            }

            /*
            * Define an event handler function to handle the event for dispatching the number of visible swatches.
            * This implementation updates the information to VideoPlayer that will 
            * adjust the duration corresponding to the interactive data item shall be made visible.
            */
            function interactiveSwatchVisibleEventHandler(event) {
                videoPlayer.updateVisibleInterativeData(event.s7event.data);
            }
            
            // 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 InteractiveSwatches:

 .s7interactiveswatches {
	background-color:rgba(100, 100, 100, 0.2);
	z-index:0;
	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);
	position:absolute;
	width:100px;
	height:500px;
 }
 .s7interactiveswatches .s7banner {
	background-color: rgba(100, 100, 100, 0.2);
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	position: absolute;
	width: 100%;
	box-sizing: content-box;
 }
 .s7interactiveswatches .s7swatches {
	background-color: rgba(100, 100, 100, 0.2);
	z-index:1;
	width:100%;
	height:100%
 }
 .s7interactiveswatches .s7swatches .s7thumbcell {
	margin:5px;
 }
 .s7interactiveswatches .s7swatches .s7thumb {
	border:1px solid transparent;
	width:75px;
	height:75px;
 }
 .s7interactiveswatches .s7swatches .s7thumb[state='selected'] {
	border:1px solid #FFFFFF;
 }
 
 .s7interactiveswatches .s7swatches .s7label {
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
 .s7interactiveswatches .s7scrollleftbutton {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:28px;
	height:50px;
 }
 .s7interactiveswatches .s7scrollleftbutton[state='up'] {
	background-image:url(images/sdk/interactive_scroll_left_up.png);
 }
 .s7interactiveswatches .s7scrollleftbutton[state='over'] {
	background-image:url(images/sdk/interactive_scroll_left_over.png);
 }
 .s7interactiveswatches .s7scrollleftbutton[state='down'] {
	background-image:url(images/sdk/interactive_scroll_left_down.png);
 }
 .s7interactiveswatches .s7scrollleftbutton[state='disabled'] {
	background-image:url(images/sdk/interactive_scroll_left_disabled.png);
 }
 .s7interactiveswatches .s7scrollrightbutton {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:28px;
	height:50px;
 }
 .s7interactiveswatches .s7scrollrightbutton[state='up'] {
	background-image:url(images/sdk/interactive_scroll_right_up.png);
 }
 .s7interactiveswatches .s7scrollrightbutton[state='over'] {
	background-image:url(images/sdk/interactive_scroll_right_over.png);
 }
 .s7interactiveswatches .s7scrollrightbutton[state='down'] {
	background-image:url(images/sdk/interactive_scroll_right_down.png);
 }
 .s7interactiveswatches .s7scrollrightbutton[state='disabled'] {
	background-image:url(images/sdk/interactive_scroll_right_disabled.png);
 }
 .s7interactiveswatches .s7scrollupbutton {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:50px;
	height:28px;
 }
 .s7interactiveswatches .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/interactive_scroll_up_up.png);
 }
 .s7interactiveswatches .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/interactive_scroll_up_over.png);
 }
 .s7interactiveswatches .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/interactive_scroll_up_down.png);
 }
 .s7interactiveswatches .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/interactive_scroll_up_disabled.png);
 }
 .s7interactiveswatches .s7scrolldownbutton {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:50px;
	height:28px;
 }
 .s7interactiveswatches .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/interactive_scroll_down_up.png);
 }
 .s7interactiveswatches .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/interactive_scroll_down_over.png);
 }
 .s7interactiveswatches .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/interactive_scroll_down_down.png);
 }
 .s7interactiveswatches .s7scrolldownbutton[state='disabled'] {
	background-image:url(images/sdk/interactive_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.InteractiveSwatchDesc; s7sdk.ParameterManager; s7sdk.set.MediaSet

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the InteractiveSwatches 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.InteractiveSwatchesEvent.

The events supported by the component are:

s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED - Dispatched when a swatch associated with a QuickView href is selected. s7sdk.event.InteractiveSwatchesEvent

s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED - Dispatched when a swatch associated with a URL href is selected. This event is dispatched before navigating to the URL.s7sdk.event.InteractiveSwatchesEvent

s7sdk.event.InteractiveSwatchesEvent.NOTF_VISIBLE_INTERACTIVE_SWATCHES - Dispatched when the number of visible swatches is updated. This event is dispatched upon initialization or resizing.s7sdk.event.InteractiveSwatchesEvent

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 swatches 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_START - Dispatched when swatch images download begins according to maxloadradius modifier. The event may be sent multiple times during component's life cycle as user actions may trigger new preloading step. 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.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.InteractiveSwatchesEvent; s7sdk.event.StatusEvent

dispose()

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

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component.

{Array} getInteractiveData()

Returns the array of interactive data for each interactive data section associated with the currently displayed list of interactive swatches.

Returns:: {Array} Array of JSON objects specifying the swatches asset and corresponding actions.

{Object} getInteractiveDataProperties()

Get the global properties of the interactive data associated with the currently displayed list of interactive swatches.

Returns:: {Object} JSON objects with name:value pairs.

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component.

resize(w, h)

Resize the component.

Parameters:
{Number} w: width in pixels.
{Number} h: height in pixels.

setActiveInteractiveDataIndex(index, immediate)

Set the index of interactive data item that is currently active and trigger appropriate actions. For example, when autoScroll is enabled, InteractiveSwatches will automatically scroll to display the indexed swatch at the beginning of the viewable area. Automatic scrolling can be disabled with the modifier.

Parameters:
{Integer} index: Index to the current interactive data item, ignore if index = -1
{Boolean} immediate: Option parameter only applicable when autoScroll is enabled for use by InteractiveSwatches during resize. This value indicates if sliding to the target swatch is immediate.

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

setInteractiveData(interactiveData, properties)

Changes the currently displayed list of interactive swatches by providing an array of interactive data for each interactive data section.

Parameters:
{Array} interactiveData: Array of JSON objects specifying the swatches asset and the corresponding actions.
{Object} properties: Optional JSON object specifying global interactive data properties

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

Namespaces

Classes in s7sdk.set

Class s7sdk.set.InteractiveSwatches