HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.search

Class s7sdk.search.SearchEffect

The SearchEffect component is an effects component which renders search result regions on top of the page image, it is designed to work with the PageView component only. The SearchEffect uses search results information returned by the search server and processed by Scene7 Image Serving to size and position regions in the main view.

The component receives search results data using setSearchResults() API and then processes it on Image Serving using the req=map command.

Customizing Behavior Using Modifiers

Modifiers change SearchEffect 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, the domain from which the page is served is applied./is/image/
directionauto|left|rightSpecifies the way pages are displayed in the view. left sets a left-to-right display order and right reverses the order so that pages are displayed right-to-left. When auto is set, the component applies right mode when locale is set to "ja". Otherwise, left is used.auto

Defining Appearance using CSS

You can define the appearance of the SearchEffect component by using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the SearchEffect component by using the .s7searcheffect class selector. The styles associated with this class selector are applied to all instances of the SearchEffect component. Style particular instances by prefixing the class rule with the instance #ID. For example, styling rules for #myComp.s7searcheffect are applied only to the particular SearchEffect instance. For more information on component styling see the HTML5 Viewer SDK User Guide and the examples in this document.

CSS ClassAttribute SelectorDescription
.s7searcheffect(None)Represents the main element of the SearchEffect component.
.s7region(None) Defines the appearance of individual search result regions. The size and position of the region is managed by the component logic and cannot be customized through CSS.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.search.SearchEffect(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
Returns whether or not overlay visibility is enabled.
 
Returns currently displayed search results.
 
hide()
Hides the component.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
Whenever set to true, the map area overlays is visible as long as they are available.
 
setSearchResults(searchResults)
Changes the currently displayed search results.
 
show()
Shows the component.
Class Detail
s7sdk.search.SearchEffect(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 SearchEffect:


.s7searcheffect {
	z-index:999;
	user-select:none;
	-ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7searcheffect .s7region {
	background:rgba(255,255,0, 0.5);
 }
Parameters:
{String|Component} container
either direct reference to SDK component to attach to, or an ID of such SDK component.
{s7sdk.ParameterManager} settings
A parameter manager object representing the desired configuration.
{String} compId
An optional parameter that specifies the ID of the component DOM element.
Method Detail
{Boolean} getOverlaysVisible()
Returns whether or not overlay visibility is enabled.
Returns:
{Boolean} overlay visibility.

{s7sdk.search.SearchResultsDesc} getSearchResults()
Returns currently displayed search results.
Returns:
{s7sdk.search.SearchResultsDesc} current search results.

hide()
Hides the component.

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. .s7searcheffect .s7region
{String} property
The CSS property that is being set. i.e. border
{String} value
The CSS property value being set. i.e. 1px solid yellow

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

setOverlaysVisible(value)
Whenever set to true, the map area overlays is visible as long as they are available. This property is useful if the target component wants to temporarily hide the map overlays during a transition of some sort.
Parameters:
{Boolean} value
overlay visibility.

setSearchResults(searchResults)
Changes the currently displayed search results.
Parameters:
{s7sdk.search.SearchResultsDesc} searchResults
new search results to show regions for.

show()
Shows the component.

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