Class s7sdk.info.InfoPanelPopup

InfoPanelPopup is a component that displays an info panel pop-up, normally on top of another image viewing component or in dedicated page area, typically in response to a dispatched RolloverKeyEvent event. For example, if a user rolls over an image map with the mouse and that image map dispatches a notification event, InfoPanelPopup could be displayed providing additional information about the image map. In particular InfoPanelPopup is designed to work in conjunction with Adobe info server that provides information for display. The displayed information is dependent on a rollover ID or key.

The component can work with any HTTP server capable of retrieving needed information based on URLs that are expressed using infoserverurl modifier. The server must return a JSON response according to the following template:

s7jsonResponse(
  [
    {
      name : "<var1>",
      $t : "<value1>"
    },
    {
      name : "<var2>",
      $t : "<value2>"
    },
      ...
    {
      name : "<varN>",
      $t : "<valueN>"
    },
  ],
  "<id>"
);

where name is the name of a substitution token in the response template, $t is the value for that token, and id is the value of id= URL parameter.

The following is an example info server response:

s7jsonResponse(
  [
    {
      name : "name",
      $t : "<b>value</b>"
    }
  ],
  "12345"
);

The returned data is merged into the content template. To specify the template, use template modifier. If no template is passed to the component the pop-up is not shown. The content template is an XML following this DTD:

DTD
<!DOCTYPE info [
<!ELEMENT info (var #PCDATA)
<!ELEMENT var (#PCDATA)>
<!ATTLIST var 
name CDATA #REQUIRED
rollover CDATA #IMPLIED >
]>

The actual syntax for the content template is the following:

<info>
<var name='VAR_NAME' rollover='ROLLOVER_KEY'><![CDATA[ VAR_VALUE ]]></var>
<![CDATA[ TEMPLATE_CONTENT ]]>
</info>

That is, the template must start with <info> element that may contain optional default <var> elements. The template content itself, TEMPLATE_CONTENT is HTML text. In addition, the content template may contain variable names enclosed in "$" characters that are replaced with the variable values that are returned by the info server or default ones. Default variables that are defined in the template can be either global (if rollover attribute is not set) or specific to a certain rollover key (if rollover attribute is present). During template processing variables specific to rollover keys take precedence over global variables.

In the following template example there is only one default variable that is applied to any rollover key for which a value could not be retrieved from the info server:

<info>
<var name='1'><![CDATA[http://s7d1.scene7.com/is/image/sample/s9]]></var>
<![CDATA[<img src='$1$' width='100'></img><b>Check out other options.</b><br><br><a href='http://www.scene7.com' target='_blank'>Go to Scene7</a>]]>
</info>

In the following template example the default values are rollover_key dependent. Notice that you can use this mechanism to display info content without info server backend support.

<info>
<var name='1' rollover='rollover1'><![CDATA[http://s7d1.scene7.com/is/image/sample/s9]]></var>
<![CDATA[<img src='$1$' width='100'></img><b>Check out other options.</b><br><br><a href='http://www.scene7.com' target='_blank'>Go to Scene7</a>]]>
</info>

The component can also operate without info server support if infoserverurl modifier is omitted. In this case, no request is sent to the backend--the component displays template content using only default variables that are defined in the template.

Customizing Behavior Using Modifiers

Modifiers change InfoPanelPopup 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
infoserverurl	infoServerTemplate	Info server URL template is used to fetch key or value pairs for the variable substitution in the info panel content template. The specified template typically contains macro place holders that are replaced with the actual data before the request is sent to the server. In particular, $1$ is replaced with the rollover value that triggered the InfoPanelPopup activation. $2$ is replaced with the sequence number of the current frame in the image set. $3$ is replaced with the first path element specified in the name of the parent set of the current item and typically corresponds to the catalog ID. And $4$ is replaced with the following element in the path and corresponds to the asset ID. The actual info server request syntax is info server dependent and it differs from server to server. For example, the following is a typical info server request template http://server_domain/s7info/s7/$3$/$4$/$1$.
template	content_template	The content template that the data returned from the info server is merged into. For more information on the template, see the documentation for this class.
showhidetransition	fade\|none[,time]	Specifies the type of show or hide animation in seconds of time.	fade,0.3
size	width,height	Specifies the size of the info panel's container. When set, it overrides the size from CSS. (*Deprecated*)

Defining Appearance using CSS

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

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

CSS Class	Attribute Selector	Description
`.s7infopanelpopup`	(None)	Define the size of the entire component.
`.s7backoverlay`	(None)	Define the background fill.
`.s7overlay`	(None)	Define the appearance of overlay.
`.s7closebutton`	`state=[up\|over\|down\|disabled]`	Define the appearance of the close button for the various states.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

The initial size of InfoPanelPopup container is detected as follows:

use the size set in CSS, if present
use the size of the parent container, if possible
use built-in default size, which is 300x300

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.info.InfoPanelPopup(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	activateRollover(rolloverKey) Fetches information for the specified rollover key from info server, merges it with template, and displays in the overlay.
	deactivateRollover() Hides an info panel and stops any pending info server requests.
	dispose() dispose is the public API for a user to remove itself and all sub-elements from the DOM
	getHeight() Returns the current inner height of the component.
	getWidth() Returns the current inner width of the component.
	resize(w, h) Sets the InfoPanelPopup to the specified width and height.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setItem(item) Sets the current item represented by the s7sdk.info.InfoPanelPopup component.
	setModifier(modObj) Sets 1-N # of modifiers for the component.

Class Detail

s7sdk.info.InfoPanelPopup(container, settings, compId)

Example Code
This example demonstrates how to use the ImageMapEffect component in a simple viewer. In this example a Container object,
a ZoomView object, an ImageMapEffect object, and an InfoPanelPopup object are created. When a user rolls over an area of the
ZoomView that is designated in the image map returned from the infoserver, the InfoPanel is activated. Note that the
"infoserverurl" modifier pushed into the ParameterManager object in the initViewer() function and the data that the server
returns are required for this example to work.

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 Swatches component.
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 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="width=device-width" />

        <title>InfoPanelPopup Components</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.Container');
            s7sdk.Util.lib.include('s7sdk.image.ImageMapEffect');
            s7sdk.Util.lib.include('s7sdk.image.ZoomView');
            s7sdk.Util.lib.include('s7sdk.info.InfoPanelPopup');
        </script>

        <style type="text/css" media="screen">
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
                background: #FFFFFF;
                overflow: hidden;
            }	
            .s7zoomview {
                top: 0px;
                left: 0px;
                height: 400px;
                width: 280px;
            }
            .s7infopanelpopup {
                position : absolute;
                top : 0px;
                left : 0px;
				width: 100%;
				height: 100%;
                background-color : rgba(0,0,0,0.7);
                z-index: 12000;
            }
            .s7infopanelpopup .s7overlay {
                left : 50%;
                top : 50%;
                margin-left : -150px;
                margin-top : -100px;
                width : 300px;
                height : 200px;
                padding : 20px;
                box-shadow : 12px 12px 12px 0px rgba(0,0,0,0.5);
                background-color : rgba(255,255,255,1);
            }
            .s7infopanelpopup .s7closebutton {
                position: absolute;
                width: 30px;
                height: 30px;
                top: -15px;
                right: -15px;
                padding: 8px;
            }
        </style>

    </head>
    <body>
        <script language="JavaScript" type="text/javascript">
            var params, container, zoomView, infoPanelPopup, imageMapEffect;

            // 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");
                params.push("asset", "Scene7SharedAssets/eCatalog_Sample");

                // s7info infoserver specific parameters
                //params.push("infoserverurl", "http://s7info1.scene7.com/s7info/s7/$3$/$4$/$1$");
                var str = '<info><var name="1"><![CDATA[Value 1]]></var><var name="2"><![CDATA[Value 2]]></var><var name="3"><![CDATA[dynamicmedia-sample]]></var><var name="4"><![CDATA[adobe.com]]></var>' + 
                            '<![CDATA[<a href="https://$4$" target="_blank"> $1$ </a><br><img src="https://s7d1.scene7.com/is/image/Scene7SharedAssets/$3$" height="75%"><br>$2$]]></info>'
                params.push('template',str);

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

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

                 // Create the ImageMapEffect component object. For the first parameter, instead of passing
                 // the s7sdk.Container instance, we instead pass the DOM ID of the target ZoomView or SpinView component.
                imageMapEffect = new s7sdk.image.ImageMapEffect("zoomView", params, "imageMapEffect");

                // Create the InfoPanelPopup component object
                infoPanelPopup = new s7sdk.info.InfoPanelPopup(container, params, "infoPanelPopup");

                // Add event listeners for image map rollover events
                imageMapEffect.addEventListener(s7sdk.RolloverKeyEvent.ROLLOVER_ACTIVATED, rolloverKeyHandler, false);
                imageMapEffect.addEventListener(s7sdk.RolloverKeyEvent.ROLLOVER_DEACTIVATED, rolloverKeyHandler, false);
            }

            // Define an event handler function to activate the InfoPanelPopup for image map rollovers
            function rolloverKeyHandler(event) {
                if (event.s7event.rolloverKey != null) {
                    infoPanelPopup.activateRollover(event.s7event.rolloverKey);
                }
            }

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



Localized Symbols

InfoPanelPopup 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
InfoPanelPopup.TOOLTIP_CLOSE Tooltip for the top right close button in info panel pop-up.

Default styles for InfoPanelPopup:

.s7infopanelpopup {
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:300px;
	z-index:10000;
	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);
 }
.s7infopanelpopup .s7backoverlay {
	opacity:0.7;
	background-color:#0f0f0f;
 }
.s7infopanelpopup .s7overlay {
	margin-left:-150px;
	margin-top:-100px;
	left:50%;
	top:50%;
	width:300px;
	height:200px;
	padding:20px;
	background-color:#FFFFFF;
 }
.s7infopanelpopup .s7closebutton {
	position:absolute;
	top:-15px;
	right:-15px;
	padding:8px;
	width:30px;
	height:30px;
 }
.s7infopanelpopup .s7closebutton[state='up'] {
	background-image:url(images/sdk/close_up.png);
 }
.s7infopanelpopup .s7closebutton[state='over'] {
	background-image:url(images/sdk/close_over.png);
 }
.s7infopanelpopup .s7closebutton[state='down'] {
	background-image:url(images/sdk/close_down.png);
 }
.s7infopanelpopup .s7closebutton[state='disabled'] {
	background-image:url(images/sdk/close_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 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.image.ImageMapEffect

Method Detail

activateRollover(rolloverKey)

Fetches information for the specified rollover key from info server, merges it with template, and displays in the overlay. The call is ignored if a pop-up is currently displayed, or if the component is not properly configured to work with info server.

Parameters:
{String} rolloverKey: Rollover key.

deactivateRollover()

Hides an info panel and stops any pending info server requests.

dispose()

dispose is the public API for a user to remove itself and all sub-elements from the DOM

{Number} getHeight()

Returns the current inner height of the component.

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

{Number} getWidth()

Returns the current inner width of the component.

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

resize(w, h)

Sets the InfoPanelPopup 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.

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

setItem(item)

Sets the current item represented by the s7sdk.info.InfoPanelPopup component. The item must be a decedent of type s7sdk.ItemDesc. An exception is thrown if the item does not reference a parent set, or is not descendant of type s7sdk.ItemDesc.

Handler for Swatches component swatch selected.
function swatchSelected(event) {
    infoPanelPopup.setItem(event.s7event.asset);
}

Parameters:
item: {s7sdk.ItemDesc} The set item to select.

See:: s7sdk.events.AssetEvent

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

Namespaces

Classes in s7sdk.info

Class s7sdk.info.InfoPanelPopup

Symbol	Description
`InfoPanelPopup.TOOLTIP_CLOSE`	Tooltip for the top right close button in info panel pop-up.