minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-30 07:03:26 +03:00
Code Activity

Search UX enhancements (#629)

Browse Source 
- Fix the visibility of search popup on read-mode (Prakash's comment)
- Add keyboard shortcut indicator on the read-mode search icon
<img width="254" alt="Screenshot 2022-11-04 at 17 39 05"
src="https://user-images.githubusercontent.com/13393018/199986826-e5e4ffe7-218f-4850-a0bf-867c1beb08b7.png">
This commit is contained in:
Rushan
2022-11-07 21:00:28 +04:00
committed by GitHub
parent 46ef64ed2d
commit ceefee34fe
5 changed files with 101 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
source/_static/js/instantSearch.js
View File

@ -30,6 +30,15 @@ window.addEventListener("DOMContentLoaded", () => {
</svg>`,
};
// Template for empty search results
function noResultTemplate(query) {
return `<div class="search__empty">
${icons.noResult}</br>
No results have been found for <span>${query}</span>.</br>
Please rephrase your query!
</div>`;
}
// Detect macOS
function isMac() {
return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
@ -101,24 +110,25 @@ window.addEventListener("DOMContentLoaded", () => {
// Clear the filters and select the active platform
setTimeout(() => {
const activeFilterEl = document.querySelector(".search__filters__checkbox[value='" + activePlatform + "']");
const activeFilterEl = document.querySelector(
".search__filters__checkbox[value='" + activePlatform + "']"
);
if (activeFilterEl && !activeFilterEl.checked) {
activeFilterEl.click();
}
}, 50);
} else {
// Make search modal inactive
searchModalEl.classList.remove("search--focused");
// Clear the filters
clearRefinements();
}
// Clear the filters on x click
document.querySelector(".search__reset").addEventListener("click", () => {
clearRefinements();
});
document
.querySelector(".search__reset")
.addEventListener("click", () => {
clearRefinements("btn");
});
// Fire the search
search(query);
@ -157,11 +167,9 @@ window.addEventListener("DOMContentLoaded", () => {
item: "search__hits__item",
},
templates: {
empty: `<div>
${icons.noResult}</br>
No results have been found for <span>{{ query }}</span>.</br>
Please rephrase your query!
</div>`,
empty: function (data) {
return data.query !== "" ? noResultTemplate(data.query) : "";
},
item: function (data) {
var returnString;
var docUrl;
@ -272,18 +280,30 @@ window.addEventListener("DOMContentLoaded", () => {
]);
// Function to clear search field and filters
function clearRefinements() {
const filtersClearEl = document.querySelector("#search-clear .search-clear__btn");
function clearRefinements(trigger) {
const filtersClearEl = document.querySelector(
"#search-clear .search-clear__btn"
);
filtersClearEl?.click();
root.classList.remove("locked");
searchModalEl.classList.remove("search--active", "search--focused");
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();
});
@ -338,19 +358,13 @@ window.addEventListener("DOMContentLoaded", () => {
// meta + k
// --------------------------------------------------
const searchEl = document.getElementById("search-box");
const searchToggleBtnEl = document.querySelector(".search-toggle--keyboard");
if (searchEl) {
const metaKeyEl = document.createElement("i");
metaKeyEl.classList.add("search__meta-key");
var metaKey = isMac() ? "⌘K" : "Ctrl+K";
if (isMac) {
metaKeyEl.classList.add("macos");
metaKeyEl.innerHTML = "⌘K";
} else {
metaKeyEl.classList.add("non-macos");
metaKeyEl.innerHTML = "Ctrl K";
}
searchEl.appendChild(metaKeyEl);
[searchEl, searchToggleBtnEl].forEach((item) => {
item.insertAdjacentHTML("beforeend", `<i class="search-meta-key">${metaKey}</i>`);
});
}
});