coveo-search-ui-extensions
Version:
Small generic components to extend the functionality of Coveo's Search UI framework.
93 lines • 4.28 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, l, } from 'coveo-search-ui';
import './Strings';
/**
* The TopQueries component suggests the top searched queries in the specific context and links the search results of the suggestions to the user
*/
export class TopQueries extends Component {
/**
* Construct a TopQueries component.
* @param element The HTML element bound to this component.
* @param options The options that can be provided to this component.
* @param bindings The bindings, or environment within which this component exists.
*/
constructor(element, options, bindings) {
super(element, TopQueries.ID, bindings);
this.element = element;
this.options = options;
this.bindings = bindings;
this.options = ComponentOptions.initComponentOptions(element, TopQueries, options);
const titleElem = document.createElement('h2');
titleElem.innerText = options.title;
this.listElem = document.createElement('ul');
this.element.appendChild(titleElem);
this.element.appendChild(this.listElem);
this.updateTopQueries();
}
updateTopQueries(suggestionQueryParams = this.options.suggestionQueryParams) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
this.show();
let suggestions;
try {
suggestions = yield this.queryController.getEndpoint().getQuerySuggest(suggestionQueryParams);
}
catch (err) {
console.error(`Failed to fetch query suggestions: ${err}`);
this.hide();
return;
}
if (!((_a = suggestions === null || suggestions === void 0 ? void 0 : suggestions.completions) === null || _a === void 0 ? void 0 : _a.length) || suggestions.completions.length == 0) {
// Hide the widget if there are no query suggestions or data format is invalid
this.hide();
}
else {
suggestions.completions.forEach((completion) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.classList.add('coveo-link');
a.addEventListener('click', () => this.options.onClick(completion.expression, this));
a.innerHTML = completion.expression;
li.appendChild(a);
this.listElem.appendChild(li);
});
}
});
}
hide() {
this.element.classList.add('coveo-hidden');
}
show() {
this.element.classList.remove('coveo-hidden');
}
}
TopQueries.ID = 'TopQueries';
/**
* The possible options for the TopQueries component
* @componentOptions
*/
TopQueries.options = {
suggestionQueryParams: ComponentOptions.buildJsonOption({ defaultValue: { q: '' } }),
title: ComponentOptions.buildStringOption({ defaultValue: l('TopQueries_title') }),
onClick: ComponentOptions.buildCustomOption((s) => null, {
defaultValue: (expression, component) => {
component.usageAnalytics.logSearchEvent(TopQueries.topQueriesClickActionCause, {});
component.queryStateModel.set('q', expression);
component.queryController.executeQuery({ origin: component });
},
}),
};
TopQueries.topQueriesClickActionCause = {
name: 'topQueriesClick',
type: 'interface',
};
Initialization.registerAutoCreateComponent(TopQueries);
//# sourceMappingURL=TopQueries.js.map