Update spell renderer

css/style.css

@@ -1,26 +1,39 @@
 .container {
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: stretch;
+  align-items: stretch;
-  }
+}
-  
-  .list-col, .view-col {
-    flex-basis: 100%;
-  }
-  
-  @media screen and (min-width: 768px) {
-    .list-col, .view-col {
-      flex-basis: calc(50% - 10px); /* Réduire de 10px pour ajouter une marge entre les deux div */
-    }
-  }
-  
-  .w2ui-grid-data {
-  color:black;
-  word-wrap: break-word;
-  } 
 
-  .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div{
+.list-col{
-    overflow: visible;
+  flex-grow: 2;
-    white-space:break-spaces;
+  min-width: 600px;
-  }
+} 
+.view-col {
+  flex-grow: 1;
+  
+}
+
+@media screen and (min-width: 768px) {
+  .list-col {
+    
+    margin-right: 1%;
+  }
+  .view-col {
+    
+    max-width: 600px;
+  }
+}
+
+.w2ui-grid-data {
+  color: black;
+  word-wrap: normal;
+}
+
+.w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div {
+  overflow: visible;
+  white-space: break-spaces;
+}
+
+.w2ui-grid .w2ui-grid-body table {
+}

js/spells.js

@@ -15,37 +15,60 @@ fetch(jsonsource)
     console.log(alldata);
 
     //document.getElementById("spell-list")
-    $("#spell-list").w2grid({
+    var grid = $("#spell-list").w2grid({
       name: "Spells",
       box: "#spellgrid",
       show: {
-        header:false,
+        header: false,
         toolbar: true,
         footer: false,
-        selectColumn: true
+        selectColumn: true,
-    },
+      },
-    multiSelect: true,
+      multiSelect: true,
-    liveSearch: true,
+      liveSearch: true,
-    multiSearch: true,
+      multiSearch: true,
-    fixedBody: false,
+      fixedBody: false,
       records: alldata,
       columns: [
-        { field: "name", text: "Name",sortable: true, },
+        { field: "name", text: "Name", sortable: true, resizable: true,searchable: { operator: 'contains' }, },
-        { field: "desc", text: "Description",size:"500%",style:"test" },
+        {
-        { field: "source", text: "Source",sortable: true,  },
+          field: "desc",
-        { field: "page", text: "Page",sortable: true,  },
+          text: "Description",
-        { field: "level", text: "Level",sortable: true, },
+          size: "500%",
-        { field: "school", text: "School",sortable: true, },
+          style: "test",
-        { field: "components", text: "Components", },
+          resizable: true,
-        { field: "duration", text: "Duration", },
+          searchable: { operator: 'contains' },
-
+          render(record, extra) {
+            return (
+              '<a href="http://w2ui.com" target="_blank" title="Click Me!"><u>' +
+              extra.value +
+              "</u></a>"
+            );
+          },
+        },
+        { field: "source", text: "Source", sortable: true, tooltip: 'Which book is this from ?',searchable: { operator: 'contains' } },
+        { field: "page", text: "Page", sortable: true },
+        { field: "level", text: "Level", sortable: true, size: 65 },
+        { field: "school", text: "School", sortable: true },
+        {
+          field: "components", text: "Components", render(record) {
+            var v = (record.components.v) ? '<span data-localize="verbal">V</span>' : ''
+            var s = (record.components.s) ? 'S' : ''
+            var m = (record.components.m) ? record.components.m : ''
+            return v.concat()
+            if (record.components.v = true) {
+              console.log(record.components)
+            }
+          }
+        },
+        { field: "duration", text: "Duration" },
       ],
       async onSelect(event) {
-        await event.complete
+        await event.complete;
-        console.log('select', event.detail, this.getSelection())
+        console.log("select", event.detail, this.getSelection());
-    },
+      },
-    onClick(event) {
+      onClick(event) {
-        let record = this.get(event.detail.recid)
+        let record = this.get(event.detail.recid);
         //grid2.clear()
         /*grid2.add([
             { recid: 0, name: 'ID:', value: record.recid },
@@ -54,19 +77,19 @@ fetch(jsonsource)
             { recid: 3, name: 'Email:', value: record.email },
             { recid: 4, name: 'Date:', value: record.sdate }
         ])*/
-        console.log(record)
+        console.log(record);
+      },
+      onRender(event) {
+        // TODO: find the event after grid generate the html end signal and apply loc
+        event.done(function(){
+          console.log('object '+ this.name + ' is rendered');
+          $("[data-localize]").localize("main", { pathPrefix: "lang" });
+        })
+        
     }
-    });
+
+    })
+      
   });
 
 
-  window.multi = function(el) {
-    grid.multiSelect = el.checked
-    grid.selectNone()
-    grid.refresh()
-}
-
-window.selColumn = function(flag) {
-  grid.show.selectColumn = flag
-  grid.refresh()
-}

lang/main-en.json

@@ -8,5 +8,6 @@
     "btn-monsters": "Creatures",
     "btn-items": "Magic Items",
     "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>",
+    "verbal": "Verbal"
 }

lang/main-fr.json

@@ -8,5 +8,6 @@
   "btn-monsters": "Créatures",
   "btn-items": "Objets Magiques",
   "CUVD": "Site non-officiel pour ​Dragons​ créé(e). Utilise des contenus protégés par la propriété intellectuelle © Agate RPG, avec l’aimable permission de l’éditeur dans le cadre de la licence CUVD.",
-  "link": "Rejoignez la communauté : <a href='www.dragons-rpg.com'>​www.dragons-rpg.com</a>"
+  "link": "Rejoignez la communauté : <a href='www.dragons-rpg.com'>​www.dragons-rpg.com</a>",
+  "verbal": "Verbale"
 }

lib/w2ui/w2ui.js

@@ -17818,7 +17818,8 @@ class w2grid extends w2base {
         // value, attr, style, className, divAttr
         let { value, style, className, attr, divAttr } = this.getCellValue(ind, col_ind, summary, true)
         let edit = (ind !== -1 ? this.getCellEditable(ind, col_ind) : '')
-        let divStyle = 'max-height: '+ parseInt(this.recordHeight) +'px;' + (col.clipboardCopy ? 'margin-right: 20px' : '')
+        //let divStyle = 'max-height: '+ parseInt(this.recordHeight) +'px;' + (col.clipboardCopy ? 'margin-right: 20px' : '')
+        let divStyle = '' //no need to constraint height
         let isChanged = !summary && record?.w2ui?.changes && record.w2ui.changes[col.field] != null
         let sel = this.last.selection
         let isRowSelected = false

spells.html

@@ -8,7 +8,7 @@
 
 	<link href="css/all.min.css" rel="stylesheet" />
 	<link href="css/water.css" rel="stylesheet" />
-	<link type="text/css" rel="stylesheet" href="lib/w2ui/w2ui.min.css" />
+	<link type="text/css" rel="stylesheet" href="lib/w2ui/w2ui.css" />
 	<link rel="stylesheet" href="css/style.css" type="text/css">
 
 	<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png">
@@ -32,7 +32,7 @@
 	<!--<div class="container" style="display: flex;flex-direction: row;flex-wrap: wrap;">-->
 
 	<div class="container" ">
-			<div class=" list-col" id="spell-list" style="min-width: 300px;max-width:900px;">
+			<div class="list-col" id="spell-list" >
 				<!-- FILL WITH JS-->
 	</div>
 
@@ -46,7 +46,7 @@
 
 
 
-	<div class="view-col" id="content">
+	<div class="view-col" id="content" >
 		<table id="pagecontent" class="view" style="border:solid">
 
 			<td class="initial-message">Select a spell from the list to view it here</td>
@@ -60,9 +60,9 @@
 
 	<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="text/javascript" src="lib/w2ui/w2ui.min.js"></script>
+	<script type="text/javascript" src="lib/w2ui/w2ui.js"></script>
-	<script type="text/javascript" src="lib/w2ui/w2ui.es6.min.js"></script>
+	<script type="text/javascript" src="lib/w2ui/w2ui.es6.js"></script>
 
 
 
@@ -70,6 +70,7 @@
 
 
 	<script src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
+	<script type="text/javascript" src="js/language.js"></script>
 </body>
 
 </html>