306 lines
11 KiB
JavaScript
306 lines
11 KiB
JavaScript
import Hogan from "hogan.js";
|
||
import LunrSearchAdapter from "./lunar-search";
|
||
import autocomplete from "autocomplete.js";
|
||
import templates from "./templates";
|
||
import utils from "./utils";
|
||
import $ from "autocomplete.js/zepto";
|
||
|
||
/**
|
||
* Adds an autocomplete dropdown to an input field
|
||
* @function DocSearch
|
||
* @param {Object} options.searchDocs Search Documents
|
||
* @param {Object} options.searchIndex Lune searchIndexes
|
||
* @param {string} options.inputSelector CSS selector that targets the input
|
||
* value.
|
||
* @param {Object} [options.autocompleteOptions] Options to pass to the underlying autocomplete instance
|
||
* @return {Object}
|
||
*/
|
||
class DocSearch {
|
||
constructor({
|
||
searchDocs,
|
||
searchIndex,
|
||
inputSelector,
|
||
debug = false,
|
||
queryDataCallback = null,
|
||
autocompleteOptions = {
|
||
debug: false,
|
||
hint: false,
|
||
autoselect: true
|
||
},
|
||
transformData = false,
|
||
queryHook = false,
|
||
handleSelected = false,
|
||
enhancedSearchInput = false,
|
||
layout = "collumns"
|
||
}) {
|
||
this.input = DocSearch.getInputFromSelector(inputSelector);
|
||
this.queryDataCallback = queryDataCallback || null;
|
||
const autocompleteOptionsDebug =
|
||
autocompleteOptions && autocompleteOptions.debug
|
||
? autocompleteOptions.debug
|
||
: false;
|
||
// eslint-disable-next-line no-param-reassign
|
||
autocompleteOptions.debug = debug || autocompleteOptionsDebug;
|
||
this.autocompleteOptions = autocompleteOptions;
|
||
this.autocompleteOptions.cssClasses =
|
||
this.autocompleteOptions.cssClasses || {};
|
||
this.autocompleteOptions.cssClasses.prefix =
|
||
this.autocompleteOptions.cssClasses.prefix || "ds";
|
||
const inputAriaLabel =
|
||
this.input &&
|
||
typeof this.input.attr === "function" &&
|
||
this.input.attr("aria-label");
|
||
this.autocompleteOptions.ariaLabel =
|
||
this.autocompleteOptions.ariaLabel || inputAriaLabel || "search input";
|
||
|
||
this.isSimpleLayout = layout === "simple";
|
||
|
||
this.client = new LunrSearchAdapter(searchDocs, searchIndex);
|
||
|
||
if (enhancedSearchInput) {
|
||
this.input = DocSearch.injectSearchBox(this.input);
|
||
}
|
||
this.autocomplete = autocomplete(this.input, autocompleteOptions, [
|
||
{
|
||
source: this.getAutocompleteSource(transformData, queryHook),
|
||
templates: {
|
||
suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
|
||
footer: templates.footer,
|
||
empty: DocSearch.getEmptyTemplate()
|
||
}
|
||
}
|
||
]);
|
||
|
||
const customHandleSelected = handleSelected;
|
||
this.handleSelected = customHandleSelected || this.handleSelected;
|
||
|
||
// We prevent default link clicking if a custom handleSelected is defined
|
||
if (customHandleSelected) {
|
||
$(".algolia-autocomplete").on("click", ".ds-suggestions a", event => {
|
||
event.preventDefault();
|
||
});
|
||
}
|
||
|
||
this.autocomplete.on(
|
||
"autocomplete:selected",
|
||
this.handleSelected.bind(null, this.autocomplete.autocomplete)
|
||
);
|
||
|
||
this.autocomplete.on(
|
||
"autocomplete:shown",
|
||
this.handleShown.bind(null, this.input)
|
||
);
|
||
|
||
if (enhancedSearchInput) {
|
||
DocSearch.bindSearchBoxEvent();
|
||
}
|
||
}
|
||
|
||
static injectSearchBox(input) {
|
||
input.before(templates.searchBox);
|
||
const newInput = input
|
||
.prev()
|
||
.prev()
|
||
.find("input");
|
||
input.remove();
|
||
return newInput;
|
||
}
|
||
|
||
static bindSearchBoxEvent() {
|
||
$('.searchbox [type="reset"]').on("click", function () {
|
||
$("input#docsearch").focus();
|
||
$(this).addClass("hide");
|
||
autocomplete.autocomplete.setVal("");
|
||
});
|
||
|
||
$("input#docsearch").on("keyup", () => {
|
||
const searchbox = document.querySelector("input#docsearch");
|
||
const reset = document.querySelector('.searchbox [type="reset"]');
|
||
reset.className = "searchbox__reset";
|
||
if (searchbox.value.length === 0) {
|
||
reset.className += " hide";
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Returns the matching input from a CSS selector, null if none matches
|
||
* @function getInputFromSelector
|
||
* @param {string} selector CSS selector that matches the search
|
||
* input of the page
|
||
* @returns {void}
|
||
*/
|
||
static getInputFromSelector(selector) {
|
||
const input = $(selector).filter("input");
|
||
return input.length ? $(input[0]) : null;
|
||
}
|
||
|
||
/**
|
||
* Returns the `source` method to be passed to autocomplete.js. It will query
|
||
* the Algolia index and call the callbacks with the formatted hits.
|
||
* @function getAutocompleteSource
|
||
* @param {function} transformData An optional function to transform the hits
|
||
* @param {function} queryHook An optional function to transform the query
|
||
* @returns {function} Method to be passed as the `source` option of
|
||
* autocomplete
|
||
*/
|
||
getAutocompleteSource(transformData, queryHook) {
|
||
return (query, callback) => {
|
||
if (queryHook) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
query = queryHook(query) || query;
|
||
}
|
||
this.client.search(query).then(hits => {
|
||
if (
|
||
this.queryDataCallback &&
|
||
typeof this.queryDataCallback == "function"
|
||
) {
|
||
this.queryDataCallback(hits);
|
||
}
|
||
if (transformData) {
|
||
hits = transformData(hits) || hits;
|
||
}
|
||
callback(DocSearch.formatHits(hits));
|
||
});
|
||
};
|
||
}
|
||
|
||
// Given a list of hits returned by the API, will reformat them to be used in
|
||
// a Hogan template
|
||
static formatHits(receivedHits) {
|
||
const clonedHits = utils.deepClone(receivedHits);
|
||
const hits = clonedHits.map(hit => {
|
||
if (hit._highlightResult) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
hit._highlightResult = utils.mergeKeyWithParent(
|
||
hit._highlightResult,
|
||
"hierarchy"
|
||
);
|
||
}
|
||
return utils.mergeKeyWithParent(hit, "hierarchy");
|
||
});
|
||
|
||
// Group hits by category / subcategory
|
||
let groupedHits = utils.groupBy(hits, "lvl0");
|
||
$.each(groupedHits, (level, collection) => {
|
||
const groupedHitsByLvl1 = utils.groupBy(collection, "lvl1");
|
||
const flattenedHits = utils.flattenAndFlagFirst(
|
||
groupedHitsByLvl1,
|
||
"isSubCategoryHeader"
|
||
);
|
||
groupedHits[level] = flattenedHits;
|
||
});
|
||
groupedHits = utils.flattenAndFlagFirst(groupedHits, "isCategoryHeader");
|
||
|
||
// Translate hits into smaller objects to be send to the template
|
||
return groupedHits.map(hit => {
|
||
const url = DocSearch.formatURL(hit);
|
||
const category = utils.getHighlightedValue(hit, "lvl0");
|
||
const subcategory = utils.getHighlightedValue(hit, "lvl1") || category;
|
||
const displayTitle = utils
|
||
.compact([
|
||
utils.getHighlightedValue(hit, "lvl2") || subcategory,
|
||
utils.getHighlightedValue(hit, "lvl3"),
|
||
utils.getHighlightedValue(hit, "lvl4"),
|
||
utils.getHighlightedValue(hit, "lvl5"),
|
||
utils.getHighlightedValue(hit, "lvl6")
|
||
])
|
||
.join(
|
||
'<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
|
||
);
|
||
const text = utils.getSnippetedValue(hit, "content");
|
||
const isTextOrSubcategoryNonEmpty =
|
||
(subcategory && subcategory !== "") ||
|
||
(displayTitle && displayTitle !== "");
|
||
const isLvl1EmptyOrDuplicate =
|
||
!subcategory || subcategory === "" || subcategory === category;
|
||
const isLvl2 =
|
||
displayTitle && displayTitle !== "" && displayTitle !== subcategory;
|
||
const isLvl1 =
|
||
!isLvl2 &&
|
||
(subcategory && subcategory !== "" && subcategory !== category);
|
||
const isLvl0 = !isLvl1 && !isLvl2;
|
||
|
||
return {
|
||
isLvl0,
|
||
isLvl1,
|
||
isLvl2,
|
||
isLvl1EmptyOrDuplicate,
|
||
isCategoryHeader: hit.isCategoryHeader,
|
||
isSubCategoryHeader: hit.isSubCategoryHeader,
|
||
isTextOrSubcategoryNonEmpty,
|
||
category,
|
||
subcategory,
|
||
title: displayTitle,
|
||
text,
|
||
url
|
||
};
|
||
});
|
||
}
|
||
|
||
static formatURL(hit) {
|
||
const { url, anchor } = hit;
|
||
if (url) {
|
||
const containsAnchor = url.indexOf("#") !== -1;
|
||
if (containsAnchor) return url;
|
||
else if (anchor) return `${hit.url}#${hit.anchor}`;
|
||
return url;
|
||
} else if (anchor) return `#${hit.anchor}`;
|
||
/* eslint-disable */
|
||
console.warn("no anchor nor url for : ", JSON.stringify(hit));
|
||
/* eslint-enable */
|
||
return null;
|
||
}
|
||
|
||
static getEmptyTemplate() {
|
||
return args => Hogan.compile(templates.empty).render(args);
|
||
}
|
||
|
||
static getSuggestionTemplate(isSimpleLayout) {
|
||
const stringTemplate = isSimpleLayout
|
||
? templates.suggestionSimple
|
||
: templates.suggestion;
|
||
const template = Hogan.compile(stringTemplate);
|
||
return suggestion => template.render(suggestion);
|
||
}
|
||
|
||
handleSelected(input, event, suggestion, datasetNumber, context = {}) {
|
||
// Do nothing if click on the suggestion, as it's already a <a href>, the
|
||
// browser will take care of it. This allow Ctrl-Clicking on results and not
|
||
// having the main window being redirected as well
|
||
if (context.selectionMethod === "click") {
|
||
return;
|
||
}
|
||
|
||
input.setVal("");
|
||
window.location.assign(suggestion.url);
|
||
}
|
||
|
||
handleShown(input) {
|
||
const middleOfInput = input.offset().left + input.width() / 2;
|
||
let middleOfWindow = $(document).width() / 2;
|
||
|
||
if (isNaN(middleOfWindow)) {
|
||
middleOfWindow = 900;
|
||
}
|
||
|
||
const alignClass =
|
||
middleOfInput - middleOfWindow >= 0
|
||
? "algolia-autocomplete-right"
|
||
: "algolia-autocomplete-left";
|
||
const otherAlignClass =
|
||
middleOfInput - middleOfWindow < 0
|
||
? "algolia-autocomplete-right"
|
||
: "algolia-autocomplete-left";
|
||
const autocompleteWrapper = $(".algolia-autocomplete");
|
||
if (!autocompleteWrapper.hasClass(alignClass)) {
|
||
autocompleteWrapper.addClass(alignClass);
|
||
}
|
||
|
||
if (autocompleteWrapper.hasClass(otherAlignClass)) {
|
||
autocompleteWrapper.removeClass(otherAlignClass);
|
||
}
|
||
}
|
||
}
|
||
|
||
export default DocSearch; |