github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-14 17:13:49 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

File Browser

Browse source 
New: File Browser to navigate to folders when choosing paths
This commit is contained in:
Mark McDowall 2014-12-15 23:28:55 -08:00
parent a55a77cb5b
commit 85a9b74008
51 changed files with 955 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

169
src/UI/Shared/FileBrowser/FileBrowserLayout.js Normal file
View file

@ -0,0 +1,169 @@
'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'
},
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._fetchCollection(this.input.val());
this.listenTo(this.collection, 'sync', this._showGrid);
this.listenTo(this.collection, 'filebrowser:folderselected', this._rowSelected);
},
onRender: function () {
this.browser.show(new LoadingView());
},
onShow: function () {
this.ui.path.directoryAutoComplete();
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) {
var data = {
includeFiles : this.collection.showFiles
};
if (path) {
data.path = path;
}
this.collection.fetch({
data: data
});
},
_showGrid: function () {
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);
}
});
});