diff --git a/static/skin/index.js b/static/skin/index.js index 88225de19..dc1d12e88 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -5,13 +5,16 @@ count: viewPortToCount() }; const filterTypes = ['lang', 'category', 'q']; - const bookMap = new Map(); + const bookOrderMap = new Map(); + const filterCookieName = 'filters'; + const oneDayDelta = 86400000; let footer; let fadeOutDiv; let iso; let isFetching = false; let noResultInjected = false; - let params = new URLSearchParams(window.location.search); + let filters = getCookie(filterCookieName); + let params = new URLSearchParams(window.location.search || filters || ''); let timer; function queryUrlBuilder() { @@ -21,6 +24,23 @@ return (url); } + function setCookie(cookieName, cookieValue) { + const date = new Date(); + date.setTime(date.getTime() + oneDayDelta); + 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 +67,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 = `
${title}
@@ -73,10 +93,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 +115,7 @@ } function checkAndInjectEmptyMessage() { - if (!bookMap.size) { + if (!bookOrderMap.size) { if (!noResultInjected) { noResultInjected = true; iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('a')); @@ -107,6 +127,7 @@ spanTag.getElementsByTagName('a')[0].onclick = (event) => { event.preventDefault(); window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`); + setCookie(filterCookieName, 'lang='); resetAndFilter(); filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''}); }; @@ -134,11 +155,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 +178,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(filterCookieName, params.toString()); } await loadAndDisplayBooks(true); } @@ -212,18 +234,17 @@ 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) { - document.getElementById('languageFilter').value = browserLang; - langFilter.dispatchEvent(new Event('change')); - } else { - const langFilter = document.getElementById('languageFilter'); - langFilter.value = iso6391To3[browserLang]; - langFilter.dispatchEvent(new Event('change')); - } + const langFilter = document.getElementById('languageFilter'); + langFilter.value = browserLang.length === 3 ? browserLang : iso6391To3[browserLang]; + langFilter.dispatchEvent(new Event('change')); } + setCookie(filterCookieName, params.toString()); } })();