Merge branch 'development' of https://github.com/ubiquity/work.ubq.fi …

…into development
ubiquity · Oct 26, 2024 · ba0d259 · ba0d259
2 parents d1698a6 + d76acb1
commit ba0d259
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 39 deletions.
diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -9,6 +9,7 @@ export class SortingManager {
   private _filterTextBox: HTMLInputElement;
   private _sortingButtons: HTMLElement;
   private _instanceId: string;
+  private _sortingState: { [key: string]: "unsorted" | "ascending" | "descending" } = {}; // Track state for each sorting option
 
   constructor(filtersId: string, sortingOptions: readonly string[], instanceId: string) {
     const filters = document.getElementById(filtersId);
@@ -17,6 +18,11 @@ export class SortingManager {
     this._instanceId = instanceId;
     this._filterTextBox = this._generateFilterTextBox();
     this._sortingButtons = this._generateSortingButtons(sortingOptions);
+
+    // Initialize sorting states to 'unsorted' for all options
+    sortingOptions.forEach((option) => {
+      this._sortingState[option] = "unsorted";
+    });
   }
 
   public render() {
@@ -65,27 +71,22 @@ export class SortingManager {
       }
     };
 
-    // Observer to detect when children are added to the issues container
+    // Observer to detect when children are added to the issues container (only once)
     const observer = new MutationObserver(() => {
       if (issuesContainer.children.length > 0) {
         observer.disconnect(); // Stop observing once children are present
         if (searchQuery) filterIssues(); // Filter on load if search query exists
       }
     });
-
-    // Start observing the issues container for child elements
     observer.observe(issuesContainer, { childList: true });
 
-    // Add event listener for input changes to filter and update URL
     textBox.addEventListener("input", () => {
       const filterText = textBox.value;
       // Update the URL with the search parameter
       const newURL = new URL(window.location.href);
       newURL.searchParams.set("search", filterText);
       window.history.replaceState({}, "", newURL.toString());
-
-      // Filter the issues based on the input
-      filterIssues();
+      filterIssues(); // Run the filter function immediately on input
     });
 
     return textBox;
@@ -131,31 +132,50 @@ export class SortingManager {
   }
 
   private _handleSortingClick(input: HTMLInputElement, option: string) {
-    const ordering = input === this._lastChecked ? "reverse" : "normal";
-    input.checked = input !== this._lastChecked;
-    input.setAttribute("data-ordering", ordering);
-    this._lastChecked = input.checked ? input : null;
-    this._filterTextBox.value = "";
+    const currentOrdering = input.getAttribute("data-ordering");
+    let newOrdering: string;
+
+    // Determine the new ordering based on the current state
+    if (currentOrdering === "normal") {
+      newOrdering = "reverse";
+    } else if (currentOrdering === "reverse") {
+      newOrdering = "disabled";
+    } else {
+      newOrdering = "normal";
+    }
+
+    // Apply the new ordering state
+    input.setAttribute("data-ordering", newOrdering);
     input.parentElement?.childNodes.forEach((node) => {
       if (node instanceof HTMLInputElement) {
         node.setAttribute("data-ordering", "");
       }
     });
 
-    input.setAttribute("data-ordering", ordering);
-    // instantly load from cache
+    if (newOrdering === "disabled") {
+      this._lastChecked = null;
+      input.checked = false;
+      this._clearSorting();
+    } else {
+      input.checked = input !== this._lastChecked;
+      this._lastChecked = input.checked ? input : null;
+      input.setAttribute("data-ordering", newOrdering);
+
+      // Apply the sorting based on the new state (normal or reverse)
+      try {
+        void displayGitHubIssues(option as Sorting, { ordering: newOrdering });
+      } catch (error) {
+        renderErrorCatch(error as ErrorEvent);
+      }
+    }
+  }
+
+  private _clearSorting() {
     try {
-      void displayGitHubIssues(option as Sorting, { ordering });
+      void displayGitHubIssues();
     } catch (error) {
-      renderErrorCatch(error as ErrorEvent);
+      renderErrorInModal(error as Error);
     }
-    // load from network in the background
-    // const fetchedPreviews = await fetchIssuePreviews();
-    // const cachedTasks = taskManager.getTasks();
-    // const updatedCachedIssues = verifyGitHubIssueState(cachedTasks, fetchedPreviews);
-    // displayGitHubIssues(sorting, options);
-    // taskManager.syncTasks(updatedCachedIssues);
-    // return fetchAvatars();
   }
 }
 

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -113,7 +113,7 @@
     transition: 125ms opacity ease-out 62.5ms;
   }
   #issues-container:hover .issue-element-inner {
-    opacity: 0.5;
+    opacity: 1;
   }
   #issues-container.keyboard-selection:hover .issue-element-inner {
     opacity: 1;
@@ -153,18 +153,25 @@
   #issues-container.keyboard-selection > div.active {
     opacity: 0.33;
   }
-  #issues-container.keyboard-selection > div.active.selected {
-    opacity: 1;
-  }
+
+  @media (hover: hover) {
+    #issues-container.keyboard-selection > div.active.selected {
+      opacity: 1;
+    }
+    #issues-container > div:hover {
+      opacity: 1;
+      transition: background-color 0s;
+    }
+    #issues-container:hover .issue-element-inner {
+      opacity: 0.5;
+    }
+  } 
+
   #issues-container > div.active {
     transition: 125ms all ease-in-out;
     opacity: 1;
     filter: blur(0);
   }
-  #issues-container > div:hover {
-    opacity: 1;
-    transition: background-color 0s;
-  }
   #issues-container > div:hover .info {
     opacity: 1;
   }

diff --git a/static/style/style.css b/static/style/style.css
@@ -113,7 +113,7 @@
     transition: 125ms opacity ease-out 62.5ms;
   }
   #issues-container:hover .issue-element-inner {
-    opacity: 0.5;
+    opacity: 1;
   }
   #issues-container.keyboard-selection:hover .issue-element-inner {
     opacity: 1;
@@ -153,18 +153,25 @@
   #issues-container.keyboard-selection > div.active {
     opacity: 0.33;
   }
-  #issues-container.keyboard-selection > div.active.selected {
-    opacity: 1;
-  }
+
+  @media (hover: hover) {
+    #issues-container.keyboard-selection > div.active.selected {
+      opacity: 1;
+    }
+    #issues-container > div:hover {
+      opacity: 1;
+      transition: background-color 0s;
+    }
+    #issues-container:hover .issue-element-inner {
+      opacity: 0.5;
+    }
+  } 
+
   #issues-container > div.active {
     transition: 125ms all ease-in-out;
     opacity: 1;
     filter: blur(0);
   }
-  #issues-container > div:hover {
-    opacity: 1;
-    transition: background-color 0s;
-  }
   #issues-container > div:hover .info {
     opacity: 1;
   }