Class s7sdk.VisibilityManager

The VisibilityManager is a static manager component that manages the visibility of all its attached components based on the click event of a reference component. The attached components are shown and hidden whenever the user taps within the reference component area.

The VisibilityManager functions with any object that implements the following methods: show() and hide(). VisibilityManager invokes these methods whenever it is appropriate.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.VisibilityManager()

Method Summary
Method Attributes	Method Name and Description
	attach(obj) Attach component to the visibility manager.
	detach(obj) Detach component from the visibility manager.
	detachAll() Detach all components from the visibility manager.
	dispose() Disposes the component.
	reference(obj)

Class Detail

s7sdk.VisibilityManager()

Example Code
This example demonstrates how to use the VisibilityManager component in a simple viewer. In this example a
Container object, a ZoomView object, a ZoomInButton object, and a ZoomOutButton object are created. When a user
interacts with the ZoomView object causing it to zoom in or out on the image, the zoom buttons become enabled or disabled
as appropriate for the current zoom level of the image. When a user clicks either of the zoom buttons, the ZoomView object
zooms the image in or out. Note that the VisibilityManager gives the user the ability to show or hide the zoom buttons
by clicking the image once. A single click will make the buttons disappear. The next single click will make them reappear.

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 ZoomView and button 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. Note that the ZoomView object is set as a reference
for the VisibilityManager, and that the zoom buttons and ZoomView iconEffectVisivility are attached as well. 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>
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />

        <title>VisibilityManager Example</title>

        <!-- To run this example locally you need to replace this with an absolute SDK path.
          For more information check the Adobe Experience Viewers HTML5 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.image.ZoomView');
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.common.Button');
        </script>

        <style type="text/css" media="screen">
            .s7zoomview {
                top: 0px;
                left: 0px;
                height: 400px;
                width: 280px;
            }
            .s7zoominbutton{
                position: absolute;
                top: 375px;
                left: 10px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
            .s7zoomoutbutton {
                position: absolute;
                top: 375px;
                left: 250px;
                width: 25px;
                height: 25px;
                z-index: 5000;
            }
        </style>

   </head>
   <body>
   
        <script language="JavaScript" type="text/javascript">
            var params, container, zoomView, zoomInButton, zoomOutButton, visibilityManager;

            // 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", "https://s7d1.scene7.com/is/image");
                params.push("asset", "demo/bedroom.tif");

                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");

                // Create the ZoomView component object
                zoomView = new s7sdk.image.ZoomView( container, params, "zoomView");
                zoomInButton = new s7sdk.common.ZoomInButton(container, params, "zoomInButton");
                zoomOutButton = new s7sdk.common.ZoomOutButton(container, params, "zoomOutButton");

                // Create VisibilityManager component object
                visibilityManager = new s7sdk.VisibilityManager();
                visibilityManager.reference(zoomView);    //use zoomView object as a reference
                visibilityManager.attach(zoomInButton);
                visibilityManager.attach(zoomOutButton);
                visibilityManager.attach(zoomView.iconEffectVisibility);

                // Add event listener for zoom capability state changes
                zoomView.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE, onZoomStateChange);
                
                // Add an event listener for zoom button click events
                zoomInButton.addEventListener("click", onZoomIn, false);
                zoomOutButton.addEventListener("click", onZoomOut, false);
            }

            // Define an event handler function to enable/disable the zoom buttons when the ZoomView state changes
            function onZoomStateChange(event){
                if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_IN)){
                    zoomInButton.activate();
                }else{
                    zoomInButton.deactivate();
                }
                if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_OUT)){
                    zoomOutButton.activate();
                }else{
                    zoomOutButton.deactivate();
                }
            }

            // Define an event handler function to update the ZoomView when zoomIn is clicked
            function onZoomIn(event){
                zoomView.zoomIn();
            }

            // Define an event handler function to update the ZoomView when zoomOut is clicked
            function onZoomOut(event){
                zoomView.zoomOut();
            }

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

See:: s7sdk.common.Button hide; s7sdk.common.Button show; s7sdk.set.SpinView iconEffectVisibility

Method Detail

attach(obj)

Attach component to the visibility manager. The call is ignored if the component was already attached to visibility manager.

Parameters:
{Object} obj: An object to attach to this visibility manager.

detach(obj)

Detach component from the visibility manager. The call is ignored if the component is not attached to visibility manager.

Parameters:
{Object} obj: An object to detach from this visibility manager.

detachAll()

Detach all components from the visibility manager.

dispose()

Disposes the component.

reference(obj)

Parameters:
{Object} obj: A reference object that is used by this component as a reference for click event.

Namespaces

Classes in s7sdk

Class s7sdk.VisibilityManager