From 947744caea679c39ddb17374a1a9673e01b45c19 Mon Sep 17 00:00:00 2001
From: Nikhil Tanwar <2002nikhiltanwar@gmail.com>
Date: Wed, 22 Jun 2022 13:46:30 +0530
Subject: [PATCH] Introduce updateVisibleParams()

Adds a function to wrap logic to update select boxes on history change
---
 static/skin/index.js | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/static/skin/index.js b/static/skin/index.js
index 15cc0b16..08a8dcce 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -358,19 +358,13 @@
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
             setCookie(filterCookieName, params.toString());
         }
-        document.querySelectorAll('.filter').forEach(filter => {
-            if (filter.value) {
-                filter.style = 'background-color: #858585; color: #fff';
-            } else {
-                filter.style = 'background-color: #ffffff; color: black';
-            }
-        });
+        updateFilterColors();
         await loadAndDisplayBooks(true);
     }
 
     window.addEventListener('popstate', async () => {
         await resetAndFilter();
-        document.querySelectorAll('.filter').forEach(filter => {filter.value = params.get(filter.name) || ''});
+        updateVisibleParams();
     });
 
     async function loadSubset() {
@@ -384,6 +378,21 @@
         }
     }
 
+    function updateFilterColors() {
+        document.querySelectorAll('.filter').forEach(filter => {
+            if (filter.value) {
+                filter.style = 'background-color: #858585; color: #fff';
+            } else {
+                filter.style = 'background-color: #ffffff; color: black';
+            }
+        });
+    }
+
+    function updateVisibleParams() {
+        document.querySelectorAll('.filter').forEach(filter => {filter.value = params.get(filter.name) || ''});
+        updateFilterColors();
+    }
+
     window.addEventListener('resize', (event) => {
         if (timer) {clearTimeout(timer)}
         timer = setTimeout(() => {
@@ -422,12 +431,7 @@
         if (filters) {
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
         }
-        params.forEach((value, key) => {
-            const selectBox = document.getElementsByName(key)[0];
-            if (selectBox) {
-                selectBox.value = value
-            }
-        });
+        updateVisibleParams();
         document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
         if (!window.location.search) {
             const browserLang = navigator.language.split('-')[0];
@@ -438,13 +442,7 @@
                 langFilter.dispatchEvent(new Event('change'));
             }
         }
-        document.querySelectorAll('.filter').forEach(filter => {
-            if (filter.value) {
-                filter.style = 'background-color: #858585; color: #fff';
-            } else {
-                filter.style = 'background-color: #ffffff; color: black';
-            }
-        });
         setCookie(filterCookieName, params.toString());
     }
 })();
+