tedkulp/Readarr
1
0
Fork 0
mirror of https://github.com/Readarr/Readarr.git synced 2026-04-17 21:25:39 -04:00
Code Issues Projects Releases Wiki Activity

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

11
src/UI/Shared/FileBrowser/EmptyView.js Normal file
View File

@@ -0,0 +1,11 @@
'use strict';
define(
[
'marionette'
], function (Marionette) {
return Marionette.CompositeView.extend({
template: 'Shared/FileBrowser/EmptyViewTemplate'
});
});

3
src/UI/Shared/FileBrowser/EmptyViewTemplate.hbs Normal file
View File

@@ -0,0 +1,3 @@
<div class="text-center col-md-12 file-browser-empty">
<span>No files/folders were found, edit the path above, or clear to start again</span>
</div>

39
src/UI/Shared/FileBrowser/FileBrowserCollection.js Normal file
View File

@@ -0,0 +1,39 @@
'use strict';
define(
[
'jquery',
'backbone',
'Shared/FileBrowser/FileBrowserModel'
], function ($, Backbone, FileBrowserModel) {
return Backbone.Collection.extend({
model: FileBrowserModel,
url : window.NzbDrone.ApiRoot + '/filesystem',
parse: function(response) {
var contents = [];
if (response.parent || response.parent === '') {
var type = 'parent';
var name = '...';
if (response.parent === '') {
type = 'computer';
name = 'My Computer';
}
contents.push({
type : type,
name : name,
path : response.parent
});
}
$.merge(contents, response.directories);
$.merge(contents, response.files);
return contents;
}
});
});

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);
}
});
});

26
src/UI/Shared/FileBrowser/FileBrowserLayoutTemplate.hbs Normal file
View File

@@ -0,0 +1,26 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
<h3>File Browser</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control x-path" placeholder="Start typing or select a path below"/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="x-browser"></div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn" data-dismiss="modal">close</button>
<button class="btn btn-primary x-ok">ok</button>
</div>
</div>

63
src/UI/Shared/FileBrowser/FileBrowserModalRegion.js Normal file
View File

@@ -0,0 +1,63 @@
'use strict';
define(
[
'jquery',
'backbone',
'marionette',
'bootstrap'
], function ($, Backbone, Marionette) {
var region = Marionette.Region.extend({
el: '#file-browser-modal-region',
constructor: function () {
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on('show', this.showModal, this);
},
getEl: function (selector) {
var $el = $(selector);
$el.on('hidden', this.close);
return $el;
},
showModal: function () {
this.$el.addClass('modal fade');
//need tab index so close on escape works
//https://github.com/twitter/bootstrap/issues/4663
this.$el.attr('tabindex', '-1');
this.$el.css('z-index', '1060');
this.$el.modal({
show : true,
keyboard : true,
backdrop : true
});
this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
this.$el.on('shown.bs.modal', function () {
$('.modal-backdrop:last').css('z-index', 1059);
});
this.currentView.$el.addClass('modal-dialog');
},
closeModal: function () {
$(this.el).modal('hide');
this.reset();
},
_closing: function () {
if (this.$el) {
this.$el.off('hide.bs.modal');
this.$el.off('shown.bs.modal');
}
this.reset();
}
});
return region;
});

10
src/UI/Shared/FileBrowser/FileBrowserModel.js Normal file
View File

@@ -0,0 +1,10 @@
'use strict';
define(
[
'backbone'
], function (Backbone) {
return Backbone.Model.extend({
});
});

23
src/UI/Shared/FileBrowser/FileBrowserNameCell.js Normal file
View File

@@ -0,0 +1,23 @@
'use strict';
define(
[
'vent',
'Cells/NzbDroneCell'
], function (vent, NzbDroneCell) {
return NzbDroneCell.extend({
className: 'file-browser-name-cell',
render: function () {
this.$el.empty();
var name = this.model.get(this.column.get('name'));
this.$el.html(name);
this.delegateEvents();
return this;
}
});
});

31
src/UI/Shared/FileBrowser/FileBrowserRow.js Normal file
View File

@@ -0,0 +1,31 @@
'use strict';
define(
[
'underscore',
'backgrid'
], function (_, Backgrid) {
return Backgrid.Row.extend({
className: 'file-browser-row',
events: {
'click': '_selectRow'
},
_originalInit: Backgrid.Row.prototype.initialize,
initialize: function () {
this._originalInit.apply(this, arguments);
},
_selectRow: function () {
if (this.model.get('type') === 'file') {
this.model.collection.trigger('filebrowser:fileselected', this.model);
}
else {
this.model.collection.trigger('filebrowser:folderselected', this.model);
}
}
});
});

40
src/UI/Shared/FileBrowser/FileBrowserTypeCell.js Normal file
View File

@@ -0,0 +1,40 @@
'use strict';
define(
[
'vent',
'Cells/NzbDroneCell'
], function (vent, NzbDroneCell) {
return NzbDroneCell.extend({
className: 'file-browser-type-cell',
render: function () {
this.$el.empty();
var type = this.model.get(this.column.get('name'));
var icon = 'icon-hdd';
if (type === 'computer') {
icon = 'icon-desktop';
}
else if (type === 'parent') {
icon = 'icon-level-up';
}
else if (type === 'folder') {
icon = 'icon-folder-close';
}
else if (type === 'file') {
icon = 'icon-file';
}
this.$el.html('<i class="{0}"></i>'.format(icon));
this.delegateEvents();
return this;
}
});
});

24
src/UI/Shared/FileBrowser/filebrowser.less Normal file
View File

@@ -0,0 +1,24 @@
.file-browser-row {
cursor : pointer;
.file-size-cell {
white-space : nowrap;
}
.relative-date-cell {
width : 120px;
white-space : nowrap;
}
}
.file-browser-type-cell {
width : 16px;
}
.file-browser-name-cell {
word-break : break-all;
}
.file-browser-empty {
margin-top : 20px;
}

25
src/UI/Shared/Modal/ModalController.js
View File

@@ -9,8 +9,18 @@ define(
'Episode/EpisodeDetailsLayout',
'Activity/History/Details/HistoryDetailsLayout',
'System/Logs/Table/Details/LogDetailsView',
'Rename/RenamePreviewLayout'
], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsLayout, LogDetailsView, RenamePreviewLayout) {
'Rename/RenamePreviewLayout',
'Shared/FileBrowser/FileBrowserLayout'
], function (vent,
AppLayout,
Marionette,
EditSeriesView,
DeleteSeriesView,
EpisodeDetailsLayout,
HistoryDetailsLayout,
LogDetailsView,
RenamePreviewLayout,
FileBrowserLayout) {
return Marionette.AppRouter.extend({
@@ -23,6 +33,8 @@ define(
vent.on(vent.Commands.ShowHistoryDetails, this._showHistory, this);
vent.on(vent.Commands.ShowLogDetails, this._showLogDetails, this);
vent.on(vent.Commands.ShowRenamePreview, this._showRenamePreview, this);
vent.on(vent.Commands.ShowFileBrowser, this._showFileBrowser, this);
vent.on(vent.Commands.CloseFileBrowser, this._closeFileBrowser, this);
},
_openModal: function (view) {
@@ -61,6 +73,15 @@ define(
_showRenamePreview: function (options) {
var view = new RenamePreviewLayout(options);
AppLayout.modalRegion.show(view);
},
_showFileBrowser: function (options) {
var view = new FileBrowserLayout(options);
AppLayout.fileBrowserModalRegion.show(view);
},
_closeFileBrowser: function () {
AppLayout.fileBrowserModalRegion.closeModal();
}
});
});