summaryrefslogtreecommitdiffstats
path: root/deluge/ui/web/js/deluge-all/add/AddWindow.js
diff options
context:
space:
mode:
Diffstat (limited to 'deluge/ui/web/js/deluge-all/add/AddWindow.js')
-rw-r--r--deluge/ui/web/js/deluge-all/add/AddWindow.js178
1 files changed, 128 insertions, 50 deletions
diff --git a/deluge/ui/web/js/deluge-all/add/AddWindow.js b/deluge/ui/web/js/deluge-all/add/AddWindow.js
index 006e0f29d..66d0551ac 100644
--- a/deluge/ui/web/js/deluge-all/add/AddWindow.js
+++ b/deluge/ui/web/js/deluge-all/add/AddWindow.js
@@ -46,51 +46,67 @@ Ext.define('Deluge.add.AddWindow', {
initComponent: function() {
this.callParent(arguments);
- // FIXME: replace with docked toolbar
- //this.addButton(_('Cancel'), this.onCancelClick, this);
- //this.addButton(_('Add'), this.onAddClick, this);
+ this.afterMethod('onHide', this.afterHidden, this);
+ this.afterMethod('onShow', this.afterShown, this);
+
+ this.addDocked({
+ xtype: 'toolbar',
+ dock: 'bottom',
+ defaultType: 'button',
+ items: [
+ '->',
+ {text: _('Cancel'), handler: this.onCancelClick, scope: this},
+ {text: _('Add'), handler: this.onAddClick, scope: this}
+ ]
+ });
function torrentRenderer(value, p, r) {
if (r.data['info_hash']) {
- return String.format('<div class="x-deluge-add-torrent-name">{0}</div>', value);
+ return Ext.String.format('<div class="x-deluge-add-torrent-name">{0}</div>', value);
} else {
- return String.format('<div class="x-deluge-add-torrent-name-loading">{0}</div>', value);
+ return Ext.String.format('<div class="x-deluge-add-torrent-name-loading">{0}</div>', value);
}
}
- this.list = new Ext.list.ListView({
- store: new Ext.data.SimpleStore({
- fields: [
- {name: 'info_hash', mapping: 1},
- {name: 'text', mapping: 2}
- ],
- id: 0
+ this.grid = this.add({
+ xtype: 'grid',
+ autoScroll: true,
+ store: Ext.create('Ext.data.Store', {
+ model: 'Deluge.data.AddTorrent'
}),
columns: [{
id: 'torrent',
width: 150,
sortable: true,
renderer: torrentRenderer,
- dataIndex: 'text'
+ dataIndex: 'text',
+ flex: 1
}],
- stripeRows: true,
+ hideHeaders: true,
+ margins: '5 5 5 5',
+ region: 'center',
singleSelect: true,
listeners: {
'selectionchange': {
fn: this.onSelect,
scope: this
+ },
+ 'render': {
+ fn: function(list) {
+ var el = list.getEl(),
+ dh = Ext.core.DomHelper,
+ dropEl = {
+ tag: 'div',
+ cls: 'x-deluge-dropzone',
+ style: 'display: none',
+ html: 'Drop torrent file here'
+ };
+ this.dropEl = Ext.get(dh.insertFirst(el, dropEl));
+ },
+ scope: this
}
},
- hideHeaders: true,
- autoExpandColumn: 'torrent',
- autoScroll: true
- });
-
- this.add({
- region: 'center',
- items: [this.list],
- margins: '5 5 5 5',
- bbar: new Ext.Toolbar({
+ bbar: {
items: [{
iconCls: 'x-deluge-add-file',
text: _('File'),
@@ -111,23 +127,25 @@ Ext.define('Deluge.add.AddWindow', {
handler: this.onRemove,
scope: this
}]
- })
+ }
});
- this.optionsPanel = this.add(new Deluge.add.OptionsPanel());
- this.on('hide', this.onHide, this);
- this.on('show', this.onShow, this);
+ this.optionsPanel = this.add(Ext.create('Deluge.add.OptionsPanel'));
},
clear: function() {
- this.list.getStore().removeAll();
+ this.grid.getStore().removeAll();
this.optionsPanel.clear();
},
+ processDnDFileUpload: function(file) {
+ console.log(file.size);
+ },
+
onAddClick: function() {
var torrents = [];
- if (!this.list) return;
- this.list.getStore().each(function(r) {
+ if (!this.grid) return;
+ this.grid.getStore().each(function(r) {
var id = r.get('info_hash');
torrents.push({
path: this.optionsPanel.getFilename(id),
@@ -149,28 +167,22 @@ Ext.define('Deluge.add.AddWindow', {
},
onFile: function() {
- if (!this.file) this.file = new Deluge.add.FileWindow();
+ if (!this.file) this.file = Ext.create('Deluge.add.FileWindow');
this.file.show();
},
- onHide: function() {
- this.optionsPanel.setActiveTab(0);
- this.optionsPanel.files.setDisabled(true);
- this.optionsPanel.form.setDisabled(true);
- },
-
onRemove: function() {
if (!this.list.getSelectionCount()) return;
- var torrent = this.list.getSelectedRecords()[0];
- this.list.getStore().remove(torrent);
+ var torrent = this.grid.getSelectedRecords()[0];
+ this.grid.getStore().remove(torrent);
this.optionsPanel.clear();
if (this.torrents && this.torrents[torrent.id]) delete this.torrents[torrent.id];
},
- onSelect: function(list, selections) {
+ onSelect: function(grid, selections) {
if (selections.length) {
- var record = this.list.getRecord(selections[0]);
+ var record = selections[0];
this.optionsPanel.setTorrent(record.get('info_hash'));
this.optionsPanel.files.setDisabled(false);
this.optionsPanel.form.setDisabled(false);
@@ -180,29 +192,95 @@ Ext.define('Deluge.add.AddWindow', {
}
},
- onShow: function() {
+ afterHidden: function() {
+ this.optionsPanel.setActiveTab(0);
+ this.optionsPanel.files.setDisabled(true);
+ this.optionsPanel.form.setDisabled(true);
+ },
+
+ afterShown: function() {
if (!this.url) {
- this.url = new Deluge.add.UrlWindow();
+ this.url = Ext.create('Deluge.add.UrlWindow');
this.url.on('beforeadd', this.onTorrentBeforeAdd, this);
this.url.on('add', this.onTorrentAdd, this);
}
if (!this.file) {
- this.file = new Deluge.add.FileWindow();
+ this.file = Ext.create('Deluge.add.FileWindow');
this.file.on('beforeadd', this.onTorrentBeforeAdd, this);
this.file.on('add', this.onTorrentAdd, this);
}
this.optionsPanel.form.getDefaults();
+
+ var body = Ext.getBody(),
+ dropEl = this.dropEl;
+
+ body.on({
+ dragenter: function(evt) {
+ dropEl.setStyle('display', 'block');
+ return true;
+ },
+ dragleave: function(evt) {
+ var viewSize = body.getViewSize(),
+ pageX = evt.getPageX(),
+ pageY = evt.getPageY();
+ if (pageX < 10 || pageY < 10 || viewSize.width - pageX < 10 || viewSize.height - pageY < 10) {
+ dropEl.setStyle('display', 'none');
+ }
+ return true;
+ },
+ dragover: function(evt) {
+ evt.stopEvent();
+ return true;
+ },
+ drop: function(evt) {
+ evt.stopEvent();
+ return true;
+ }
+ });
+
+ this.dropEl.on({
+ dragenter: function(evt) {
+ evt.browserEvent.dataTransfer.dropEffect = 'move';
+ return true;
+ },
+ dragover: function(evt) {
+ evt.browserEvent.dataTransfer.dropEffect = 'move';
+ evt.stopEvent();
+ return true;
+ },
+ drop: {
+ fn: function(evt) {
+ evt.stopEvent();
+ var files = evt.browserEvent.dataTransfer.files;
+
+ if (files === undefined) {
+ return true;
+ }
+ var len = files.length;
+ while (--len >= 0) {
+ this.processDnDFileUpload(files[len]);
+ }
+ this.dropEl.setStyle('display', 'none');
+ },
+ scope: this
+ }
+ });
},
onTorrentBeforeAdd: function(torrentId, text) {
- var store = this.list.getStore();
- store.loadData([[torrentId, null, text]], true);
+ var rec = Ext.create('Deluge.data.AddTorrent', {
+ 'id': torrentId,
+ 'info_hash': null,
+ 'text': text
+
+ }, torrentId);
+ this.grid.getStore().add(rec);
},
onTorrentAdd: function(torrentId, info) {
- var r = this.list.getStore().getById(torrentId);
+ var r = this.grid.getStore().getById(String(torrentId));
if (!info) {
Ext.MessageBox.show({
title: _('Error'),
@@ -212,11 +290,11 @@ Ext.define('Deluge.add.AddWindow', {
icon: Ext.MessageBox.ERROR,
iconCls: 'x-deluge-icon-error'
});
- this.list.getStore().remove(r);
+ this.grid.getStore().remove(r);
} else {
r.set('info_hash', info['info_hash']);
r.set('text', info['name']);
- this.list.getStore().commitChanges();
+ r.commit();;
this.optionsPanel.addTorrent(info);
}
},