added subset loading(solves kiwix-tools/issue/457)

This commit is contained in:
Manan Jethwani 2021-05-09 12:03:19 +05:30
parent 5dce6d0e40
commit 766f12aaf7
2 changed files with 41 additions and 22 deletions

View File

@ -1,22 +1,20 @@
const viewPortHeight = window.innerHeight;
const root = $( `link[type='root']` ).attr("href");
const count = Math.floor(viewPortHeight/100 + 1) * 3;
let isFetching = false;
let isEnd = false;
let prevStart = 0;
function htmlEncode(str) {
return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
}
window.onload = async (event) => {
const root = $( `link[type='root']` ).attr("href");
await fetch(`${root}/catalog/search`)
async function loadAndDisplay(query, append = false) {
isFetching = true;
await fetch(`${root}/catalog/search${query}`)
.then(async (resp) => {
const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml');
const entries = data.querySelectorAll("entry");
displayBooks(entries);
});
};
function getInnerHtml(node, query) {
return node.querySelector(query).innerHTML;
}
function displayBooks(books) {
const books = data.querySelectorAll("entry");
let bookHtml = '';
books.forEach((book) => {
const link = book.querySelector('link').getAttribute('href');
@ -31,5 +29,25 @@ function displayBooks(books) {
</div>
</div></a>`;
});
document.querySelector('.book__list').innerHTML = bookHtml;
document.querySelector('.book__list').innerHTML = (append ? document.querySelector('.book__list').innerHTML : '') + bookHtml;
isFetching = false;
isEnd = !books.length;
});
}
function getInnerHtml(node, query) {
return node.querySelector(query).innerHTML;
}
window.addEventListener('scroll', async () => {
if (isFetching || isEnd) return;
if (viewPortHeight + window.scrollY >= document.body.offsetHeight) {
start = prevStart + count;
loadAndDisplay(`?start=${start}&count=${count}`, true);
prevStart = start;
}
});
window.onload = async (event) => {
loadAndDisplay(`?start=0&count=${count}`);
}

View File

@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width">
<title>Welcome to Kiwix Server</title>
<script type="text/javascript" src="{{root}}/skin/jquery-ui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="{{root}}/skin/jquery-ui/jquery-ui.min.js"></script>