Class s7sdk.set.PageScrubber

The PageScrubber is a navigation type of component that provides ability to scrub through the images of a set. It is typically used together with the PageView component in eCatalog applications.

The PageScrubber provides several events that are dispatched in response to user interaction with the component. When the user holds down the scrubber button, a SliderEvent.NOTF_SLIDER_DOWN event is dispatched. When the user drags the scrubber button, a SliderEvent.NOTF_SLIDER_MOVE event is dispatched each time the scrubber moves to a new page. When the button is released, a SliderEvent.NOTF_SLIDER_UP event is dispatched. All three events have a property position which is the index of the current page in the set. In addition, when the button is released, an AssetEvent.ITEM_SELECTED_EVENT that contains a reference to the current asset in the set is dispatched.

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.

Customizing Behavior Using Modifiers

Modifiers change PageScrubber 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/
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 thumbnail images when images are displayed in the optional bubble. If specified in the URL, all occurrences of '&' and '=' must be HTTP-encoded as `%26` and `%3D`, respectively.	""
pagethumb	none\|label\|image\|singlepage\|doublepage	The type of optional information bubble that you want. The bubble is displayed when holding and dragging the page scrubber button. The values are `none` which does not display an information bubble, `label` with displays the current page spread label, and `image` which displays the current spread thumbnail). The `singlepage` and `doublepage` options are deprecated and have the same effect as `label`.	label
maxloadradius	-1\|0\|preloadnbr	Specifies the component preload behavior when `pagethumb` is set to `image`. When set to `-1`, thumbnails for all frames are loaded simultaneously when the component is initialized or the asset has changed. When set to `0`, only the thumbnail for the current position is loaded. preloadnbr defines how many thumbnails to the left and to the right of current position are preloaded.	1
direction	auto\|left\|right	The direction that the button is draggable. The valid values are `left`, `right`, and `auto`. If `auto` is set, the component automatically detects if the language is set to 'ja' or Japanese and sets the direction to `right` automatically.	auto
labelkey	key	Specifies the name of the property stored in catalog::UserData which defines the text string that is used for the information bubble when `pagethumb` is set to `singlepage` or `doublepage`. If specified, it is propagated to Image Serving by appending `labelkey=`key to the `req=set` request. If user data property with the specified key is found, Image Serving inserts its value in the response as image labels. Labels coming from the server take precedence over auto-generated labels.	label
aligntotick	true\|false	If set to `true` the component snaps the knob to the fixed position based on the number of spreads in the set. If set to `false`, you can position the knob anywhere on the track.	false

Defining Appearance using CSS

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

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

CSS Class	Attribute Selector	Description
`.s7pagescrubber`	(None)	Represents the main body of the `PageScrubber` component.
`.s7track`	(None)	Represents the background 'track' for the `PageScrubber` component.
`.s7dragbutton`	(None)	Represents the draggable button for the `PageScrubber` component.
`.s7bubble`	(None)	Represents the text bubble or area that is shown when the `PageScrubber` component is dragged.
`.s7imgbubble`	(None)	Represents the image bubble or area that is shown when the `PageScrubber` component is dragged.

Localizable Symbols

PageScrubber also have a text symbol 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
`PageScrubber.PAGE_THUMB_TEXT`	Defines the localized text of the `PageScrubber` component that displays in the text bubble when dragging.

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

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `PageScrubber` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getCurrentFrameIndex() Returns the current page index.
	getHeight() Returns the current inner height of the component.
	getWidth() Returns the current inner width of the component.
	resize(w, h) Resize is used to set the component size as well as re-calculate the position of the scrubber button
	setAsset(assetName) Changes the currently displayed set.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setCurrentFrameIndex(frame) Sets the new page index.
	setLandscape() Switches component to landscape operation mode.
	setMediaSet(mediaSet) 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.PageScrubber(container, settings, compId)

Example Code
This example demonstrates how to use the PageScrubber 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 PageScrubber:

.s7pagescrubber {
	width:710px;
	height:100px;
	position:absolute;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7pagescrubber .s7track {
	width:700px;
	height:16px;
	text-align:center;
	background-color:#E5E5E8;
	position:absolute;
	bottom:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
 }
.s7pagescrubber .s7dragbutton {
	background:#49494A;
	height:24px;
	width:24px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	position:absolute;
	top:-4px;
	color:white;
 }
.s7pagescrubber .s7bubble {
	background:#49494A;
	position:absolute;
	left:-38px;
	top:-30px;
	width:100px;
	height:26px;
	border-radius:6px;
	text-align:center;
	font-family:Arial;
	font-size:14px;
	line-height:25px;
	word-wrap:normal;
	white-space:nowrap;
	overflow-wrap:none;
	text-wrap:none;
 }
.s7pagescrubber .s7imgbubble {
	background:#49494A;
	position:absolute;
	border-radius:5px;
	text-align:center;
	font-family:Arial;
	font-size:14px;
	line-height:25px;
	word-wrap:normal;
	white-space:nowrap;
	overflow-wrap:none;
	text-wrap:none;
	width:160px;
	height:100px;
	top:-115px;
	left:-73px;
	padding:5px;
 }

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.

Returns:: {s7sdk.set.PageScrubberControl} Returns a dynamic wrapper for this component, which is of type s7sdk.set.PageScrubberControl. This wrapper is only a proxy that allows dynamic setting of modifiers and CSS properties. All other API calls are forwarded to the core component directly.

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

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the PageScrubber 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.ITEM_SELECTED_EVENT - Dispatched when a scrubber is moved. s7sdk.event.AssetEvent

s7sdk.event.SliderEvent.NOTF_SLIDER_DOWN - Dispatched when the scrubber button is pressed. s7sdk.event.SliderEvent

s7sdk.event.SliderEvent.NOTF_SLIDER_UP - Dispatched when the scrubber button is released. s7sdk.event.SliderEvent

s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE - Dispatched when the scrubber position has changed to a new page. s7sdk.event.SliderEvent

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

See:: s7sdk.event.AssetEvent; s7sdk.event.SliderEvent

dispose()

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

{Number} getCurrentFrameIndex()

Returns the current page index.

Returns:: Current page index.

{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(w, h)

Resize is used to set the component size as well as re-calculate the position of the scrubber button

Parameters:
{Number} w: New width.
{Number} h: New height.

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. Preferred way of changing assets though is by calling the setMediaSet() API

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

See:: s7sdk.TrackingManager; s7sdk.set.MediaSet

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

setCurrentFrameIndex(frame)

Sets the new page index.

Parameters:
{Number} frame: New page index.

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)

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.

Parameters:
{MediaSetDesc | OrientationSetDesc} mediaSet: Set to extract the frames from.

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