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 3 Next »

Overview

The Checkbox List Facet component renders a checkbox for each facet and may be nested depending on the configuration in the Hawksearch admin.

Selector

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

Data Model

The following data model is exposed to the Handlebars template:

interface CheckboxListFacetValue extends FacetValue {
    visible: boolean;
    toggled: boolean;
    hasChildren: boolean;
    children?: Array<CheckboxListFacetValue>;
}
{
  id: string;
  field: string | undefined;
  values: Array<CheckboxListFacetValue>;
  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.

Handlebars Partials

Name

Parameter

facet-checkbox-list

Array<FacetValueWithState>

This partial renders a checkbox for each facet value along with any applicable actions (include, exclude, toggle).

{{#if length}}
    <ul class="checkbox-list-facet__list">
        {{#each this}}
            {{#if visible}}
                <li class="checkbox-list-facet__list__item{{attribute ' checkbox-list-facet__list__item--excluded' excluded}}{{attribute ' checkbox-list-facet__list__item--collapsible' hasChildren }}">
                    <div class="checkbox-list-facet__list__item__content">
                        {{#if selected}}
                            <input id="{{@root.id}}-{{value}}" type="checkbox" checked hawksearch-facet-value value="{{value}}" />
                        {{else}}
                            <input id="{{@root.id}}-{{value}}" type="checkbox" hawksearch-facet-value value="{{value}}" />
                        {{/if}}
                        <label for="{{@root.id}}-{{value}}" class="facet__value">
                            <span class="facet__value__title checkbox-list-facet__list__item__title">{{title}}</span>
                            <span class="facet__value__count checkbox-list-facet__list__item__count">({{count}})</span>
                        </label>
                        {{#if toggled}}
                            {{> facet-checkbox-list children}}
                        {{/if}}
                    </div>
                    <div class="checkbox-list-facet__list__item__actions">
                        {{#if excluded}}
                            <span hawksearch-facet-value-include="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Include">
                                <hawksearch-icon name="plus" class="facet__heading__actions__item"></hawksearch-icon>
                            </span>
                        {{else}}
                            <span hawksearch-facet-value-exclude="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Exclude">
                                <hawksearch-icon name="minus" class="facet__heading__actions__item"></hawksearch-icon>
                            </span>
                        {{/if}}
                        {{#if hasChildren}}
                            <span hawksearch-facet-value-toggle="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Toggle">
                                <hawksearch-icon name="{{if-else toggled 'chevron-down' 'chevron-right'}}" class="facet__heading__toggle"></hawksearch-icon>
                            </span>
                        {{/if}}
                    </div>
                </li>
            {{/if}}
        {{/each}}
    </ul>
{{/if}}

Default Template

<div class="checkbox-list-facet">
    {{> facet-checkbox-list values}}
    {{#if showToggle}}
        <a hawksearch-facet-toggle class="facet__toggle">{{toggleText}}</a>
    {{/if}}
</div>
  • No labels