From ad133bc9a39c23609396f9ec59bcb1d8af095985 Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Mon, 21 Jun 2021 19:51:45 +0530 Subject: [PATCH 1/4] added cookies for filter effect --- static/skin/index.js | 51 +++++++++++++++++++++++++++++--------------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/static/skin/index.js b/static/skin/index.js index 88225de19..97f095244 100644 --- a/static/skin/index.js +++ b/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 = `
${title}
@@ -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) { - 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')); } } })(); From 5cfe34a5c2e064dce6ea56789cc9341fefba1fe1 Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Tue, 22 Jun 2021 19:36:22 +0530 Subject: [PATCH 2/4] corrected filter working --- static/skin/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/static/skin/index.js b/static/skin/index.js index 97f095244..21a140ce2 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -6,13 +6,14 @@ }; const filterTypes = ['lang', 'category', 'q']; const bookOrderMap = new Map(); + const filterCookieName = 'filters' let footer; let fadeOutDiv; let iso; let isFetching = false; let noResultInjected = false; - let filters = getCookie('filters'); - let params = new URLSearchParams(filters || ''); + let filters = getCookie(filterCookieName); + let params = new URLSearchParams(window.location.search || filters || ''); let timer; function queryUrlBuilder() { @@ -180,7 +181,7 @@ if (filterType) { params.set(filterType, filterValue); window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`); - setCookie('filters', params.toString()); + setCookie(filterCookieName, params.toString()); } await loadAndDisplayBooks(true); } @@ -242,5 +243,6 @@ langFilter.value = browserLang.length === 3 ? browserLang : iso6391To3[browserLang]; langFilter.dispatchEvent(new Event('change')); } + setCookie(filterCookieName, params.toString()); } })(); From d88bdd3ebff14936dea97cc66df317244314767a Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Wed, 23 Jun 2021 14:15:22 +0530 Subject: [PATCH 3/4] corrected filter on no results --- static/skin/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/static/skin/index.js b/static/skin/index.js index 21a140ce2..382ca0c26 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -126,6 +126,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) || ''}); }; From 3c5d73027dbfb521e2859f6368b8bcb30dc01a12 Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Thu, 24 Jun 2021 15:41:28 +0530 Subject: [PATCH 4/4] created separate variable for time delta --- static/skin/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/skin/index.js b/static/skin/index.js index 382ca0c26..dc1d12e88 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -6,7 +6,8 @@ }; const filterTypes = ['lang', 'category', 'q']; const bookOrderMap = new Map(); - const filterCookieName = 'filters' + const filterCookieName = 'filters'; + const oneDayDelta = 86400000; let footer; let fadeOutDiv; let iso; @@ -25,7 +26,7 @@ function setCookie(cookieName, cookieValue) { const date = new Date(); - date.setTime(date.getTime() + ( 24 * 60 * 60 * 1000)); + date.setTime(date.getTime() + oneDayDelta); document.cookie = `${cookieName}=${cookieValue};expires=${date.toUTCString()};sameSite=Strict`; }