Class s7sdk.common.FullScreenButton

Extends s7sdk.common.Button, s7sdk.common.TwoStateButton.

The FullScreenButton can be associated with a Container component to enter and exit full screen mode. This component toggles between the full screen and original size icons depending on the full screen state. The selected state is automatically changed when user clicks/taps on the button. Alternatively, the state can be changed through setSelected() API.

Note: Native full screen viewing mode is not supported on all platforms, refer to Container documentation.

The component can be added to ControlBar and grouped with other video UI components.

Currently this component does not read any modifiers.

Defining Appearance using CSS

You can define the appearance of the FullScreenButton component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the FullScreenButton component by using the .s7fullscreenbutton class selector. The styles that are associated with this class selector are applied to all instances of the FullScreenButton component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7fullscreenbutton are applied only to the particular FullScreenButton instance.

CSS Class	Attribute Selector	Description
`.s7fullscreenbutton`	`selected=[true\|false]` `state=[up\|over\|down\|disabled]`	Define appearance of `FullScreenButton` for each state, independently for selected and unselected case.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localizable Symbols

FullScreenButton 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
`FullScreenButton.TOOLTIP_SELECTED`	Tooltip for selected button state
`FullScreenButton.TOOLTIP_UNSELECTED`	Tooltip for unselected button state

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.common.FullScreenButton(container, settings, compId)

Methods borrowed from class s7sdk.common.Button:: activate, addEventListener, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS
Methods borrowed from class s7sdk.common.TwoStateButton:: isSelected, setSelected

Class Detail

s7sdk.common.FullScreenButton(container, settings, compId)

Example Code
This example demonstrates how to use the FullSCreenButton component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and a FullScreenButton object are created. Clicking the button toggles the VideoPlayer into or out of
fullscreen mode.

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.
A CSS Style is defined in the document head to control the appearance of the Container component.
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 variety 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 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="user-scalable=no,
            height=device-height, width=device-width, initial-scale=1.0,
            maximum-scale=1.0"/>
            
        <title>FullScreenButton Example</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.event.Event');
            s7sdk.Util.lib.include('s7sdk.common.Button');
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
        </script>

        <style type="text/css" media="screen">
            .s7container {
                position: absolute;
                width: 512px;
                height: 315px;
                overflow: visible;
            }
        </style>

    </head>

    <body style="margin: 0 0;overflow:hidden;">

        <div id="s7container" style="width:400;height:330px"></div>
        <script language="JavaScript" type="text/javascript">
            var params, container, videoPlayer, fullScreenButton;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();

            // 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("videoserverurl", "http://s7d1.scene7.com/is/content/");
                params.push("asset", "Viewers/Glacier_Preview_Baseline");
                params.push("size", "430,300");
                params.push("autoplay", "1");
                params.push("autoload", "1");
                params.push("playback", "auto");
                params.push("singleclick", "playPause");

                // Create the Container component object
                container = new s7sdk.Container("s7container", params, "cont");
                
                // Create the VideoPlayer component object with native controls
                videoPlayer = new  s7sdk.video.VideoPlayer(container, params, "myVideoPlayer");

                // Create the FullScreenButton component object
                fullScreenButton = new s7sdk.common.FullScreenButton(container, params, "fullScreenBtn");

                // Add event listeners for Container resize events and fullscreen events
                container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, onContainerResize, false);
                container.addEventListener(s7sdk.event.ResizeEvent.FULLSCREEN_RESIZE, onContainerFullScreen, false);

                // Add an event listener for fullscreen button clicks
                fullScreenButton.addEventListener("click", onClickFullScreen);
            }

            // Define an event handler function to resize the VideoPlayer when the container changes size
            function onContainerResize(event) {
                videoPlayer.resize(event.s7event.w, event.s7event.h );
            }

            // Define an event handler function to resize the VideoPlayer and update the fullscreen button
            // when the container enters/exits fullscreen display mode
            function onContainerFullScreen(event) {
                videoPlayer.resize(event.s7event.w, event.s7event.h );
                fullScreenButton.setSelected(container.isFullScreen());
            }

            // Define an event handler function to toggle the Container's fullscreen state when the button is clicked
            function onClickFullScreen(event){
                if(container.isFullScreen()){
                    container.cancelFullScreen();
                }else{
                    container.requestFullScreen();
                }
            }

            // 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>


Note: To run the above example locally you would want to add
playback=native to URL and open in Chrome of Safari. Otherwise
if you are running a debug version of flash player you should
see a security warning with related instructions if you open the page.
To run correctly run the viewer on a server present in the associated
crossdomain.xml and run it from there.

Default styles for FullScreenButton:

.s7fullscreenbutton {
	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);
	position:absolute;
 }
.s7fullscreenbutton[selected='true'][state='up'] {
	background-image:url(images/sdk/fullscreen_up.png);
 }
.s7fullscreenbutton[selected='true'][state='over'] {
	background-image:url(images/sdk/fullscreen_over.png);
 }
.s7fullscreenbutton[selected='true'][state='down'] {
	background-image:url(images/sdk/fullscreen_down.png);
 }
.s7fullscreenbutton[selected='true'][state='disabled'] {
	background-image:url(images/sdk/fullscreen_disabled.png);
 }
.s7fullscreenbutton[selected='false'][state='up'] {
	background-image:url(images/sdk/minscreen_up.png);
 }
.s7fullscreenbutton[selected='false'][state='over'] {
	background-image:url(images/sdk/minscreen_over.png);
 }
.s7fullscreenbutton[selected='false'][state='down'] {
	background-image:url(images/sdk/minscreen_down.png);
 }
.s7fullscreenbutton[selected='false'][state='disabled'] {
	background-image:url(images/sdk/minscreen_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: 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.Container; s7sdk.common.ControlBar; s7sdk.video.VideoPlayer; s7sdk.ParameterManager

Namespaces

Classes in s7sdk.common

Class s7sdk.common.FullScreenButton