File Dialogs

filedialog.htm (hint: right click, save as)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!--
  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>