HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.share

Class s7sdk.share.TwitterShare


Extends s7sdk.common.Button.

The TwitterShare component allows user to share content to Twitter. It represents a button that, when clicked, will open a standard Twitter sharing window in a separate browser window. Component provides API to specify content URL and content description.

This component does not currently read any modifiers.

Defining the Appearance using CSS

The CSS class for styling the TwitterShare is .s7twittershare. 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
.s7twittersharestate=[up|over|down|disabled]Define the appearance of TwitterShare button 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

TwitterShare 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
TwitterShare.TOOLTIPDefine a localized tooltip of TwitterShare

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.share.TwitterShare(containerId, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the TwitterShare component.
 
Set the url to tweet.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setMessage(message)
Set the message to tweet.
Methods borrowed from class s7sdk.common.Button:
activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize
Class Detail
s7sdk.share.TwitterShare(containerId, 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 TwitterShare:

.s7twittershare {
	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);
 }
.s7twittershare[state='up'] {
	background-image:url(images/sdk/twitterbtn_up.png);
 }
.s7twittershare[state='over'] {
	background-image:url(images/sdk/twitterbtn_over.png);
 }
.s7twittershare[state='down'] {
	background-image:url(images/sdk/twitterbtn_over.png);
 }
.s7twittershare[state='disabled'] {
	background-image:url(images/sdk/twitterbtn_up.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} containerId
The ID of the parent DOM element to which the component is added as a child; if an ID of the SocialShare component is used, this component will be added to SocialShare panel.
{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.share.SocialShare
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the TwitterShare 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.SocialEvent.

The events supported by the component are:

  • SocialEvent.NOTF_SOCIAL_ACTIVATED - Dispatched when sharing components are activated by the user. s7sdk.event.SocialEvent
  • Parameters:
    {String} type
    Event name, for example SocialEvent.NOTF_SOCIAL_ACTIVATED.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    See:
    s7sdk.event.SocialEvent

    setContentUrl(url)
    Set the url to tweet. If the url is not provided the page url will be used.
    Parameters:
    {String} url

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

    setMessage(message)
    Set the message to tweet. If the message is not provided the title tag in the head element of the page will be used.
    Parameters:
    {String} message
    Text to send with the url being shared on Twitter.

    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Jan 30 2020 16:40:37 GMT+0200 (EET)