`;
public static NUMBER_OF_FACETS = 3;
public static NUMBER_OF_RESULTS = 10;
public static NUMBER_OF_RESULTS_RECOMMENDATION = 5;
public static INITIALIZATION_CLASS = 'coveo-during-initialization';
public static AFTER_INITIALIZATION_CLASS = 'coveo-after-initialization';
private eventToRemovePlaceholder = InitializationEvents.afterComponentsInitialization;
constructor(public root: HTMLElement) {}
public withEventToRemovePlaceholder(event: string) {
this.eventToRemovePlaceholder = event;
return this;
}
public withFullInitializationStyling() {
$$(this.root).addClass(InitializationPlaceholder.INITIALIZATION_CLASS);
$$(this.root).removeClass(InitializationPlaceholder.AFTER_INITIALIZATION_CLASS);
$$(this.root).one(this.eventToRemovePlaceholder, () => {
$$(this.root).removeClass(InitializationPlaceholder.INITIALIZATION_CLASS);
$$(this.root).addClass(InitializationPlaceholder.AFTER_INITIALIZATION_CLASS);
});
return this;
}
public withHiddenRootElement() {
$$(this.root).addClass('coveo-hidden');
return this;
}
public withVisibleRootElement() {
$$(this.root).removeClass('coveo-hidden');
return this;
}
public withWaitingForFirstQueryMode() {
$$(this.root).addClass('coveo-waiting-for-query');
$$(this.root).one(QueryEvents.duringQuery, () => {
$$(this.root).removeClass('coveo-waiting-for-query');
});
return this;
}
public withAllPlaceholders() {
this.withPlaceholderForFacets();
this.withPlaceholderForResultList();
this.withPlaceholderSearchbox();
return this;
}
public withPlaceholderForFacets() {
// Render an arbitrary number of placeholder facet.
// Facets should become usable on the first deferredQuerySuccess
const facetElements = ComponentsTypes.getAllFacetElementsFromElement(this.root);
if (Utils.isNonEmptyArray(facetElements)) {
const placeholders: Dom[] = [];
_.each(facetElements, (facetElement: HTMLElement) => $$(facetElement).addClass(InitializationPlaceholder.INITIALIZATION_CLASS));
_.each(_.first(facetElements, InitializationPlaceholder.NUMBER_OF_FACETS), (facetElement: HTMLElement) => {
$$(facetElement).addClass('coveo-with-placeholder');
const placeHolder = $$('div', { className: 'coveo-facet-placeholder' }, this.facetPlaceholder);
facetElement.appendChild(placeHolder.el);
placeholders.push(placeHolder);
});
$$(this.root).one(this.eventToRemovePlaceholder, () => {
const toExecuteAfterInitialization = () => {
_.each(placeholders, (placeholder: Dom) => placeholder.remove());
_.each(facetElements, (facetElement: HTMLElement) =>
$$(facetElement).removeClass(InitializationPlaceholder.INITIALIZATION_CLASS)
);
_.each(facetElements, (facetElement: HTMLElement) => $$(facetElement).removeClass('coveo-with-placeholder'));
};
$$(this.root).one(QueryEvents.queryError, () => toExecuteAfterInitialization());
$$(this.root).one(QueryEvents.deferredQuerySuccess, () => toExecuteAfterInitialization());
});
}
return this;
}
public withPlaceholderSearchbox() {
// Searchbox should be good/usable afterComponentsInitialization
// Create a placeholder until we reach that event.
const searchBoxElements = $$(this.root).findAll('.CoveoSearchbox');
if (Utils.isNonEmptyArray(searchBoxElements)) {
_.each(searchBoxElements, el => {
$$(el).addClass(InitializationPlaceholder.INITIALIZATION_CLASS);
});
$$(this.root).one(this.eventToRemovePlaceholder, () => {
_.each(searchBoxElements, (el: HTMLElement) => $$(el).removeClass(InitializationPlaceholder.INITIALIZATION_CLASS));
});
}
return this;
}
public withPlaceholderForResultList() {
// Render an arbitrary number of placeholder in the first result list we find
// When we get the first newResultDisplayedEvent, the result list should be usable.
const resultListsElements = $$(this.root).findAll('.CoveoResultList');
if (Utils.isNonEmptyArray(resultListsElements)) {
_.each(resultListsElements, el => $$(el).addClass(InitializationPlaceholder.INITIALIZATION_CLASS));
const { placeholderToUse, resultListToUse, rootToUse } = this.determineResultListPlaceholder(resultListsElements);
$$(resultListToUse).append(rootToUse);
$$(resultListToUse).addClass('coveo-with-placeholder');
_.times(
this.isRecommendationRoot()
? InitializationPlaceholder.NUMBER_OF_RESULTS_RECOMMENDATION
: InitializationPlaceholder.NUMBER_OF_RESULTS,
() => {
rootToUse.innerHTML += placeholderToUse;
}
);
const reset = () => {
$$(rootToUse).remove();
_.each(resultListsElements, el => $$(el).removeClass(InitializationPlaceholder.INITIALIZATION_CLASS));
$$(resultListToUse).removeClass('coveo-with-placeholder');
};
$$(this.root).one(ResultListEvents.newResultDisplayed, () => reset());
$$(this.root).one(QueryEvents.queryError, () => reset());
$$(this.root).one(QueryEvents.noResults, () => reset());
}
return this;
}
private determineResultListPlaceholder(resultListElements: HTMLElement[]) {
let currentLayout;
if (resultListElements.length > 1) {
currentLayout = HashUtils.getValue('layout', HashUtils.getHash());
} else if (resultListElements.length == 1) {
currentLayout = resultListElements[0].getAttribute('data-layout');
}
if (!currentLayout) {
currentLayout = 'list';
}
if (resultListElements.length > 1) {
let resultListElement = _.find(resultListElements, resultListElement => {
return resultListElement.getAttribute('data-layout') == currentLayout;
});
if (!resultListElement) {
// No data-layout default to list
resultListElement = _.find(resultListElements, resultListElement => {
return resultListElement.getAttribute('data-layout') == null;
});
}
if (!resultListElement) {
// Last fallback
resultListElement = _.first(resultListElements);
}
return {
placeholderToUse: this.determineResultListFromLayout(currentLayout),
resultListToUse: resultListElement,
rootToUse: this.determineRootFromLayout(currentLayout)
};
} else if (resultListElements.length == 1) {
return {
placeholderToUse: this.determineResultListFromLayout(currentLayout),
resultListToUse: resultListElements[0],
rootToUse: this.determineRootFromLayout(currentLayout)
};
} else {
return null;
}
}
private determineResultListFromLayout(layout: string) {
switch (layout) {
case 'list':
if (this.isRecommendationRoot()) {
return this.recommendationResultListPlaceholder;
} else {
return this.resultListPlaceholder;
}
case 'card':
return this.cardResultListPlaceholder;
default:
return this.resultListPlaceholder;
}
}
private determineRootFromLayout(layout: string): HTMLElement {
switch (layout) {
case 'list':
return $$('div').el;
case 'card':
return $$('div', { className: 'coveo-result-list-container coveo-card-layout-container' }).el;
default:
return $$('div').el;
}
}
private isRecommendationRoot(): boolean {
return $$(this.root).hasClass('CoveoRecommendation');
}
}