fix spell.js
This commit is contained in:
parent
caeae71203
commit
ae5a0582a2
9 changed files with 137 additions and 49 deletions
26
css/style.css
Normal file
26
css/style.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div{
|
||||
overflow: visible;
|
||||
white-space:break-spaces;
|
||||
}
|
||||
|
|
@ -113,9 +113,9 @@
|
|||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
|
||||
line-height: 1.4;
|
||||
max-width: 800px;
|
||||
/*max-width: 800px;*/
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
padding: 0 5%;
|
||||
word-wrap: break-word;
|
||||
color: #363636;
|
||||
color: var(--text-main);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"spell": [
|
||||
{
|
||||
"id": 0,
|
||||
"recid": 0,
|
||||
"name": "Acid Arrow",
|
||||
"source": "GRI",
|
||||
"page": 110,
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
"areaTags": ["", ""]
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"recid": 1,
|
||||
"name": "Acid Blob",
|
||||
"source": "GRI",
|
||||
"page": 110,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"spell": [
|
||||
{
|
||||
"id": 0,
|
||||
"recid": 0,
|
||||
"name": "Flèche Acide",
|
||||
"source": "GRI",
|
||||
"page": 188,
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
"areaTags": ["", ""]
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"recid": 1,
|
||||
"name": "Bille Acide",
|
||||
"source": "GRI",
|
||||
"page": 134,
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<script type="text/javascript" src="lib/jquery.localize.js"></script>
|
||||
<script type="text/javascript" src="js/language.js"></script>
|
||||
|
||||
<script rel="preload src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
|
||||
<script rel="preload" src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@
|
|||
$("[data-localize]").localize("main", { pathPrefix: "lang" });
|
||||
|
||||
// You can also override the language detection and specify a language code. This code defines a function that sets the language to French.
|
||||
function changeLangFR() { $("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr", }); }
|
||||
|
||||
|
||||
function changeLangFR() {
|
||||
$("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr" });
|
||||
}
|
||||
|
||||
// This code defines a function that sets the language to English.
|
||||
function changeLangEN() {
|
||||
$("[data-localize]").localize("main", {
|
||||
pathPrefix: "lang",
|
||||
language: "en",
|
||||
});
|
||||
$("[data-localize]").localize("main", { pathPrefix: "lang", language: "en" });
|
||||
}
|
||||
23
js/spells.js
23
js/spells.js
|
|
@ -5,14 +5,14 @@ var jsonsource = "".concat(
|
|||
$.defaultLanguage.slice(0, 2),
|
||||
".json"
|
||||
);
|
||||
var test;
|
||||
var alldata;
|
||||
// Fetch data from server
|
||||
fetch(jsonsource)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
// load fetched data into grid
|
||||
test = data.spell;
|
||||
console.log(test);
|
||||
alldata = data.spell;
|
||||
console.log(alldata);
|
||||
|
||||
//document.getElementById("spell-list")
|
||||
$("#spell-list").w2grid({
|
||||
|
|
@ -28,19 +28,24 @@ fetch(jsonsource)
|
|||
liveSearch: true,
|
||||
multiSearch: true,
|
||||
fixedBody: false,
|
||||
records: test,
|
||||
records: alldata,
|
||||
columns: [
|
||||
{ field: "name", text: "Name", size: "30%",sortable: true, attr: 'align=center' },
|
||||
{ field: "id", text: "ID", size: "30%" },
|
||||
{ field: "email", text: "Email", size: "40%" },
|
||||
{ field: "sdate", text: "Start Date", size: "120px" },
|
||||
{ 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", },
|
||||
|
||||
],
|
||||
async onSelect(event) {
|
||||
await event.complete
|
||||
console.log('select', event.detail, this.getSelection())
|
||||
},
|
||||
onClick(event) {
|
||||
let record = this.get(event.detail.name)
|
||||
let record = this.get(event.detail.recid)
|
||||
//grid2.clear()
|
||||
/*grid2.add([
|
||||
{ recid: 0, name: 'ID:', value: record.recid },
|
||||
|
|
|
|||
53
spells.html
53
spells.html
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
<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.css" />
|
||||
<link type="text/css" rel="stylesheet" href="lib/w2ui/w2ui.min.css" />
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png">
|
||||
|
||||
|
|
@ -30,36 +31,38 @@
|
|||
|
||||
<!--<div class="container" style="display: flex;flex-direction: row;flex-wrap: wrap;">-->
|
||||
|
||||
<div id="container" style="width: 100%; ">
|
||||
<div style="display: flex; flex-direction: row;flex-wrap: wrap;">
|
||||
<div id="spell-list" style="min-width: 300px;max-width:900px;height: 300px;"">
|
||||
<!-- FILL WITH JS-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class=" view-col" id="content" style="min-width: 400px;">
|
||||
<table id="pagecontent" class="view" style="display: flex; border:solid">
|
||||
|
||||
<td class="initial-message">Select a spell from the list to view it here</td>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="container" ">
|
||||
<div class=" list-col" id="spell-list" style="min-width: 300px;max-width:900px;">
|
||||
<!-- FILL WITH JS-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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.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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
57
test-w2ui.html
Normal file
57
test-w2ui.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>W2UI Demo: grid/6</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="grid" style="min-width: 300px;max-width:900px;height: 300px;"></div>
|
||||
<br>
|
||||
|
||||
|
||||
<script type="module">
|
||||
import { w2grid } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
|
||||
|
||||
let grid = new w2grid({
|
||||
name: 'grid',
|
||||
box: '#grid',
|
||||
show: { selectColumn: true },
|
||||
multiSelect: true,
|
||||
columns: [
|
||||
{ field: 'recid', text: 'ID', size: '50px' },
|
||||
{ field: 'lname', text: 'Last Name', size: '30%' },
|
||||
{ field: 'fname', text: 'First Name', size: '30%' },
|
||||
{ field: 'email', text: 'Email', size: '40%' },
|
||||
{ field: 'sdate', text: 'Start Date', size: '120px' }
|
||||
],
|
||||
records: [
|
||||
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||||
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
|
||||
],
|
||||
async onSelect(event) {
|
||||
await event.complete
|
||||
console.log('select', event.detail, this.getSelection())
|
||||
}
|
||||
})
|
||||
|
||||
window.multi = function(el) {
|
||||
grid.multiSelect = el.checked
|
||||
grid.selectNone()
|
||||
grid.refresh()
|
||||
}
|
||||
|
||||
window.selColumn = function(flag) {
|
||||
grid.show.selectColumn = flag
|
||||
grid.refresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue