completely rework deluge-torrent.js into a self-contained ext class

add .build_data to svn:ignore on js
add in the first build of deluge-yc.js

deluge/ui/web/js/deluge-details.js

@@ -40,9 +40,9 @@ Deluge.Details = {
 	},
 
 	onRender: function(panel) {
-		Deluge.Torrents.Grid.on('rowclick', this.onTorrentsClick.bindWithEvent(this));
+		Deluge.Torrents.on('rowclick', this.onTorrentsClick.bindWithEvent(this));
 		
-		var selModel = Deluge.Torrents.Grid.getSelectionModel();
+		var selModel = Deluge.Torrents.getSelectionModel();
 		selModel.on('selectionchange', function(selModel) {
 			if (!selModel.hasSelection()) {
 				this.clear.delay(10, this);
@@ -63,7 +63,7 @@ Deluge.Details = {
 Deluge.Details.Status = {
 	onRender: function(panel) {
 		this.panel = panel;
-		this.progressBar = new Deluge.ProgressBar({
+		this.progressBar = new Ext.ux.FullProgressBar({
 			id: 'pbar-status',
 			cls: 'deluge-status-progressbar'
 		});

deluge/ui/web/js/deluge-torrents.js

@@ -21,72 +21,51 @@ Copyright:
 		Boston, MA  02110-1301, USA.
 */
 
-function queue(value) {
+(function() {
+	
+	/* Renderers for the Torrent Grid */
+	function queueRenderer(value) {
 		return (value == -1) ? '' : value + 1;
-}
+	}
-
+	function torrentNameRenderer(value, p, r) {
-function name(value, p, r) {
 		return String.format('<div class="torrent-name x-deluge-{0}">{1}</div>', r.data['state'].toLowerCase(), value);
-}
+	}
-
+	function torrentSpeedRenderer(value) {
-function torrent_speed(value) {
 		if (!value) return;
 		return fspeed(value);
-}
+	}
-
+	function torrentProgressRenderer(value, p, r) {
-function progress(value, p, r) {
 		var progress = value.toInt();
 		var text = r.data['state'] + ' ' + value.toFixed(2) + '%'
 		var width = this.style.match(/\w+:\s*(\d+)\w+/)[1].toInt() - 8;
-	return progressBar(value.toInt(), width, text);
+		return Deluge.progressBar(value.toInt(), width, text);
-}
+	}
-
+	function seedsRenderer(value, p, r) {
-var tpl = '<div class="x-progress-wrap x-progress-renderered">' +
-    '<div class="x-progress-inner">' +
-        '<div style="width: {2}px" class="x-progress-bar">' +
-            '<div style="z-index: 99; width: {3}px" class="x-progress-text">' +
-                '<div style="width: {1}px;">{0}</div>' +
-            '</div>' +
-        '</div>' +
-		'<div class="x-progress-text x-progress-text-back">' +
-			'<div style="width: {1}px;">{0}</div>' +
-		'</div>' +
-	'</div>' +
-'</div>';
-
-function progressBar(progress, width, text) {
-	var progressWidth = (width / 100.0) * progress;
-	var barWidth = progressWidth.toInt() - 1;
-	var textWidth = ((progressWidth.toInt() - 10) > 0 ? progressWidth.toInt() - 10 : 0);
-	return String.format(tpl, text, width, barWidth, textWidth);
-}
-
-function seeds(value, p, r) {
 		if (r.data['total_seeds'] > -1) {
 			return String.format('{0} ({1})', value, r.data['total_seeds']);
 		} else {
 			return value;
 		}
-}
+	}
-
+	function peersRenderer(value, p, r) {
-function peers(value, p, r) {
 		if (r.data['total_peers'] > -1) {
 			return String.format('{0} ({1})', value, r.data['total_peers']);
 		} else {
 			return value;
 		}
-}
+	}
-
+	function availRenderer(value, p, r)	{
-function avail(value) {
+		value.toFixed(3);
-	return value.toFixed(3);
+	}
-}
+	function trackerRenderer(value, p, r) {
-
-function tracker(value) {
 		return String.format('<div style="background: url(/tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
-}
+	}
 	
-Deluge.Torrents = {
+	Ext.namespace("Ext.deluge");
-	Store: new Ext.data.SimpleStore({
+	Ext.deluge.TorrentGrid = function(config) {
+		Ext.deluge.TorrentGrid.superclass.constructor.call(this, {
+			id: 'torrentGrid',
+			store: new Ext.data.SimpleStore({
 				fields: [
 					{name: 'queue'},
 					{name: 'name'},
@@ -107,21 +86,121 @@ Deluge.Torrents = {
 				],
 				id: 16
 			}),
+			columns: [{
+				id:'queue',
+				header: _('#'), 
+				width: 30, 
+				sortable: true, 
+				renderer: queueRenderer,
+				dataIndex: 'queue'
+			}, {
+				id:'name',
+				header: _('Name'),
+				width: 150,
+				sortable: true,
+				renderer: torrentNameRenderer,
+				dataIndex: 'name'
+			}, {
+				header: _('Size'),
+				width: 75,
+				sortable: true,
+				renderer: fsize,
+				dataIndex: 'size'
+			}, {
+				header: _('Progress'),
+				width: 150, 
+				sortable: true, 
+				renderer: torrentProgressRenderer,
+				dataIndex: 'progress'
+			}, {
+				header: _('Seeders'),
+				width: 60,
+				sortable: true,
+				renderer: seedsRenderer,
+				dataIndex: 'seeds'
+			}, {
+				header: _('Peers'),
+				width: 60,
+				sortable: true,
+				renderer: peersRenderer,
+				dataIndex: 'peers'
+			}, {
+				header: _('Down Speed'),
+				width: 80,
+				sortable: true,
+				renderer: torrentSpeedRenderer,
+				dataIndex: 'downspeed'
+			}, {
+				header: _('Up Speed'),
+				width: 80,
+				sortable: true,
+				renderer: torrentSpeedRenderer,
+				dataIndex: 'upspeed'
+			}, {
+				header: _('ETA'),
+				width: 60,
+				sortable: true,
+				renderer: ftime,
+				dataIndex: 'eta'
+			}, {
+				header: _('Ratio'),
+				width: 60,
+				sortable: true,
+				renderer: availRenderer,
+				dataIndex: 'ratio'
+			}, {
+				header: _('Avail'),
+				width: 60,
+				sortable: true,
+				renderer: availRenderer,
+				dataIndex: 'avail'
+			}, {
+				header: _('Added'),
+				width: 80,
+				sortable: true,
+				renderer: fdate,
+				dataIndex: 'added'
+			}, {
+				header: _('Tracker'),
+				width: 120,
+				sortable: true,
+				renderer: trackerRenderer,
+				dataIndex: 'tracker'
+			}],
+			region: 'center',
+			cls: 'deluge-torrents',
+			stripeRows: true,
+			autoExpandColumn: 'name',
+			deferredRender:false,
+			autoScroll:true,
+			margins: '5 5 0 0'
+		});
+	}
+	
+	Ext.extend(Ext.deluge.TorrentGrid, Ext.grid.GridPanel, {
+		initComponent: function() {
+			Ext.deluge.TorrentGrid.superclass.initComponent.call(this);
+			Deluge.Events.on('torrentRemoved', this.onTorrentRemoved, this);
+			this.on('rowcontextmenu', function(grid, rowIndex, e) {
+				e.stopEvent();
+				var selection = grid.getSelectionModel();
+				if (!selection.hasSelection()) {
+					selection.selectRow(rowIndex);
+				}
+				Deluge.Menus.Torrent.showAt(e.getPoint());
+			});
+		},
 		
 		getTorrent: function(rowIndex) {
-		return this.Grid.store.getAt(rowIndex);
+			return this.getStore().getAt(rowIndex);
 		},
 		
 		getSelected: function() {
-		return this.Grid.getSelectionModel().getSelected();
+		return this.getSelectionModel().getSelected();
 		},
 		
 		getSelections: function() {
-		return this.Grid.getSelectionModel().getSelections();
+			return this.getSelectionModel().getSelections();
-	},
-	
-	onRender: function() {
-		Deluge.Events.on('torrentRemoved', this.onTorrentRemoved.bindWithEvent(this));
 		},
 		
 		onTorrentRemoved: function(torrentIds) {
@@ -135,47 +214,6 @@ Deluge.Torrents = {
 				
 			}, this);
 		}
-}
+	});
-Deluge.Torrents.Store.setDefaultSort('queue');
+	Deluge.Torrents = new Ext.deluge.TorrentGrid();
-
+})();
-Deluge.Torrents.Grid = new Ext.grid.GridPanel({
-	region: 'center',
-	store: Deluge.Torrents.Store,
-	cls: 'deluge-torrents',
-	columns: [
-		{id:'queue',header: _('#'), width: 30, sortable: true, renderer: queue, dataIndex: 'queue'},
-		{id:'name', header: _('Name'), width: 150, sortable: true, renderer: name, dataIndex: 'name'},
-		{header: _('Size'), width: 75, sortable: true, renderer: fsize, dataIndex: 'size'},
-		{header: _('Progress'), width: 150, sortable: true, renderer: progress, dataIndex: 'progress'},
-		{header: _('Seeders'), width: 60, sortable: true, renderer: seeds, dataIndex: 'seeds'},
-		{header: _('Peers'), width: 60, sortable: true, renderer: peers, dataIndex: 'peers'},
-		{header: _('Down Speed'), width: 80, sortable: true, renderer: torrent_speed, dataIndex: 'downspeed'},
-		{header: _('Up Speed'), width: 80, sortable: true, renderer: torrent_speed, dataIndex: 'upspeed'},
-		{header: _('ETA'), width: 60, sortable: true, renderer: ftime, dataIndex: 'eta'},
-		{header: _('Ratio'), width: 60, sortable: true, renderer: avail, dataIndex: 'ratio'},
-		{header: _('Avail'), width: 60, sortable: true, renderer: avail, dataIndex: 'avail'},
-		{header: _('Added'), width: 80, sortable: true, renderer: fdate, dataIndex: 'added'},
-		{header: _('Tracker'), width: 120, sortable: true, renderer: tracker, dataIndex: 'tracker'}
-	],	
-	stripeRows: true,
-	autoExpandColumn: 'name',
-	deferredRender:false,
-	autoScroll:true,
-	margins: '5 5 0 0',
-	listeners: {
-		'render': {
-			fn: Deluge.Torrents.onRender,
-			scope: Deluge.Torrents
-		},
-		'rowcontextmenu': {
-			fn: function(grid, rowIndex, e) {
-				e.stopEvent();
-				var selection = grid.getSelectionModel();
-				if (!selection.hasSelection()) {
-					selection.selectRow(rowIndex);
-				}
-				Deluge.Menus.Torrent.showAt(e.getPoint());
-			}
-		}
-	}
-})

deluge/ui/web/js/deluge-ui.js

@@ -35,7 +35,7 @@ Deluge.UI = {
 			items: [
 				Deluge.SideBar.Config,
 				Deluge.Details.Panel,
-				Deluge.Torrents.Grid
+				Deluge.Torrents
 			],
 			bbar: Deluge.StatusBar.Bar
 		});
@@ -105,7 +105,7 @@ Deluge.UI = {
 				id
 			]);
 		});
-		Deluge.Torrents.Store.loadData(torrents);
+		Deluge.Torrents.getStore().loadData(torrents);
 		Deluge.StatusBar.update(data['stats']);
 		Deluge.SideBar.update(data['filters']);
 		this.errorCount = 0;