HTML5 Viewer SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.set

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:

ModifierSyntaxDescriptionDefault
serverurlisRootPathThe 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/
iscommandvalueThe 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.""
scrolltransitionvalueSpecifies the duration of scroll animation in seconds. 0.3
autoscroll0|1Enables or disables autoscroll in the component.0
scrollbar0|1Enables or disables native browser scroll bars.0
maxloadradius-1|0|preloadnbrSpecifies 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
enablescrollbuttons0|1Displays or hides the scroll buttons.1
partialswatches0|1Enables or disables display of partially visible swatches in the component.1
fmtjpg|jpeg|png|png-alpha|gif|gif-alphaSpecifies 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
pagemode0|1When 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 ClassAttribute SelectorDescription
.s7swatches2scrollbar=[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.
.s7thumbstate=[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.
.s7thumboverlaytype=[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:

    

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the Swatches2 component.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  5. 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.).
    6. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

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

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!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;
    scrollbar-width:none;
}
.s7swatches2[scrollbar='true'] .s7layout::-webkit-scrollbar {
	display:auto;
}
.s7swatches2[scrollbar='true'] .s7layout {
	-ms-overflow-style:auto;
    overflow:-moz-scrollbars-auto;
    scrollbar-width:auto;
}
.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
    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:13 GMT-0000 (UTC)