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:

Modifier	Syntax	Description	Default
bearing	up\|down\|left\|right\|fit-vertical\|fit-lateral	Specifies 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 Class	Attribute Selector	Description
`.s7socialshare`	(None)	Define the position of `SocialShare` button.
`.s7socialbutton`	`state=[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 Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`SocialShare.TOOLTIP`	Define 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
	activate() Enables the control.
	addTrackedComponent(component) Add component to extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
	blur() Removes focus from component.
	deactivate() Disables the control and prevents panel rollout.
	focus() Puts focus on component if it is currently active.
	getHeight() Returns the current inner height of the component.
	getTrackedComponents() Returns the extra list of objects which bounds should be tracked with intersection SocialShare drop-down bounds.
	getWidth() Returns the current inner width of the component.
	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.
	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:

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.
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>
<!--
*
* 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", "https://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("https://www.adobe.com");
				emailShare.setDescription("Content description");
				emailShare.setOriginUrl("https://www.adobe.com/");
				emailShare.setThumbnail("sample/0");

				linkShare = new s7sdk.share.LinkShare("socialShare", myParams);
				linkShare.setContentUrl("https://www.adobe.com");

				embedShare = new s7sdk.share.EmbedShare("socialShare", myParams);
				embedShare.setEmbedCode(
					"<script language=\"javascript\" type=\"text/javascript\"  src=\"https://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\",\"https://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

Namespaces

Classes in s7sdk.share

Class s7sdk.share.SocialShare