coveo-search-ui-extensions
Version:
Small generic components to extend the functionality of Coveo's Search UI framework.
99 lines • 4.24 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Component, ComponentOptions, $$, Initialization, Checkbox, QueryEvents, QueryStateModel, load, l, } from 'coveo-search-ui';
import { ResultsFilterEvents } from './Events';
import './Strings';
/**
* The ResultsFilter component allows a user to click a checkbox to
* search only for matching results.
*/
export class ResultsFilter extends Component {
constructor(element, options, bindings) {
super(element, ResultsFilter.ID, bindings);
this.element = element;
this.options = options;
this.bindings = bindings;
this.options = ComponentOptions.initComponentOptions(element, ResultsFilter, options);
this.initialize();
this.queryStateModel.registerNewAttribute(QueryStateModel.getFacetId(ResultsFilter.ID), false);
this.bind.onRootElement(QueryEvents.buildingQuery, this.handleBuildingQuery.bind(this));
this.bind.onQueryState('change:', QueryStateModel.getFacetId(ResultsFilter.ID), this.handleQueryStateChange.bind(this));
}
isSelected() {
return this.checkbox && this.checkbox.isSelected();
}
toggle() {
if (this.isSelected()) {
this.checkbox.reset();
}
else {
this.checkbox.select(true);
}
}
initialize() {
const mainSection = $$('div', { className: 'CoveoFacet' });
const headerSection = $$('div', { className: 'coveo-facet-header' });
const labelDiv = $$('label', {
className: 'coveo-facet-value-label-wrapper',
}).el;
headerSection.append(labelDiv);
mainSection.append(headerSection.el);
this.createCheckbox().then((checkbox) => {
this.checkbox = checkbox;
labelDiv.appendChild(this.checkbox.getElement());
});
this.element.appendChild(mainSection.el);
}
createCheckbox() {
return __awaiter(this, void 0, void 0, function* () {
if (Coveo.Checkbox === undefined) {
yield load('Checkbox');
}
return new Checkbox(this.handleCheckboxChange.bind(this), this.options.text);
});
}
handleCheckboxChange(checkbox) {
this.queryStateModel.set(QueryStateModel.getFacetId(ResultsFilter.ID), this.checkbox.isSelected());
this.triggerQuery();
Coveo.$$(this.root).trigger(ResultsFilterEvents.Click, { checked: this.checkbox.isSelected() });
}
triggerQuery() {
this.usageAnalytics.logSearchEvent({ name: ResultsFilter.ID, type: 'misc' }, { filteredResults: this.isSelected() });
this.queryController.executeQuery({ origin: this });
}
handleQueryStateChange(args) {
if (args['value']) {
this.checkbox.select(false);
}
else {
this.checkbox.reset();
}
}
handleBuildingQuery(args) {
if (this.isSelected()) {
const values = this.options.getValues();
args.queryBuilder.advancedExpression.add(`@${this.options.field}=(${values.join(',')})`);
}
}
}
ResultsFilter.ID = 'ResultsFilter';
ResultsFilter.options = {
text: ComponentOptions.buildStringOption({
defaultValue: l(`${ResultsFilter.ID}_Label`),
}),
field: ComponentOptions.buildStringOption({
defaultValue: 'urihash',
}),
getValues: ComponentOptions.buildCustomOption((name) => () => new Array(), {
defaultFunction: () => () => new Array(),
}),
};
Initialization.registerAutoCreateComponent(ResultsFilter);
//# sourceMappingURL=ResultsFilter.js.map