#4866: Replace existing menus with jQueryUI menu

web/javascript/transmission.js

@@ -180,52 +180,58 @@ Transmission.prototype =
 	createContextMenu: function() {
 		var tr = this;
 		var bindings = {
-			context_pause_selected:       function() { tr.stopSelectedTorrents(); },
-			context_resume_selected:      function() { tr.startSelectedTorrents(false); },
-			context_resume_now_selected:  function() { tr.startSelectedTorrents(true); },
-			context_move:                 function() { tr.moveSelectedTorrents(false); },
-			context_remove:               function() { tr.removeSelectedTorrents(); },
-			context_removedata:           function() { tr.removeSelectedTorrentsAndData(); },
-			context_verify:               function() { tr.verifySelectedTorrents(); },
-			context_rename:               function() { tr.renameSelectedTorrents(); },
-			context_reannounce:           function() { tr.reannounceSelectedTorrents(); },
-			context_move_top:             function() { tr.moveTop(); },
-			context_move_up:              function() { tr.moveUp(); },
-			context_move_down:            function() { tr.moveDown(); },
-			context_move_bottom:          function() { tr.moveBottom(); },
-			context_select_all:           function() { tr.selectAll(); },
-			context_deselect_all:         function() { tr.deselectAll(); }
+			pause_selected:       function() { tr.stopSelectedTorrents(); },
+			resume_selected:      function() { tr.startSelectedTorrents(false); },
+			resume_now_selected:  function() { tr.startSelectedTorrents(true); },
+			move:                 function() { tr.moveSelectedTorrents(false); },
+			remove:               function() { tr.removeSelectedTorrents(); },
+			remove_data:          function() { tr.removeSelectedTorrentsAndData(); },
+			verify:               function() { tr.verifySelectedTorrents(); },
+			rename:               function() { tr.renameSelectedTorrents(); },
+			reannounce:           function() { tr.reannounceSelectedTorrents(); },
+			move_top:             function() { tr.moveTop(); },
+			move_up:              function() { tr.moveUp(); },
+			move_down:            function() { tr.moveDown(); },
+			move_bottom:          function() { tr.moveBottom(); },
+			select_all:           function() { tr.selectAll(); },
+			deselect_all:         function() { tr.deselectAll(); }
 		};
 
 		// Set up the context menu
-		$('ul#torrent_list').contextMenu('torrent_context_menu', {
-			bindings:          bindings,
-			menuStyle:         { width: '310px', backgroundColor: '#fff', border: 'none', padding: '5px 0', textAlign: 'left' },
-			itemStyle:         { backgroundColor: 'transparent', margin: '0', padding: '3px 10px 3px 20px', color: '#000', cursor: 'default', border: 'none'},
-			itemHoverStyle:    { backgroundColor: '#24e', color: '#fff', border: 'none'},
-			shadow:            false,
-			boundingElement:   $('div#torrent_container'),
-			boundingRightPad:  20,
-			boundingBottomPad: 5,
-			onContextMenu: function(ev) {
-				var element = $(ev.target).closest('.torrent')[0];
+		$("ul#torrent_list").contextmenu({
+			delegate: ".torrent",
+			menu: "#torrent_context_menu",
+			preventSelect: true,
+			taphold: true,
+			show: { effect: "none" },
+			hide: { effect: "none" },
+			select: function(event, ui) { bindings[ui.cmd](); },
+			beforeOpen: $.proxy(function(event, ui) {
+				var element = $(event.currentTarget);
 				var i = $('#torrent_list > li').index(element);
-				if ((i!==-1) && !tr._rows[i].isSelected())
-					tr.setSelectedRow(tr._rows[i]);
-				return true;
-			}
+				if ((i!==-1) && !this._rows[i].isSelected())
+					this.setSelectedRow(this._rows[i]);
+
+				this.calculateTorrentStates(function(s) {
+					var tl = $(event.target);
+					tl.contextmenu("enableEntry", "pause_selected", s.activeSel > 0);
+					tl.contextmenu("enableEntry", "resume_selected", s.pausedSel > 0);
+					tl.contextmenu("enableEntry", "resume_now_selected", s.pausedSel > 0);
+					tl.contextmenu("enableEntry", "rename", s.sel == 1);
+				});
+			}, this)
 		});
 	},
 
 	createSettingsMenu: function() {
-		$('#settings_menu').transMenu({
-			selected_char: '✔',
-			direction: 'up',
-			onClick: $.proxy(this.onMenuClicked,this)
+		$("#footer_super_menu").transMenu({
+			open: function() { $("#settings_menu").addClass("selected"); },
+			close: function() { $("#settings_menu").removeClass("selected"); },
+			select: $.proxy(this.onMenuClicked, this)
+		});
+		$("#settings_menu").click(function(event) {
+			$("#footer_super_menu").transMenu("open");
 		});
-
-		$('#unlimited_download_rate').selectMenuItem();
-		$('#unlimited_upload_rate').selectMenuItem();
 	},
 
 	/****
@@ -650,32 +656,29 @@ Transmission.prototype =
 		this.refilter(true);
 	},
 
-	onMenuClicked: function(ev)
+	onMenuClicked: function(event, ui)
 	{
 		var o, dir,
-		    id = ev.target.id,
+		    id = ui.id,
 		    remote = this.remote,
-		    element = $(ev.target);
+		    element = ui.target;
 
-		if (element.hasClass('sort-mode'))
+		if (ui.group == 'sort-mode')
 		{
-			element.parent().find('.sort-mode').each(function() {
-				element.parent().deselectMenuItem();
-			});
 			element.selectMenuItem();
 			this.setSortMethod(id.replace(/sort_by_/, ''));
 		}
 		else if (element.hasClass('upload-speed'))
 		{
 			o = {};
-			o[RPC._UpSpeedLimit] = parseInt(ev.target.innerHTML);
+			o[RPC._UpSpeedLimit] = parseInt(element.text());
 			o[RPC._UpSpeedLimited] = true;
 			remote.savePrefs(o);
 		}
 		else if (element.hasClass('download-speed'))
 		{
 			o = {};
-			o[RPC._DownSpeedLimit] = parseInt(ev.target.innerHTML);
+			o[RPC._DownSpeedLimit] = parseInt(element.text());
 			o[RPC._DownSpeedLimited] = true;
 			remote.savePrefs(o);
 		}
@@ -747,8 +750,6 @@ Transmission.prototype =
 				break;
 
 		}
-		$('#settings_menu').trigger('closemenu');
-		ev.stopImmediatePropagation();
 	},
 
 
@@ -859,8 +860,6 @@ Transmission.prototype =
 		// Prevents click carrying to parent element
 		// which deselects all on click
 		ev.stopPropagation();
-		// but still hide the context menu if it is showing
-		$('#jqContextMenu').hide();
 
 		if (isMobileDevice) {
 			if (row.isSelected())
@@ -1201,7 +1200,7 @@ Transmission.prototype =
 	{
 		var limit, limited, e, b, text,
                     fmt = Transmission.fmt,
-                    menu = $('#settings_menu');
+                    menu = $('#footer_super_menu');
 
 		this.serverVersion = o.version;
 
@@ -1232,7 +1231,7 @@ Transmission.prototype =
 
                         if (!limited)
                         	e = menu.find('#unlimited_download_rate');
-                        e.deselectMenuSiblings().selectMenuItem();
+			e.selectMenuItem();
 		}
 
 		if (this.isMenuEnabled && (RPC._UpSpeedLimited in o)
@@ -1246,7 +1245,7 @@ Transmission.prototype =
 
                         if (!limited)
                         	e = menu.find('#unlimited_upload_rate');
-                        e.deselectMenuSiblings().selectMenuItem();
+			e.selectMenuItem();
 		}
 	},
 
@@ -1318,14 +1317,16 @@ Transmission.prototype =
 		}
 	},
 
-	updateButtonStates: function()
+	calculateTorrentStates: function(callback)
 	{
-		var e = this.elements,
-		    haveActive = false,
-		    havePaused = false,
-		    haveSel = false,
-		    haveActiveSel = false,
-		    havePausedSel = false;
+		var stats = {
+			total: 0,
+			active: 0,
+			paused: 0,
+			sel: 0,
+			activeSel: 0,
+			pausedSel: 0
+		};
 
 		clearTimeout(this.buttonRefreshTimer);
 		delete this.buttonRefreshTimer;
@@ -1333,16 +1334,26 @@ Transmission.prototype =
 		for (var i=0, row; row=this._rows[i]; ++i) {
 			var isStopped = row.getTorrent().isStopped();
 			var isSelected = row.isSelected();
-			if (!isStopped) haveActive = true;
-			if (isStopped) havePaused = true;
-			if (isSelected) haveSel = true;
-			if (isSelected && !isStopped) haveActiveSel = true;
-			if (isSelected && isStopped) havePausedSel = true;
+			++stats.total;
+			if (!isStopped) ++stats.active;
+			if (isStopped) ++stats.paused;
+			if (isSelected) ++stats.sel;
+			if (isSelected && !isStopped) ++stats.activeSel;
+			if (isSelected && isStopped) ++stats.pausedSel;
 		}
 
-		this.setEnabled(e.toolbar_pause_button,  haveActiveSel);
-		this.setEnabled(e.toolbar_start_button,  havePausedSel);
-		this.setEnabled(e.toolbar_remove_button, haveSel);
+		callback(stats);
+	},
+
+	updateButtonStates: function()
+	{
+		var tr = this,
+		e = this.elements;
+		this.calculateTorrentStates(function(s) {
+			tr.setEnabled(e.toolbar_pause_button, s.activeSel > 0);
+			tr.setEnabled(e.toolbar_start_button, s.pausedSel > 0);
+			tr.setEnabled(e.toolbar_remove_button, s.sel > 0);
+		});
 	},
 
 	/****