Mark McDowall
10 years ago
parent
a55a77cb5b
commit
85a9b74008
@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
define(
|
||||
[
|
||||
'jquery',
|
||||
'Mixins/AutoComplete'
|
||||
], function ($) {
|
||||
|
||||
$.fn.directoryAutoComplete = function () {
|
||||
|
||||
var query = 'path';
|
||||
|
||||
$(this).autoComplete({
|
||||
resource : '/filesystem',
|
||||
query : query,
|
||||
filter : function (filter, response, callback) {
|
||||
|
||||
var matches = [];
|
||||
|
||||
$.each(response.directories, function(i, d) {
|
||||
if (d[query] && d[query].startsWith(filter)) {
|
||||
matches.push({ value: d[query] });
|
||||
}
|
||||
});
|
||||
|
||||
callback(matches);
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
@ -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>
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</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>
|
||||
@ -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;
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in new issue