52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
import data from "/lang/books-en.json" assert { type: "json" };
|
||
|
|
console.log(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">
|
||
|
|
<div class="book">
|
||
|
|
<img data-localize="${data[key].code}.cover" />
|
||
|
|
</div>
|
||
|
|
<div data-localize="${data[key].code}.title" class="book-title">${data[key].title}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
gallery.insertAdjacentHTML("afterbegin", bookHTML);
|
||
|
|
};
|
||
|
|
var lastbook;
|
||
|
|
var flkty = new Flickity(".gallery", {
|
||
|
|
freeScroll: true,
|
||
|
|
wrapAround: true,
|
||
|
|
hash: true, // options
|
||
|
|
});
|
||
|
|
flkty.on("select", function (index) {
|
||
|
|
var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
|
||
|
|
if (currentbook == lastbook) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//TODO: Fill view-container with books
|
||
|
|
setLocalizeDataAttr("view-title", currentbook + ".title");
|
||
|
|
|
||
|
|
lastbook = currentbook;
|
||
|
|
refreshBooks();
|
||
|
|
});
|
||
|
|
flkty.on("settle", function (index) {
|
||
|
|
console.log("Flickity settled at " + index);
|
||
|
|
refreshBooks();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
document
|
||
|
|
.getElementsByClassName("gallery")[0]
|
||
|
|
.insertAdjacentHTML(
|
||
|
|
"afterbegin",
|
||
|
|
'<div class="gallery-cell" id="ADV1"><div class="book-container"><div class="book"><img src="img\\books\\ADV1_BC_EN.png" /></div><div class="book-title">Adventurer</div></div></div>'
|
||
|
|
);*/
|