You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
5.3 KiB
172 lines
5.3 KiB
'use strict';
|
|
define(
|
|
[
|
|
'underscore',
|
|
'vent',
|
|
'marionette',
|
|
'backgrid',
|
|
'Shared/FileBrowser/FileBrowserCollection',
|
|
'Shared/FileBrowser/EmptyView',
|
|
'Shared/FileBrowser/FileBrowserRow',
|
|
'Shared/FileBrowser/FileBrowserTypeCell',
|
|
'Shared/FileBrowser/FileBrowserNameCell',
|
|
'Cells/RelativeDateCell',
|
|
'Cells/FileSizeCell',
|
|
'Shared/LoadingView',
|
|
'Mixins/DirectoryAutoComplete'
|
|
], function (_,
|
|
vent,
|
|
Marionette,
|
|
Backgrid,
|
|
FileBrowserCollection,
|
|
EmptyView,
|
|
FileBrowserRow,
|
|
FileBrowserTypeCell,
|
|
FileBrowserNameCell,
|
|
RelativeDateCell,
|
|
FileSizeCell,
|
|
LoadingView) {
|
|
|
|
return Marionette.Layout.extend({
|
|
template: 'Shared/FileBrowser/FileBrowserLayoutTemplate',
|
|
|
|
regions: {
|
|
browser : '#x-browser'
|
|
},
|
|
|
|
ui: {
|
|
path : '.x-path',
|
|
indicator : '.x-indicator'
|
|
},
|
|
|
|
events: {
|
|
'typeahead:selected .x-path' : '_pathChanged',
|
|
'typeahead:autocompleted .x-path' : '_pathChanged',
|
|
'keyup .x-path' : '_inputChanged',
|
|
'click .x-ok' : '_selectPath'
|
|
},
|
|
|
|
initialize: function (options) {
|
|
this.collection = new FileBrowserCollection();
|
|
this.collection.showFiles = options.showFiles || false;
|
|
this.collection.showLastModified = options.showLastModified || false;
|
|
|
|
this.input = options.input;
|
|
|
|
this._setColumns();
|
|
this.listenTo(this.collection, 'sync', this._showGrid);
|
|
this.listenTo(this.collection, 'filebrowser:folderselected', this._rowSelected);
|
|
},
|
|
|
|
onRender: function () {
|
|
this.browser.show(new LoadingView());
|
|
this.ui.path.directoryAutoComplete();
|
|
|
|
this._fetchCollection(this.input.val());
|
|
this._updatePath(this.input.val());
|
|
},
|
|
|
|
_setColumns: function () {
|
|
this.columns = [
|
|
{
|
|
name : 'type',
|
|
label : '',
|
|
sortable : false,
|
|
cell : FileBrowserTypeCell
|
|
},
|
|
{
|
|
name : 'name',
|
|
label : 'Name',
|
|
sortable : false,
|
|
cell : FileBrowserNameCell
|
|
}
|
|
];
|
|
|
|
if (this.collection.showLastModified) {
|
|
this.columns.push({
|
|
name : 'lastModified',
|
|
label : 'Last Modified',
|
|
sortable : false,
|
|
cell : RelativeDateCell
|
|
});
|
|
}
|
|
|
|
if (this.collection.showFiles) {
|
|
this.columns.push({
|
|
name : 'size',
|
|
label : 'Size',
|
|
sortable : false,
|
|
cell : FileSizeCell
|
|
});
|
|
}
|
|
},
|
|
|
|
_fetchCollection: function (path) {
|
|
this.ui.indicator.show();
|
|
|
|
var data = {
|
|
includeFiles : this.collection.showFiles
|
|
};
|
|
|
|
if (path) {
|
|
data.path = path;
|
|
}
|
|
|
|
this.collection.fetch({
|
|
data: data
|
|
});
|
|
},
|
|
|
|
_showGrid: function () {
|
|
this.ui.indicator.hide();
|
|
|
|
if (this.collection.models.length === 0) {
|
|
this.browser.show(new EmptyView());
|
|
return;
|
|
}
|
|
|
|
var grid = new Backgrid.Grid({
|
|
row : FileBrowserRow,
|
|
collection : this.collection,
|
|
columns : this.columns,
|
|
className : 'table table-hover'
|
|
});
|
|
|
|
this.browser.show(grid);
|
|
},
|
|
|
|
_rowSelected: function (model) {
|
|
var path = model.get('path');
|
|
|
|
this._updatePath(path);
|
|
this._fetchCollection(path);
|
|
},
|
|
|
|
_pathChanged: function (e, path) {
|
|
this._fetchCollection(path.value);
|
|
this._updatePath(path.value);
|
|
},
|
|
|
|
_inputChanged: function () {
|
|
var path = this.ui.path.val();
|
|
|
|
if (path === '' || path.endsWith('\\') || path.endsWith('/')) {
|
|
this._fetchCollection(path);
|
|
}
|
|
},
|
|
|
|
_updatePath: function (path) {
|
|
if (path !== undefined || path !== null) {
|
|
this.ui.path.val(path);
|
|
}
|
|
},
|
|
|
|
_selectPath: function () {
|
|
this.input.val(this.ui.path.val());
|
|
this.input.trigger('change');
|
|
|
|
vent.trigger(vent.Commands.CloseFileBrowser);
|
|
}
|
|
});
|
|
});
|