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

60
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) { function htmlEncode(str) {
return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`); return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
} }
window.onload = async (event) => { async function loadAndDisplay(query, append = false) {
const root = $( `link[type='root']` ).attr("href"); isFetching = true;
await fetch(`${root}/catalog/search`) await fetch(`${root}/catalog/search${query}`)
.then(async (resp) => { .then(async (resp) => {
const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml'); const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml');
const entries = data.querySelectorAll("entry"); const books = data.querySelectorAll("entry");
displayBooks(entries); 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) { function getInnerHtml(node, query) {
return node.querySelector(query).innerHTML; return node.querySelector(query).innerHTML;
} }
function displayBooks(books) { window.addEventListener('scroll', async () => {
let bookHtml = ''; if (isFetching || isEnd) return;
books.forEach((book) => { if (viewPortHeight + window.scrollY >= document.body.offsetHeight) {
const link = book.querySelector('link').getAttribute('href'); start = prevStart + count;
const title = getInnerHtml(book, 'title'); loadAndDisplay(`?start=${start}&count=${count}`, true);
const description = getInnerHtml(book, 'summary'); prevStart = start;
}
});
bookHtml += `<a href='${link}'><div class='book'> window.onload = async (event) => {
<div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');"> loadAndDisplay(`?start=0&count=${count}`);
<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;
} }

1
static/templates/index.html
View File

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