add settings to url

Author: Efnilite

src/components/docs/DocsFilters.astro

@@ -14,6 +14,7 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
 ---
 
 <script>
+
     enum _DocType {
         TYPE = "Type",
         CONDITION = "Condition",
@@ -36,52 +37,134 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
         "Structures": _DocType.STRUCTURE
     }
 
-    function toggle<T>(array: Array<T>, value: T) {
-        const index = array.indexOf(value);
-
-        if (index === -1) {
-            array.push(value);
-        } else {
-            array.splice(index, 1);
-        }
-    }
-
+    /**
+     * The things to filter on.
+     */
     export interface Filter {
         types: string[];
         supported: string;
         changed: string;
     }
 
+    /**
+     * The current filter settings.
+     */
     let filter: Filter = {
         types: [], 
         supported: "",
         changed: "",
     };
 
+    /**
+     * Deletes a query parameter from the URL.
+     * @param key The key of the query parameter to delete.
+     */
+    function deleteParams(key: string) {
+        const params = new URLSearchParams(window.location.search);
+        params.delete(key);
+
+        // if params is empty, remove ?
+        if (params.toString() === "") {
+            window.history.pushState({}, '', window.location.pathname);
+            return;
+        }
+
+        const newUrl = window.location.pathname + '?' + params.toString();
+        window.history.pushState({}, '', newUrl);
+    }
+
+    /**
+     * Adds a query parameter to the URL.
+     * @param key The key of the query parameter to add.
+     * @param value The value of the query parameter to add.
+     */
+    function addParams(key: string, value: string) {
+        const params = new URLSearchParams(window.location.search);
+        params.set(key, value);
+        const newUrl = window.location.pathname + '?' + params.toString();
+        window.history.pushState({}, '', newUrl);
+    }
+
+    /**
+     * Clears all query parameters from the URL.
+     */
+    function clearParams() {
+        window.history.pushState({}, '', window.location.pathname);
+    }
+
+    /**
+     * Applies the current filters found in the URL to the filter object.
+     */
+    function applyParams() {
+        const params = new URLSearchParams(window.location.search);
+
+        let types = params.get("types");
+        if (types === null) {
+            filter.types = [];
+        } else {
+            filter.types = decodeURIComponent(types).split(",") || [];
+        }
+        filter.supported = decodeURIComponent(params.get("supported") || "");
+        filter.changed = decodeURIComponent(params.get("changed") || "");        
+    }
+
+    function toggle(array: Array<string>, value: string) {
+        const index = array.indexOf(value);
+
+        if (index === -1) {
+            array.push(value);
+        } else {
+            array.splice(index, 1);
+        }
+    }
+
+    /**
+     * Handles a click event on a filter button.
+     * @param button The button element that was clicked.
+     */
     function handleClick(button: HTMLButtonElement) {
         const text = button.textContent!!.trim();
         const attribute = button.getAttribute("data-type")!!;
 
+        // update filter variable
         switch (attribute) {
             case "type":
                 toggle(filter.types, text);
+
+                if (filter.types.length === 0) {
+                    deleteParams("types");
+                } else {
+                    addParams("types", encodeURIComponent(filter.types.join(",")));
+                }
                 break;
             case "supported":
                 if (text === filter.supported) {
                     filter.supported = "";
                     filter.changed = "";
+    
+                    deleteParams("supported");
+                    deleteParams("changed");
                 } else {
                     filter.supported = text;
                     filter.changed = "";
+
+                    addParams("supported", encodeURIComponent(text));
+                    deleteParams("changed");
                 }
                 break;
             case "changed":
                 if (text === filter.changed) {
                     filter.changed = "";
                     filter.supported = "";
+    
+                    deleteParams("supported");
+                    deleteParams("changed");
                 } else {
                     filter.changed = text;
                     filter.supported = "";
+
+                    deleteParams("supported");
+                    addParams("changed", encodeURIComponent(text));
                 }
                 break;
             default:
@@ -178,6 +261,9 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
         });
     }
 
+    /**
+     * Reset all filter buttons to their default state.
+     */
     function resetButtons() {
         const buttons = document.querySelectorAll("#filters .filter-button");
         buttons.forEach(button => {
@@ -187,14 +273,6 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
         });
     }
 
-    document.addEventListener("DOMContentLoaded", () => {
-        const buttons = document.querySelectorAll("#filters .filter-button");
-        buttons.forEach(button => {
-            button.addEventListener("click", () => handleClick(button as HTMLButtonElement));
-        });
-        resetButtons();
-    });
-
     const expand = document.getElementById("filter-expand-button")!!;
     const expandIcon = document.getElementById("filter-expand-icon")!!;
     const filterElements = document.getElementById("filter-expand-area")!!;
@@ -204,6 +282,7 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
         filterElements.classList.toggle("flex");
         expandIcon.querySelector("svg")!!.classList.toggle("rotate-90");
         resetButtons();
+        clearParams();
     });
 
     expand.addEventListener("click", () => {
@@ -216,6 +295,8 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
         expand.click();
     }
 
+    // === POSITIONS ===
+
     const filters = document.getElementById("filters")!!;
     function updatePosition() {
         // Update position of filters to be below the nav bar,
@@ -224,13 +305,28 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
     }
 
     updatePosition();
+
     window.addEventListener("DOMContentLoaded", () => {
         updatePosition();
         filters.classList.remove("fixed"); // fix layout shift on load
         filters.classList.add("sticky"); // fix layout shift on load
     });
 
     window.addEventListener("resize", updatePosition);
+
+    // === ON LOAD ===
+
+    window.addEventListener("DOMContentLoaded", () => {
+        applyParams();
+        
+        const buttons = document.querySelectorAll("#filters .filter-button");
+        buttons.forEach(button => {
+            button.addEventListener("click", () => handleClick(button as HTMLButtonElement));
+        });
+
+        (buttons[0] as HTMLButtonElement).click();
+        (buttons[0] as HTMLButtonElement).click();
+    });
 </script>
 
 <div id="filters" class="fixed right-0 top-[35px] sm:top-[118px]