OVMS3/OVMS.V3/components/ovms_webserver/dev/filebrowser.htm

129 lines
5.2 KiB
HTML

<!--
Test/Development/Documentation page
- enable web server file access
- upload to web file path, e.g. /sd/dev/filebrowser.htm
- open in framework by e.g. http://test1.local/#/dev/filebrowser.htm
-->
<style>
/* Note: set height or min-height on the filebrowser tbody.
Default height by class "filebrowser" is 310px (each file row has a height of 31px with the default font size) */
#myfilebrowser tbody {
height: 35vh;
}
</style>
<div class="panel panel-primary">
<div class="panel-heading">FileBrowser Test/Demo</div>
<div class="panel-body">
<div class="filebrowser" id="myfilebrowser" />
<hr/>
<pre id="log"/>
<button type="button" class="btn btn-default" id="action-setpath">Set path to /sd/logs/log</button>
<button type="button" class="btn btn-default" id="action-stopload">Stop loading dir</button>
<button type="button" class="btn btn-default" id="action-filteron">Filter *.zip</button>
<button type="button" class="btn btn-default" id="action-filteroff">Filter off</button>
<button type="button" class="btn btn-default" id="action-sortoff">Sort off</button>
<p>Note: the test widget is configured to stop/inhibit loading on selection of a ".txt" file or a directory matching "DCIM".</p>
</div>
</div>
<script>
// =======================================================================================
// FileBrowser Widget:
//
// Test/demo of init with all options.
// Note: you can init a filebrowser without any options.
// Defaults are path & quicknav as shown below, no sorting, no callbacks.
//
// The input object passed to all callbacks contains these fields:
// - path -- the full path (dir + "/" + file)
// - file -- the file part of the currently selected path
// - dir -- the directory part of the currently selected path
// - noload -- set to true to inhibit directory loading (see onPathChange)
//
// Note: path, file & dir are unvalidated user input.
//
// Note on sorting: disabling initial sorting improves user interaction while loading the
// directory, i.e. to select files/dirs while the loader is running. This may
// be an option especially for large directories. The user can still sort manually.
//
// Methods:
// - getInput() -- retrieve input object
// - setPath(newpath, reload) -- add trailing slash to enter dir w/o file selection
// - sortList(by, dir) -- sort file list
// - loadDir() -- trigger directory reload
// - stopLoad() -- abort directory loading
// - newDir() -- open create directory sub dialog
//
$('#myfilebrowser').filebrowser({
path: '/sd/',
quicknav: ['/sd/', '/store/'],
filter: null, // see Filter examples below
sortBy: "name", // …or "size" or "date" or null (disable)
sortDir: 1, // …or -1 for reverse
onUpdate: function(input) {
// This is called after any widget configuration update, use for custom extensions.
$('#log').append('onUpdate: ' + JSON.stringify(input) + '\n');
},
onPathChange: function(input) {
// Called whenever the path changes.
$('#log').append('onPathChange: ' + JSON.stringify(input) + '\n');
// To inhibit loading the directory for the new path, set input.noload to true:
if (input.dir.indexOf("DCIM") >= 0 || input.file.indexOf('.txt') >= 0) {
$('#log').append('inhibiting directory loading\n');
input.noload = true;
}
},
onAction: function(input) {
// This is called when the user doubleclicks an entry or presses Enter in a directory:
$('#log').append('onAction: ' + JSON.stringify(input) + '\n');
},
});
$('#action-setpath').on('click', function(ev) {
$('#myfilebrowser').filebrowser('setPath', '/sd/logs/log', true);
});
$('#action-stopload').on('click', function(ev) {
$('#myfilebrowser').filebrowser('stopLoad');
});
$('#action-sortoff').on('click', function(ev) {
$('#myfilebrowser').filebrowser('sortList', '');
});
// Filter example:
$('#action-filteron').on('click', function(ev) {
$('#myfilebrowser').filebrowser({
// The list filter may be given as a string (regular expression applied to file name):
filter: "\\.zip$",
// A string filter always lists directories.
// For advanced usage, you may alternatively specify a filter callback like this:
// filter: function(f) { return f.isdir || f.name.match("\\.zip$"); }
// The function is called per list entry object with…
// - isdir: true = is sub directory
// - name: the name part (file or directory, dir with trailing '/')
// - path: the full path of this entry
// - size: formatted size ('6.8k')
// - date: formatted date ('23-Nov-2018 17:42')
// - bytes: size in bytes, -1 for directories
// - isodate: ISO style date 'YYYY-mm-dd HH:MM'
// - class: '', can be used to add a custom row class
// Return true to allow the entry to be added to the list.
// Note: list filters do not restrict the allowed path input. To do so,
// register onPathChange or onAction and check the input in your callback.
// See FileDialog widget "select" option handling for an example.
});
});
$('#action-filteroff').on('click', function(ev) {
$('#myfilebrowser').filebrowser({
filter: null
});
});
</script>