Make clickable links

TODO:
- cf-link isnt filled.. why??
- book-en isnt done

books.html

@@ -31,11 +31,17 @@
 
   <div class="gallery"></div>
 
-  
+
 
   <div class="view-container" style="display: flex;align-items: center;flex-direction: column;">
-    <h1 id="view-title"></h1>
-    <p class="book-desc" id="view-desc"></p>
+    <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>
+    <div class="book-desc" id="book_desc"></div>
   </div>
 
   <link href="css/flickity.css" rel="stylesheet" />
@@ -43,10 +49,11 @@
   <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>
+
 </body>
 
 </html>

css/style.css

@@ -143,7 +143,7 @@
 .view-col {
   flex-grow: 1;
 }
-@media screen and (min-width: 768px) {
+@media only screen and (min-width: 768px) {
     
   .list-col {
     margin-right: 1%;
@@ -152,6 +152,7 @@
     
     max-width: 600px;
   }
+
 }
   
 .w2ui-grid-data {
@@ -164,4 +165,48 @@
 }
 .w2ui-grid .w2ui-grid-body table {
 
-}
+}
+
+.fa-solid, .fas {
+  font-weight: 900;
+  margin: 5px;
+}
+
+.view-container{
+  display:flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+}
+.view-container.row{
+  flex-direction: row;
+}
+.icon + .view-details:empty + {
+  display: none;
+}
+.icon{
+  font-size: xx-large;
+}
+
+.view-details:empty {
+  display: none;
+}
+A[href=""], A[href="#"] {
+  pointer-events: none;
+  cursor: default;
+  text-decoration: none;
+  color: inherit;
+}
+
+@media only screen and (max-width: 768px) {
+  .view-details{
+    display: none;
+      }
+
+      .view-container{
+        display:flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+      }
+}
+

js/books.js

@@ -42,10 +42,17 @@ flkty.on("select", function (index) {
 });*/
 
 function fillBookView(){
+  var bookAttributes = ["book_title","book_desc","cf-date","physical-link","pdf-link","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();

lang/books-en.json

@@ -8,7 +8,10 @@
       "**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, l’exploration et la découverte sont au cœur de l’expérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à l’appel de l’aventure !",
       "**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, l’aventure, le combat et la santé. Les règles optionnelles sont présentées à l’aide d’un système modulaire permettant à chaque meneur de définir son propre style de jeu."
     ],
-    "physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
+    "physical-link": {
+      "title":"Acheter un exemplaire",
+      "href":"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",
     "author": ["Team Agate"],
     "published-date": "01/04/2018",

lang/books-fr.json

@@ -8,8 +8,18 @@
       "**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, l’exploration et la découverte sont au cœur de l’expérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à l’appel de l’aventure !",
       "**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, l’aventure, le combat et la santé. Les règles optionnelles sont présentées à l’aide d’un système modulaire permettant à chaque meneur de définir son propre style de jeu."
     ],
-    "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",
+    "physical-link": {
+      "title":"Acheter un exemplaire",
+      "href":"https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html"
+    },
+    "pdf-link":{
+      "title":"Acheter le pdf",
+      "href":"https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers"
+    },
+    "cf-link:":{
+      "title":"Ulule",
+      "href":"https://fr.ulule.com/dragons-5e/"
+    },
     "author": ["Team Agate"],
     "published-date": "01/04/2018",
     "cf-date": "14/03/2016",
@@ -23,11 +33,21 @@
     "code": "CRE2",
     "title": "Créatures : Inframonde",
     "desc": ["*"],
-    "physical-link": "",
-    "pdf-link": "",
+    "physical-link": {
+      "title":"Acheter un exemplaire",
+      "href":""
+    },
+    "pdf-link":{
+      "title":"Acheter le pdf",
+      "href":"https://www.drivethrurpg.com/product/422893/Dragons--5--Bestiaire--Creatures-2-Inframonde"
+    },
+    "cf-link:":{
+      "title":"Ulule",
+      "href":"https://fr.ulule.com/dragons-creatures-de-l-inframonde/"
+    },
     "author": ["Team Agate"],
     "published-date": "",
-    "cf-date": "",
+    "cf-date": "-",
     "cover": {
       "src": "img\\books\\CRE2_BC_FR.png",
       "alt": "CRE2_BC_FR",

lib/jquery.localize-dev.js

@@ -29,7 +29,7 @@ http://keith-wood.name/localisation.html
       lang,
       loadLanguage,
       localizeElement,
-      localizeForSpecialKeys,
+      localizeForLink,
       localizeImageElement,
       localizeInputElement,
       localizeOptgroupElement,
@@ -158,7 +158,11 @@ http://keith-wood.name/localisation.html
         elem.html(value);
       }
       if ($.isPlainObject(value)) {
-        return localizeForSpecialKeys(elem, value);
+        if (elem.is("a")) {
+          localizeForLink(elem, key, value);
+        }
+        //TODO:make a generic object returner
+        return localizeForLink(elem, value);
       }
     };
     localizeInputElement = function (elem, key, value) {
@@ -170,7 +174,7 @@ http://keith-wood.name/localisation.html
         return elem.val(val);
       }
     };
-    localizeForSpecialKeys = function (elem, value) {
+    localizeForLink = function (elem, value) {
       setAttrFromValueForKey(elem, "title", value);
       setAttrFromValueForKey(elem, "href", value);
       return setTextFromValueForKey(elem, "text", value);