make book.js a fetch

This commit is contained in:
Lucas 2023-03-14 19:09:27 +01:00
parent fdd32a7676
commit 209f21535e
2 changed files with 89 additions and 73 deletions

View file

@ -35,8 +35,8 @@
<div class="view-container" style="display: flex;align-items: center;flex-direction: column;">
<h1 id="book_title"></h1>
<div class="view-container" >
<div><a target="_blank" id="cf-link"><i class="fa-solid fa-hand-holding-dollar icon" ></i></a><span class="view-details" id="cf-date"></span></div>
<div class="view-container">
<div><a target="_blank" id="book_cf-link"><i class="fa-solid fa-hand-holding-dollar icon" ></i></a><span class="view-details" id="cf-date"></span></div>
<div class="view-container row"><a target="_blank" id="physical-link"><i class="fa-solid fa-cart-shopping icon"></i></a>
<a target="_blank" id="pdf-link"><i class="fa-solid fa-file-pdf icon"></i></a>
</div>

View file

@ -1,9 +1,14 @@
import data from "/lang/books-en.json" assert { type: "json" };
console.log(data);
var lastbook;
var currentbook;
const gallery = document.getElementsByClassName("gallery")[0];
fetch("/lang/books-en.json")
.then((response) => response.json())
.then((data) => {
console.log(data);
for (const key in data) {
const gallery = document.getElementsByClassName("gallery")[0];
for (const key in data) {
console.log(data[key].code, data[key].title, data[key].cover);
var bookHTML = `<div class="gallery-cell" id="${data[key].code}">
<div class="book-container">
@ -15,37 +20,48 @@ for (const key in data) {
</div>
`;
gallery.insertAdjacentHTML("afterbegin", bookHTML);
};
var lastbook;
var currentbook;
var flkty = new Flickity(".gallery", {
}
var flkty = new Flickity(".gallery", {
freeScroll: true,
wrapAround: true,
hash: true, // options
});
refreshBooks();
currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
});
refreshBooks();
currentbook = document
.getElementsByClassName("gallery-cell is-selected")[0]
.getAttribute("id");
//TODO: Fill view-container with books
fillBookView();
flkty.on("select", function (index) {
currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
flkty.on("select", function(index) {
currentbook = document
.getElementsByClassName("gallery-cell is-selected")[0]
.getAttribute("id");
if (currentbook == lastbook) {
return;
}
//TODO: Fill view-container with books
fillBookView();
});
/*flkty.on("settle", function (index) {
});
/*flkty.on("settle", function (index) {
console.log("Flickity settled at " + index);
refreshBooks();
});*/
});
function fillBookView(){
var bookAttributes = ["book_title","book_desc","cf-date","physical-link","pdf-link","cf-link"]
function fillBookView() {
var bookAttributes = [
"book_title",
"book_desc",
"cf-date",
"physical-link",
"pdf-link",
"book_cf-link",
];
bookAttributes.forEach(function(attr) {
setLocalizeDataAttr(attr, currentbook+'.'+attr.split("_")[1]);
setLocalizeDataAttr(attr, currentbook + "." + attr.split("_")[1]);
});
setLocalizeDataAttr("view-title", currentbook + ".title");
setLocalizeDataAttr("view-desc", currentbook + ".desc");