Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-06-15 04:52:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

🔀 Merge pull request #1025 from pitermarx/dev

Browse Source 
Added spinner for long searches
This commit is contained in:
James Panther
2025-06-22 14:22:45 +10:00
committed by GitHub
parent 99d5cf8b28 dcd07673a0
commit 5fa4fb1a42
1 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/search.js
+68 -12
View File
@@ -65,11 +65,71 @@ document.addEventListener("keydown", function (event) {
} }
}); });
// Update search on each keypress
input.onkeyup = function (event) { input.onkeyup = function (event) {
executeQuery(this.value); // queue an update after each keypress. the last one after some idle time wins
let isFirstRun = throttle(() => executeQuery(this.value));
// on first run, show a spinner
if (isFirstRun) {
output.innerHTML = `<li class="mb-2">
<a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="#" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="3" r="1" fill="white">
<animate id="spnDot0" attributeName="r" begin="0;spnDot2.end-0.5s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="16.5" cy="4.21" r="1" fill="white">
<animate id="spnDot1" attributeName="r" begin="spnDot0.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="7.5" cy="4.21" r="1" fill="white">
<animate id="spnDot2" attributeName="r" begin="spnDot4.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="19.79" cy="7.5" r="1" fill="white">
<animate id="spnDot3" attributeName="r" begin="spnDot1.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="4.21" cy="7.5" r="1" fill="white">
<animate id="spnDot4" attributeName="r" begin="spnDot6.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="21" cy="12" r="1" fill="white">
<animate id="spnDot5" attributeName="r" begin="spnDot3.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="3" cy="12" r="1" fill="white">
<animate id="spnDot6" attributeName="r" begin="spnDot8.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="19.79" cy="16.5" r="1" fill="white">
<animate id="spnDot7" attributeName="r" begin="spnDot5.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="4.21" cy="16.5" r="1" fill="white">
<animate id="spnDot8" attributeName="r" begin="spnDota.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="16.5" cy="19.79" r="1" fill="white">
<animate id="spnDot9" attributeName="r" begin="spnDot7.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="7.5" cy="19.79" r="1" fill="white">
<animate id="spnDota" attributeName="r" begin="spnDotb.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<circle cx="12" cy="21" r="1" fill="white">
<animate id="spnDotb" attributeName="r" begin="spnDot9.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/>
</circle>
<animateTransform attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="360 12 12;0 12 12"/>
</g>
</svg>
</a>
</li>`;
}
}; };
function throttle(func, time = 750) {
let isFirstRun = throttle.timeout === undefined
if (!isFirstRun) {
clearTimeout(throttle.timeout)
}
throttle.timeout = setTimeout(() => {
func()
throttle.timeout = undefined
}, time)
return isFirstRun
}
function displaySearch() { function displaySearch() {
if (!indexed) { if (!indexed) {
buildIndex(); buildIndex();
@@ -130,12 +190,12 @@ function buildIndex() {
function executeQuery(term) { function executeQuery(term) {
let results = fuse.search(term); let results = fuse.search(term);
let resultsHTML = ""; hasResults = results.length > 0;
if (results.length > 0) { if (results.length > 0) {
// prettier-ignore // prettier-ignore
resultsHTML = results.map(function (value, key) { output.innerHTML = results.map(function (value) {
return `<li class="mb-2"> return `<li class="mb-2">
<a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0"> <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
<div class="grow"> <div class="grow">
<div class="-mb-1 text-lg font-bold">${value.item.title}</div> <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
@@ -147,15 +207,11 @@ function executeQuery(term) {
</a> </a>
</li>`; </li>`;
}).join(""); }).join("");
hasResults = true;
} else {
resultsHTML = "";
hasResults = false;
}
output.innerHTML = resultsHTML;
if (results.length > 0) {
first = output.firstChild.firstElementChild; first = output.firstChild.firstElementChild;
last = output.lastChild.firstElementChild; last = output.lastChild.firstElementChild;
} }
else {
output.innerHTML = ""
}
} }