diff --git a/static/skin/index.js b/static/skin/index.js index e2e210ff0..42947919a 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -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 += `
+
+
${htmlEncode(title)}
+
${htmlEncode(description)}
+
${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias
+
+
`; + }); + 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 += `
-
-
${htmlEncode(title)}
-
${htmlEncode(description)}
-
${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias
-
-
`; - }); - 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}`); } \ No newline at end of file diff --git a/static/templates/index.html b/static/templates/index.html index 7ad31bd9e..1994c327e 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -2,6 +2,7 @@ + Welcome to Kiwix Server