Skip to content

Commit

Permalink
Use fragment value instead of search query for filters
Browse files Browse the repository at this point in the history 
The filters are now taken from window.location.hash (instead of window.location.search).
This change will help in caching of the page better.
  • Loading branch information
@juuz0
juuz0 committed Mar 7, 2023
1 parent 32b4bca commit 6771cab
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 25 deletions.
2 changes: 1 addition & 1 deletion static/skin/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
64 changes: 42 additions & 22 deletions static/skin/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@
(function() {
class FragmentParams extends Map {
constructor(fragment = '') {
if (fragment[0] == '#')
fragment = fragment.substring(1); // remove #
const nmap = new Map (fragment
.split("&")
.map(v => v.split("=")));
super(nmap);
}

toString() {
let keyValArray = [];
this.forEach((value, key) => {
if (key != '')
keyValArray.push(`${key}=${value}`);
});
return keyValArray.join('&');
}
}

const root = document.querySelector(`link[type='root']`).getAttribute('href');
const incrementalLoadingParams = {
start: 0,
Expand All @@ -14,18 +34,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()}`;
Expand Down Expand Up @@ -377,10 +397,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();
Expand Down Expand Up @@ -447,7 +467,7 @@
document.querySelectorAll('.filter').forEach(filter => {filter.value = params.get(filter.name) || ''});
updateFilterColors();
const tagKey = params.get('tag');
if (tagKey !== null && tagKey.trim() !== '') {
if (tagKey !== undefined && tagKey.trim() !== '') {
addTagElement(tagKey, false);
} else {
removeTagElement(false);
Expand Down Expand Up @@ -487,17 +507,17 @@
});

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() {
Expand Down Expand Up @@ -529,15 +549,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];
Expand All @@ -553,7 +573,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); }
Expand Down
4 changes: 2 additions & 2 deletions test/server.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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=12941eaa" },
{ 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" },
Expand Down Expand Up @@ -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=12941eaa" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
)EXPECTEDRESULT"
},
Expand Down

0 comments on commit 6771cab

Please sign in to comment.