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

fixed resizing issue in subset loading

This commit is contained in:
Manan Jethwani 2021-05-10 20:46:35 +05:30
parent 766f12aaf7
commit 619dbf4e85
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
static/skin/index.js
View File

@ -1,14 +1,10 @@
const viewPortHeight = window.innerHeight;
const root = $( `link[type='root']` ).attr("href"); const root = $( `link[type='root']` ).attr("href");
const count = Math.floor(viewPortHeight/100 + 1) * 3; let viewPortHeight = window.innerHeight;
let count = Math.floor(viewPortHeight/100 + 1) * 3;
let isFetching = false; let isFetching = false;
let isEnd = false; let isEnd = false;
let prevStart = 0; let prevStart = 0;
function htmlEncode(str) {
return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
}
async function loadAndDisplay(query, append = false) { async function loadAndDisplay(query, append = false) {
isFetching = true; isFetching = true;
await fetch(`${root}/catalog/search${query}`) await fetch(`${root}/catalog/search${query}`)
@ -23,9 +19,9 @@ async function loadAndDisplay(query, append = false) {
bookHtml += `<a href='${link}'><div class='book'> bookHtml += `<a href='${link}'><div class='book'>
<div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');"> <div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');">
<div class='book__title' title='${htmlEncode(title)}'>${htmlEncode(title)}</div> <div class='book__title' title='${title}'>${title}</div>
<div class='book__description' title='${htmlEncode(description)}'>${htmlEncode(description)}</div> <div class='book__description' title='${description}'>${description}</div>
<div class='book__info'>${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias</div> <div class='book__info'>${getInnerHtml(book, 'articleCount')} articles, ${getInnerHtml(book, 'mediaCount')} medias</div>
</div> </div>
</div></a>`; </div></a>`;
}); });
@ -39,6 +35,15 @@ function getInnerHtml(node, query) {
return node.querySelector(query).innerHTML; return node.querySelector(query).innerHTML;
} }
window.addEventListener('resize', async () => {
if (isFetching || isEnd) return;
viewPortHeight = window.innerHeight;
count = Math.floor(viewPortHeight/100 + 1) * 3;
start = prevStart + count;
loadAndDisplay(`?start=${start}&count=${count}`, true);
prevStart = start;
})
window.addEventListener('scroll', async () => { window.addEventListener('scroll', async () => {
if (isFetching || isEnd) return; if (isFetching || isEnd) return;
if (viewPortHeight + window.scrollY >= document.body.offsetHeight) { if (viewPortHeight + window.scrollY >= document.body.offsetHeight) {