« get me outta code hell

client: search input event tweaks - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-04-30 21:46:38 -0300
committer(quasar) nebula <qznebula@protonmail.com>2024-05-31 12:11:46 -0300
commitaafb21374b2ef96b5021fd65cb059fb6a1319c82 (patch)
tree279edfa37700dee34692c3210d983f411fb98e09
parentd01dda56dbd80f2aad9973201c27ed23b23162c3 (diff)
client: search input event tweaks
-rw-r--r--src/static/js/client.js48
1 files changed, 47 insertions, 1 deletions
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 93cbb902..8a1ee021 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3465,6 +3465,14 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
 
   resultsContainer: null,
   results: null,
+
+  state: {
+    stoppedTypingTimeout: null,
+  },
+
+  settings: {
+    stoppedTyingDelay: 800,
+  },
 });
 
 function getSidebarSearchReferences() {
@@ -3506,7 +3514,27 @@ function addSidebarSearchListeners() {
   if (!info.searchInput) return;
 
   info.searchInput.addEventListener('change', domEvent => {
-    activateSidebarSearch(info.searchInput.value);
+    if (info.searchInput.value) {
+      activateSidebarSearch(info.searchInput.value);
+    }
+  });
+
+  info.searchInput.addEventListener('input', domEvent => {
+    const {settings, state} = info;
+
+    if (!info.searchInput.value) {
+      clearSidebarSearch();
+      return;
+    }
+
+    if (state.stoppedTypingTimeout) {
+      clearTimeout(state.stoppedTypingTimeout);
+    }
+
+    state.stoppedTypingTimeout =
+      setTimeout(() => {
+        activateSidebarSearch(info.searchInput.value);
+      }, settings.stoppedTyingDelay);
   });
 }
 
@@ -3514,6 +3542,14 @@ function activateSidebarSearch(query) {
   showSidebarSearchResults(searchAll(query, {enrich: true}));
 }
 
+function clearSidebarSearch() {
+  const info = sidebarSearchInfo;
+
+  info.searchInput.value = '';
+
+  hideSidebarSearchResults();
+}
+
 function showSidebarSearchResults(results) {
   const info = sidebarSearchInfo;
 
@@ -3596,6 +3632,16 @@ function showSidebarSearchResults(results) {
   }
 }
 
+function hideSidebarSearchResults() {
+  const info = sidebarSearchInfo;
+
+  cssProp(info.resultsContainer, 'display', 'none');
+
+  while (info.results.firstChild) {
+    info.results.firstChild.remove();
+  }
+}
+
 clientSteps.getPageReferences.push(getSidebarSearchReferences);
 clientSteps.mutatePageContent.push(mutateSidebarSearchContent);
 clientSteps.addPageListeners.push(addSidebarSearchListeners);