Update spell renderer
This commit is contained in:
parent
ae5a0582a2
commit
84f547e3d4
6 changed files with 107 additions and 67 deletions
|
|
@ -1,26 +1,39 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div{
|
||||
overflow: visible;
|
||||
white-space:break-spaces;
|
||||
}
|
||||
.list-col{
|
||||
flex-grow: 2;
|
||||
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 {
|
||||
}
|
||||
|
|
|
|||
91
js/spells.js
91
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
|
||||
},
|
||||
multiSelect: true,
|
||||
liveSearch: true,
|
||||
multiSearch: true,
|
||||
fixedBody: false,
|
||||
selectColumn: true,
|
||||
},
|
||||
multiSelect: true,
|
||||
liveSearch: true,
|
||||
multiSearch: true,
|
||||
fixedBody: false,
|
||||
records: alldata,
|
||||
columns: [
|
||||
{ field: "name", text: "Name",sortable: true, },
|
||||
{ field: "desc", text: "Description",size:"500%",style:"test" },
|
||||
{ field: "source", text: "Source",sortable: true, },
|
||||
{ field: "page", text: "Page",sortable: true, },
|
||||
{ field: "level", text: "Level",sortable: true, },
|
||||
{ field: "school", text: "School",sortable: true, },
|
||||
{ field: "components", text: "Components", },
|
||||
{ field: "duration", text: "Duration", },
|
||||
|
||||
{ field: "name", text: "Name", sortable: true, resizable: true,searchable: { operator: 'contains' }, },
|
||||
{
|
||||
field: "desc",
|
||||
text: "Description",
|
||||
size: "500%",
|
||||
style: "test",
|
||||
resizable: true,
|
||||
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
|
||||
console.log('select', event.detail, this.getSelection())
|
||||
},
|
||||
onClick(event) {
|
||||
let record = this.get(event.detail.recid)
|
||||
await event.complete;
|
||||
console.log("select", event.detail, this.getSelection());
|
||||
},
|
||||
onClick(event) {
|
||||
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()
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
13
spells.html
13
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.es6.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="lib/w2ui/w2ui.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>
|
||||
Loading…
Reference in a new issue