window.addEventListener("DOMContentLoaded", () => { const searchToggleEl = document.querySelectorAll(".search-toggle"); const searchModalEl = document.getElementById("search"); const root = document.documentElement; // Get the current doc platform const activePlatform = document .getElementsByTagName("meta") ["docsearch:platform"].getAttribute("content"); // SVG Icons const icons = { h1: ` `, h2: ` `, h3: ` `, content: ` `, noResult: ` `, chevron: ` `, }; // Template for empty search results function noResultTemplate(query) { return `
${icons.noResult}
No results have been found for ${query}.
Please rephrase your query!
`; } // Detect macOS function isMac() { return navigator.platform.toUpperCase().indexOf("MAC") >= 0; } // Algolia credintials const algoliaClient = algoliasearch( "E1CSOK3UC2", "6bc246d81fd3b79f51cf88f0b2481bac" ); // By default, Instantsearch will display the latest hits even without a query. // As per our design, we don't need this behaviour. // So, use promise to conditionally render the search results. const searchClient = { ...algoliaClient, search(requests) { if (requests.every(({ params }) => !params.query)) { return Promise.resolve({ results: requests.map(() => ({ hits: [], nbHits: 0, nbPages: 0, page: 0, processingTimeMS: 0, hitsPerPage: 0, exhaustiveNbHits: false, query: "", params: "", })), }); } return algoliaClient.search(requests); }, }; // Init Instantsearch const search = instantsearch({ indexName: "minio", searchClient, initialUiState: { minio: { refinementList: { platform: [activePlatform], }, }, }, }); // Add Instanstsearch widgets search.addWidgets([ instantsearch.widgets.searchBox({ container: "#search-box", autofocus: true, showReset: false, showSubmit: false, placeholder: "Search Documentation", cssClasses: { input: "search__input", reset: "search__reset", form: "search__form", loadingIndicator: "search__loading", }, queryHook(query, search) { if (query !== "") { // Make search modal active searchModalEl.classList.add("search--focused"); // Clear the filters and select the active platform setTimeout(() => { const activeFilterEl = document.querySelector( ".search__filters__checkbox[value='" + activePlatform + "']" ); if (activeFilterEl && !activeFilterEl.checked) { activeFilterEl.click(); } }, 50); } else { // Clear the filters clearRefinements(); } // Clear the filters on x click document .querySelector(".search__reset") .addEventListener("click", () => { clearRefinements("btn"); }); // Fire the search search(query); }, }), instantsearch.widgets.poweredBy({ container: "#search-powered-by", cssClasses: { link: "search__powered-by", }, }), instantsearch.widgets.refinementList({ container: "#search-filters", attribute: "platform", cssClasses: { root: "search__filters", noRefinementRoot: "search__filters--empty", list: "search__filters__list", labelText: "search__filters__label", checkbox: "search__filters__checkbox", count: "search__filters__count", }, }), instantsearch.widgets.clearRefinements({ container: "#search-clear", cssClasses: { button: "search-clear__btn", }, }), instantsearch.widgets.hits({ container: "#search-results", cssClasses: { root: "search__hits", emptyRoot: "search__hits--empty", list: "search__hits__list", item: "search__hits__item", }, templates: { empty: function (data) { return data.query !== "" ? noResultTemplate(data.query) : ""; }, item: function (data) { var returnString; var docUrl; var refinedLenth = search.renderState.minio.refinementList.platform.items.filter( (x) => x.isRefined ).length; if (refinedLenth !== 1) { searchModalEl.classList.add("search--show-platform"); } else { searchModalEl.classList.remove("search--show-platform"); } // If the query is a full-match of a lvl1 title, // display only the h1. if ( data.hierarchy.lvl1 && data._highlightResult.hierarchy.lvl1.matchLevel === "full" ) { docUrl = data.url_without_anchor; returnString = ` ${icons.h1}
${data._highlightResult.hierarchy.lvl1.value}
${data.platform}
`; } // If the query is a full-match of a lvl2 title, // display h2 as the title and h1 as the sub-text. else if ( data.hierarchy.lvl2 && data._highlightResult.hierarchy.lvl2.matchLevel === "full" ) { docUrl = data.url; returnString = ` ${icons.h2}
${data._highlightResult.hierarchy.lvl2.value}
${data.platform}
${data.hierarchy.lvl1}
`; } // If the query is a full-match of a lvl3 title, // display h3 as the title and h1, h2 as the sub-text. else if ( data.hierarchy.lvl3 && data._highlightResult.hierarchy.lvl3.matchLevel === "full" ) { docUrl = data.url; returnString = ` ${icons.h3}
${data._highlightResult.hierarchy.lvl3.value}
${data.platform}
${data.hierarchy.lvl1}
`; } // If the query is a full-match of any content, // display the content as the title and h1, h2? and h3? as the sub-text. else if ( data.hierarchy.lvl1 && data._snippetResult && data._snippetResult.content.matchLevel !== "none" ) { docUrl = data.url; returnString = ` ${icons.content}
${ data._snippetResult.content.value }
${data.platform}
${data.hierarchy.lvl1} ${ data.hierarchy.lvl2 ? `${icons.chevron}` + `${data.hierarchy.lvl2}` : "" } ${ data.hierarchy.lvl3 ? `${icons.chevron}` + `${data.hierarchy.lvl3}` : "" }
`; } else { return false; } return ` ${returnString} `; }, }, }), ]); // Function to clear search field and filters function clearRefinements(trigger) { const filtersClearEl = document.querySelector( "#search-clear .search-clear__btn" ); filtersClearEl?.click(); const removeClasses = function () { root.classList.remove("locked"); searchModalEl.classList.remove("search--active", "search--focused"); }; if (trigger === "btn") { removeClasses(); } else { if (!root.classList.contains("read-mode")) { removeClasses(); } } } // Function to close and reset the search modal function closeSearchModal() { const searchResetEl = document.querySelector(".search__reset"); setTimeout(() => { searchResetEl.click(); }); } // Toggle search modal on read-mode and mobile // on search icon click. searchToggleEl.forEach((item) => { item.addEventListener("click", (e) => { e.preventDefault(); root.classList.add("locked"); searchModalEl.classList.add("search--active"); setTimeout(() => { const instaSearchInputEl = document.querySelector(".search__input"); instaSearchInputEl.focus(); }); }); }); // Keyboard events document.addEventListener( "keydown", (e) => { // Close the search on esc key press if (e.key === "Escape") { closeSearchModal(); } // Focus the search input on "Meta + K" key press const searchInputEl = document.querySelector(".search__input"); var metaKey = isMac() ? e.metaKey : e.ctrlKey; if (metaKey && e.key === "k") { if (root.classList.contains("read-mode")) { searchModalEl.classList.add("search--active"); searchInputEl.focus(); } searchInputEl.focus(); window.scrollTo(0, 0); } }, false ); // Start the search search.start(); // -------------------------------------------------- // Trigger search on keyboard shortcut // meta + k // -------------------------------------------------- const searchEl = document.getElementById("search-box"); const searchToggleBtnEl = document.querySelector(".search-toggle--keyboard"); if (searchEl) { var metaKey = isMac() ? "⌘K" : "Ctrl+K"; [searchEl, searchToggleBtnEl].forEach((item) => { item.insertAdjacentHTML("beforeend", `${metaKey}`); }); } });