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