From 1dbed284993779f7ee3d6da67d0f694069712bf0 Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Fri, 7 May 2021 16:59:26 +0530 Subject: [PATCH] added dynamic loading of data using OPDS --- static/resources_list.txt | 1 + static/skin/index.js | 32 ++++++++++++++++++++++++++++++++ static/templates/index.html | 14 ++------------ 3 files changed, 35 insertions(+), 12 deletions(-) create mode 100644 static/skin/index.js diff --git a/static/resources_list.txt b/static/resources_list.txt index d31c323ba..6c0570442 100644 --- a/static/resources_list.txt +++ b/static/resources_list.txt @@ -19,6 +19,7 @@ skin/jquery-ui/jquery-ui.theme.min.css skin/jquery-ui/jquery-ui.min.css skin/caret.png skin/taskbar.js +skin/index.js skin/taskbar.css skin/block_external.js templates/search_result.html diff --git a/static/skin/index.js b/static/skin/index.js new file mode 100644 index 000000000..38d39e5b2 --- /dev/null +++ b/static/skin/index.js @@ -0,0 +1,32 @@ +window.onload = async (event) => { + const root = $( `link[type='root']` ).attr("href"); + await fetch(`${root}/catalog/search`) + .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) { + let bookHtml = ''; + books.forEach((book) => { + const link = book.querySelector('link').getAttribute('href'); + const title = getInnerHtml(book, 'title'); + const description = getInnerHtml(book, 'summary'); + + bookHtml += `
+
+
${title}
+
${description}
+
${getInnerHtml(book, 'articleCount')} articles, ${getInnerHtml(book, 'mediaCount')} medias
+
+
`; + }); + document.querySelector('.book__list').innerHTML = bookHtml; +} \ No newline at end of file diff --git a/static/templates/index.html b/static/templates/index.html index dc355aa63..7ad31bd9e 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -40,22 +40,12 @@ } .book__info { color: #777; font-weight: bold; font-size: 13px; line-height: 1em; } - +
-
- {{#books}} -
-
-
{{title}}
-
{{description}}
-
{{articleCount}} articles, {{mediaCount}} medias
-
-
- {{/books}} -
+