Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.set

Class s7sdk.set.PageView

The PageView is an image viewing component that displays images served by Adobe Image Serving that are combined into an eCatalog set. The PageView will automatically load nearby frames in the background to make the frame transition responsive and smooth.

You can also zoom into the currently displayed frame by either double-clicking/tapping on it or by calling zoomIn() API from JavaScript. You can adjust which user action is associated with a zooming action through the use of doubleclick and singleclick modifiers. On the devices that support pinch gestures, pinching in and out zooms in and out the current frame. If the image is zoomed in, a dragging gesture pans the image. If the image is fully zoomed out and the frametransition is set to slide, a drag gesture results in a frame change and switches to the next/previous page of the view. Similary when frametransition is set to turn user can use interactive page turn animation to switch between pages.

Customizing Behavior Using Modifiers

On desktop systems, PageView component supports custom mouse cursors. The type of the cursor depends on component state and user action, the following types are supported:

The appearance of custom cursor is controlled with CSS by setting cursor property for .s7pageview class with corresponding value for cursortype attribute selector. By default all cursors are set to default.

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.

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

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
serverurlisRootPathThe Adobe 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 Adobe Image Serving catalog or asset ID of a named eCatalog set whose definition comes from the server by means of the req=set command.""
directionauto|left|rightSpecifies the way pages are displayed in the view. left sets a left-to-right display order and right reverses the order so that pages are displayed right-to-left. When auto is set, the component applies right mode when locale is set to "ja". Otherwise, left is used.auto
iscommandvalueThe Adobe Image Serving command string that is applied to all swatches. If specified in the URL all occurrences of '&' and '=' must be HTTP-encoded as %26 and %3D, respectively.""
zoomstepstep[,limit]Configures how many zoom in and zoom out actions are required to increase or decrease the resolution by a factor of two. The resolution change for each zoom action is 2^1/step. Set to 0 to zoom to full resolution with a single zoom action. limit specifies the maximum zoom resolution, relative to the full resolution image. The default is 1.0, which does not allow zooming beyond full resolution.1.0, 1.0
frametransition[none|fade|slide|turn|auto][,duration]Specifies the type and duration of the effect applied on frame change. Set none for no transition; frame change occurs instantly. Set fade to cross-fade the transition between old and new frames, with transition duration in seconds controlled by duration. Set slide to activate the transition where the old frame slides out of the view and the new frame slides in. This functionality is the only transition mode where it is possible to change between frames using a swipe or flick gesture. Slide animation duration is also controlled by duration. Set turn to enable page flip effect, when user can drag one of the four spread corners and perform interactive page flip. The accompanying duration, as expressed in seconds, sets how long it takes to complete full page turn animation. When turn is used the appearance of the component is controlled with pageturnstyle modifier and .s7pagedivider CSS class is ignored. turn animation is not supported on Android 2.x devices and on Motorola Xoom. Use auto to set the turn frame transition on desktop systems and slide sets the frame transition on touch devices.slide,0.3
pageturnstyledividerWidth,dividerColor,dividerOpacity,borderOnOff,borderColor,fillColorControls the component appearance when frametransition is set to turn (or auto on desktop systems). dividerWidth is the pixel width of the page divider shadow that separates left and right pages in the spread. It also controls the width of the running shadow displayed next to the turning page. Set dividerColor to control the RRGGBB color value of the shadow. Use dividerOpacity to set the opacity as specified from 0 to 1). borderOnOff is a flag, set as 0 or 1, that turns the border around the turning page on and off. borderColor sets the RRGGBB color value of the border. Used fillColor to set the solid fill RRGGBB color value of the component that is used during page turn animation.40,909090,1,1,909090,FFFFFF
maxloadradius-1|0|preloadnbrSpecifies the component preload behavior. When set to -1, the component preloads all catalog frames when in an idle state. When set to 0, the component loads only the frame that is currently visible. The exception is when frametransition is set to slide or auto on touch devices, where the component always loads the current, previous, and next frame. Use preloadnbr to define how many invisible frames around the currently displayed frame are preloaded in an idle state.1
transition[time][,easing]The time element specifies the time in seconds that the animation takes for a single zoom step action. Use easing to create an illusion of acceleration or deceleration which makes the transition appear more natural. You can set easing to one of the following: 0 (auto), 1 (linear), 2 (quadratic), 3 (cubic), 4 (quartic), 5 (quintic). Auto mode always uses a linear transition when elastic zoom is disabled (default). Otherwise, it fits one of the other easing functions based on the transition time. That is, the shorter the transition time, the higher the easing function is used to quicken the acceleration or deceleration effect.0.5,0
singleclicknone|zoom|reset|zoomResetConfigures the mapping of single-click or tap-to-zoom actions. Setting to none disables a single-click or tap zoom. If it is set to zoom then clicking the image zooms in one zoom step; CTRL+clicking zooms out one zoom step. reset causes a single click of the image to reset the zoom to the initial zoom level. For zoomReset, reset is applied if the current zoom factor is at or beyond the specified limit. Otherwise, zoom is applied.none
doubleclicknone|zoom|reset|zoomResetConfigures the mapping of double-click or tap-to-zoom actions. Set to none to disable a double-click or tap reset. If it is set to zoom then double-clicking the image zooms in one step; CTRL+double-clicking zooms out one step. reset causes a double-click of the image to reset the zoom to the initial zoom level. For zoomReset, reset is applied if the current zoom factor is at or beyond the specified limit. Otherwise, zoom is applied.zoomReset
iconeffect0|1[,count][,fade][,autoHide]Enables the IconEffect to display above the image when the image is in reset state. Such functionality is suggestive of available action to interact with the image. Set count to specify the maximum number of times the icon overlay appears and reappears. A value of -1 indicates that the overlay reappears indefinitely. Set fade to specify the duration in seconds of show and hide animation. The autoHide sets the number of seconds that the IconEffect stays visible before it auto-hides. That is, the time after fade in animation is completed and before fade out animation starts. A value of 0 disables auto-hide behavior.1,1,0.3,3
enableHDalways|never|limit,<number>Enable, limit, or disable optimization for devices where devicePixelRatio is greater than 1. If using the limit setting, the largest value that works for all devices is the value of the larger of width or height for the Reply Image Size Limit setting in Dynamic Media Classic (see Setup > Application Setup > Publish Setup > Image Server, then look under the Request Attributes heading.)limit,1500
fmtjpg|jpeg|png|png-alpha|gif|gif-alphaSpecifies the image format for the component to use for loading images from Image Server. If the specified format ends with "-alpha", the component renders images as transparent. For all other image formats, the component treats images as opaque. Note that the component has a white background by default. Therefore, to make it completely transparent set the background-color CSS property to transparentjpeg

Defining Appearance using CSS

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

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

CSS ClassAttribute SelectorDescription
.s7pageviewcursortype=[default|zoomIn|reset|drag|slide]Represents the main body of the PageView component. The cursortype allows setting different custom cursor types.
.s7pagedivider(None)Defines the appearance of the page divider. Setting the width to 0px hides it. Ignored when frametransition is set to turn (or auto on desktop systems).
.s7iconeffectmedia-type=[standard|multitouch]Defines the appearance of the IconEffect.

Localized Symbols

PageView also has 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 Adobe Experience Viewers HTML5 SDK User Guide.

SymbolDescription
PageView.ROLE_DESCRIPTIONDefine a localized "aria-roledescription" of PageView
PageView.USAGE_HINTDefine a localized text for "aria-describedby" of PageView

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.set.PageView(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the PageView component.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
getCapabilityState()

Returns a PageViewCapabilityState object that can be used to determine the current state of the PageView component.
 
getCurrentFrameIndex()
Return current frame index.
 
getHeight()
Returns the current inner height of the component.
 
getWidth()
Returns the current inner width of the component.
 
imagePixelsToViewPoint(inPt)
Converts a point from the top resolution image coordinates to view coordinates.
 
nextPage()
Go to next page.
 
prevPage()
Go to previous page.
 
resize(w, h)
Sets PageView to the specified width and height.
 
setAsset(assetName)
Changes the currently displayed set.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setCurrentFrameIndex(idx)
Set current frame to specific 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.
 
zoomIn()
Zoom in one level.
 
zoomOut()
Zoom out by one step.
 
zoomReset()
Reset the view to its initial zoom state.
Class Detail
s7sdk.set.PageView(container, settings, compId) 
Example Code

This example demonstrates how to use the PageView 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 Adobe Experience Viewers 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 SDK components.
    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 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 Adobe Experience Viewers HTML5 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>
    	<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 Adobe Experience Viewers HTML5 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", "https://s7d1.scene7.com/is/image/");
                params.push("Download.contenturl","https://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 PageView:

.s7pageview {
	background-color:#ffffff;
	position:absolute;
	width:400px;
	height:400px;
	z-index:0;
	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);
 }
.s7pageview img {
	max-width:none;
	max-height:none;
 }
.s7pageview[cursortype='default'] {
	cursor:default;
 }
.s7pageview[cursortype='zoomin'] {
	cursor:default;
 }
.s7pageview[cursortype='reset'] {
	cursor:default;
 }
.s7pageview[cursortype='drag'] {
	cursor:default;
 }
.s7pageview[cursortype='slide'] {
	cursor:default;
 }
.s7pageview .s7iconeffect {
	width:120px;
	height:120px;
	-webkit-transform:translateZ(0px);
	background-repeat:no-repeat;
	background-position:center;
 }
.s7pageview .s7iconeffect[media-type='standard'] {
	background-image:url(images/sdk/doubletapicon.png);
 }
.s7pageview .s7iconeffect[media-type='multitouch'] {
	background-image:url(images/sdk/zoomicon.png);
 }
.s7pageview .s7pagedivider {
	width:40px;
	background-image:url(images/sdk/divider.png);
 }
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.ParameterManager
s7sdk.set.MediaSet
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the PageView 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.ResizeEvent.COMPONENT_RESIZE - Dispatched when the component has been resized. s7sdk.event.ResizeEvent
  • s7sdk.event.CapabilityStateEvent.NOTF_PAGEVIEW_CAPABILITY_STATE - Dispatched when the page index, pan or zoom capabilities have changed. s7sdk.event.CapabilityStateEvent
  • s7sdk.event.AssetEvent.ASSET_CHANGED - Dispatched when asset has changed. s7sdk.event.AssetEvent
  • s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT - Dispatched when the current page has changed. s7sdk.event.AssetEvent
  • s7sdk.event.FrameEvent.NOTF_FRAME_TRANSITION_START - Dispatched when fade or slide page transition begins. s7sdk.event.FrameEvent
  • s7sdk.event.FrameEvent.NOTF_FRAME_TRANSITION_END - Dispatched when fade or slide page transition is finished. s7sdk.event.FrameEvent
  • s7sdk.ZoomRgnEvent.NOTF_ZOOM_NRGN - Dispatched when the coordinates of view area has changed. s7sdk.event.ZoomRgnEvent
  • s7sdk.ZoomRgnEvent.NOTF_ZOOM_RGN - Dispatched when the coordinates of view area has changed. s7sdk.event.ZoomRgnEvent
  • 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 fills the view entirely with image data (either low-resolution tile or high-resolution overview image loads and displays - whatever comes first). It is sent only after asset swap and not during zoom, pan or page change operations. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_HIGHRES_VIEW_READY - Dispatched when component fills the view with high resolution image. The event is sent only once per asset swap, when the view is filled with high resolution image data for the first time after asset was set or changed. This event is not sent later, when user zooms, pans or changes pages. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_PRELOAD_START - Dispatched when the component begins to preload new content according to maxloadradius modifier. The event is sent multiple times during component's life cycle as user actions may trigger new preloading step. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_PRELOAD_COMPLETE - Dispatched when all the content according to maxloadradius modifier is downloaded. The event is sent multiple times during component's life cycle as user actions may trigger new preloading step. s7sdk.event.StatusEvent
    • Parameters:
    {String} type
    Event name, for example s7sdk.event.AssetEvent.ASSET_CHANGED.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    dispose()
    Dispose is used to remove itself and all sub-elements from the DOM
    {s7sdk.PageViewCapabilityState} getCapabilityState()

    Returns a PageViewCapabilityState object that can be used to determine the current state of the PageView component. For example, if the component can zoom in, then the ZOOM_IN capability flag will be set. This means that the current frame is not fully zoomed in.

    Returns:
    {s7sdk.PageViewCapabilityState} The current capabilities of the PageView instance.
    See:
    s7sdk.PageViewCapabilityState
    {Number} getCurrentFrameIndex()
    Return current frame index.
    Returns:
    Index of the current frame.
    {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.
    {Point2D} imagePixelsToViewPoint(inPt)
    Converts a point from the top resolution image coordinates to view coordinates.
    Parameters:
    {Point2D} inPt
    Point in top resolution image coordinates.
    Returns:
    {Point2D} point in view coordinates
    See:
    s7sdk.Point2D
    nextPage()
    Go to next page.
    prevPage()
    Go to previous page.
    resize(w, h)
    Sets PageView to the specified width and height.
    Parameters:
    {Number} w
    The width of the component, in pixels.
    {Number} h
    The height of the component, in pixels.
    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 Adobe 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. .s7pageview
    {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(idx)
    Set current frame to specific index.
    Parameters:
    {Number} idx
    new frame 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.
    zoomIn()
    Zoom in one level.
    zoomOut()
    Zoom out by one step.
    zoomReset()
    Reset the view to its initial zoom state.
    Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:09 GMT-0000 (UTC)