HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.share

Class s7sdk.share.SocialShare

The SocialShare is used as container for social buttons. Supports "up", "down", "left" and "right" slide animation of buttons container defined by bearing modifier.

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

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
bearingup|down|left|right|fit-vertical|fit-lateralSpecifies the direction of slide animation for the buttons container. Set to up, down, left, or right to have the panel roll out in the specified direction without an additional bounds check. This functionality can result in panel clipping by an outside container. Set to fit-vertical to have the component first shift the base panel position to the bottom of SocialShare and try to roll out the panel bottom, right, or left, from such base location. With each attempt, the component checks if the panel is clipped by an outside container that is either an instance of the Container component or an element that has overflow:hidden set in the CSS. If all attempts fail, the component tries to shift the base panel position to the top and repeat roll out attempts in a top, right, and left direction. When set to fit-lateral, the component uses a similar logic. The component shifts the base first to the right, trying right, down, and up roll out directions. Then, the component shifts the base to the left, trying left, down, and up roll out directions.left

Defining the Appearance using CSS

The CSS class for styling the SocialShare is .s7socialshare. 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 you use attribute selectors.

CSS ClassAttribute SelectorDescription
.s7socialshare(None)Define the position of SocialShare button.
.s7socialbuttonstate=[up|over|down|disabled]Define the appearance of SocialShare button for each state.
.s7socialsharepanel(None)Define the appearance of roll out panel containing individual sharing tools; the size of the panel is set automatically by the component.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localized Symbols

SocialShare 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 HTML5 Viewers SDK User Guide.

SymbolDescription
SocialShare.TOOLTIPDefine a localized tooltip of SocialShare

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.share.SocialShare(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
Enables the control.
 
Add component to extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
 
blur()
Removes focus from component.
 
Disables the control and prevents panel rollout.
 
Puts focus on component if it is currently active.
 
Returns the current inner height of the component.
 
Returns the extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
 
Returns the current inner width of the component.
 

Hides the SocialShare panel.

 
Remove component from extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
 
resize(w, h)
Resize the button.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
Class Detail
s7sdk.share.SocialShare(container, settings, compId)
Example Code

This example demonstrates how to use sharing components in a simple viewer. In this example a ZoomView object, a SocialShare object, an EmailShare object, a EmbedShare object, a LinkShare object, a TwitterShare object and a FacebookShare object are created. When a user clicks the SocialShare button, a panel with all sharing components appears. When a user clicks on individual share component (EmailShare, EmbedShare, LinkShare, TwitterShare or FacebookShare) corresponding social sharing dialogs popups up. EmailShare, EmbedShare and LinkShare components have their own modal dialogs. TwitterShare and FacebookShare trigger sharing dialog from corresponding social service. 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> <!-- * * ADOBE SYSTEMS INCORPORATED * Copyright 2013 Adobe Systems Incorporated * All Rights Reserved. * * NOTICE: Adobe permits you to use, modify, and distribute this file in * accordance with the terms of the Adobe license agreement accompanying it. * If you have received this file from a source other than Adobe, then your * use, modification, or distribution of it requires the prior written * permission of Adobe. --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>SocialShare Component</title> <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.image.ZoomView'); s7sdk.Util.lib.include('s7sdk.share.Share'); </script> <style type="text/css"> .s7zoomview { width:400px; height:400px; } .s7zoominbutton, .s7zoomoutbutton, .s7zoomresetbutton, .s7socialshare { position:absolute; top:410px; } .s7zoomoutbutton { left:30px; } .s7zoomresetbutton { left:60px; } .s7socialshare { left:350px; } </style> </head> <body> <div id="s7container" style="position:relative;width:500px;height:500px;"></div> <script language="JavaScript" type="text/javascript"> s7sdk.Util.init(); var myParams = new s7sdk.ParameterManager(); //Parameter Manager var zoomComp, zoomResetButton, zoomInButton, zoomOutButton, socialShare, emailShare, linkShare, embedShare, facebookShare, twitterShare; function initViewer(){ myParams.push("serverurl", "http://s7d1.scene7.com/is/image"); myParams.push("asset", "sample/0"); zoomComp = new s7sdk.ZoomView("s7container", myParams); zoomResetButton = new s7sdk.ZoomResetButton("s7container", myParams); zoomInButton = new s7sdk.ZoomInButton("s7container", myParams); zoomOutButton = new s7sdk.ZoomOutButton("s7container", myParams); zoomResetButton.addEventListener("click",function(){zoomComp.zoomReset();}); zoomInButton.addEventListener("click",function(){zoomComp.zoomIn();}); zoomOutButton.addEventListener("click",function(){zoomComp.zoomOut();}); socialShare = new s7sdk.share.SocialShare("s7container", myParams, "socialShare"); emailShare = new s7sdk.share.EmailShare("socialShare", myParams); emailShare.setContentTitle("Content title"); emailShare.setContentUrl("http://www.adobe.com"); emailShare.setDescription("Content description"); emailShare.setOriginUrl("http://www.adobe.com/"); emailShare.setThumbnail("sample/0"); linkShare = new s7sdk.share.LinkShare("socialShare", myParams); linkShare.setContentUrl("http://www.adobe.com"); embedShare = new s7sdk.share.EmbedShare("socialShare", myParams); embedShare.setEmbedCode( "<script language=\"javascript\" type=\"text/javascript\" src=\"http://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.js\"></sc" + "ript>\n" + "<div id='basiczoom'></div>\n" + "<script type=\"text/javascript\">\n" + "var basicZoomViewer = new s7viewers.BasicZoomViewer();\n" + "basicZoomViewer.setContainerId(\"basiczoom\");\n" + "basicZoomViewer.setAsset(\"sample/0\");\n" + "basicZoomViewer.setParam(\"stagesize\",\"$EMBED_WIDTH$,$EMBED_HEIGHT$\");\n" + "basicZoomViewer.setParam(\"serverurl\",\"http://s7d1.scene7.com/is/image/\");\n" + "basicZoomViewer.init();\n" + "</s" + "cript>" ); facebookShare = new s7sdk.share.FacebookShare("socialShare", myParams); twitterShare = new s7sdk.share.TwitterShare("socialShare", myParams); } myParams.addEventListener(s7sdk.Event.SDK_READY,initViewer,false); myParams.init(); //Initialize Parameter Manager </script> </body> </html>
Default styles for SocialShare:

.s7socialshare .s7socialbutton {
	width:28px;
	height:28px;
	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);
	background-color:#e7e7e7;
 }
.s7socialshare .s7socialbutton[state='up'] {
	background-image:url(images/sdk/socialbtn_up.png);
 }
.s7socialshare .s7socialbutton[state='over'] {
	background-image:url(images/sdk/socialbtn_over.png);
 }
.s7socialshare .s7socialbutton[state='down'] {
	background-image:url(images/sdk/socialbtn_over.png);
 }
.s7socialshare .s7socialbutton[state='disabled'] {
	background-image:url(images/sdk/socialbtn_up.png);
 }
.s7socialshare {
	-webkit-transform:translateZ(0px);
 }
.s7socialshare .s7socialsharepanel[state='start'] {
	-webkit-transform:translateZ(0px);
 }
.s7socialshare .s7socialsharepanel {
	font-size:0px;
	letter-spacing:0px;
	word-spacing:0px;
	background-color:#e7e7e7;
 }
.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
A parameter manager instance that represents the desired configuration.
{String} compId
An optional parameter that specifies the ID of the component DOM element.
Method Detail
activate()
Enables the control. After this call the control will be in one of the following states:
  • up
  • down
  • over

  • depending on user interaction and the appropriate styling attribute will apply: [state=up|down|over].

    addTrackedComponent(component)
    Add component to extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
    Parameters:
    {Object} component
    The reference to s7sdk-component instance.

    blur()
    Removes focus from component.

    deactivate()
    Disables the control and prevents panel rollout. After this call the control will be in the disabled state. The styling for [state=disabled] will apply.

    focus()
    Puts focus on component if it is currently active.

    {Number} getHeight()
    Returns the current inner height of the component.
    Returns:
    {Number} the inner height of the component, in pixels.

    {Array} getTrackedComponents()
    Returns the extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
    Returns:
    {Array} A extra list of all components which bounds should be tracked with intersection SocialShare drop-down bounds.

    {Number} getWidth()
    Returns the current inner width of the component.
    Returns:
    {Number} the inner width of the component, in pixels.

    hidePanel()

    Hides the SocialShare panel.


    removeTrackedComponent(component)
    Remove component from extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
    Parameters:
    {Object} component
    The reference to s7sdk-component instance.

    resize(w, h)
    Resize the button.
    Parameters:
    {Number} w
    width in pixels.
    {Number} h
    height 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. .s7socialshare
    {String} property
    The CSS property that is being set. i.e. background-color
    {String} value
    The CSS property value being set. i.e. #FF0000

    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

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