HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.common

Class s7sdk.common.Download


Extends s7sdk.common.Button.

The Download is a button component which allows to download a PDF file associated with the catalog asset to the local system.

The application should specify an instance of MediaSetDesc or OrientationSetDesc corresponding to the current catalog using setMediaSet() API, Download component will automatically derive the name of associated PDF file by appending "pdf" suffix to the catalog name. Alternatively the application may pass the name of the asset to download explicitly using setDownloadableAsset() method call.

In any case, Download component will check for PDF availability on the server and dispatch s7sdk.StatusEvent.NOTF_ASSET_METADATA_READY event when the check is complete. The result of this check can be read using canDownload() API.

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
contenturlcontentRootPathThe content root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies./is/content/

Defining the Appearance using CSS

The CSS class for styling the Download is .s7download. This button has 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 ClassAttribute SelectorDescription
.s7downloadstate=[up|over|down|disabled]Define the appearance of Download 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.

Localized Symbols

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

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.common.Download(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the Download component.
 
Returns the result of PDF availability check.
 
Sets an explicit downloadable asset ID.
 
setMediaSet(mediaSet)
Sets the media set of the primary asset used by application.
Methods borrowed from class s7sdk.common.Button:
activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS
Class Detail
s7sdk.common.Download(container, settings, compId)
Example Code

This example demonstrates how to use the Download component in a simple viewer. In this example a Container object, a PageView object, and a Download object are created. Clicking the download button a file download dialog will appear and prompt user to save file to the local system. 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 ZoomView and Download 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. A handler function is defined to respond to the component event listener 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> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>PageView Example</title> <!-- To run this example locally you need to replace this with an absolute SDK path. For more information check the HTML5 Viewers 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.ControlBar'); s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.set.MediaSet'); s7sdk.Util.lib.include('s7sdk.set.PageView'); s7sdk.Util.lib.include('s7sdk.set.PageScrubber'); s7sdk.Util.lib.include('s7sdk.set.ThumbnailGridView'); s7sdk.Util.lib.include('s7sdk.set.Swatches'); s7sdk.Util.lib.include('s7sdk.set.TableOfContents'); s7sdk.Util.lib.include('s7sdk.share.Share'); </script> <style type="text/css" media="screen"> .s7pageview { height: 480px; width: 640px; top: 40px; left: 20px; position: relative; border: solid 1px #cccccc; } .s7thumbnailgridview { height: 480px; width: 640px; top: 40px; left: 20px; position: absolute; border: solid 1px #cccccc; } .s7controlbar{ position: relative; background-color: #cccccc; top: 5px; left: 20px; width: 640px; position: absolute; z-index: 1; } .s7scrubberswatchesbutton { position: absolute; top: 2px; left: 5px; } .s7thumbnailpagebutton { position: absolute; top: 2px; left: 30px; } .s7tableofcontents { position: absolute; top: 2px; left: 60px; } .s7pagescrubber { height: 55px; width: 640px; top: 540px; left: 0px; position: absolute; z-index:100; } .s7swatches { position: absolute; top: 500px; width: 700px; } .s7download { position: absolute; top: 2px; left: 90px; } .s7print { position: absolute; top: 2px; left: 120px; } </style> </head> <body> <script type="text/javascript" language="JavaScript"> var params, container, pageView, pageScrubber, controls, scrubberSwatchesBtn, thumbnailPageBtn, gridView, swatches, mediaSet, tableOfContents, downLoad; // Initialize the SDK s7sdk.Util.init(); // Create ParameterManager instance to handles modifiers params = new s7sdk.ParameterManager(null,null,{ "asset" : "MediaSet.asset" }); // Define the function that initializes the viewer function initViewer(){ // Set hardcoded modifiers (not required when values are specified on the url) params.push("serverurl", "http://s7d1.scene7.com/is/image/"); params.push("Download.contenturl","http://s7d1.scene7.com/is/content/"); params.push("MediaSet.asset", "Viewers/eCat-Sample"); params.push("MediaSet.labelkey", "toc"); mediaSet = new s7sdk.set.MediaSet(null, params); mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed); // Create the Container component object container = new s7sdk.common.Container(null, params, "s7container"); // Create the PageScrubber component object pageScrubber = new s7sdk.set.PageScrubber(container,params,"pagescrubber"); // Create the PageView component object pageView = new s7sdk.set.PageView(container, params, "pageview"); // Create the ThumbnailGridView component object gridView = new s7sdk.set.ThumbnailGridView(container, params, "gridview"); // Create the ControlBar component object controls = new s7sdk.common.ControlBar(container, params, "controls"); // Attach the PageView and GridView objects to the ControlBar controls.attachView(pageView, false); controls.attachView(gridView, false); // Create the ScrubberSwatchesButton component object scrubberSwatchesBtn = new s7sdk.common.ScrubberSwatchesButton("controls", params, "scrubberswatches"); // Create the ThumbnailPageButton component object thumbnailPageBtn = new s7sdk.common.ThumbnailPageButton("controls", params, "thumbnailpage"); tableOfContents = new s7sdk.set.TableOfContents("controls", params, "tableofcontents"); tableOfContents.addEventListener(s7sdk.AssetEvent.ITEM_SELECTED_EVENT, onTableOfContentSelected); // Create the Swatches component object swatches = new s7sdk.set.Swatches(container, params, "swatches"); // Create the Download component object downLoad = new s7sdk.common.Download('controls', params, 'download'); // Create the Download component object print = new s7sdk.share.Print("controls", params, "print"); // Hide the ThumbnailGridView and Swatches objects by default gridView.setCSS(".s7thumbnailgridview", "visibility", "hidden"); swatches.setCSS(".s7swatches", "visibility", "hidden"); // Add an event listener for PageView selection events pageView.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageViewSelected, false); // Add an event listener for ThumbnailGridView swatch selection events gridView.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onGridViewSwatchSelected, false); // Add an event listener for ScrubberSwatchesButton click events scrubberSwatchesBtn.addEventListener("click", onScrubberSwatchesButton, false); // Add an event listener for ThumbnailPageButton click events thumbnailPageBtn.addEventListener("click", onThumbnailPageButton, false); // Add an event listener for PageScrubber selection events pageScrubber.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageScrubberSelected, false); // Add an event listener for Swatches selection events swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onSwatchSelected, false); // Add an event listener for Download metadata ready events downLoad.addEventListener(s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY, onMetadataReady, false); // hide Download downLoad.setCSS(".s7download", "display", "none"); // set downloadable asset explicitly downLoad.setDownloadableAsset("Viewers/Fantastico2007"); } // Define an event handler function to show the Download when download if available function onMetadataReady(event){ downLoad.setCSS(".s7download", "display", downLoad.canDownload() ? "block" : "none"); } // Define an event handler function to switch pages for PageView item selections function onPageViewSelected(event){ switchToPage(event); } // Define an event handler function to switch pages for ThumbnailGridView swatch selections function onGridViewSwatchSelected(event){ switchToPage(event); } // Define an event handler function to respond to ScrubberSwatchesButton clicks function onScrubberSwatchesButton(event){ if(scrubberSwatchesBtn.isSelected()){ swatches.setCSS(".s7swatches", "visibility", "inherit"); pageScrubber.setCSS(".s7pagescrubber", "display", "none"); }else{ swatches.setCSS(".s7swatches", "visibility", "hidden"); pageScrubber.setCSS(".s7pagescrubber", "display", "block"); } } // Define an event handler function to respond to ThumbnailGridView clicks function onThumbnailPageButton(event){ if(thumbnailPageBtn.isSelected()){ pageView.setCSS(".s7pageview", "visibility", "hidden"); gridView.setCSS(".s7thumbnailgridview", "visibility", "inherit"); }else{ pageView.setCSS(".s7pageview", "visibility", "inherit"); gridView.setCSS(".s7thumbnailgridview", "visibility", "hidden"); } } // Define an event handler function to switch pages for PageScrubber item selections function onPageScrubberSelected(event){ switchToPage(event) } // Define an event handler function to switch pages for Swatches selections function onSwatchSelected(event){ switchToPage(event) } // Define an event handler function to switch pages for TableOfContent item selections function onTableOfContentSelected(event){ switchToPage(event); } // Define a function to update all components to display the currently selected page function switchToPage(event){ print.setCurrentFrameIndex(event.s7event.frame); pageView.setCurrentFrameIndex(event.s7event.frame); swatches.selectSwatch(event.s7event.frame); gridView.selectSwatch(event.s7event.frame, true); pageScrubber.setCurrentFrameIndex(event.s7event.frame); tableOfContents.setCurrentFrameIndex(event.s7event.frame); // If the ThumbnailGridView is showing, hide it and deselect the ThumbnailPageButton if(thumbnailPageBtn.isSelected()){ thumbnailPageBtn.setSelected(false); onThumbnailPageButton(); } } function onSetParsed(e) { print.setMediaSet(e.s7event.asset); downLoad.setMediaSet(e.s7event.asset); tableOfContents.setMediaSet(e.s7event.asset); pageView.setMediaSet(e.s7event.asset); gridView.setMediaSet(e.s7event.asset); swatches.setMediaSet(e.s7event.asset); pageScrubber.setMediaSet(e.s7event.asset); } // 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 Download:

.s7download {
	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);
 }
.s7download[state='up'] {
	background-image:url(images/sdk/download_up.png);
 }
.s7download[state='over'] {
	background-image:url(images/sdk/download_over.png);
 }
.s7download[state='down'] {
	background-image:url(images/sdk/download_down.png);
 }
.s7download[state='disabled'] {
	background-image:url(images/sdk/download_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.
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the Download component. The handler function receives a DOM event object of type Event.

The events supported by the component are:

  • s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. s7sdk.event.StatusEvent
  • Parameters:
    {String} type
    Event name, for example s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.

    {Boolean} canDownload()
    Returns the result of PDF availability check. If a downloadable asset is available on the server, it will return true, otherwise it will be false.
    Returns:
    {Boolean} result of PDF availability check

    setDownloadableAsset(downloadId)
    Sets an explicit downloadable asset ID. This method overrides the default behavior and allows to pass custom ID of downloadable asset in cases when defaults will not work.
    Parameters:
    {String} downloadId
    Explicitly sets downloadable asset ID.

    setMediaSet(mediaSet)
    Sets the media set of the primary asset used by application. The component will extract the name of the primary catalog, append "pdf" suffix and use it as default downloadable asset ID. The method call is ignored if an explicit downloadable asset ID was set using setDownloadableAsset() call.
    Parameters:
    {MediaSetDesc | OrientationSetDesc} mediaSet
    Sets the media set of the primary asset.
    See:
    s7sdk.set.MediaSet
    s7sdk.MediaSetDesc
    s7sdk.OrientationSetDesc

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