So, I had this really cool idea. I have a plan to rewrite a least the %list% part of HFS into a javscript object that is built client-side.
This would take a while to write but the benefits are that it would make it orders of magnitude easier to create a more interactive webpage, with better ajax functions and easier jquery. Basically rather than HFS building all the HTML, it would simply insert the data for each file into this javascript object below, and then it would be built clientside. To change something on the page would only require setting the new value in the JS object (since all the data is already in the javascript space) and then just running a function to rebuild everything. It would also potentially save some build-time server side.
Here's a very simple draft of how it could work.
<html><body onload="content.build();" ><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css"> td { padding:8px; } </style>
<script type="text/javascript">
/* There is the main containing object, inside there are two arrays, one for folders, one for files,
each part of each array contains one object per file with the specific properties within that object.
So it's one big object containing 2 arrays each containing x number of objects each with properties.
Also inside the big main object is the function 'build' that puts everything together on the page. */
content = {
folders: [{
"name": "documents",
"size": 27928338,
"hits": 27,
"modified": "6/13/2012 10:41:35 PM"
}, {
"name": "music",
"size": 48929338,
"hits": 52,
"modified": "6/13/2012 10:41:35 PM"
}],
files: [{
"name": "file.mp3",
"size": 10384171,
"hits": 2,
"modified": "6/13/2012 10:41:35 PM"
}, {
"name": "fun.docx",
"size": 502858,
"hits": 5,
"modified": "6/13/2012 10:41:35 PM"
}, {
"name": "anotherfile.pdf",
"size": 2411725,
"hits": 5,
"modified": "6/13/2012 10:41:35 PM"
}],
build: function () {
for (var n = 0; n < content.folders.length; n++) {
var name = content.folders[n].name;
var size = content.folders[n].size;
var hits = content.folders[n].hits;
var modified = content.folders[n].modified;
var thehtml = '<tr><td>Folder</td><td>' + name + '</td><td>' + size + '</td><td>' + hits + '</td><td>' + modified + '</td></tr>';
$('#filetable').append(thehtml);
}
for (var n = 0; n < content.files.length; n++) {
var name = content.files[n].name;
var size = content.files[n].size;
var hits = content.files[n].hits;
var modified = content.files[n].modified;
var thehtml = '<tr><td>File</td><td>' + name + '</td><td>' + size + '</td><td>' + hits + '</td><td>' + modified + '</td></tr>';
$('#filetable').append(thehtml);
}
}
}
</script>
<table id="filetable"></table>
</body></html>
Let me know what you think.