HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.set

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:

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/
assetimageSetThe Image Serving catalog or asset ID of a named image set whose definition comes from the server by means of the req=set command.""
iscommandvalueThe 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.""
pagethumbnone|label|image|singlepage|doublepageThe 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|preloadnbrSpecifies 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
directionauto|left|rightThe 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
labelkeykeySpecifies 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
aligntoticktrue|falseIf 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 ClassAttribute SelectorDescription
.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.

SymbolDescription
PageScrubber.PAGE_THUMB_TEXTDefines 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 is used to remove itself and all sub-elements from the DOM
 
Returns the current page index.
 
Returns the current inner height of the component.
 
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
 
Sets the new page index.
 
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.
 
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:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  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 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. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
  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. 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.

    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:13 GMT-0000 (UTC)