Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

Overview

The Color Facet component renders a box with color preview for each value.

Selector

The selector for this component is <hawksearch-color-facet>.

Data Model

The following data model is exposed to the Handlebars template:

interface ColorFacetValue extends FacetValue {
    visible: boolean;
}
{
  values: Array<ColorFacetValue>;
  showToggle: boolean;
  toggleText: string;
  expanded: boolean | undefined;
}

For more information, see Search Models.

Event Binding Attributes

This component supports the following attributes which are common to all Facet Type Components:

Attribute Name

Attribute Value

hawksearch-facet-value

string (if applicable)

When a checkbox input element with this attribute is checked or unchecked, the value of that element will be added or removed from the search request as appropriate.

For non-input elements, the attribute value will be used instead of a form element value.

Attribute Name

Attribute Value

hawksearch-facet-value-exclude

string

When an element with this attribute is clicked, search results with the corresponding attribute value will be excluded from search results.

Attribute Name

Attribute Value

hawksearch-facet-value-include

string

When an element with this attribute is clicked, search results with the corresponding attribute value will no longer be excluded from search results.

Elements with this attribute value should only be displayed for facet values that are excluded.

Attribute Name

Attribute Value

hawksearch-facet-value-toggle

When an element with this attribute is clicked, child facet values will be displayed or hidden as appropriate.

This attribute should only be used for facets that support nested values.

Attribute Name

Attribute Value

hawksearch-facet-toggle

When an element with this attribute is clicked, facet values beyond the toggle threshold will be displayed or hidden as appropriate.

Default Template

<div class="color-facet">
    <div class="row row--tight color-facet__items">
        {{#each values}}
            {{#if visible}}
                <div hawksearch-facet-value="{{value}}" class="column column--2 color-facet__item{{attribute ' color-facet__item--selected' selected}}">
                    {{#if color.imageUrl}}
                        <img src="{{color.imageUrl}}" class="color-facet__item__image" alt="{{color.name}}" title="{{color.name}}" />
                    {{else}}
                        <div class="color-facet__item__box" style="background: {{color.hex}};"></div>
                    {{/if}}
                    <span class="color-facet__item__actions">
                        {{#if excluded}}
                            <span hawksearch-facet-value-include="{{value}}" class="color-facet__item__actions__item" title="Include">
                                <hawksearch-icon name="plus"></hawksearch-icon>
                            </span>
                        {{else}}
                            <span hawksearch-facet-value-exclude="{{value}}" class="color-facet__item__actions__item" title="Exclude">
                                <hawksearch-icon name="minus"></hawksearch-icon>
                            </span>
                        {{/if}}
                    </span>
                </div>
            {{/if}}
        {{/each}}
    </div>
    {{#if showToggle}}
        <a hawksearch-facet-toggle rel="nofollow" class="facet__toggle">{{toggleText}}</a>
    {{/if}}
</div>
  • No labels