Class s7sdk.set.SetIndicator

The SetIndicator component provides the ability to show a series of 'page' indicators. Each indicator represents a 'page' of an image set and works with the Swatches component to get the # of pages in a set as well as the current selected page.

The component can be configured to automatically hide its indicators if number of pages exceeds certain limits set by autohide modifier.

It is possible to use two different rendering modes, where the compnent either puts visual indicators which are exactly the same for all pages, or renders page number. This is controlled with the mode modifier.

Customizing Behavior Using Modifiers

Modifiers change SetIndicator 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
autohide	0\|1[,limit]	Configures auto-hide behavior depending on number of pages and run-time component size. `0` turns the auto-hide off. `1` enables the auto-hide. The component will hide its dots if at least one of the following conditions will turn true: (a) the row with dots will become wider than the run-time component width or (b) number of pages set for this component exceeds the limit configured by `limit` parameter. Setting `limit` to `-1` disables the second auto-hide condition.	0,-1
mode	numeric\|dotted	Configures the rendering style of the set indicator. When set to `dotted` the component should render identical indicators for all pages. When set to `numeric` it will put a 1-based page number inside each indicator element. `numeric` operation mode is not supported on devices capable of touch input, the component will always use `dotted` on such devices.	dotted

Defining the Appearance using CSS

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

The styling of the sub-elements using class selectors like .s7dot 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 .s7setindicator .s7dot. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7setindicator`	mode=[numeric\|dotted]	Represents the main body of the `SetIndicator` component. The `mode` attribute is set based on the value of `mode` modifier.
`.s7setindicator .s7dot`	state=[selected\|unselected]	Defines the appearance of the page indicators (dots).
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localizable Symbols

The SetIndicator also supports 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
`SetIndicator.TOOLTIP`	Define a localized tooltip of `SetIndicator` component. The default value is an empty string.

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

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `SetIndicator` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getHeight() Returns the current inner height of the component.
	getSelectedPage() Returns the current selected page from the set.
	getWidth() Returns the current inner width of the component.
	resize(w, h) Resize the SetIndicator.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setNumberOfPages(page) Sets how many pages are to be represented by this component.
	setSelectedPage(page) Sets the current selected page from the set.

Class Detail

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

Example Code
This example demonstrates how to use the SetIndicator component in a simple viewer. In this example a Container object,
a ZoomView object, a Swatches object, and a SetIndicator object are created. When a user clicks the left or right arrow
buttons on the swatches object, the swatch images will scroll left or right to show the previous or next 3 swatches in
the currently loaded swatch set. Each time the swatches are scrolled, the SetIndicator object will update to give the
user a visual indication of which swatches they are currently viewing within the set. 

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.
A setPages flag variable is defined. This will be checked by the onSwatchSelected() event handler when a user
clicks to scroll the swatches. The purpose of this flag is to cause the event handler to update the SetIndicator object
with the number of pages in the swatch set once, when the first SWATCH_SELECTED_EVENT is fired by the Swatches object,
but not again for subsequent swatch selections.
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. The selectSwatch() function is called on the
Swatches 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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport"
           content="user-scalable=no, height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0" />

        <title>SetIndicator 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.image.ZoomView');
            s7sdk.Util.lib.include('s7sdk.set.Swatches');
            s7sdk.Util.lib.include('s7sdk.set.SetIndicator');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>

        <style type="text/css" media="screen">
            .s7zoomview {
                top: 10px;
                left: 10px;
                height: 360px;
                width: 360px;
            }
            .s7swatches {
                top: 370px;
                left: 10px;
                height: 100px;
                width: 360px;
                border: 1px;
                border-color:#cccccc;
                background-color: rgba(200, 200, 200, 0.5);
            }
            .s7swatches .s7thumb { }
            .s7swatches .s7thumb[state="default"] { }
            .s7swatches .s7thumb[state="selected"] {
                box-shadow: inset 0px 0px 0px 2px #3366CC;
                -webkit-box-shadow: inset 0px 0px 0px 2px #3366CC;
            }
            .s7setindicator {
                top: 470px;
                left: 10px;
                height: 60px;
                width: 360px;
				position:absolute;
            }
        </style>

    </head>
    <body style="margin: 0 0;overflow:hidden;">

        <script language="JavaScript" type="text/javascript">
            var container, params, zoomView, swatches, indicator;

            // It is necessary to postpone setting the number of pages for the
            // SetIndicator component until the Swatches component has loaded
            // the entire swatch set.  (See onSwatchSelected below.)
            var setPages = true;

            // 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("asset", "sample/spinner");
                params.push("tmblayout", "0,1");

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

                // Create the ZoomView component object to display the asset associated with the swatch
                zoomView = new  s7sdk.image.ZoomView( container, params, "myZoomView");

                // Create the Swatches component object
                swatches = new s7sdk.set.Swatches(container, params,"mySwatches");

                // Create the SetIndicator component object
                indicator = new s7sdk.set.SetIndicator(container, params, "myIndicator");

                // Select the first swatch
                swatches.selectSwatch(0, true);

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

                // Add an event listener for swatch page change events (when swatches are scrolled)
                swatches.addEventListener(s7sdk.event.SwatchEvent.SWATCH_PAGE_CHANGE, onPageChange, false);
            }

            // Define an event handler function to update the ZoomView image when a new swatch is selected
            function onSwatchSelected(event) {
                if (setPages) {
                    // NOTE: Only need to set the number of pages once, when the swatches finish loading
                    indicator.setNumberOfPages(swatches.getPageCount().x);
                    setPages = false;
                }
                zoomView.setItem(event.s7event.asset);
            }

            // Define an event handler function to update the SetIndicator when the swatch page changes
            function onPageChange(event){
                var pg = event.s7event.page.x;
                indicator.setSelectedPage(pg);
            }

            // 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 SetIndicator:

.s7setindicator {
	width:400px;
	height:22px;
	text-align:center;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	border-radius:0px;
	font-family:Helvetica, sans-serif;
	font-size:11px;
 }
.s7setindicator .s7dot {
	display:inline-block;
	width:10px;
	height:10px;
	margin-left:2px;
	margin-right:2px;
	margin-top:6px;
	margin-bottom:2px;
	border-radius:6px;
	background-color:#d5d3d3;
 }
.s7setindicator .s7dot[state='selected'] {
	background-color:#939393;
 }
.s7setindicator .s7dot[state='unselected'] {
	background-color:#d5d3d3;;
 }
.s7setindicator[mode='numeric'] .s7dot {
	cursor:default;
	width:18px;
	height:18px;
	line-height:18px;
	margin-top:2px;
	border-radius:9px;
 }
.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 object that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the component DOM element.

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the SetIndicator 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.SwatchEvent.SWATCH_PAGE_CHANGE.

The events supported by the component are:

s7sdk.event.SwatchEvent.SWATCH_PAGE_CHANGE - Dispatched when the current indicator has changed because of user click or an API call. The event is not dispatched on touch devices when user taps on the indicator. s7sdk.event.SwatchEvent

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

See:: s7sdk.event.SwatchEvent

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, in pixels.

{Number} getSelectedPage()

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

Returns:: {Number} currently selected page.

{Number} getWidth()

Returns the current inner width of the component.

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

resize(w, h)

Resize the SetIndicator.

Parameters:
{Number} w: Width in pixels.
{Number} h: Height in pixels.

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

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

setNumberOfPages(page)

Sets how many pages are to be represented by this component. The valid ranges are 1...X.

Parameters:
{String} page: The number of pages.

setSelectedPage(page)

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

Parameters:
{String} page: The currently selected page.

Namespaces

Classes in s7sdk.set

Class s7sdk.set.SetIndicator