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;
|