diff options
Diffstat (limited to 'deluge/ui/web/js/deluge-all/add/AddWindow.js')
-rw-r--r-- | deluge/ui/web/js/deluge-all/add/AddWindow.js | 178 |
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); } }, |