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.
137 lines
4.2 KiB
137 lines
4.2 KiB
var _ = require('underscore');
|
|
var vent = require('vent');
|
|
var Marionette = require('marionette');
|
|
var Backgrid = require('backgrid');
|
|
var FileBrowserCollection = require('./FileBrowserCollection');
|
|
var EmptyView = require('./EmptyView');
|
|
var FileBrowserRow = require('./FileBrowserRow');
|
|
var FileBrowserTypeCell = require('./FileBrowserTypeCell');
|
|
var FileBrowserNameCell = require('./FileBrowserNameCell');
|
|
var RelativeDateCell = require('../../Cells/RelativeDateCell');
|
|
var FileSizeCell = require('../../Cells/FileSizeCell');
|
|
var LoadingView = require('../LoadingView');
|
|
require('../../Mixins/DirectoryAutoComplete');
|
|
|
|
module.exports = 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);
|
|
}
|
|
}); |