Merge branch 'feat/keyword-search' into development

ubiquity · Jan 18, 2024 · e7d55d3 · e7d55d3
2 parents deac66b + c316ae5
commit e7d55d3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 10 deletions.
diff --git a/src/home/rendering/setup-keyboard-navigation.ts b/src/home/rendering/setup-keyboard-navigation.ts
@@ -16,6 +16,17 @@ export function setupKeyboardNavigation(container: HTMLDivElement) {
     container.addEventListener("mouseover", () => disableKeyBoardNavigationCurried);
     isMouseOverListenerAdded = true;
   }
+
+  const filterTextbox = document.getElementById("filter") as HTMLInputElement;
+  filterTextbox.addEventListener("input", () => {
+    const filterText = filterTextbox.value.toLowerCase();
+    const issues = Array.from(container.children) as HTMLDivElement[];
+    issues.forEach((issue) => {
+      const issueText = issue.textContent?.toLowerCase() || "";
+      const isVisible = issueText.includes(filterText);
+      issue.style.display = isVisible ? "block" : "none";
+    });
+  });
 }
 
 function disableKeyboardNavigationCurry() {
@@ -31,37 +42,36 @@ function keyDownHandler() {
   const container = document.getElementById("issues-container") as HTMLDivElement;
   return function keyDownHandler(event: KeyboardEvent) {
     if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-      const issues = Array.from(container.children);
-      const activeIndex = issues.findIndex((issue) => issue.classList.contains("selected"));
+      const issues = Array.from(container.children) as HTMLElement[];
+      const visibleIssues = issues.filter((issue) => issue.style.display !== "none");
+      const activeIndex = visibleIssues.findIndex((issue) => issue.classList.contains("selected"));
       const originalIndex = activeIndex === -1 ? -1 : activeIndex;
       let newIndex = originalIndex;
 
       if (event.key === "ArrowUp" && originalIndex > 0) {
         newIndex = originalIndex - 1;
         event.preventDefault();
-      } else if (event.key === "ArrowDown" && originalIndex < issues.length - 1) {
+      } else if (event.key === "ArrowDown" && originalIndex < visibleIssues.length - 1) {
         newIndex = originalIndex + 1;
         event.preventDefault();
       }
 
       if (newIndex !== originalIndex) {
-        // issues[originalIndex]?.classList.remove("selected");
-
-        issues.forEach((issue) => {
+        visibleIssues.forEach((issue) => {
           issue.classList.remove("selected");
         });
 
-        issues[newIndex]?.classList.add("selected");
-        issues[newIndex].scrollIntoView({
+        visibleIssues[newIndex]?.classList.add("selected");
+        visibleIssues[newIndex].scrollIntoView({
           behavior: "smooth",
           block: "center",
         });
 
         container.classList.add("keyboard-selection");
 
-        const previewId = issues[newIndex].children[0].getAttribute("data-preview-id");
+        const previewId = visibleIssues[newIndex].children[0].getAttribute("data-preview-id");
 
-        const issueElement = issues.find((issue) => issue.children[0].getAttribute("data-preview-id") === previewId);
+        const issueElement = visibleIssues.find((issue) => issue.children[0].getAttribute("data-preview-id") === previewId);
 
         if (issueElement) {
           const issueFull = previewToFullMapping.get(Number(previewId));

diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -9,6 +9,15 @@ export class SortingManager {
     const filters = document.getElementById(filtersId);
     if (!filters) throw new Error(`${filtersId} not found`);
     this._filters = filters;
+    this.generateFilterTextbox();
+  }
+
+  public generateFilterTextbox() {
+    const textBox = document.createElement("input");
+    textBox.type = "text";
+    textBox.id = "filter";
+    textBox.placeholder = "Filter by text";
+    this._filters.insertBefore(textBox, this._filters.firstChild);
   }
 
   public generateSortingButtons(sortingOptions: readonly string[]) {

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -585,4 +585,19 @@
     font-size: 16px;
     line-height: 1.25;
   }
+
+  #filters input[type="text"] {
+    margin: 0 4px;
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    background-color: #7f7f7f20;
+    width: 100%;
+    height: 16px;
+    text-align: center;
+  }
+  #filters input[type="text"]::placeholder {
+    font-size: 12px;
+    letter-spacing: 0.5px;
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -585,4 +585,19 @@
     font-size: 16px;
     line-height: 1.25;
   }
+
+  #filters input[type="text"] {
+    margin: 0 4px;
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    background-color: #80808020;
+    width: 100%;
+    height: 16px;
+    text-align: center;
+  }
+  #filters input[type="text"]::placeholder {
+    font-size: 12px;
+    letter-spacing: 0.5px;
+  }
 }