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,161 +21,199 @@ Copyright:
 		Boston, MA  02110-1301, USA.
 */
 
-function queue(value) {
+(function() {
-	return (value == -1) ? '' : value + 1;
-}
 	
-function name(value, p, r) {
+	/* Renderers for the Torrent Grid */
-	return String.format('<div class="torrent-name x-deluge-{0}">{1}</div>', r.data['state'].toLowerCase(), value);
+	function queueRenderer(value) {
-}
+		return (value == -1) ? '' : value + 1;
-
-function torrent_speed(value) {
-	if (!value) return;
-	return fspeed(value);
-}
-
-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);
-}
-
-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 torrentNameRenderer(value, p, r) {
-
+		return String.format('<div class="torrent-name x-deluge-{0}">{1}</div>', r.data['state'].toLowerCase(), value);
-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 torrentSpeedRenderer(value) {
-
+		if (!value) return;
-function avail(value) {
+		return fspeed(value);
-	return value.toFixed(3);
+	}
-}
+	function torrentProgressRenderer(value, p, r) {
-
+		var progress = value.toInt();
-function tracker(value) {
+		var text = r.data['state'] + ' ' + value.toFixed(2) + '%'
-	return String.format('<div style="background: url(/tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
+		var width = this.style.match(/\w+:\s*(\d+)\w+/)[1].toInt() - 8;
-}
+		return Deluge.progressBar(value.toInt(), width, text);
-
+	}
-Deluge.Torrents = {
+	function seedsRenderer(value, p, r) {
-	Store: new Ext.data.SimpleStore({
+		if (r.data['total_seeds'] > -1) {
-		fields: [
+			return String.format('{0} ({1})', value, r.data['total_seeds']);
-			{name: 'queue'},
+		} else {
-			{name: 'name'},
+			return value;
-			{name: 'size', type: 'int'},
+		}
-			{name: 'state'},
+	}
-			{name: 'progress', type: 'float'},
+	function peersRenderer(value, p, r) {
-			{name: 'seeds', type: 'int'},
+		if (r.data['total_peers'] > -1) {
-			{name: 'total_seeds', type: 'int'},
+			return String.format('{0} ({1})', value, r.data['total_peers']);
-			{name: 'peers', type: 'int'},
+		} else {
-			{name: 'total_peers', type: 'int'},
+			return value;
-			{name: 'downspeed', type: 'int'},
+		}
-			{name: 'upspeed', type: 'int'},
+	}
-			{name: 'eta', type: 'int'},
+	function availRenderer(value, p, r)	{
-			{name: 'ratio', type: 'float'},
+		value.toFixed(3);
-			{name: 'avail', type: 'float'},
+	}
-			{name: 'added', type: 'int'},
+	function trackerRenderer(value, p, r) {
-			{name: 'tracker'}
+		return String.format('<div style="background: url(/tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
-		],
-		id: 16
-	}),
-	
-	getTorrent: function(rowIndex) {
-		return this.Grid.store.getAt(rowIndex);
-	},
-	
-	getSelected: function() {
-		return this.Grid.getSelectionModel().getSelected();
-	},
-	
-	getSelections: function() {
-		return this.Grid.getSelectionModel().getSelections();
-	},
-	
-	onRender: function() {
-		Deluge.Events.on('torrentRemoved', this.onTorrentRemoved.bindWithEvent(this));
-	},
-	
-	onTorrentRemoved: function(torrentIds) {
-		var selModel = this.Grid.getSelectionModel();
-		$each(torrentIds, function(torrentId) {
-			var record = this.Store.getById(torrentId);
-			if (selModel.isSelected(record)) {
-				selModel.deselectRow(this.Store.indexOf(record));
-			}
-			this.Store.remove(record);
-			
-		}, this);
 	}
-}
-Deluge.Torrents.Store.setDefaultSort('queue');
 	
-Deluge.Torrents.Grid = new Ext.grid.GridPanel({
+	Ext.namespace("Ext.deluge");
-	region: 'center',
+	Ext.deluge.TorrentGrid = function(config) {
-	store: Deluge.Torrents.Store,
+		Ext.deluge.TorrentGrid.superclass.constructor.call(this, {
-	cls: 'deluge-torrents',
+			id: 'torrentGrid',
-	columns: [
+			store: new Ext.data.SimpleStore({
-		{id:'queue',header: _('#'), width: 30, sortable: true, renderer: queue, dataIndex: 'queue'},
+				fields: [
-		{id:'name', header: _('Name'), width: 150, sortable: true, renderer: name, dataIndex: 'name'},
+					{name: 'queue'},
-		{header: _('Size'), width: 75, sortable: true, renderer: fsize, dataIndex: 'size'},
+					{name: 'name'},
-		{header: _('Progress'), width: 150, sortable: true, renderer: progress, dataIndex: 'progress'},
+					{name: 'size', type: 'int'},
-		{header: _('Seeders'), width: 60, sortable: true, renderer: seeds, dataIndex: 'seeds'},
+					{name: 'state'},
-		{header: _('Peers'), width: 60, sortable: true, renderer: peers, dataIndex: 'peers'},
+					{name: 'progress', type: 'float'},
-		{header: _('Down Speed'), width: 80, sortable: true, renderer: torrent_speed, dataIndex: 'downspeed'},
+					{name: 'seeds', type: 'int'},
-		{header: _('Up Speed'), width: 80, sortable: true, renderer: torrent_speed, dataIndex: 'upspeed'},
+					{name: 'total_seeds', type: 'int'},
-		{header: _('ETA'), width: 60, sortable: true, renderer: ftime, dataIndex: 'eta'},
+					{name: 'peers', type: 'int'},
-		{header: _('Ratio'), width: 60, sortable: true, renderer: avail, dataIndex: 'ratio'},
+					{name: 'total_peers', type: 'int'},
-		{header: _('Avail'), width: 60, sortable: true, renderer: avail, dataIndex: 'avail'},
+					{name: 'downspeed', type: 'int'},
-		{header: _('Added'), width: 80, sortable: true, renderer: fdate, dataIndex: 'added'},
+					{name: 'upspeed', type: 'int'},
-		{header: _('Tracker'), width: 120, sortable: true, renderer: tracker, dataIndex: 'tracker'}
+					{name: 'eta', type: 'int'},
-	],	
+					{name: 'ratio', type: 'float'},
-	stripeRows: true,
+					{name: 'avail', type: 'float'},
-	autoExpandColumn: 'name',
+					{name: 'added', type: 'int'},
-	deferredRender:false,
+					{name: 'tracker'}
-	autoScroll:true,
+				],
-	margins: '5 5 0 0',
+				id: 16
-	listeners: {
+			}),
-		'render': {
+			columns: [{
-			fn: Deluge.Torrents.onRender,
+				id:'queue',
-			scope: Deluge.Torrents
+				header: _('#'), 
-		},
+				width: 30, 
-		'rowcontextmenu': {
+				sortable: true, 
-			fn: function(grid, rowIndex, e) {
+				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.getStore().getAt(rowIndex);
+		},
+		
+		getSelected: function() {
+		return this.getSelectionModel().getSelected();
+		},
+		
+		getSelections: function() {
+			return this.getSelectionModel().getSelections();
+		},
+		
+		onTorrentRemoved: function(torrentIds) {
+			var selModel = this.Grid.getSelectionModel();
+			$each(torrentIds, function(torrentId) {
+				var record = this.Store.getById(torrentId);
+				if (selModel.isSelected(record)) {
+					selModel.deselectRow(this.Store.indexOf(record));
+				}
+				this.Store.remove(record);
+				
+			}, this);
 		}
-	}
+	});
-})
+	Deluge.Torrents = new Ext.deluge.TorrentGrid();
+})();

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;