HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.search

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:

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 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
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.top
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 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 ClassAttribute SelectorDescription
.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.
.s7searchinfostate=[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.
.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.
.s7scrollupbuttonstate=[up|over|down|disabled]Defines the appearance of the up scroll button.
.s7scrolldownbuttonstate=[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 HTML5 Viewers SDK User Guide.

SymbolDescription
SearchPanel.LABELDefine a localized label.
SearchPanel.PLACEHOLDERDefine a localized promt shown inside search input box before user starts entering the search text.
SearchPanel.INFO_PROMPTDefine a localized message shown when the SearchPanel is opened for the first time, suggesting user to perform the search.
SearchPanel.INFO_NO_RESULTSDefine 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_RESULTSDefine 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_LABELDefine a localized label for results thumbnail of SearchPanelThis 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 is used to remove itself and all sub-elements from the DOM
 

Focus the ThumbnailGridView.

 
Returns the current inner height of the component.
 
Returns currently displayed search results.
 
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
 
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.
 
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:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the PageView, SearchPanel and SearchButton components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  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. A handler function is defined to respond to the component event listener added in the initViewer() function.
  7. 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.
  8. 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 HTML5 Viewers 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", "http://s7d1.scene7.com/is/image/"); params.push("searchserverurl", "http://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.

    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:13 GMT-0000 (UTC)