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.
This commit is contained in:
Nikhil Tanwar 2023-03-07 03:02:32 +05:30 committed by Matthieu Gautier
parent 782a25bba8
commit 174deddf35
3 changed files with 34 additions and 24 deletions

View File

@ -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"

View File

@ -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 filteredParams = new URLSearchParams();
const inputParams = new FragmentParams(window.location.hash);
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,18 +494,20 @@
}
});
window.addEventListener('hashchange', () => resetAndFilter());
function updateUIText() {
footer.innerHTML = $t("powered-by-kiwix-html");
const searchText = $t("search");
document.getElementById('searchFilter').placeholder = searchText;
document.getElementById('searchButton').value = searchText;
document.getElementById('categoryFilter').children[0].innerHTML = $t("book-filtering-all-categories");
document.getElementById('languageFilter').children[0].innerHTML = $t("book-filtering-all-languages");
const feedLogoElem = document.getElementById('feedLogo');
const libraryOpdsFeedHint = $t("library-opds-feed");
for (const attr of ["alt", "aria-label", "title"] ) {
feedLogoElem.setAttribute(attr, libraryOpdsFeedHint);
}
footer.innerHTML = $t("powered-by-kiwix-html");
const searchText = $t("search");
document.getElementById('searchFilter').placeholder = searchText;
document.getElementById('searchButton').value = searchText;
document.getElementById('categoryFilter').children[0].innerHTML = $t("book-filtering-all-categories");
document.getElementById('languageFilter').children[0].innerHTML = $t("book-filtering-all-languages");
const feedLogoElem = document.getElementById('feedLogo');
const libraryOpdsFeedHint = $t("library-opds-feed");
for (const attr of ["alt", "aria-label", "title"] ) {
feedLogoElem.setAttribute(attr, libraryOpdsFeedHint);
}
}
async function onload() {
@ -529,15 +539,15 @@
const tagElement = document.getElementsByClassName('tagFilterLabel')[0];
tagElement.addEventListener('click', () => removeTagElement(true));
if (filters) {
const currentLink = window.location.search;
const newLink = `?${params.toString()}`;
const currentLink = window.location.hash;
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];
@ -553,7 +563,7 @@
// required by i18n.js:setUserLanguage()
window.setPermanentGlobalCookie = function(name, value) {
document.cookie = `${name}=${value};path=${root};max-age=31536000`;
document.cookie = `${name}=${value};path=${root};max-age=31536000`;
}
window.onload = () => { setUserLanguage(getUserLanguage(), onload); }

View File

@ -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"
},