<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>