Class s7sdk.search.SearchPanel

The SearchPanel component provides UI for entering and submitting search text and also renders search results as scrollable thumbnails. SearchPanel is supposed to occupy the entire application area and cover it with semi-transparent fill when visible. Internally, the component has a panel with search input and search results UI. It may either show as a fixed-width vertical panel on the left-hand side of the SearchPanel area (which is recommended for desktop and tablet screens), or take the full size of SearchPanel (which is suitable for mobile devices).

Application code initializes SearchPanel component by passing the current MediaSetDesc instance to its setMediaSet() method, it should also communicate the correct device orientation to SearchPanel using setLandscape() and setLandscape() and setPortrait() methods.

The application uses setCSS(".s7searchpanel", "visibility", "inherit") and setCSS(".s7searchpanel", "visibility", "hidden") calls to show and hide the component respectively. When the component is shown for the first time it only renders the search input box and prompt. When user submits a search text SearchPanel emits SearchEvent.SEARCH_SUBMITTED with the search text entered by the user.

Application needs to pass that search text to the SearchManager.search() method, obtain SearchResultsDesc instance from it and pass these search results back to the SearchPanel using setSearchResults(). The SearchPanel will process search results and render them as a list of thumbnails, where each thumbnail represents a frame with at least one search result hit.

Finally, when user clicks or taps on particular search result thumbnail, SearchPanel emits AssetEvent.ITEM_SELECTED_EVENT with the information about selected item; the application reacts to this event by changing catalog frame where these particular search results are located or performing other applicatino-specific actions.

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

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Adobe 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/
iscommand	value	The Adobe 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\|preloadnbr	Specifies the component preload behavior. When set to `-1`, all thumbnails will be loaded simultaneously when component is initialized or search results are changed. When set to `0`, only visible thumbnails will be loaded. preloadnbr defines how many invisible thumbnails around visible area will be preloaded.	1
textpos	bottom\|top\|left\|right\|none\|tooltip	Specifies 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.	top
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies 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
align	left\|center\|right,top\|center\|bottom	Specifies internal alignment (anchoring) of the thumbnails container within component area. In SearchPanel, 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,top

Defining the Appearance using CSS

The CSS class for styling the SearchPanel is .s7searchpanel. It is recommended that you define common CSS under the main class and only define the necessary distinctions when you use attribute selectors.

CSS Class	Attribute Selector	Description
`.s7searchpanel`	(None)	Defines the appearance of the entire `SearchPanel` area.
`.s7backoverlay`	(None)	Defines the appearance of the `SearchPanel` background overlay.
`.s7searchresultspanel`	(None)	Defines the appearance of the actual panel that contains search input UI and search result thumbnails. The width can be set either in absolute pixels to achieve vertical fixed panel, or to `100%` to make the panel occupy the entire component's area. The height of the panel always equals to the height of the entire component.
`.s7searchinput`	(None)	Defines the appearance of the input text box for `SearchPanel`.
`.s7searchinfo`	`state=[prompt\|results\|no_results]`	Defines the appearance of the text label shown by the component. There are 3 different messages supported by the `SearchPanel`, and depending on the type of the message the component will set the appropriate `state` attribute selector: `prompt` corresponds to the message shown when the user enters the search text for the first time; `results` corresponds to the information about successfull search results and `no_results` corresponds to the message shown when no results were found.
`.s7thumbcell`	(None)	Defines thumbnail spacing using `margin` CSS property.
`.s7thumb`	`state=[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.
`.s7scrollupbutton`	`state=[up\|over\|down\|disabled]`	Defines the appearance of the up scroll button.
`.s7scrolldownbutton`	`state=[up\|over\|down\|disabled]`	Defines the appearance of the down scroll button.

Localizable Symbols

SearchPanel also have a number of 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.

Symbol	Description
`SearchPanel.LABEL`	Define a localized label.
`SearchPanel.PLACEHOLDER`	Define a localized promt shown inside search input box before user starts entering the search text.
`SearchPanel.INFO_PROMPT`	Define a localized message shown when the `SearchPanel` is opened for the first time, suggesting user to perform the search.
`SearchPanel.INFO_NO_RESULTS`	Define a localized message shown when the search did not return any results. This symbol supports a runtime replacement token $SEARCH_TEXT$ , the component will replace it with actual search text entered by the user.
`SearchPanel.INFO_RESULTS`	Define a localized message shown when the search have completed successfully and returned at least one result. This symbol supports several runtime replacement tokens: $SEARCH_TEXT$ - actual search text entered by the user; $HIT_COUNT$ - total number of search hits found; $PAGE_COUNT$ - number of catalog pages containing at least one search hit.
`SearchPanel.THUMBNAIL_LABEL`	Define a localized label for results thumbnail of `SearchPanel`This SYMBOL support the following replacement tokens: $PAGE$ - page number, $PAGE_HIT_COUNT$ - number of search results found on the page.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.search.SearchPanel(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `SearchPanel` component.
	blur() Blur the SearchPanel.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	focus() Focus the ThumbnailGridView.
	getHeight() Returns the current inner height of the component.
	getSearchResults() Returns currently displayed search results.
	getWidth() Returns the current inner width of the component.
	hide() Hides the component.
	resize(w, h) Resize the component.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setLandscape() Switches component to landscape operation mode.
	setMediaSet(mediaSet) Specifies a media set the component should work with.
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setPortrait() Switches component to portrait operation mode.
	setSearchResults(searchResults) Changes the currently displayed search results
	show() Shows the component.

Class Detail

s7sdk.search.SearchPanel(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:

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 PageView, SearchPanel and SearchButton 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 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>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 SearchPanel:

.s7searchpanel {
	position:absolute;
	width:100%;
	height:100%;
 }
.s7searchpanel .s7backoverlay {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000000;
	opacity:0.3;
 }
.s7searchpanel .s7searchresultspanel {
	position:absolute;
	box-sizing:border-box;
	display:table;
	background-color:#DDDDDD;
	overflow:hidden;
	width:250px;
	height:100%;
 }
.s7searchpanel .s7searchinputcontainer {
	padding-left:10px;
	padding-right:10px;
	display:flex;
	box-sizing:border-box;
 }
.s7searchpanel .s7searchinputbutton {
	padding-left:20px;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(images/sdk/search_form_field.png);
	background-size:26px 26px;
	border:1px solid #696969;
	margin-top:10px;
	margin-bottom:10px;
	width:30px;
	height:30px;
 }
.s7searchpanel .s7searchinput {
	border:1px solid #696969;
	vertical-align:top;
	margin-top:10px;
	margin-bottom:10px;
	flex-basis:100%;
	width:auto;
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
.s7searchpanel .s7searchinput::-ms-clear {
	display:none;
 }
.s7searchpanel .s7searchinput::-ms-reveal {
	display:none;
 }
.s7searchpanel .s7searchinput::-webkit-search-cancel-button {
	display:none;
 }
.s7searchpanel .s7searchinput::-webkit-search-decoration,.s7searchpanel .s7searchinput::-webkit-search-results-button,.s7searchpanel .s7searchinput::-webkit-search-results-decoration {
	display:none;
 }
.s7searchpanel .s7searchinfo {
	text-align:center;
	box-sizing:border-box;
	padding-bottom:10px;
	width:100%;
	height:100%;
 }
.s7searchpanel .s7searchinfo[state='prompt'],.s7searchinfo[state='no_results'] {
	font-family:Helvetica, sans-serif;
	font-size:18px;
	color:#696969;
	display:table-row;
	text-align:center;
 }
.s7searchpanel .s7searchinfo[state='prompt'] p,.s7searchinfo[state='no_results'] p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
 }
.s7searchpanel .s7searchinfo[state='results'] {
	padding-left:10px;
	padding-right:10px;
	font-family:Helvetica, sans-serif;
	font-size:14px;
	color:#000000;
 }
.s7searchpanel .s7innerswatchescontainer {
	width:100%;
	height:100%;
	display:table-row;
	padding-top:10px;
	padding-bottom:10px;
	font-size:22px;
	background-color:#FFFFFF;
	text-align:center;
	overflow:hidden;
 }
.s7searchpanel .s7swatches {
	margin:0 auto;
	background-color:#FFFFFF;
	border-top:1px solid #696969;
	width:100%;
	height:100%;
 }
.s7searchpanel .s7swatches .s7thumbcell {
	margin:5px;
 }
.s7searchpanel .s7swatches .s7thumb {
	border:1px solid #d3d3d3;
	width:215px;
	height:129px;
 }
.s7searchpanel .s7swatches .s7thumb[state='selected'] {
	border:1px solid #696969;
 }
.s7searchpanel .s7swatches .s7label {
	text-align:left;
	color:#4c4c4c;
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
.s7searchpanel .s7innerscrollbuttoncontainer {
	position:absolute;
	background-color:#FFFFFF;
	width:100%;
	bottom:0px;
	left:0px;
 }
.s7searchpanel .s7scrollupbutton {
	position:absolute;
	width:125px;
	height:35px;
	bottom:0px;
	left:0px;
 }
.s7searchpanel .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/searchpanel_scroll_up_up.png);
 }
.s7searchpanel .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/searchpanel_scroll_up_over.png);
 }
.s7searchpanel .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/searchpanel_scroll_up_down.png);
 }
.s7searchpanel .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
 }
.s7searchpanel .s7scrolldownbutton {
	position:absolute;
	width:125px;
	height:35px;
	bottom:0px;
	right:0px;
 }
.s7searchpanel .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/searchpanel_scroll_down_up.png);
 }
.s7searchpanel .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/searchpanel_scroll_down_over.png);
 }
.s7searchpanel .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/searchpanel_scroll_down_down.png);
 }
.s7searchpanel .s7scrolldownbutton[state='disabled'] {
	background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);
 }

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

s7sdk.SearchEvent.SEARCH_SUBMITTED - Dispatched when user enters search text into the search input field and submits. s7sdk.event.SearchEvent

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

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

focus()

Focus the ThumbnailGridView.

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component.

{s7sdk.search.SearchResultsDesc} getSearchResults()

Returns currently displayed search results.

Returns:: {s7sdk.search.SearchResultsDesc} search results

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

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

setLandscape()

Switches component to landscape operation mode. If the component was originally initialized through setMediaSet() API call with OrientationSetDesc instance passed as an argument, it will re-build using MediaSetDesc instance specific to landscape orientation. Otherwise, if component was initialized with asset modifier, using setAsset() API or setMediaSet() API call with MediaSetDesc passed as an argument, the call to this method is ignored.

setMediaSet(mediaSet)

Specifies a media set the component should work with. Calling this method clears current search results previously set using setSearchResults() call.

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

See:: s7sdk.set.MediaSet

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

setPortrait()

Switches component to portrait operation mode. If the component was originally initialized through setMediaSet() API call with OrientationSetDesc instance passed as an argument, it will re-build using MediaSetDesc instance specific to portrait orientation. Otherwise, if component was initialized with asset modifier, using setAsset() API or setMediaSet() API call with MediaSetDesc passed as an argument, the call to this method is ignored.

setSearchResults(searchResults)

Changes the currently displayed search results

Parameters:
{s7sdk.search.SearchResultsDesc} searchResults: search results

show()

Shows the component.

Namespaces

Classes in s7sdk.search

Class s7sdk.search.SearchPanel