Fix #7 && move FA to local
This commit is contained in:
parent
f19894b454
commit
3f5c199b0f
4 changed files with 76 additions and 78 deletions
35
books.html
35
books.html
|
|
@ -3,27 +3,26 @@
|
|||
|
||||
<head>
|
||||
<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>
|
||||
<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" />
|
||||
|
||||
<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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button onclick="changeLangEN()">
|
||||
<img src="img\flags\en-UK-400.png" width="20" />
|
||||
English
|
||||
</button>
|
||||
<img src="img\flags\en-UK-400.png" width="20" />
|
||||
English
|
||||
</button>
|
||||
<button onclick="changeLangFR()">
|
||||
<img src="img\flags\fr-FR-400.png" width="20" />
|
||||
Français
|
||||
</button>
|
||||
<img src="img\flags\fr-FR-400.png" width="20" />
|
||||
Français
|
||||
</button>
|
||||
|
||||
<a href="index.html">
|
||||
<h1>FateforgeTools</h1>
|
||||
|
|
@ -31,14 +30,17 @@
|
|||
|
||||
<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>
|
||||
<i id="book_author" ></i>
|
||||
<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>
|
||||
<a target="_blank" id="book_cf-link"><i class="fa-solid fa-hand-holding-dollar 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 class="book-desc" id="book_desc"></div>
|
||||
|
|
@ -52,8 +54,7 @@
|
|||
|
||||
<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 rel="preload" src="lib/fontawesome.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
103
js/books.js
103
js/books.js
|
|
@ -1,16 +1,16 @@
|
|||
var lastbook;
|
||||
var currentbook;
|
||||
|
||||
fetch("/lang/books-en.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
fetch("/data/books-en.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
|
||||
const gallery = document.getElementsByClassName("gallery")[0];
|
||||
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}">
|
||||
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" />
|
||||
|
|
@ -19,57 +19,50 @@ fetch("/lang/books-en.json")
|
|||
</div>
|
||||
</div>
|
||||
`;
|
||||
gallery.insertAdjacentHTML("afterbegin", bookHTML);
|
||||
}
|
||||
gallery.insertAdjacentHTML("afterbegin", bookHTML);
|
||||
}
|
||||
|
||||
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();
|
||||
var flkty = new Flickity(".gallery", {
|
||||
freeScroll: true,
|
||||
wrapAround: true,
|
||||
hash: true, // options
|
||||
});
|
||||
refreshBooks();
|
||||
currentbook = document
|
||||
.getElementsByClassName("gallery-cell is-selected")[0]
|
||||
.getAttribute("id");
|
||||
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) {
|
||||
flkty.on("select", function (index) {
|
||||
currentbook = document
|
||||
.getElementsByClassName("gallery-cell is-selected")[0]
|
||||
.getAttribute("id");
|
||||
if (currentbook == lastbook) {
|
||||
return;
|
||||
}
|
||||
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",
|
||||
"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();
|
||||
}
|
||||
var bookAttributes = [
|
||||
"book_title",
|
||||
"book_desc",
|
||||
"book_cf-date",
|
||||
"book_physical-link",
|
||||
"book_pdf-link",
|
||||
"book_cf-link",
|
||||
"book_author"
|
||||
];
|
||||
bookAttributes.forEach(function (attr) {
|
||||
setLocalizeDataAttr(attr, currentbook + "." + attr.split("_")[1]);
|
||||
});
|
||||
lastbook = currentbook;
|
||||
console.log(currentLang);
|
||||
//call to language.js
|
||||
refreshBooks();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function changeLangEN() {
|
|||
|
||||
function refreshBooks() {
|
||||
$("[data-localize]").localize("books", {
|
||||
pathPrefix: "lang",
|
||||
pathPrefix: "data",
|
||||
language: currentLang,
|
||||
});
|
||||
}
|
||||
|
|
@ -25,15 +25,17 @@ function refreshLoc() {
|
|||
}
|
||||
|
||||
// Function to fill a data-localize attribute and update DOM
|
||||
function setLocalizeDataAttr(className, dataValue) {
|
||||
$("#" + className)
|
||||
.data("localize", dataValue)
|
||||
.attr("data-localize", dataValue);
|
||||
function setLocalizeDataAttr(id, dataValue) {
|
||||
const all = $('[id="' + id + '"]');
|
||||
all.each(function() {
|
||||
console.log(this.id)
|
||||
$(this).data("localize", dataValue).attr("data-localize", dataValue);
|
||||
});
|
||||
}
|
||||
|
||||
function localize(lang) {
|
||||
$("[data-localize]")
|
||||
.localize("main", { pathPrefix: "lang", language: lang })
|
||||
.localize("books", { pathPrefix: "lang", language: lang });
|
||||
.localize("books", { pathPrefix: "data", language: lang });
|
||||
currentLang=lang;
|
||||
}
|
||||
2
lib/fontawesome.js
Normal file
2
lib/fontawesome.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue