From 209f21535e3da48c85ac507fb5e6cd90a7135ad7 Mon Sep 17 00:00:00 2001
From: LUCASTUCIOUS <peterlucas2804@gmail.com>
Date: Tue, 14 Mar 2023 19:09:27 +0100
Subject: [PATCH] make book.js a fetch

---
 books.html  |  62 ++++++++++++++++----------------
 js/books.js | 100 ++++++++++++++++++++++++++++++----------------------
 2 files changed, 89 insertions(+), 73 deletions(-)
diff --git a/books.html b/books.html
index c8da262..4e935f0 100644
--- a/books.html
+++ b/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>
 
diff --git a/js/books.js b/js/books.js
index 4d972ee..c936693 100644
--- a/js/books.js
+++ b/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();
 }
\ No newline at end of file
