Support Menu

Coveo component ImageResultList

The ImageResultList component extends the ResultList component to display image results.

This component inherits from the ResultList component. Thus, any option available for a ResultList component is also available for an ImageResultList component.

Index

Component Options

columnWidth

columnWidth: number

Specifies the width of a column in a column layout.

Default value is 225. Minimum value is 16.

Markup configuration example(s) :
data-column-width='10'

heightThreshold

heightThreshold: number

Specifies the maximum height of a row in a row layout.

Default value is 250. Minimum value is 16.

Markup configuration example(s) :
data-height-threshold='10'

layoutType

layoutType: string

Specifies the type of layout to display image results with. Available values are:

  • row: Resizes images to make them fit the width of the container and have the same height for each row.
  • column: Displays the images in fixed-size columns. Default value is row.
Markup configuration example(s) :
data-layout-type='foo'

Methods

buildResult

buildResults

debugInfo

  • debugInfo(): any

disable

  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void

displayMoreResults

  • displayMoreResults(count: number): void
  • Executes a query to fetch new results. After the query returns, renders the new results.

    Asserts that there are more results to display by verifying whether the last query has returned as many results as requested.

    Asserts that the ResultList is not currently fetching results.

    Parameters

    • count: number

      The number of results to fetch and display.

    Returns void

enable

  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void

getAutoSelectedFieldsToInclude

  • getAutoSelectedFieldsToInclude(): string[]

getBindings

getDisplayedResults

getDisplayedResultsElements

  • getDisplayedResultsElements(): HTMLElement[]

renderResults

  • renderResults(resultsElement: HTMLElement[], append?: boolean): void
  • Empties the current result list content and appends the given array of HTMLElement.

    Can append to existing elements in the result list, or replace them.

    Triggers the newResultsDisplayed and newResultDisplayed events.

    Parameters

    • resultsElement: HTMLElement[]
    • Default value append: boolean = false

    Returns void

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.

    Parameters

    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent

Properties

bind

Allows the component to bind events and execute them only when it is enabled.

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger component state event when modified. Each component can listen to those events.

disabled

disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

root

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton

Constructors

constructor

  • Creates a new ImageResultList component.

    Parameters

    • element: HTMLElement

      The HTMLElement on which to instantiate the component.

    • Optional options: IImageResultListOptions

      The options for the ImageResultList component.

    • Optional bindings: IComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    • Default value elementClassId: string = ResultList.ID

      The class that this component should instantiate. Components that extend the base ResultList component use this. Default value is CoveoResultList.

    Returns ImageResultList

Implements