make book.js a fetch
This commit is contained in:
parent
fdd32a7676
commit
209f21535e
2 changed files with 89 additions and 73 deletions
|
@ -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>
|
||||
|
|
52
js/books.js
52
js/books.js
|
@ -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");
|
||||
|
|
Loading…
Reference in a new issue