Class s7sdk.set.Swatches2

The Swatches2 component renders a collection of SwatchImageRenderer images. Each SwatchImageRenderer is associated with an Image Serving catalog/asset ID and is part of a set as defined in Scene7 Publishing System. 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 SwatchImageRenderer is selected by clicking (or tapping) the content, or by using the selectSwatch() API in the viewer code. When a SwatchImageRenderer is selected, the Swatches2 component dispatches an AssetEvent.SWATCH_SELECTED_EVENT with a purpose of communicating the information associated with the SwatchImageRenderer to the rest of the viewer application that usually does some in response to it, for example, display the image associated with the SwatchImageRenderer in the ZoomView.

The Swatches2 component can display large collections of SwatchImageRenderers. Scrolling controls appear when the number of SwatchImageRenderer exceeds the available space. Scrolling is also supported with a mouse or by using touch gestures.

Customizing Behavior Using Modifiers

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

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/
iscommand	value	The Image Serving command string that is applied to all SwatchImageRenderer. If specified in the URL all occurrences of '&' and '=' must be HTTP-encoded as `%26` and `%3D`, respectively.	""
scrolltransition	value	Specifies the duration of scroll animation in seconds.	0.3
autoscroll	0\|1	Enables or disables autoscroll in the component.	0
scrollbar	0\|1	Enables or disables native browser scroll bars.	0
maxloadradius	-1\|0\|preloadnbr	Specifies the component preload behavior. When set to `-1`, all swatches are loaded simultaneously when the component is initialized or the asset has changed. When set to `0`, only visible swatches are loaded. Set preloadnbr to define how many invisible swatches around the visible area are preloaded.	1
enablescrollbuttons	0\|1	Displays or hides the scroll buttons.	1
partialswatches	0\|1	Enables or disables display of partially visible swatches in the component.	1
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies the image format that the component uses for loading images from Image Server. Any value supported by Image Server and the client browser is used. 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
pagemode	0\|1	When set to "1", the scroll buttons automatically cause the swatches to jump a full page length. Otherwise, if set to "0", scroll step moves swatches by the size of a single swatch.	1

Defining the Appearance using CSS

You can define the appearance of the Swatches2 component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the Swatches2 component by using the .s7swatches2 class selector. The styles that are associated with this class selector are applied to all instances of the Swatches2 component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7swatches2 are applied only to the particular Swatches2 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 .s7swatches2 .s7thumb. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7swatches2`	`scrollbar=[true\|false]` `canscroll=[true\|false]` `orientation=[vertical\|horizontal]`	Represents the main body of the `Swatches2` component. `scrollbar` defines the visibility of native browser scroll bars. `canscroll` defines the visibility of scroll buttons. `orientation` defines orientation of component.
`.s7layout`	(None)	Defines style of component's layout.
`.s7thumbcell`	(None)	Defines thumbnail spacing using `margin` CSS property.
`.s7thumb`	`state=[default\|selected\|over]`	Defines the appearance of the swatch thumbnails. The `height` and `width` properties will define the dimensions of the swatch 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.
`.s7thumboverlay`	`type=[image\|swatchset\|spinset\|video]`	Defines the asset type overlay. `state` attribute allows specifying which asset type to assign overlay for: `image` stands for individual images, `swatchset` stands for image set or swatch set, `spinset` means spin set and `video` means single video or Adaptive Video Set.
`.s7label`	(None)	Defines the appearance of the swatch labels.

Localizable Symbols

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

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

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `Swatches2` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getCurrentPage() Gets the current selected page from the set.
	getHeight() Returns the current height of the component.
	getPageCount() Gets the current page count of the swatches.
	getWidth() Returns the current width of the component.
	resize(width, height) Resizes the `Swatches2` component to the specified width and height.
	selectSwatch(index) Selects the specified frame.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setCurrentPage(page) Sets the currently displayed page from the set.
	setMediaSet(mediaSet) Sets the image or eCatalog set instance which contains two instances of `MediaSetDesc`.
	setModifier(modObj) Sets 1-N # of modifiers for the component.

Class Detail

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

Example Code
This example demonstrates how to use the Swatches2 component in a simple viewer. In this example a Container object,
a ZoomView object, and a Swatches2 object are created. Every time a user clicks a swatch, the ZoomView loads and
displays the appropriate image asset related to the selected swatch.

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 Swatches2 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 a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The selectSwatch() function is called on the
Swatches2 object to designate which swatch the viewer should display first. 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>
        <title>Swatches2 Example</title>
        <script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script>

        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.set.Swatches2');
            s7sdk.Util.lib.include('s7sdk.set.MediaSet');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>

        <style type="text/css" media="screen">
            body, html {
                width: 100%;
                height: 100%;
			}
            #cont {
                position: relative;
                width: 800px;
                height: 150px;
            }
			.s7container {
                position: relative;
            }
            .s7swatches2 {
                position:relative;
                height: 100px;
                width: 500px;
                border: 1px;
                border-color:#cccccc;
                background-color: rgba(200, 200, 200, 0.5);
            }
            .s7swatches2 .s7thumb {
                height: 70px;
                width: 65px;
                transition: all 2s;
            }
            .s7swatches2 .s7thumbcell[state="selected"] {
                border: 1px solid  #3366CC;
            }
        </style>
    </head>
    <body>	
        <div id="cont"></div>
        <script language="JavaScript" type="text/javascript">
            var params, container, swatches2, mediaSet;
            
            s7sdk.Util.init();
            params = new s7sdk.ParameterManager();

            function initViewer(){
                params.push("serverurl", "http://mobiletest.scene7.com/is/image/");
                params.push("asset", "sashadallas/from0to10set");
                params.push("autoscroll", "0");
                params.push("partialswatches", "0");
                params.push("scrollbar", "0");
                mediaSet = new s7sdk.set.MediaSet(null, params);
                
                container = new s7sdk.common.Container("cont", params);
                container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, function(e) {
                    swatches2.resize(container.getWidth(), container.getHeight());
                }, false);
                
                swatches2 = new s7sdk.set.Swatches2(container, params);
                swatches2.resize(container.getWidth(), container.getHeight());
                mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false);
            }

            function onSetParsed(e) {
                var msasset = e.s7event.asset;
                swatches2.setMediaSet(msasset);
            }				

            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);
            params.init();
			
        </script>
    </body>
</html>

Default styles for Swatches2:

.s7swatches2{
	background-color:rgba(100, 100, 100, 0.2);
	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);
	display:flex;
	justify-content:center;
	align-items:center;	
	width:500px;
	height:250px;
}
.s7swatches2 .s7layoutbox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width:100%;
  height:100%;
  flex-grow: 1;
}
.s7swatches2 .s7layout{
 	display:flex;
	flex-wrap:nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	justify-content:center;
	align-items:center;
	overflow:auto;
}								
.s7swatches2 .s7thumbcell{
	text-align:center;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin:5px;
	border:1px solid transparent;
}
.s7swatches2[orientation='vertical'] {
	flex-direction:column;
}
.s7swatches2[orientation='horizontal'] {
	flex-direction:row;
}
.s7swatches2[orientation='vertical'] .s7layout {
	flex-direction:column;
}
.s7swatches2[orientation='horizontal'] .s7layout {
	flex-direction:row;
}
.s7swatches2 .s7thumbcell[type='none']{
 	border:none !important;
	background-color:transparent !important;
	pointer-events:none !important;
}
.s7swatches2 .s7thumb{
	display:inline-block;
	vertical-align:top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:75px;
	height:75px;
}
.s7swatches2 .s7thumbcell[state='selected']{
 	border:1px solid #FFFFFF;
}
.s7swatches2 .s7thumb .s7thumboverlay{
 	width:100%;
	height:100%;
}
.s7swatches2 .s7thumb .s7thumboverlay[type='swatchset']{
	background-image:createImgUrl("asset_type_swatches.png");
}
.s7swatches2 .s7thumb .s7thumboverlay[type='spinset']{
	background-image:createImgUrl("asset_type_spin.png");
}
.s7swatches2 .s7thumb .s7thumboverlay[type='video'] {
	background-image:createImgUrl("asset_type_video.png");
}
.s7swatches2[scrollbar='false'] .s7layout::-webkit-scrollbar {
	display:none;
}
.s7swatches2[scrollbar='false'] .s7layout {
	-ms-overflow-style:none;
    overflow:-moz-scrollbars-none
}
.s7swatches2[scrollbar='true'] .s7layout::-webkit-scrollbar {
	display:none;
}
.s7swatches2[scrollbar='true'] .s7layout {
	-ms-overflow-style:none;
    overflow:-moz-scrollbars-none
}
.s7swatches2[canscroll='true'] .s7previousbutton {
	display:block;
}
.s7swatches2[canscroll='true'] .s7nextbutton {
	display:block;
}
.s7swatches2[canscroll='false'] .s7previousbutton {
	display:none;
}
.s7swatches2[canscroll='false'] .s7nextbutton {
	display:none;
}
.s7swatches2[orientation='horizontal'] .s7previousbutton {
	background-size:auto;
	width:20px;
	height:20px;
}
.s7swatches2[orientation='horizontal'] .s7previousbutton[state='up'] {
	background-image:url(images/sdk/scroll_left_up.png);
}
.s7swatches2[orientation='horizontal'] .s7previousbutton[state='over'] {
	background-image:url(images/sdk/scroll_left_over.png);
}
.s7swatches2[orientation='horizontal'] .s7previousbutton[state='down'] {
	background-image:url(images/sdk/scroll_left_down.png);
}
.s7swatches2[orientation='horizontal'] .s7previousbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_left_disabled.png);
}
.s7swatches2[orientation='horizontal'] .s7nextbutton {
	background-size:auto;
	width:20px;
	height:20px;
}
.s7swatches2[orientation='horizontal'] .s7nextbutton[state='up'] {
	background-image:url(images/sdk/scroll_right_up.png);
}
.s7swatches2[orientation='horizontal'] .s7nextbutton[state='over'] {
	background-image:url(images/sdk/scroll_right_over.png);
}
.s7swatches2[orientation='horizontal'] .s7nextbutton[state='down'] {
	background-image:url(images/sdk/scroll_right_down.png);
}
.s7swatches2[orientation='horizontal'] .s7nextbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_right_disabled.png);
}
.s7swatches2[orientation='vertical'] .s7previousbutton {
	background-size:auto;
	width:20px;
	height:20px;
}
.s7swatches2[orientation='vertical'] .s7previousbutton[state='up'] {
	background-image:url(images/sdk/scroll_up_up.png);
}
.s7swatches2[orientation='vertical'] .s7previousbutton[state='over'] {
	background-image:url(images/sdk/scroll_up_over.png);
}
.s7swatches2[orientation='vertical'] .s7previousbutton[state='down'] {
	background-image:url(images/sdk/scroll_up_down.png);
}
.s7swatches2[orientation='vertical'] .s7previousbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7swatches2[orientation='vertical'] .s7nextbutton {
	background-size:auto;
	width:20px;
	height:20px;
}
.s7swatches2[orientation='vertical'] .s7nextbutton[state='up'] {
	background-image:url(images/sdk/scroll_down_up.png);
}
.s7swatches2[orientation='vertical'] .s7nextbutton[state='over'] {
	background-image:url(images/sdk/scroll_down_over.png);
}
.s7swatches2[orientation='vertical'] .s7nextbutton[state='down'] {
	background-image:url(images/sdk/scroll_down_down.png);
}
.s7swatches2[orientation='vertical'] .s7nextbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_down_disabled.png);
}
.s7swatches2 .s7label{
	width:75px;
	height:10px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-family:Helvetica, sans-serif;
	font-size:10px;
}

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

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the Swatches2 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 swatch is selected. s7sdk.event.AssetEvent

s7sdk.event.SwatchEvent.SWATCH_PAGE_CHANGE - Dispatched when the currently displayed page of swatches has changed. s7sdk.event.SwatchEvent

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

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; s7sdk.event.SwatchEvent; s7sdk.event.StatusEvent

dispose()

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

getCurrentPage()

Gets the current selected page from the set. The valid ranges are 0...X with 0 representing the first page (0-based index).

Returns:: Current page from the set.

{Number} getHeight()

Returns the current height of the component.

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

getPageCount()

Gets the current page count of the swatches. Page count represents the # of pages available in the set based on # of thumbnails showing

Returns:: Number of pages in the set based on visible thumbnails

{Number} getWidth()

Returns the current width of the component.

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

resize(width, height)

Resizes the Swatches2 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)

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

Parameters:
{Number} index: Frame index in the image set.

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

setCurrentPage(page)

Sets the currently displayed page from the set. The valid ranges are 0...X with 0 representing the first page (0-based index).

Parameters:
{Number} page: - The number of page to select.

setMediaSet(mediaSet)

Sets the image or eCatalog set instance which contains two instances of MediaSetDesc.

Parameters:
{MediaSetDesc} mediaSet: Set to extract swatches from.

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

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