generate slideshow based on books length
58
books.html
|
|
@ -1,43 +1,36 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
<title>fateforge-tools</title>
|
<title>fateforge-tools</title>
|
||||||
<link
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
|
||||||
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" />
|
||||||
|
|
||||||
<link href="css/flickity.css" rel="stylesheet" />
|
<script src="lib/flickity.pkgd.min.js"></script>
|
||||||
<link href="css/style.css" rel="stylesheet" />
|
<script src="lib/flickity.hash.js"></script>
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/x-icon"
|
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
|
||||||
href="/img/FateforgeTool_logo_80.png"
|
|
||||||
/>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<button onclick="changeLangEN()">
|
<button onclick="changeLangEN()">
|
||||||
<img
|
<img src="img\flags\en-UK-400.png" width="20" />
|
||||||
src="https://cdn.countryflags.com/thumbs/united-kingdom/flag-400.png"
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
English
|
English
|
||||||
</button>
|
</button>
|
||||||
<button onclick="changeLangFR()">
|
<button onclick="changeLangFR()">
|
||||||
<img
|
<img src="img\flags\fr-FR-400.png" width="20" />
|
||||||
src="https://cdn.countryflags.com/thumbs/france/flag-400.png"
|
Français
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
French
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<h1>FateforgeTools</h1>
|
<h1>FateforgeTools</h1>
|
||||||
|
|
||||||
<div class="gallery js-flickity">
|
<div class="gallery"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="gallery-cell" id="ADV1">
|
<div class="gallery-cell" id="ADV1">
|
||||||
<div class="book-container">
|
<div class="book-container">
|
||||||
<div class="book">
|
<div class="book">
|
||||||
|
|
@ -73,22 +66,20 @@
|
||||||
<div class="book-title">Encyclopedia : Netherworld</div>
|
<div class="book-title">Encyclopedia : Netherworld</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div
|
<div class="view-container" style="display: flex; align-items: center; justify-content: center">
|
||||||
class="view-container"
|
|
||||||
style="display: flex; align-items: center; justify-content: center"
|
|
||||||
>
|
|
||||||
<h1 id="view-title"></h1>
|
<h1 id="view-title"></h1>
|
||||||
<br />
|
<p class="book-desc" id="view-desc"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<link href="css/flickity.css" rel="stylesheet" />
|
||||||
|
<link href="css/style.css" rel="stylesheet" />
|
||||||
<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 src="lib/flickity.pkgd.min.js"></script>
|
<script type="module" src="js/books.js"></script>
|
||||||
<script src="lib/flickity.hash.js"></script>
|
<!-- <script defer>
|
||||||
<script>
|
|
||||||
var lastbook;
|
var lastbook;
|
||||||
var flkty = new Flickity(".gallery", {
|
var flkty = new Flickity(".gallery", {
|
||||||
freeScroll: true,
|
freeScroll: true,
|
||||||
|
|
@ -96,9 +87,7 @@
|
||||||
hash: true, // options
|
hash: true, // options
|
||||||
});
|
});
|
||||||
flkty.on("select", function (index) {
|
flkty.on("select", function (index) {
|
||||||
var currentbook = document
|
var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
|
||||||
.getElementsByClassName("gallery-cell is-selected")[0]
|
|
||||||
.getAttribute("id");
|
|
||||||
if (currentbook == lastbook) {
|
if (currentbook == lastbook) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -112,6 +101,7 @@
|
||||||
console.log("Flickity settled at " + index);
|
console.log("Flickity settled at " + index);
|
||||||
refreshBooks();
|
refreshBooks();
|
||||||
});
|
});
|
||||||
</script>
|
</script> -->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
Before Width: | Height: | Size: 253 KiB |
BIN
img/books/ADV1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 298 KiB |
BIN
img/books/ADV1_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 239 KiB |
BIN
img/books/ADV1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/books/CRE1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/books/CRE1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
BIN
img/books/CRE1_RD_EN.png
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
BIN
img/books/CRE1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 645 KiB |
BIN
img/books/CRE2_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
BIN
img/books/CRE2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 590 KiB |
BIN
img/books/CRE2_DR_FR.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 357 KiB After Width: | Height: | Size: 2.4 MiB |
BIN
img/books/ENC1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 520 KiB |
|
Before Width: | Height: | Size: 742 KiB |
BIN
img/books/GRI1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
img/books/GRI1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
|
Before Width: | Height: | Size: 221 KiB |
BIN
img/books/GRI1_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 221 KiB |
BIN
img/books/GRI1_RD_FR.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/books/GRI1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 2 MiB |
|
Before Width: | Height: | Size: 427 KiB |
|
Before Width: | Height: | Size: 352 KiB |
BIN
img/books/GUI1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/books/GUI1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 633 KiB |
BIN
img/books/GUI2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
BIN
img/books/LEG1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 429 KiB |
BIN
img/books/LEG2_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
img/books/LEG2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
BIN
img/books/LEG2_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 523 KiB |
BIN
img/books/LEG3_BC_EN.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
img/books/LEG3_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/books/LEG4_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
img/books/LEG4_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/flags/en-UK-400.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
img/flags/fr-FR-400.png
Normal file
|
After Width: | Height: | Size: 337 B |
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<button onclick="changeLangEN()">🇺🇸 English</button>
|
<button onclick="changeLangEN()">🇺🇸 English</button>
|
||||||
<button onclick="changeLangFR()">🇫🇷 French</button>
|
<button onclick="changeLangFR()">🇫🇷 Français</button>
|
||||||
|
|
||||||
<h1>FateforgeTools</h1>
|
<h1>FateforgeTools</h1>
|
||||||
<div data-localize="desc">
|
<div data-localize="desc">
|
||||||
|
|
|
||||||
51
js/books.js
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
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>'
|
||||||
|
);*/
|
||||||
|
|
@ -10,26 +10,29 @@
|
||||||
],
|
],
|
||||||
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
|
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
|
||||||
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
|
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
|
||||||
"author": [
|
"author": ["Team Agate"],
|
||||||
"Team Agate"
|
|
||||||
],
|
|
||||||
"published-date": "01/04/2018",
|
"published-date": "01/04/2018",
|
||||||
"cf-date": "14/03/2016"
|
"cf-date": "14/03/2016",
|
||||||
|
"cover":{
|
||||||
|
"src": "img\\books\\ADV1_BC_EN.png",
|
||||||
|
"alt": "ADV1_BC_EN",
|
||||||
|
"title": "ADV1_BC_EN"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"CRE2": {
|
"CRE2": {
|
||||||
|
"book": "<div class='book'> <img src='img\\books\\CRE2_BC_EN.png'></div><div class='book-title'>Creature : Netherworld</div>",
|
||||||
"code": "CRE2",
|
"code": "CRE2",
|
||||||
"title": "Creature : Netherworld",
|
"title": "Creatures : Netherworld",
|
||||||
"desc": [
|
"desc": ["*"],
|
||||||
"*"
|
|
||||||
],
|
|
||||||
"physical-link": "",
|
"physical-link": "",
|
||||||
"pdf-link": "",
|
"pdf-link": "",
|
||||||
"author": [
|
"author": ["Team Agate"],
|
||||||
"Team Agate"
|
|
||||||
],
|
|
||||||
"published-date": "",
|
"published-date": "",
|
||||||
"cf-date": ""
|
"cf-date": "",
|
||||||
|
"cover": {
|
||||||
|
"src": "img\\books\\CRE2_BC_EN.png",
|
||||||
|
"alt": "CRE2_BC_EN",
|
||||||
|
"title": "CRE2_BC_EN"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -10,26 +10,29 @@
|
||||||
],
|
],
|
||||||
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
|
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
|
||||||
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
|
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
|
||||||
"author": [
|
"author": ["Team Agate"],
|
||||||
"Team Agate"
|
|
||||||
],
|
|
||||||
"published-date": "01/04/2018",
|
"published-date": "01/04/2018",
|
||||||
"cf-date": "14/03/2016"
|
"cf-date": "14/03/2016",
|
||||||
|
"cover":{
|
||||||
|
"src": "img\\books\\ADV1_BC_FR.png",
|
||||||
|
"alt": "ADV1_BC_FR",
|
||||||
|
"title": "ADV1_BC_FR"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"CRE2": {
|
"CRE2": {
|
||||||
"code": "CRE2",
|
"code": "CRE2",
|
||||||
"title": "Créature : Inframonde",
|
"title": "Créatures : Inframonde",
|
||||||
"desc": [
|
"desc": ["*"],
|
||||||
"*"
|
|
||||||
],
|
|
||||||
"physical-link": "",
|
"physical-link": "",
|
||||||
"pdf-link": "",
|
"pdf-link": "",
|
||||||
"author": [
|
"author": ["Team Agate"],
|
||||||
"Team Agate"
|
|
||||||
],
|
|
||||||
"published-date": "",
|
"published-date": "",
|
||||||
"cf-date": ""
|
"cf-date": "",
|
||||||
|
"cover": {
|
||||||
|
"src": "img\\books\\CRE2_BC_FR.png",
|
||||||
|
"alt": "CRE2_BC_FR",
|
||||||
|
"title": "CRE2_BC_FR"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC_FR.png'></div><div class='book-title'>Créature : Inframonde</div>"
|
||||||
}
|
}
|
||||||
|
|
@ -9,6 +9,5 @@
|
||||||
"btn-items": "Magic Items",
|
"btn-items": "Magic Items",
|
||||||
"CUVD": "Unofficial site for Fateforge RPG. Uses copyrighted content © Agate RPG, courtesy of the publisher under the CUVD license.",
|
"CUVD": "Unofficial site for Fateforge RPG. Uses copyrighted content © Agate RPG, courtesy of the publisher under the CUVD license.",
|
||||||
"link": "Join the community: <a href='https://fateforge.org/en'>https://fateforge.org/en</a>",
|
"link": "Join the community: <a href='https://fateforge.org/en'>https://fateforge.org/en</a>",
|
||||||
"btn-books": "Books",
|
"btn-books": "Books"
|
||||||
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC_EN.png'></div><div class='book-title'>Creature : Netherworld</div>"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,5 @@
|
||||||
"somatic": "Gestuelle",
|
"somatic": "Gestuelle",
|
||||||
"gridColumns":{
|
"gridColumns":{
|
||||||
"components": "Composants"
|
"components": "Composants"
|
||||||
},
|
}
|
||||||
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC.png'></div><div class='book-title'>Créature : Inframonde</div>"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<button onclick="changeLangEN()">English</button>
|
<button onclick="changeLangEN()">English</button>
|
||||||
<button onclick="changeLangFR()">French</button>
|
<button onclick="changeLangFR()">Français</button>
|
||||||
|
|
||||||
<h1>FateforgeTools</h1>
|
<h1>FateforgeTools</h1>
|
||||||
<h2 data-localize="btn-spells">Spells</h2>
|
<h2 data-localize="btn-spells">Spells</h2>
|
||||||
|
|
|
||||||