You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.5 KiB
76 lines
2.5 KiB
4 months ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="/lws-common.js"></script>
|
||
|
|
<script src="lwsgt.js"></script>
|
||
|
|
<style>
|
||
|
|
.body { font-size: 12 }
|
||
|
|
.gstitle { font-size: 24; text-align:center }
|
||
|
|
.group1 { vertical-align:middle;text-align:center;background:#f0f0e0;
|
||
|
|
padding:12px; -webkit-border-radius:10px;
|
||
|
|
-moz-border-radius:10px;border-radius:10px; }
|
||
|
|
.group2 { vertical-align:middle; font-size: 18;text-align:center;
|
||
|
|
margin:auto; align:center;
|
||
|
|
background-color: rgba(255, 255, 255, 0.8); padding:12px;
|
||
|
|
display:inline-block; -webkit-border-radius:10px;
|
||
|
|
-moz-border-radius:10px; border-radius:10px; }
|
||
|
|
|
||
|
|
.lwsgt_title { font-size: 24; text-align:center }
|
||
|
|
.lwsgt_breadcrumbs { font-size: 18; text-align:left }
|
||
|
|
.lwsgt_table { font-size: 14; padding:12px; margin: 12px; align:center }
|
||
|
|
.lwsgt_hdr { font-size: 18; text-align:center;
|
||
|
|
background-color: rgba(40, 40, 40, 0.8); color: white }
|
||
|
|
.lwsgt_tr { padding: 10px }
|
||
|
|
.lwsgt_td { padding: 3px }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<table>
|
||
|
|
<tr><td class="gstitle">
|
||
|
|
LWS Generic Table demo
|
||
|
|
</td></tr>
|
||
|
|
<tr><td class="group2">
|
||
|
|
This is a demo of lws generic table, using a protocol plugin
|
||
|
|
"protocol-lws-table-dirlisting". It shows a directory listing,
|
||
|
|
but unlike an oldstyle directory listing done on the
|
||
|
|
server side with a script, this is static html that connects
|
||
|
|
back to the server with a websocket, and gets live JSON from
|
||
|
|
that.
|
||
|
|
<p>
|
||
|
|
Actually the static html is extremely simple, since it uses
|
||
|
|
lwsgt, LWS Generic Table, JS include on the client-side that
|
||
|
|
handles all the table generation from a template sent in JSON
|
||
|
|
over the ws link. It means there is no custom JS required
|
||
|
|
clientside either. It's just CSS, this text and a call to
|
||
|
|
initialize lwsgt with the appropriate ws protocol.
|
||
|
|
</td></tr>
|
||
|
|
<tr><td><div id="lwsgt1" class="group1"></div></td></tr>
|
||
|
|
<tr><td class="group2">
|
||
|
|
There's no problem having multiple independent instances per
|
||
|
|
page...
|
||
|
|
</td></tr>
|
||
|
|
<tr><td><div id="lwsgt2" class="group1"></div></td></tr>
|
||
|
|
</table>
|
||
|
|
<div id="debug"></div>
|
||
|
|
|
||
|
|
<script nonce="lwscaro">
|
||
|
|
var v1 = new lwsgt_initial("Dir listing demo",
|
||
|
|
"protocol-lws-table-dirlisting",
|
||
|
|
"lwsgt1", "lwsgt_dir_click", "v1");
|
||
|
|
var v2 = new lwsgt_initial("Dir listing 2",
|
||
|
|
"protocol-lws-table-dirlisting",
|
||
|
|
"lwsgt2", "lwsgt_dir_click", "v2");
|
||
|
|
|
||
|
|
function lwsgt_dir_click(gt, u, col, row)
|
||
|
|
{
|
||
|
|
if (u[0] == '=') { /* change directory */
|
||
|
|
window[gt].lwsgt_ws.send(u.substring(1, u.length));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var win = window.open(u, '_blank');
|
||
|
|
win.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|