lucastucious/fateforge-tool
lucastucious/fateforge-tool
1
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity

make book.js a fetch

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
books.html
View file

@ -35,8 +35,8 @@
<div class="view-container" style="display: flex;align-items: center;flex-direction: column;"> <div class="view-container" style="display: flex;align-items: center;flex-direction: column;">
<h1 id="book_title"></h1> <h1 id="book_title"></h1>
<div class="view-container" > <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><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> <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> <a target="_blank" id="pdf-link"><i class="fa-solid fa-file-pdf icon"></i></a>
</div> </div>

52
js/books.js
View file

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