Use fragment value instead of search query for filters

The filters are now taken from window.location.hash (instead of window.location.search).
This change will help in caching of the page better.

static/skin/i18n/en.json

@@ -28,7 +28,7 @@
 	, "random-page-button-text": "Go to a randomly selected page"
 	, "searchbox-tooltip": "Search '{{BOOK_TITLE}}'"
 	, "confusion-of-tongues": "Two or more books in different languages would participate in search, which may lead to confusing results."
-	, "welcome-page-overzealous-filter": "No result. Would you like to <a href=\"?lang=\">reset filter</a>?"
+	, "welcome-page-overzealous-filter": "No result. Would you like to <a href=\"#lang=\">reset filter</a>?"
 	, "powered-by-kiwix-html": "Powered by&nbsp;<a href=\"https://kiwix.org\">Kiwix</a>"
 	, "search": "Search"
 	, "book-filtering-all-categories": "All categories"

static/skin/index.js

@@ -1,4 +1,12 @@
 (function() {
+    class FragmentParams extends URLSearchParams {
+        constructor(fragment = '') {
+            if (fragment[0] == '#')
+                fragment = fragment.substring(1);
+            super(fragment);
+        }
+    }
+
     const root = document.querySelector(`link[type='root']`).getAttribute('href');
     const incrementalLoadingParams = {
         start: 0,
@@ -14,18 +22,18 @@
     let isFetching = false;
     let noResultInjected = false;
     let filters = getCookie(filterCookieName);
-    let params = new URLSearchParams(window.location.search || filters || '');
+    let params = new FragmentParams(window.location.hash || filters || '');
     params.delete('userlang');
     let timer;
     let languages = {};
     let previousScrollTop = Infinity;
 
     function updateFeedLink() {
-        const inputParams = new URLSearchParams(window.location.search);
+        const inputParams = new FragmentParams(window.location.hash);
-        const filteredParams = new URLSearchParams();
+        const filteredParams = new FragmentParams();
         for (const [key, value] of inputParams) {
             if ( value != '' ) {
-                filteredParams.append(key, value);
+                filteredParams.set(key, value);
             }
         }
         const feedLink = `${root}/catalog/v2/entries?${filteredParams.toString()}`;
@@ -377,10 +385,10 @@
         incrementalLoadingParams.count = viewPortToCount();
         fadeOutDiv.style.display = 'none';
         bookOrderMap.clear();
-        params = new URLSearchParams(window.location.search);
+        params = new FragmentParams(window.location.hash);
         if (filterType) {
             params.set(filterType, filterValue);
-            window.history.pushState({}, null, `?${params.toString()}`);
+            window.history.pushState({}, null, `#${params.toString()}`);
             setCookie(filterCookieName, params.toString(), oneDayDelta);
         }
         updateFilterColors();
@@ -486,6 +494,8 @@
         }
     });
 
+    window.addEventListener('hashchange', () => resetAndFilter());
+
     function updateUIText() {
         footer.innerHTML = $t("powered-by-kiwix-html");
         const searchText = $t("search");
@@ -529,15 +539,15 @@
         const tagElement = document.getElementsByClassName('tagFilterLabel')[0];
         tagElement.addEventListener('click', () => removeTagElement(true));
         if (filters) {
-            const currentLink = window.location.search;
+            const currentLink = window.location.hash;
-            const newLink = `?${params.toString()}`;
+            const newLink = `#${params.toString()}`;
             if (currentLink != newLink) {
                 window.history.pushState({}, null, newLink);
             }
         }
         updateVisibleParams();
         document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
-        if (!window.location.search) {
+        if (!window.location.hash) {
             const browserLang = navigator.language.split('-')[0];
             const langFilter = document.getElementById('languageFilter');
             const lang = browserLang.length === 3 ? browserLang : iso6391To3[browserLang];

test/server.cpp

@@ -63,7 +63,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=be514520" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=39705b4f" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@@ -284,7 +284,7 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=be514520"
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=b00b12db" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=39705b4f" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" defer></script>
         <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
 )EXPECTEDRESULT"
     },