make book.js a fetch
This commit is contained in:
parent
fdd32a7676
commit
209f21535e
2 changed files with 89 additions and 73 deletions
62
books.html
62
books.html
|
|
@ -2,57 +2,57 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Books - fateforge.tools</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
|
||||
<link href="css/all.min.css" rel="stylesheet" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Books - fateforge.tools</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
|
||||
<link href="css/all.min.css" rel="stylesheet" />
|
||||
|
||||
<script src="lib/flickity.pkgd.min.js"></script>
|
||||
<script src="lib/flickity.hash.js"></script>
|
||||
<script src="lib/flickity.pkgd.min.js"></script>
|
||||
<script src="lib/flickity.hash.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
|
||||
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button onclick="changeLangEN()">
|
||||
<button onclick="changeLangEN()">
|
||||
<img src="img\flags\en-UK-400.png" width="20" />
|
||||
English
|
||||
</button>
|
||||
<button onclick="changeLangFR()">
|
||||
<button onclick="changeLangFR()">
|
||||
<img src="img\flags\fr-FR-400.png" width="20" />
|
||||
Français
|
||||
</button>
|
||||
|
||||
<a href="index.html">
|
||||
<h1>FateforgeTools</h1>
|
||||
</a>
|
||||
<a href="index.html">
|
||||
<h1>FateforgeTools</h1>
|
||||
</a>
|
||||
|
||||
<div class="gallery"></div>
|
||||
<div class="gallery"></div>
|
||||
|
||||
|
||||
|
||||
<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 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>
|
||||
<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="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>
|
||||
</div>
|
||||
<div class="book-desc" id="book_desc"></div>
|
||||
</div>
|
||||
<div class="book-desc" id="book_desc"></div>
|
||||
</div>
|
||||
|
||||
<link href="css/flickity.css" rel="stylesheet" />
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="lib/showdown.js"></script>
|
||||
<script type="text/javascript" src="lib/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
|
||||
<link href="css/flickity.css" rel="stylesheet" />
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="lib/showdown.js"></script>
|
||||
<script type="text/javascript" src="lib/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/language.js"></script>
|
||||
<script type="module" src="js/books.js"></script>
|
||||
<script rel="preload" src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="js/language.js"></script>
|
||||
<script type="module" src="js/books.js"></script>
|
||||
<script rel="preload" src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
100
js/books.js
100
js/books.js
|
|
@ -1,11 +1,16 @@
|
|||
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) {
|
||||
console.log(data[key].code, data[key].title, data[key].cover);
|
||||
var bookHTML = `<div class="gallery-cell" id="${data[key].code}">
|
||||
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" />
|
||||
|
|
@ -14,46 +19,57 @@ for (const key in data) {
|
|||
</div>
|
||||
</div>
|
||||
`;
|
||||
gallery.insertAdjacentHTML("afterbegin", bookHTML);
|
||||
};
|
||||
var lastbook;
|
||||
var currentbook;
|
||||
var flkty = new Flickity(".gallery", {
|
||||
freeScroll: true,
|
||||
wrapAround: true,
|
||||
hash: true, // options
|
||||
});
|
||||
refreshBooks();
|
||||
currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
|
||||
//TODO: Fill view-container with books
|
||||
fillBookView();
|
||||
gallery.insertAdjacentHTML("afterbegin", bookHTML);
|
||||
}
|
||||
|
||||
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) {
|
||||
var flkty = new Flickity(".gallery", {
|
||||
freeScroll: true,
|
||||
wrapAround: true,
|
||||
hash: true, // options
|
||||
});
|
||||
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");
|
||||
if (currentbook == lastbook) {
|
||||
return;
|
||||
}
|
||||
//TODO: Fill view-container with books
|
||||
fillBookView();
|
||||
});
|
||||
/*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("view-title", currentbook + ".title");
|
||||
setLocalizeDataAttr("view-desc", currentbook + ".desc");
|
||||
setLocalizeDataAttr("cf-date", currentbook + ".cf-date");
|
||||
setLocalizeDataAttr("physical-link", currentbook + ".physical-link");
|
||||
setLocalizeDataAttr("pdf-link", currentbook + ".pdf-link");
|
||||
setLocalizeDataAttr("cf-link", currentbook + ".cf-link");
|
||||
lastbook = currentbook;
|
||||
console.log(currentLang);
|
||||
refreshBooks();
|
||||
bookAttributes.forEach(function(attr) {
|
||||
setLocalizeDataAttr(attr, currentbook + "." + attr.split("_")[1]);
|
||||
});
|
||||
setLocalizeDataAttr("view-title", currentbook + ".title");
|
||||
setLocalizeDataAttr("view-desc", currentbook + ".desc");
|
||||
setLocalizeDataAttr("cf-date", currentbook + ".cf-date");
|
||||
setLocalizeDataAttr("physical-link", currentbook + ".physical-link");
|
||||
setLocalizeDataAttr("pdf-link", currentbook + ".pdf-link");
|
||||
setLocalizeDataAttr("cf-link", currentbook + ".cf-link");
|
||||
lastbook = currentbook;
|
||||
console.log(currentLang);
|
||||
refreshBooks();
|
||||
}
|
||||
Loading…
Reference in a new issue