Class s7sdk.share.Print

Extends s7sdk.common.Button.

The Print is a component which allows to print catalog contents. When user clicks on a button it shows a modal dialog with various print settings. After siubmitting the dialog, component downloads corresponding images from the server and sends them to print.

The application should pass an instance of MediaSetDesc or OrientationSetDesc corresponding to the current catalog using setMediaSet() API

Print quality is controlled using printquality modifier. Bigger values result in better output quality but higher bandwidth consumption but better. Also, when using big values make sure not to exceed maximum image response size configured for your company.

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
printquality	size	The maximum size of the image sent to print.	1000

Defining the Appearance using CSS

The CSS class for styling the Print is .s7print. 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 Class	Attribute Selector	Description
`.s7print`	`state=[up\|over\|down\|disabled]`	Define the appearance of `Print` 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`.
`.s7printdialog`	(None)	Top-level container for the print modal dialog.
`.s7backoverlay`	(None)	Define the web page shading color and opacity.
`.s7dialog`	(None)	Define modal dialog appearance, including border settings and background color. The logic will size and center the dialog automatically according to content.
`.s7dialogheader`	(None)	Define the dialog header container.
`.s7dialoglabel`	(None)	Define the appearance of the common label text.
`.s7dialogheadericon`	(None)	Define the dialog icon displayed in the header.
`.s7dialogheadertext`	(None)	Define the dialog title displayed in the header.
`.s7dialogviewarea`	(None)	Define the dialog area where the main content is displayed.
`.s7dialogbody`	(None)	Define the top-level container for dialog content.
`.s7dialogfooter`	(None)	Define the dialog footer container.
`.s7dialogbuttoncontainer`	(None)	Define the container for buttons displayed in the footer.
`.s7button`	(None)	Define the common styling for cancel and action buttons in the footer.
`.s7dialogline`	(None)	Define the appearance of the top-level container for single dialog line.
`.s7dialogscrollpanel`	(None)	Define the top-level container for optional scroll bar.
`.s7dialoglinefeed`	(None)	Utility class which is used for line separator inside dialog content.
`.s7closebutton`	`state=[up\|over\|down\|disabled]`	Define the appearance of the close button in the top right corner for each state.
`.s7dialogoption`	`(None)`	Define the appearance of dialog option container.
`.s7dialoginputwide`	(None)	Define the appearance of normal input control.
`.s7horizontaldivider`	`(None)`	Define the appearance of divider between options sections.
`.s7dialoginputcontainer`	`(None)`	Define the top-level container for the input control.
`.s7dialogrange`	`(None)`	Define the appearance of range input.
`.s7dialogcancelbutton`	`state=[up\|over\|down\|disabled]`	Define the appearance of cancel button in the footer for each state.
`.s7dialogactionbutton`	`state=[up\|over\|down\|disabled]`	Define the appearance of primary action button in the footer for each state.

Localized Symbols

Print 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.

Symbol	Description
`Print.TOOLTIP`	Define a localized tooltip of `Print`
`Print.HEADER`	Dialog header text.
`Print.TOOLTIP_HEADER_CLOSE`	Tooltip for the top right close button in modal dialog.
`Print.PRINT_RANGE`	Caption for print pages selection section.
`Print.PRINT_RANGE_CURRENT`	Caption for option to print current pages.
`Print.PRINT_RANGE_FROM`	Caption for page range start numeric picker.
`Print.PRINT_RANGE_TO`	Caption for page range end numeric picker.
`Print.PRINT_RANGE_ALL`	Caption for option to print all pages.
`Print.PAGE_HANDLING`	Caption for pages handling section.
`Print.PAGE_HANDLING_ONE`	Caption for option to print one page per sheet.
`Print.PAGE_HANDLING_TWO`	Caption for option to print two pages per sheet.
`Print.ACTION`	Caption for form submission button.
`Print.TOOLTIP_ACTION`	Tooltip for form submission button.
`Print.CANCEL`	>Caption for "Cancel" button.
`Print.TOOLTIP_CANCEL`	Tooltip for "Cancel" button.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.share.Print(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `Print` component.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setCurrentFrameIndex(idx) Set current frame to specific index.
	setMediaSet(mediaSet) Sets catalog for printing.

Methods borrowed from class s7sdk.common.Button:: activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setLabel

Class Detail

s7sdk.share.Print(container, settings, compId)

Example Code
This example demonstrates how to use the Print component in a simple viewer. In this example a Container object,
a PageView object, and a Print object are created. Clicking the print button a file print dialog will
appear and prompt user to save file to the local system.

The code below does the following:

The Scene7 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 ZoomView and Print 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.).
A handler function is defined to respond to the component event listener 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 Scene7 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>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 Print:

.s7print {
	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);
 }
.s7print[state='up'] {
	background-image:url(images/sdk/print_up.png);
 }
.s7print[state='over'] {
	background-image:url(images/sdk/print_over.png);
 }
.s7print[state='down'] {
	background-image:url(images/sdk/print_down.png);
 }
.s7print[state='disabled'] {
	background-image:url(images/sdk/print_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);
 }
.s7printdialog {
	position:absolute;
	font-family:Helvetica;
	z-index:6000;
	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);
 }
.s7printdialog .s7backoverlay {
	opacity:0.7;
	background-color:#222222;
 }
.s7printdialog .s7dialog * {
	box-sizing:content-box;
	-moz-box-sizing:content-box;
 }
.s7printdialog .s7dialog {
	border-radius:8px;
	position:absolute;
	background-color:#dddddd;
 }
.s7printdialog .s7dialogheader {
	padding:10px;
	position:relative;
 }
.s7printdialog .s7dialoglabel {
	color:#666666;
	font-weight:bold;
	font-size:9pt;
 }
.s7printdialog .s7dialogheadericon {
	position:relative;
	vertical-align:middle;
	display:inline-block;
	background-image:url(images/sdk/dlgprint_cap.png);
	width:22px;
	height:22px;
 }
.s7printdialog .s7dialogheadertext {
	vertical-align:middle;
	padding-left:16px;
	font-size:16pt;
	position:relative;
	font-weight:bold;
 }
.s7printdialog .s7dialogviewarea {
	background-color:#ffffff;
	margin:10px;
	overflow:hidden;
	position:relative;
	height:auto;
 }
.s7printdialog .s7dialogbody {
	padding:10px;
	position:relative;
	display:inline-block;
 }
.s7printdialog .s7dialogfooter {
	border-top:1px solid #909090;
	width:100%;
	position:relative;
 }
.s7printdialog .s7dialogbuttoncontainer {
	padding-top:10px;
	padding-bottom:6px;
	float:right;
	position:relative;
 }
.s7printdialog .s7dialogfooter .s7button {
	cursor:default;
	margin-right:10px;
	position:relative;
	display:inline-block;
	color:#ffffff;
	font-size:9pt;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	box-shadow:1px 1px 1px #999999;
	line-height:34px;
 }
.s7printdialog .s7dialogline {
	position:relative;
	display:inline-block;
 }
.s7printdialog .s7dialogheader .s7dialogline {
	padding:10px 10px 2px;
 }
.s7printdialog .s7dialogscrollpanel {
	vertical-align:top;
	width:44px;
	height:100%;
	display:inline-block;
 }
.s7printdialog .s7dialoglinefeed {
	display:block;
 }
.s7printdialog .s7closebutton {
	position:absolute;
	top:2px;
	right:2px;
	padding:8px;
	width:20px;
	height:20px;
 }
.s7printdialog .s7closebutton[state='up'] {
	background-image:url(images/sdk/close_up.png);
 }
.s7printdialog .s7closebutton[state='over'] {
	background-image:url(images/sdk/close_over.png);
 }
.s7printdialog .s7closebutton[state='down'] {
	background-image:url(images/sdk/close_down.png);
 }
.s7printdialog .s7closebutton[state='disabled'] {
	background-image:url(images/sdk/close_disabled.png);
 }
.s7printdialog .s7dialogoption input {
	margin-right:10px;
 }
.s7printdialog .s7dialogoption {
	text-decoration:none;
	position:relative;
	display:inline-block;
	color:#000000;
	width:150px;
 }
.s7printdialog .s7dialoginputwide {
	cursor:default;
	border:none;
	padding-bottom:10px;
	width:430px;
 }
.s7printdialog .s7horizontaldivider {
	cursor:default;
	padding-bottom:10px;
	width:430px;
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #aaaaaa;
 }
.s7printdialog .s7dialoginputcontainer {
	padding-left:30px;
 }
.s7printdialog .s7dialogrange {
	display:inline-block;
	width:42px;
	margin-left:10px;
	margin-right:10px;
 }
.s7printdialog .s7dialogcancelbutton {
	width:64px;
	height:34px;
 }
.s7printdialog .s7dialogcancelbutton[state='up'] {
	background-color:#666666;
	color:#e4e4e4;
 }
.s7printdialog .s7dialogcancelbutton[state='down'] {
	background-color:#555555;
	color:#ffffff;
 }
.s7printdialog .s7dialogcancelbutton[state='over'] {
	background-color:#555555;
	color:#ffffff;
 }
.s7printdialog .s7dialogcancelbutton[state='disabled'] {
	background-color:#b2b2b2;
	color:#e4e4e4;
 }
.s7printdialog .s7dialogactionbutton {
	width:96px;
	height:34px;
 }
.s7printdialog .s7dialogactionbutton[state='up'] {
	background-color:#333333;
	color:#dddddd;
 }
.s7printdialog .s7dialogactionbutton[state='down'] {
	background-color:#222222;
	color:#cccccc;
 }
.s7printdialog .s7dialogactionbutton[state='over'] {
	background-color:#222222;
	color:#cccccc;
 }
.s7printdialog .s7dialogactionbutton[state='disabled'] {
	background-color:#b2b2b2;
	color:#dddddd;
 }

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 Print component. The handler function receives a DOM event object of type Event.

The events supported by the component are:

click - Dispatched when a user clicks the component.

Parameters:
{String} type: Event name, for example s7sdk.Event.CLICK.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

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

setCurrentFrameIndex(idx)

Set current frame to specific index.

Parameters:
{Number} idx: new frame index

setMediaSet(mediaSet)

Sets catalog for printing..

Parameters:
{MediaSetDesc | OrientationSetDesc} mediaSet: Set to extract the frames from.

See:: s7sdk.set.MediaSet; s7sdk.MediaSetDesc; s7sdk.OrientationSetDesc

Namespaces

Classes in s7sdk.share

Class s7sdk.share.Print