added cookies for filter effect

static/skin/index.js

@@ -5,13 +5,14 @@
         count: viewPortToCount()
     };
     const filterTypes = ['lang', 'category', 'q'];
-    const bookMap = new Map();
+    const bookOrderMap = new Map();
     let footer;
     let fadeOutDiv;
     let iso;
     let isFetching = false;
     let noResultInjected = false;
-    let params = new URLSearchParams(window.location.search);
+    let filters = getCookie('filters');
+    let params = new URLSearchParams(filters || '');
     let timer;
 
     function queryUrlBuilder() {
@@ -21,6 +22,23 @@
         return (url);
     }
 
+    function setCookie(cookieName, cookieValue) {
+        const date = new Date();
+        date.setTime(date.getTime() + ( 24 * 60 * 60 * 1000));
+        document.cookie = `${cookieName}=${cookieValue};expires=${date.toUTCString()};sameSite=Strict`;
+    }
+
+    function getCookie(cookieName) {
+        const name = cookieName + "=";
+        let result;
+        decodeURIComponent(document.cookie).split('; ').forEach(val => {
+            if (val.indexOf(name) === 0) {
+                result = val.substring(name.length);
+            }
+        });
+        return result;
+    }
+
     function htmlEncode(str) {
         return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
     }
@@ -47,7 +65,7 @@
         linkTag.setAttribute('data-id', id);
         linkTag.setAttribute('href', link);
         if (sort) {
-            linkTag.setAttribute('data-idx', bookMap[id]);
+            linkTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
         linkTag.innerHTML = `<div class='book__background' style="background-image: url('${iconUrl}');">
             <div class='book__title' title='${title}'>${title}</div>
@@ -73,10 +91,10 @@
             const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml');
             const books = data.querySelectorAll('entry');
             books.forEach((book, idx) => {
-                bookMap.set(getInnerHtml(book, 'id'), idx);
+                bookOrderMap.set(getInnerHtml(book, 'id'), idx);
             });
             incrementalLoadingParams.start += books.length;
-            if (parseInt(data.querySelector('totalResults').innerHTML) === bookMap.size) {
+            if (parseInt(data.querySelector('totalResults').innerHTML) === bookOrderMap.size) {
                 incrementalLoadingParams.count = 0;
                 toggleFooter(true);
             } else {
@@ -95,7 +113,7 @@
     }
 
     function checkAndInjectEmptyMessage() {
-        if (!bookMap.size) {
+        if (!bookOrderMap.size) {
             if (!noResultInjected) {
                 noResultInjected = true;
                 iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('a'));
@@ -134,11 +152,11 @@
         iso.arrange({
             filter: function (idx, elem) {
                 const id = elem.getAttribute('data-id');
-                const retVal = bookMap.has(id);
+                const retVal = bookOrderMap.has(id);
                 if (retVal) {
                     booksToFilter.add(id);
                     if (sort) {
-                        elem.setAttribute('data-idx', bookMap[id]);
+                        elem.setAttribute('data-idx', bookOrderMap.get(id));
                         iso.updateSortData(elem);
                     }
                 } else {
@@ -157,11 +175,12 @@
         incrementalLoadingParams.start = 0;
         incrementalLoadingParams.count = viewPortToCount();
         fadeOutDiv.style.display = 'none';
-        bookMap.clear();
+        bookOrderMap.clear();
         params = new URLSearchParams(window.location.search);
         if (filterType) {
             params.set(filterType, filterValue);
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
+            setCookie('filters', params.toString());
         }
         await loadAndDisplayBooks(true);
     }
@@ -212,18 +231,16 @@
             const filterTag = document.getElementsByName(filter)[0];
             filterTag.addEventListener('change', () => {resetAndFilter(filterTag.name, filterTag.value)});
         });
+        if (filters) {
+            window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
+        }
         params.forEach((value, key) => {document.getElementsByName(key)[0].value = value});
         document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
         if (!window.location.search) {
             const browserLang = navigator.language.split('-')[0];
-            if (browserLang.length === 3) {
+            const langFilter = document.getElementById('languageFilter');
-                document.getElementById('languageFilter').value = browserLang;
+            langFilter.value = browserLang.length === 3 ? browserLang : iso6391To3[browserLang];
-                langFilter.dispatchEvent(new Event('change'));
+            langFilter.dispatchEvent(new Event('change'));
-            } else {
-                const langFilter = document.getElementById('languageFilter');
-                langFilter.value = iso6391To3[browserLang];
-                langFilter.dispatchEvent(new Event('change'));
-            }
         }
     }
 })();