Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.common

Class s7sdk.common.SearchButton


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

The SearchButton is a two state button that is used to show and hide search UI. The selected state is automatically changed when user clicks/taps on the button. Alternatively, the state can be changed through setSelected() API.

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

Currently this component does not support any modifiers.

Defining Appearance using CSS

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

CSS ClassAttribute SelectorDescription
.s7searchbuttonselected=[true|false] state=[up|over|down|disabled]Define appearance of SearchButton 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

SearchButton 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 Adobe Experience Viewers HTML5 SDK User Guide.

SymbolDescription
SearchButton.TOOLTIP_SELECTEDTooltip for selected button state
SearchButton.TOOLTIP_UNSELECTEDTooltip for unselected button state

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.common.SearchButton(container, settings, compId)
Methods borrowed from class s7sdk.common.Button:
activate, addEventListener, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS, setLabel
Methods borrowed from class s7sdk.common.TwoStateButton:
isSelected, setSelected
Class Detail
s7sdk.common.SearchButton(container, settings, compId) 
Example Code

This example demonstrates how to use the "search"-components in a simple viewer. In this example Container,
PageView, SearchManager, SearchButton, SearchPanel, SearchEffect objects are created. Clicking the SearchButton button a search dialog will 
appear and it allow user to input "search text" for searching. 

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 PageView, SearchPanel and SearchButton 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. A handler function is defined to respond to the component event listener 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>Search 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.search.SearchManager');
            s7sdk.Util.lib.include('s7sdk.search.SearchPanel');
            s7sdk.Util.lib.include('s7sdk.search.SearchEffect');
        </script>

        <style type="text/css" media="screen">
            .s7container {
		width:600px;
		height:400px;
            }
            .s7pageview {
                height: 400px;
                width: 600px;
                top: 40px;
                left: 20px;
                position: relative;
                border: solid 1px #cccccc;
            }
            .s7controlbar{
                position: relative;
                background-color: #9e9e9e;
                top: 5px;
                left: 20px;
                width: 600px;
                position: absolute;
                z-index: 1;
            }
            .s7searchbutton {
                position: absolute;
                top: 2px;
                left: 10px;
            }
            .s7searchpanel {
                position: absolute;
                top: 40px;
                left: 20px;
            }
        </style>

    </head>
    <body>

        <script type="text/javascript" language="JavaScript">
            var params, container, pageView, controls, mediaSet,
				searchButton,searchManager,searchPanel,searchEffect;

            // 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("searchserverurl", "https://s7d1.scene7.com/s7search/");
                params.push("MediaSet.asset", "Viewers/eCat-Sample");

				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 PageView component object
                pageView = new s7sdk.set.PageView(container, params, "pageview");

                // Create the ControlBar component object
                controls = new s7sdk.common.ControlBar(container, params, "controls");

                // Attach the PageView objects to the ControlBar
                controls.attachView(pageView, false);

				//Create SearchButton component object
				searchButton = new s7sdk.common.SearchButton(controls, params, "searchButton");
				function onSearchButton() {
					if (searchButton.isSelected()){
						searchPanel.setCSS(".s7searchpanel", "visibility", "inherit");
						controls.allowAutoHide(false);
					}
					else {
						searchPanel.selectSwatch(-1);
						searchPanel.setCSS(".s7searchpanel", "visibility", "hidden");
						controls.allowAutoHide(true);
					}
				}
				searchButton.addEventListener("click",onSearchButton, false);

				//Create SearchManager component object
				searchManager = new s7sdk.search.SearchManager(null, params, "searchManager");
				searchManager.addEventListener(s7sdk.event.SearchEvent.SEARCH_COMPLETED, function(e) {
					searchPanel.setSearchResults(e.s7event.searchResults);
					searchEffect.setSearchResults(e.s7event.searchResults);
				}, false);

				//Create SearchPanel component object
				searchPanel = new s7sdk.search.SearchPanel(container, params, "searchPanel");
				searchPanel.setCSS(".s7searchpanel", "visibility", "hidden");

				// Attach the SearchPanel object to the ControlBar
				controls.attach(self.searchPanel);

				// Define an event handler function to search submitted 
				searchPanel.addEventListener(s7sdk.event.SearchEvent.SEARCH_SUBMITTED, function(e) {
					searchManager.search(e.s7event.searchRequest);
				}, false);
				
				// Define an event handler function to switch pages for SearchPanel.swatches selections
				searchPanel.addEventListener(s7sdk.AssetEvent.ITEM_SELECTED_EVENT, function(e) {
					searchEffect.setOverlaysVisible(true);
					searchEffect.setCurrentIndex(e.s7event.frame);
					if (e.s7event.frame != pageView.getCurrentFrameIndex()){
						selectFromSearchPanel = true;
					}
					searchPanel.selectSwatch(-1);
					searchPanel.setCSS(".s7searchpanel", "visibility", "hidden");
					searchButton.setSelected(false);
					controls.allowAutoHide(true);

					pageView.setCurrentFrameIndex(e.s7event.frame);
				}, false);

				//Create SearchEffect component object
				searchEffect = new s7sdk.search.SearchEffect("pageview", params, "searchEffect");
                // Attach the SearchEffect object to the ControlBar
				controls.attachView(searchEffect, false);
				
                // Add an event listener for PageView selection events
                pageView.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageViewSelected, false);

            }

			// Define an event handler function to switch pages for PageView item selections
            function onPageViewSelected(event){
                switchToPage(event);
            }

           // Define a function to update all components to display the currently selected page
            function switchToPage(event){
                pageView.setCurrentFrameIndex(event.s7event.frame);
            }

            // Define an event handler function to update the PageView, SearchManager and SearchPanel when the mediaset is parsed
            function onSetParsed(e) {
				pageView.setMediaSet(e.s7event.asset);
				searchManager.setMediaSet(e.s7event.asset);
				searchPanel.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 SearchButton:

.s7searchbutton {
	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;
 }
.s7searchbutton[selected='true'][state='up'] {
	background-image:url(images/sdk/searchbutton_on_over.png);
 }
.s7searchbutton[selected='true'][state='over'] {
	background-image:url(images/sdk/searchbutton_on_over.png);
 }
.s7searchbutton[selected='true'][state='down'] {
	background-image:url(images/sdk/searchbutton_on_over.png);
 }
.s7searchbutton[selected='true'][state='disabled'] {
	background-image:url(images/sdk/searchbutton_off_disabled.png);
 }
.s7searchbutton[selected='false'][state='up'] {
	background-image:url(images/sdk/searchbutton_off_up.png);
 }
.s7searchbutton[selected='false'][state='over'] {
	background-image:url(images/sdk/searchbutton_off_over.png);
 }
.s7searchbutton[selected='false'][state='down'] {
	background-image:url(images/sdk/searchbutton_off_down.png);
 }
.s7searchbutton[selected='false'][state='disabled'] {
	background-image:url(images/sdk/searchbutton_off_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.
Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:07 GMT-0000 (UTC)