From f1d91b1ff8dc451fb073dfb44818d3f43d055ccc Mon Sep 17 00:00:00 2001
From: Jordan Lee <jordan@transmissionbt.com>
Date: Sun, 21 Aug 2011 05:54:02 +0000
Subject: [PATCH] (trunk web) use jQuery to limit the preference dialog's
 numberic entry fields to only accept numbers. (the HOWTO for this was at
 http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values)

---
 web/index.html                 | 16 ++++++++--------
 web/javascript/common.js       | 25 +++++++++++++++++++++++++
 web/javascript/transmission.js | 25 +++----------------------
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/web/index.html b/web/index.html
index 58ab94ad9..520a2a5e1 100755
--- a/web/index.html
+++ b/web/index.html
@@ -257,7 +257,7 @@
 								<label class="category">Web Client:</label>
 								<div class="formdiv">
 									<label for="refresh_rate" class="item">Refresh Rate:</label>
-									<input type="text" name="refresh_rate" id="refresh_rate"/>
+									<input type="text" name="refresh_rate" id="refresh_rate" class="numberinput"/>
 									<label class="suffix">seconds</label>
 								</div>
 							</div>
@@ -269,13 +269,13 @@
 								<div class="formdiv checkbox">
 									<input type="checkbox" name="limit_download" id="limit_download"/>
 									<label for="limit_download" class="item">Download Rate:</label>
-									<input type="text" name="download_rate" id="download_rate"/>
+									<input type="text" name="download_rate" id="download_rate" class="numberinput"/>
 									<label class="suffix">kB/s</label>
 								</div>
 								<div class="formdiv checkbox">
 									<input type="checkbox" name="limit_upload" id="limit_upload"/>
 									<label for="limit_upload" class="item">Upload Rate:</label>
-									<input type="text" name="upload_rate" id="upload_rate"/>
+									<input type="text" name="upload_rate" id="upload_rate" class="numberinput"/>
 									<label class="suffix">kB/s</label>
 								</div>
 							</div>
@@ -284,12 +284,12 @@
 								<label>Override normal speed limits manually or at scheduled times</label>
 								<div class="formdiv">
 									<label for="turtle_download_rate" class="item">Download Rate:</label>
-									<input type="text" name="turtle_download_rate" id="turtle_download_rate"/>
+									<input type="text" name="turtle_download_rate" id="turtle_download_rate" class="numberinput"/>
 									<label class="suffix">kB/s</label>
 								</div>
 								<div class="formdiv">
 									<label for="turtle_upload_rate" class="item">Upload Rate:</label>
-									<input type="text" name="turtle_upload_rate" id="turtle_upload_rate"/>
+									<input type="text" name="turtle_upload_rate" id="turtle_upload_rate" class="numberinput"/>
 									<label class="suffix">kB/s</label>
 								</div>
 								<div class="formdiv checkbox">
@@ -323,12 +323,12 @@
 								<label class="category">Connections:</label>
 								<div class="formdiv">
 									<label for="conn_global" class="item">Global maximum connections:</label>
-									<input type="text" name="conn_global" id="conn_global"/>
+									<input type="text" name="conn_global" id="conn_global" class="numberinput"/>
 									<label class="suffix">peers</label>
 								</div>
 								<div class="formdiv">
 									<label for="conn_torrent" class="item">Maximum connections for new transfers:</label>
-									<input type="text" name="conn_torrent" id="conn_torrent"/>
+									<input type="text" name="conn_torrent" id="conn_torrent" class="numberinput"/>
 									<label class="suffix">peers</label>
 								</div>
 								<div class="formdiv checkbox">
@@ -373,7 +373,7 @@
 								<label class="category">Peer listening port:</label>
 								<div class="formdiv">
 									<label for="port" class="item">Incoming TCP Port:</label>
-									<input type="text" id="port" name="port"/>
+									<input type="text" id="port" name="port" class="numberinput"/>
 									<label class="suffix" id="port_test"></label>
 								</div>
 								<div class="formdiv checkbox">
diff --git a/web/javascript/common.js b/web/javascript/common.js
index 807473677..8273ff477 100644
--- a/web/javascript/common.js
+++ b/web/javascript/common.js
@@ -309,3 +309,28 @@ Prefs.getClutchPrefs = function( o )
 		o[key] = Prefs.getValue( key, Prefs._Defaults[key] );
 	return o;
 };
+
+
+// forceNumeric() plug-in implementation
+jQuery.fn.forceNumeric = function () {
+	return this.each(function () {
+		$(this).keydown(function (e) {
+			var key = e.which || e.keyCode;
+			return !e.shiftKey && !e.altKey && !e.ctrlKey &&
+				// numbers   
+				key >= 48 && key <= 57 ||
+				// Numeric keypad
+				key >= 96 && key <= 105 ||
+				// comma, period and minus, . on keypad
+				key == 190 || key == 188 || key == 109 || key == 110 ||
+				// Backspace and Tab and Enter
+				key == 8 || key == 9 || key == 13 ||
+				// Home and End
+				key == 35 || key == 36 ||
+				// left and right arrows
+				key == 37 || key == 39 ||
+				// Del and Ins
+				key == 46 || key == 45;
+		});
+	});
+}
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 0819763e6..45004c283 100644
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -35,6 +35,7 @@ Transmission.prototype =
 
 		// Set up user events
 		var tr = this;
+		$(".numberinput").forceNumeric();
 		$('#pause_all_link').bind('click', function(e){ tr.stopAllClicked(e); });
 		$('#resume_all_link').bind('click', function(e){ tr.startAllClicked(e); });
 		$('#pause_selected_link').bind('click', function(e){ tr.stopSelectedClicked(e); } );
@@ -129,9 +130,6 @@ Transmission.prototype =
 		this._inspector._info_tab.upload_speed = $(ti+'upload_speed')[0];
 		this._inspector._info_tab.upload_to = $(ti+'upload_to')[0];
 
-		// Setup the preference box
-		this.setupPrefConstraints();
-
 		// Setup the prefs gui
 		this.initializeSettings( );
 
@@ -205,23 +203,6 @@ Transmission.prototype =
 			jQuery("<img>").attr("src", row);
 	},
 
-	/*
-	 * Set up the preference validation
-	 */
-	setupPrefConstraints: function() {
-		// only allow integers for speed limit & port options
-		$('div.preference input[@type=text]:not(#download_location,#block_url)').blur( function() {
-			this.value = this.value.replace(/[^0-9]/gi, '');
-			if (this.value == '') {
-				if ($(this).is('#refresh_rate')) {
-					this.value = 5;
-				} else {
-					this.value = 0;
-				}
-			}
-		});
-	},
-
 	setCompactMode: function( is_compact )
 	{
 		this.torrentRenderer = is_compact ? new TorrentRendererCompact( )
@@ -1257,7 +1238,7 @@ Transmission.prototype =
 					$element.deselectMenuSiblings().selectMenuItem();
 					args[RPC._DownSpeedLimited] = false;
 				} else {
-					var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
+					var rate_str = $element[0].innerHTML
 					var rate_val = parseInt( rate_str );
 					setInnerHTML( $('#limited_download_rate')[0], [ 'Limit (', Transmission.fmt.speed(rate_val), ')' ].join('') );
 					$('#limited_download_rate').deselectMenuSiblings().selectMenuItem();
@@ -1276,7 +1257,7 @@ Transmission.prototype =
 					$element.deselectMenuSiblings().selectMenuItem();
 					args[RPC._UpSpeedLimited] = false;
 				} else {
-					var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
+					var rate_str = $element[0].innerHTML
 					var rate_val = parseInt( rate_str );
 					setInnerHTML( $('#limited_upload_rate')[0], [ 'Limit (', Transmission.fmt.speed(rate_val), ')' ].join('')  );
 					$('#limited_upload_rate').deselectMenuSiblings().selectMenuItem();