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

Fix #7 && move FA to local

Browse source
This commit is contained in:
Lucas 2023-03-18 01:09:48 +01:00
parent f19894b454
commit 3f5c199b0f
4 changed files with 76 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
books.html
View file

@ -3,27 +3,26 @@
<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="css/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>
@ -31,14 +30,17 @@
<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>
<i id="book_author" ></i>
<div class="view-container"> <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>
<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="book_cf-link"><i class="fa-solid fa-hand-holding-dollar icon"></i></a>
<a target="_blank" id="pdf-link"><i class="fa-solid fa-file-pdf icon"></i></a> <span class="view-details" id="book_cf-date"></span>
</div>
<div class="view-container row">
<a target="_blank" id="book_physical-link"><i class="fa-solid fa-cart-shopping icon"></i></a>
<a target="_blank" id="book_pdf-link"><i class="fa-solid fa-file-pdf icon"></i></a>
</div> </div>
</div> </div>
<div class="book-desc" id="book_desc"></div> <div class="book-desc" id="book_desc"></div>
@ -52,8 +54,7 @@
<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="lib/fontawesome.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

103
js/books.js
View file

@ -1,16 +1,16 @@
var lastbook; var lastbook;
var currentbook; var currentbook;
fetch("/lang/books-en.json") fetch("/data/books-en.json")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log(data); console.log(data);
const gallery = document.getElementsByClassName("gallery")[0]; const gallery = document.getElementsByClassName("gallery")[0];
for (const key in data) { 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">
<div class="book"> <div class="book">
<img data-localize="${data[key].code}.cover" /> <img data-localize="${data[key].code}.cover" />
@ -19,57 +19,50 @@ fetch("/lang/books-en.json")
</div> </div>
</div> </div>
`; `;
gallery.insertAdjacentHTML("afterbegin", bookHTML); gallery.insertAdjacentHTML("afterbegin", bookHTML);
} }
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 currentbook = document
.getElementsByClassName("gallery-cell is-selected")[0] .getElementsByClassName("gallery-cell is-selected")[0]
.getAttribute("id"); .getAttribute("id");
//TODO: Fill view-container with books fillBookView();
fillBookView();
flkty.on("select", function(index) { flkty.on("select", function (index) {
currentbook = document currentbook = document
.getElementsByClassName("gallery-cell is-selected")[0] .getElementsByClassName("gallery-cell is-selected")[0]
.getAttribute("id"); .getAttribute("id");
if (currentbook == lastbook) { if (currentbook == lastbook) {
return; return;
} }
//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 = [ var bookAttributes = [
"book_title", "book_title",
"book_desc", "book_desc",
"cf-date", "book_cf-date",
"physical-link", "book_physical-link",
"pdf-link", "book_pdf-link",
"book_cf-link", "book_cf-link",
]; "book_author"
];
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"); lastbook = currentbook;
setLocalizeDataAttr("view-desc", currentbook + ".desc"); console.log(currentLang);
setLocalizeDataAttr("cf-date", currentbook + ".cf-date"); //call to language.js
setLocalizeDataAttr("physical-link", currentbook + ".physical-link"); refreshBooks();
setLocalizeDataAttr("pdf-link", currentbook + ".pdf-link"); }
setLocalizeDataAttr("cf-link", currentbook + ".cf-link");
lastbook = currentbook;
console.log(currentLang);
refreshBooks();
}

14
js/language.js
View file

@ -15,7 +15,7 @@ function changeLangEN() {
function refreshBooks() { function refreshBooks() {
$("[data-localize]").localize("books", { $("[data-localize]").localize("books", {
pathPrefix: "lang", pathPrefix: "data",
language: currentLang, language: currentLang,
}); });
} }
@ -25,15 +25,17 @@ function refreshLoc() {
} }
// Function to fill a data-localize attribute and update DOM // Function to fill a data-localize attribute and update DOM
function setLocalizeDataAttr(className, dataValue) { function setLocalizeDataAttr(id, dataValue) {
$("#" + className) const all = $('[id="' + id + '"]');
.data("localize", dataValue) all.each(function() {
.attr("data-localize", dataValue); console.log(this.id)
$(this).data("localize", dataValue).attr("data-localize", dataValue);
});
} }
function localize(lang) { function localize(lang) {
$("[data-localize]") $("[data-localize]")
.localize("main", { pathPrefix: "lang", language: lang }) .localize("main", { pathPrefix: "lang", language: lang })
.localize("books", { pathPrefix: "lang", language: lang }); .localize("books", { pathPrefix: "data", language: lang });
currentLang=lang; currentLang=lang;
} }

2
lib/fontawesome.js Normal file
View file

File diff suppressed because one or more lines are too long