smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/skin/index.js
View File

@ -1,35 +1,53 @@
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);
const books = data.querySelectorAll("entry");
let bookHtml = '';
books.forEach((book) => {
const link = book.querySelector('link').getAttribute('href');
const title = getInnerHtml(book, 'title');
const description = getInnerHtml(book, 'summary');
bookHtml += `<a href='${link}'><div class='book'>
<div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');">
<div class='book__title' title='${htmlEncode(title)}'>${htmlEncode(title)}</div>
<div class='book__description' title='${htmlEncode(description)}'>${htmlEncode(description)}</div>
<div class='book__info'>${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias</div>
</div>
</div></a>`;
});
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;
}
function displayBooks(books) {
let bookHtml = '';
books.forEach((book) => {
const link = book.querySelector('link').getAttribute('href');
const title = getInnerHtml(book, 'title');
const description = getInnerHtml(book, 'summary');
bookHtml += `<a href='${link}'><div class='book'>
<div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');">
<div class='book__title' title='${htmlEncode(title)}'>${htmlEncode(title)}</div>
<div class='book__description' title='${htmlEncode(description)}'>${htmlEncode(description)}</div>
<div class='book__info'>${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias</div>
</div>
</div></a>`;
});
document.querySelector('.book__list').innerHTML = bookHtml;
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}`);
}

1
static/templates/index.html
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>