120 lines
3.7 KiB
HTML
120 lines
3.7 KiB
HTML
<!--
|
|
Test/Development/Documentation page
|
|
- enable web server file access
|
|
- upload to web file path, e.g. /sd/dev/filedialog.htm
|
|
- open in framework by e.g. http://test1.local/#/dev/filedialog.htm
|
|
-->
|
|
|
|
<div class="filedialog" id="fileselect"/>
|
|
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">FileDialog Test</div>
|
|
<div class="panel-body">
|
|
|
|
<h2>Dynamic API</h2>
|
|
|
|
<p>
|
|
<button class="btn btn-default" id="action-load">Load</button>
|
|
<button class="btn btn-default" id="action-save">Save</button>
|
|
</p>
|
|
<pre id="log"/>
|
|
|
|
<h2>Data API</h2>
|
|
|
|
<div class="input-group">
|
|
<input type="text" class="form-control font-monospace" placeholder="Enter file name"
|
|
name="filename" id="input-filename" value="" autocapitalize="none" autocorrect="off"
|
|
autocomplete="section-demo" spellcheck="false">
|
|
<div class="input-group-btn">
|
|
<!-- use data-toggle="filedialog", data-target & data-input on the button: -->
|
|
<button type="button" class="btn btn-default" data-toggle="filedialog" data-target="#fd-api" data-input="#input-filename">Select</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- This is the file dialog triggered by the button: -->
|
|
<div class="filedialog" id="fd-api" data-options='{
|
|
"title": "This is a data API dialog",
|
|
"path": "/sd/foo/",
|
|
"quicknav": ["/sd/", "/sd/foo/", "/sd/bar"]
|
|
}' />
|
|
<!-- …that's it, no JS code necessary.
|
|
Note: JSON syntax needs to be strict here, see JS console for errors.
|
|
-->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// =======================================================================================
|
|
// FileDialog is a Dialog with an embedded FileBrowser.
|
|
//
|
|
// The input object combines the dialog button and the file browser data.
|
|
//
|
|
// Options:
|
|
// title: 'Select file', -- dialog title
|
|
// submit: 'Select', -- label of submit button
|
|
// select: 'f', -- 'f' = only files selectable (default), 'd' = only directories
|
|
// onSubmit: null, -- callback function(input)
|
|
// onCancel: null, -- callback function(input)
|
|
//
|
|
// …inherited from FileBrowser:
|
|
// path: '',
|
|
// quicknav: ['/sd/', '/store/'],
|
|
// filter: null,
|
|
// sortBy: null,
|
|
// sortDir: 1,
|
|
//
|
|
// …inherited from Dialog:
|
|
// backdrop: true,
|
|
// keyboard: true,
|
|
// transition: 'fade',
|
|
// size: 'lg',
|
|
// onUpdate: null,
|
|
//
|
|
|
|
// Init dialog:
|
|
$("#fileselect").filedialog({
|
|
path: '/store/scripts/',
|
|
quicknav: ['/store/scripts/', '/store/events/', '/store/obd2ecu/'],
|
|
});
|
|
|
|
$('#action-load').on('click', function(){
|
|
$('#log').empty();
|
|
$("#fileselect").filedialog('show', {
|
|
title: "Load Script",
|
|
submit: "Load",
|
|
onSubmit: function(input) {
|
|
// This is called when the user doubleclicks an entry or presses Enter in a directory.
|
|
// Note: you need to check if input.file is valid (empty = directory selected).
|
|
if (input.file)
|
|
$('#log').text('Loading: "' + input.path + '"\n');
|
|
else
|
|
$('#log').text('Directory selection: "' + input.path + '"\n');
|
|
},
|
|
onCancel: function(input) {
|
|
// This is called when the user cancels or closes the dialog.
|
|
$('#log').text('Load cancelled\n');
|
|
},
|
|
});
|
|
});
|
|
|
|
$('#action-save').on('click', function(){
|
|
$('#log').empty();
|
|
$("#fileselect").filedialog('show', {
|
|
title: "Save Script",
|
|
submit: "Save",
|
|
onSubmit: function(input) {
|
|
if (input.file)
|
|
$('#log').text('Saving: "' + input.path + '"\n');
|
|
else
|
|
$('#log').text('Directory selection: "' + input.path + '"\n');
|
|
},
|
|
onCancel: function(input) {
|
|
$('#log').text('Save cancelled\n');
|
|
},
|
|
});
|
|
});
|
|
|
|
</script>
|