Class s7sdk.common.PanDownButton

You can associate the PanDownButton with a ZoomView component to pan down the current image in the viewer.

This component does not currently read any modifiers.

Defining the Appearance using CSS

The CSS class for styling the PanDownButton is .s7pandownbutton. This button has the following four states: up, over, down and disabled. You can style these states by adding the state attribute selector to the CSS class. It is recommended that you define common CSS under the main class and only define the necessary distinctions when using attribute selectors.

CSS Class	Attribute Selector	Description
`.s7pandownbutton`	`state=[up\|over\|down\|disabled]`	Define the appearance of `PanDownButton` for each state.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localized Symbols

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

Symbol	Description
`PanDownButton.TOOLTIP`	Define a localized tooltip of `PanDownButton`

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.common.PanDownButton(container, settings, compId)

Methods borrowed from class s7sdk.common.Button:: activate, addEventListener, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS, setLabel

Class Detail

s7sdk.common.PanDownButton(container, settings, compId)

Example Code
This example demonstrates how to use the PanDownButton component in a simple viewer. In this example a Container object,
a Swatches object, a ZoomView object, a MediaSet object, and 4 pan button objects are created. The Swatches object
loads and displays all the swatch images in the designated MediaSet. If a user clicks on a swatch the ZoomView object
loads and displays the appropriate image asset. When a user zooms in on the image in the ZoomView, clicking any of
the pan buttons will move the image in the appropriate direction within the ZoomView display area.

The code below does the following:

The Adobe Experience Viewers 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 used in the viewer.
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 modifier (hard coded for example purposes),
then creates the component objects required for this simple example. The setAsset() method is called on the
MediaSet object to designate a media set for the viewer to load and display. 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 Adobe Experience Viewers HTML5 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>MediaSet and Pan Button 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.Container');
            s7sdk.Util.lib.include('s7sdk.set.MediaSet');
            s7sdk.Util.lib.include('s7sdk.set.Swatches');
            s7sdk.Util.lib.include('s7sdk.image.ZoomView');
        </script>

        <style type="text/css" media="screen">
            .s7zoomview {
                width: 300px;
                height: 300px;
            }
            .s7panupbutton {
                display:block;
                position: absolute;
                top: 30px;
                left: 25px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
            .s7pandownbutton {
                display:block;
                position: absolute;
                top: 80px;
                left: 25px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
            .s7panleftbutton {
                display:block;
                position: absolute;
                top: 55px;
                left: 0px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
            .s7panrightbutton {
                display:block;
                position: absolute;
                top: 55px;
                left: 50px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
            .s7swatches {
                top: 305px;
                left: 0px;
                height: 150px;
                width: 300px;
                border: 1px;
                border-color:#cccccc;
                background-color: rgba(200, 200, 200, 0.5);
            }
        </style>

    </head>
    <body>

        <div id="s7container"></div>
        <script language="JavaScript" type="text/javascript">
            var params, container, swatches, zoomView, mediaSet,
                panRightButton, panLeftButton, panUpButton, panDownButton;

            // 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", "https://s7d1.scene7.com/is/image");

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

                // Note: Any component supporting the setMediaSet API can be driven
                //       by the MediaSet component.
                // Create the Swatches component object
                swatches = new s7sdk.set.Swatches(container, params, "swatches");

                // Create the ZoomView component object
                zoomView = new s7sdk.image.ZoomView(container, params, "zoomView");

                // Create the pan button component objects
                panRightButton = new s7sdk.common.PanRightButton(container, params, "panRightButton");
                panLeftButton = new s7sdk.common.PanLeftButton(container, params, "panLeftButton");
                panUpButton = new s7sdk.common.PanUpButton(container, params, "panUpButton");
                panDownButton = new s7sdk.common.PanDownButton(container, params, "panDownButton");

                // Create the MediaSet component object
                // Note: The MediaSet constructor does not require the first or last parameter
                mediaSet = new s7sdk.set.MediaSet(null, params, null);

                // Note: MediaSet.setAsset can be called any time after the MediaSet is created.
                //       The NOTF_SET_PARSED event will be sent each time a new asset is loaded.
                mediaSet.setAsset('demo/Backpacks');

                // Add event listeners for pan button clicks
                panUpButton.addEventListener("click",function(){zoomView.zoomNPan(0, 0.2);}, true);
                panDownButton.addEventListener("click",function(){zoomView.zoomNPan(0, -0.2);}, true);
                panLeftButton.addEventListener("click",function(){zoomView.zoomNPan(0.2, 0);}, true);
                panRightButton.addEventListener("click",function(){zoomView.zoomNPan(-0.2, 0);}, true);

                // Add an event listener for mediaset parsed events
                // Note: This event will be emitted every time the MediaSet.setAsset function is called.
                mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false);

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

                // Add an event listener for zoom capability state changes
                zoomView.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE, onZoomStateChange);
            }

            // Define an event handler function to update the swatches when the mediaset is parsed
            function onSetParsed(event) {
                swatches.setMediaSet(event.s7event.asset);
                swatches.selectSwatch(0);
            }

            // Define an event handler function to update the ZoomView image when a new swatch is selected
            function onSwatchSelected(event){
                zoomView.setItem(event.s7event.asset);
            }

            // Define an event handler function to enable/disable pan buttons based on zoom state
            function onZoomStateChange(event){
                if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.PAN_LEFT)){
                    panLeftButton.activate();
                }else{
                    panLeftButton.deactivate();
                }
                if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.PAN_RIGHT)){
                    panRightButton.activate();
                }else{
                    panRightButton.deactivate();
                }
                if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.PAN_UP)){
                    panUpButton.activate();
                }else{
                    panUpButton.deactivate();
                }
                if (event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.PAN_DOWN)){
                    panDownButton.activate();
                }else{
                    panDownButton.deactivate();
                }
            }

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

.s7pandownbutton {
	width:25px;
	height:25px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7pandownbutton[state='up'] {
	background-image:url(images/sdk/pandown_up.png);
 }
.s7pandownbutton[state='over'] {
	background-image:url(images/sdk/pandown_over.png);
 }
.s7pandownbutton[state='down'] {
	background-image:url(images/sdk/pandown_down.png);
 }
.s7pandownbutton[state='disabled'] {
	background-image:url(images/sdk/pandown_disabled.png);
 }
.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, ControlBar instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: ParameterManager as settings.
{String} compId: A unique ID for this component.

Namespaces

Classes in s7sdk.common

Class s7sdk.common.PanDownButton