Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.favorites

Class s7sdk.favorites.FavoritesView

The FavoritesView component is used to render the list of favorites added to the current catalog as thumbnails. It always have vertical one-column layout, but can be flexible in size.

Each thumbnail represents a cropped region from the image a favorite is added to. The center of that region is actual favorite location, the area covered by the region is controlled by favoritesThumbArea modifier.

Clicking or tapping in a favorite thumbnail emits AssetEvent.ITEM_SELECTED_EVENT event which can be used for example for changing to the catalog frame where this particular favorite is located.

The information about the current asset is passed to the component using setMediaSet() API. Additionally, application needs to communicate the list of available favorites using setFavorites() API as well.

Modifiers change FavoritesView default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
serverurlisRootPathThe Image Serving root path. If no domain is specified, then the domain from which the page is served is applied instead. Standard URI path resolution applies./is/image/
iscommandvalueThe Image Serving command string that is applied to all thumbnails. If specified in the URL all occurrences of '&' and '=' must be HTTP-encoded as %26 and %3D, respectively.""
maxloadradius-1|0|preloadnbrSpecifies the component preload behavior. When set to -1, all thumbnails will be loaded simultaneously when component is initialized or asset changed. When set to 0, only visible thumbnails will be loaded. preloadnbr defines how many invisible rows around visible area will be preloaded.1
textposbottom|top|left|right|none|tooltipSpecifies where the label is drawn relative to the thumbnail image. That is, the label is centered at the specified location relative to the thumbnail. When tooltip is specified, no label will be drawn.bottom
fmtjpg|jpeg|png|png-alpha|gif|gif-alphaSpecifies image format to be used by the component for loading images from Image Server, can be any value supported by Image Server and client browser. If image_format ends with "-alpha", component renders images as transparent content; for all other image_format values component treats images as opaque.jpeg
alignleft|center|right,top|center|bottomSpecifies internal alignment (anchoring) of the thumbnails container within component area. In FavoritesView, internal thumbnail container is sized so only whole number of swatches is shown. As a result, there is some padding between internal container and external component bounds. This command specifies how internal swatches container is positioned inside component. Does not have any effect when resizable=1.center,center
favoritesThumbAreaareaSpecifies the crop area for favorites thumbnail. Expressed as a relative value to the total frame size in range from 0 to 1.0. The value of 1 would mean that entire frame image is used for thumbnail, 0.1 means only 10% of the frame size is used.0.1

Defining the Appearance using CSS

The CSS class for styling the FavoritesView is .s7favoritesview. 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
.s7favoritesview(None)Define the position of FavoritesView.
.s7thumbcell(None)Defines thumbnail spacing using margin CSS property.
.s7thumbstate=[default|selected|over]Defines the appearance of thumbnails. The height and width properties will define the dimensions of the thumb. default value of state attribute corresponds to "up" state, selected means that the thumbnail is currently selected and over state turns on when user rolls over unselected thumbnail.
.s7label(None)Defines the appearance of the thumbnail labels.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.favorites.FavoritesView(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the FavoritesView component.
 
blur()
Blur the component.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
focus()
Focus the component.
 
getFavorites()
Returns currently displayed list of favorites.
 
getFrame()
Returns the current frame.
 
getHeight()
Returns the current inner height of the component.
 
getWidth()
Returns the current inner width of the component.
 
hide()
Hides the component.
 
resize(w, h)
Resize the component.
 
selectSwatch(index, triggerScroll)
Selects the specified frame.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setFavorites(favorites)
Changes the currently displayed list of favorites
 
setMediaSet(mediaSet)
Specifies a catalog the component should work with.
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
show()
Shows the component.
Class Detail
s7sdk.favorites.FavoritesView(container, settings, compId) 
Example Code

This example demonstrates how to use favorites components in a simple viewer. In this example a PageView, ThumbnailGridView,
Swatches and TableOfContents component are put together to construct a simple eCatalog viewer. On top of that, we are adding a set
of components to support "favorites" feature: FavoritesMany is added to the top ControlBar with the 3 buttons: AddFavoriteButton, 
RemoveFavoriteButton and ViewAllFavoritesButton. FavoritesEffect component is attached to PageView to support rendering and editing
of favorites. FavoritesView component becomes available when user clicks on ViewAllFavoritesButton button and allows to review all
available favorites.


The code below does the following:

    

  1. The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  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. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

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

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!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 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.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.favorites.FavoritesEffect');
       		s7sdk.Util.lib.include("s7sdk.favorites.FavoritesMenu");
       		s7sdk.Util.lib.include("s7sdk.favorites.FavoritesView");
        </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;
            }
			.s7favoritesmenu {
                position: absolute;
                top: 2px;
                left: 90px;
			}
			.s7favoritesview {
				position: absolute;	
                top: 40px;
                left: 20px;
				width:100px;
				background-color: rgba(221, 221, 221, 0.5);
				z-index: 1;
			}
			.s7favoritesview .s7swatches {
                top: 0px;
                left: 0px;
				width:100px;
			}
        </style>

    </head>
    <body>

        <script type="text/javascript" language="JavaScript">
            var params, container, pageView, pageScrubber, controls, 
                scrubberSwatchesBtn, thumbnailPageBtn, gridView, swatches, mediaSet, tableOfContents,
				favoritesEffect, favoritesMenu, addFavorite, removeFavorite, viewAllFavorites;

            // 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", "https://s7d1.scene7.com/is/image/");
                params.push("MediaSet.asset", "Viewers/eCat-Sample");
                params.push("MediaSet.labelkey", "toc");
			    params.push('FavoritesMenu.bearing', 'fit-vertical');	

				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");

				favoritesEffect = new s7sdk.favorites.FavoritesEffect("pageview", params, "favoritesEffect");
				favoritesMenu = new s7sdk.favorites.FavoritesMenu("controls", params,"favoritesMenu");
				favoritesView = new s7sdk.favorites.FavoritesView(container, params, "favoritesView");
				favoritesView.setCSS(".s7favoritesview", "visibility", "hidden");
				favoritesView.resize(favoritesView.getWidth(), pageView.getHeight());

				addFavorite = new s7sdk.favorites.AddFavoriteButton("favoritesMenu", params,"addFavoriteBtn");
				removeFavorite = new s7sdk.favorites.RemoveFavoriteButton("favoritesMenu", params,"removeFavoriteBtn");
				viewAllFavorites = new s7sdk.favorites.ViewAllFavoriteButton("favoritesMenu", params,"vieAllFavoriteBtn");

				addFavorite.addEventListener("click",function(event){
					removeFavorite.setSelected(false);
					viewAllFavorites.setSelected(false);
					favoritesView.hide();
					favoritesMenu.hidePanel();
					if (addFavorite.isSelected()){
						favoritesEffect.setMode(s7sdk.favorites.FavoritesEffect.MODE_ADD);//add
					}else{
						favoritesEffect.setMode(s7sdk.favorites.FavoritesEffect.MODE_VIEW);//vewAll
					}
				});
				removeFavorite.addEventListener("click",function(event){
					addFavorite.setSelected(false);
					viewAllFavorites.setSelected(false);
					favoritesView.hide();
					favoritesMenu.hidePanel();
					if (removeFavorite.isSelected()){
						favoritesEffect.setMode(s7sdk.favorites.FavoritesEffect.MODE_REMOVE);//remove
					}else{
						favoritesEffect.setMode(s7sdk.favorites.FavoritesEffect.MODE_VIEW);//vewAll
					}
				});
				viewAllFavorites.addEventListener("click",function(event){
					addFavorite.setSelected(false);
					removeFavorite.setSelected(false);
					favoritesEffect.setMode(s7sdk.favorites.FavoritesEffect.MODE_VIEW);//vewAll
					favoritesMenu.hidePanel();
					if (viewAllFavorites.isSelected()){
						favoritesView.setFavorites(favoritesEffect.getFavorites());
						favoritesView.setCSS(".s7favoritesview", "visibility", "inherit");
						favoritesView.show();	
						favoritesView.resize(favoritesView.getWidth(), pageView.getHeight());
					}else{
						favoritesView.hide();
					}
				});

                // 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 FavoritesEffect events
				favoritesEffect.addEventListener(s7sdk.event.FavoritesEvent.FAVORITES_CHANGED, onFavoritesChanged);

				// Add an event listener for FavoritesView selection events
				favoritesView.addEventListener(s7sdk.AssetEvent.ITEM_SELECTED_EVENT, onFavoritesViewSwatchSelect);
            }

            // 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){
                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) {
            	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);
				favoritesView.setMediaSet(e.s7event.asset);
            }

			function onFavoritesViewSwatchSelect(event){
                pageView.setCurrentFrameIndex(event.s7event.frame);
			};

			function onFavoritesChanged(event){
				var disable = true;
				var favs = favoritesEffect.getFavorites();
			    favoritesView.setFavorites(favs);
				addFavorite.setSelected(false);
				removeFavorite.setSelected(false);
				addFavorite.activate();
				for(var i=0; i < favs.length; i++){
					if (favs[i].frameIdx == pageView.getCurrentFrameIndex()){
						disable = false;
					}; 
				};
				if (!disable){
					removeFavorite.activate();
				}else{
					removeFavorite.deactivate();
				}
				if (favs.length > 0) {
					if (viewAllFavorites.isSelected() && viewAllFavorites.getActivated()){
					}else{
						viewAllFavorites.activate();
					}
				}else{
					viewAllFavorites.setSelected(false);
					viewAllFavorites.deactivate();
				}
			};

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

.s7favoritesview {
	position:absolute;
	width:100px;
	height:250px;
 }
.s7favoritesview .s7swatches .s7thumbcell {
	margin:5px;
 }
.s7favoritesview .s7swatches .s7thumb {
	border:1px solid transparent;
	width:75px;
	height:75px;
 }
.s7favoritesview .s7swatches .s7thumb[state='selected'] {
	border:1px solid #FFFFFF;
 }
.s7favoritesview .s7swatches .s7label {
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
Parameters:
{String|Container} container
The reference to Container 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.
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the FavoritesView 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.AssetEvent.

The events supported by the component are:

  • s7sdk.AssetEvent.ITEM_SELECTED_EVENT - Dispatched when a thumbnail is selected. s7sdk.event.AssetEvent
    • Parameters:
    {String} type
    Event name, for example s7sdk.AssetEvent.ITEM_SELECTED_EVENT.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    See:
    s7sdk.event.AssetEvent
    blur()
    Blur the component.
    dispose()
    Dispose is used to remove itself and all sub-elements from the DOM
    focus()
    Focus the component.
    {Array} getFavorites()
    Returns currently displayed list of favorites.
    Returns:
    {Array} Array of FavoriteDesc insatnces.
    See:
    s7sdk.favorites.FavoriteDesc
    {Number} getFrame()
    Returns the current frame.
    Returns:
    {Number} Index of the current frame.
    {Number} getHeight()
    Returns the current inner height of the component.
    Returns:
    {Number} the inner height of the component.
    {Number} getWidth()
    Returns the current inner width of the component.
    Returns:
    {Number} the inner width of the component.
    hide()
    Hides the component.
    resize(w, h)
    Resize the component.
    Parameters:
    {Number} w
    width in pixels.
    {Number} h
    height in pixels.
    selectSwatch(index, triggerScroll)
    Selects the specified frame. Setting the frame index to -1 removes highlight from the currently selected thumbnail, but does not change the current frame index.
    Parameters:
    {Number} index
    Frame index in the image set.
    {Boolean} triggerScroll
    Scroll to the newly selected thumbnail.
    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. .s7favoritesview
    {String} property
    The CSS property that is being set. i.e. background-color
    {String} value
    The CSS property value being set. i.e. #FF0000
    setFavorites(favorites)
    Changes the currently displayed list of favorites
    Parameters:
    {Array} favorites
    an array of FavoriteDesc instances
    See:
    s7sdk.favorites.FavoriteDesc
    setMediaSet(mediaSet)
    Specifies a catalog the component should work with. Calling this method clears the list of known favorites previously set using setFavorites() call.
    Parameters:
    {MediaSetDesc} mediaSet
    Set to extract the frames from.
    See:
    s7sdk.set.MediaSet
    s7sdk.MediaSetDesc
    setModifier(modObj)
    Sets 1-N # of modifiers for the component.
    Parameters:
    {Object} modObj
    A simple JSON object with name:value pairs of valid modifiers for a particular component
    show()
    Shows the component.
    Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:08 GMT-0000 (UTC)