From 00dfd6ce677dec350e7f23216b93c55ba7a6f20a Mon Sep 17 00:00:00 2001
From: Jordan Lee <jordan@transmissionbt.com>
Date: Thu, 25 Aug 2011 08:03:19 +0000
Subject: [PATCH] (trunk web) simplify the prefs tab selection code

---
 web/index.html                 | 16 ++++++++--------
 web/javascript/common.js       | 24 ------------------------
 web/javascript/transmission.js | 13 +++++++++----
 web/stylesheets/common.css     | 23 ++++++++---------------
 4 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/web/index.html b/web/index.html
index b2fecb785..6c05f6b7c 100755
--- a/web/index.html
+++ b/web/index.html
@@ -230,12 +230,12 @@
 				<form action="" id="prefs_form">
 					<div id="prefs_tabs">
 						<ul>
-							<li id="prefs_tab_general_tab" class="prefs_tab_enabled">General</li>
-							<li id="prefs_tab_speed_tab" class="prefs_tab_disabled">Speed</li>
-							<li id="prefs_tab_peers_tab" class="prefs_tab_disabled">Peers</li>
-							<li id="prefs_tab_network_tab" class="prefs_tab_disabled">Network</li>
+							<li id="prefs-tab-general" class="prefs-tab selected">General</li>
+							<li id="prefs-tab-speed" class="prefs-tab">Speed</li>
+							<li id="prefs-tab-peers" class="prefs-tab">Peers</li>
+							<li id="prefs-tab-network" class="prefs-tab">Network</li>
 						</ul>
-						<div id="prefs_tab_general" class="prefs_tab">
+						<div id="prefs-page-general" class="prefs-page">
 							<div class="preference download_location">
 								<label class="category">Add transfers:</label>
 								<div class="formdiv">
@@ -264,7 +264,7 @@
 							</div>
 							<div style="clear: both; visibility: hidden;"></div>
 						</div>
-						<div id="prefs_tab_speed" class="prefs_tab" style="display: none;">
+						<div id="prefs-page-speed" class="prefs-page" style="display: none;">
 							<div class="preference limit_total">
 								<label class="category">Speed Limits:</label>
 								<div class="formdiv checkbox">
@@ -319,7 +319,7 @@
 							</div>
 							<div style="clear: both; visibility: hidden;"></div>
 						</div>
-						<div id="prefs_tab_peers" class="prefs_tab" style="display: none;">
+						<div id="prefs-page-peers" class="prefs-page" style="display: none;">
 							<div class="preference peers_conn">
 								<label class="category">Connections:</label>
 								<div class="formdiv">
@@ -362,7 +362,7 @@
 							</div>
 							<div style="clear: both; visibility: hidden;"></div>
 						</div>
-						<div id="prefs_tab_network" class="prefs_tab" style="display: none;">
+						<div id="prefs-page-network" class="prefs-page" style="display: none;">
 							<div class="preference utp">
 								<label class="category">Peer communication:</label>
 								<div class="formdiv checkbox">
diff --git a/web/javascript/common.js b/web/javascript/common.js
index 153ee1e7a..3211d9bff 100644
--- a/web/javascript/common.js
+++ b/web/javascript/common.js
@@ -171,30 +171,6 @@ String.prototype.compareTo = function(that) {
 	return 0;
 }
 
-/**
- * @brief Switch between different dialog tabs
- */
-function changeTab(tab, id) {
-	for (var x = 0, node; tab.parentNode.childNodes[x]; x++) {
-		node = tab.parentNode.childNodes[x];
-		if (node == tab) {
-			node.className = "prefs_tab_enabled";
-		} else {
-			node.className = "prefs_tab_disabled";
-		}
-	}
-	for (x = 0; tab.parentNode.parentNode.childNodes[x]; x++) {
-		node = tab.parentNode.parentNode.childNodes[x];
-		if (node.tagName == "DIV") {
-			if (node.id == id) {
-				node.style.display = "block";
-			} else {
-				node.style.display = "none";
-			}
-		}
-	}
-}
-
 /***
 ****  Preferences
 ***/
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 1c391d445..bfd3ea9bc 100644
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -54,10 +54,10 @@ Transmission.prototype =
 		$('#upload_cancel_button').click(function(e) { tr.hideUploadDialog(); return false; });
 		$('#turtle_button').click(function() { tr.toggleTurtleClicked(); return false; });
 		$('#compact-button').click(function() { tr.toggleCompactClicked(); return false; });
-		$('#prefs_tab_general_tab').click(function() { changeTab(this, 'prefs_tab_general'); });
-		$('#prefs_tab_speed_tab').click(function() { changeTab(this, 'prefs_tab_speed'); });
-		$('#prefs_tab_peers_tab').click(function() { changeTab(this, 'prefs_tab_peers'); });
-		$('#prefs_tab_network_tab').click(function() { changeTab(this, 'prefs_tab_network');});
+		$('#prefs-tab-general').click(function() { tr.selectPrefsTab('general'); });
+		$('#prefs-tab-speed').click(function() { tr.selectPrefsTab('speed'); });
+		$('#prefs-tab-peers').click(function() { tr.selectPrefsTab('peers'); });
+		$('#prefs-tab-network').click(function() { tr.selectPrefsTab('network'); });
 		$('#torrent_upload_form').submit(function() { $('#upload_confirm_button').click(); return false; });
 		$('#torrent_container').bind('dragover', function(e) { return tr.dragenter(e); });
 		$('#torrent_container').bind('dragenter', function(e) { return tr.dragenter(e); });
@@ -140,6 +140,11 @@ Transmission.prototype =
 		this.filterSetup();
 	},
 
+	selectPrefsTab: function(name) {
+		$('#prefs-tab-'+name).addClass('selected').siblings('.prefs-tab').removeClass('selected');
+		$('#prefs-page-'+name).show().siblings('.prefs-page').hide();
+	},
+
 	loadDaemonPrefs: function(async) {
 		var tr = this;
 		this.remote.loadDaemonPrefs(function(data) {
diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css
index 77774a77f..fc6dc66a4 100644
--- a/web/stylesheets/common.css
+++ b/web/stylesheets/common.css
@@ -1201,12 +1201,12 @@ div#prefs_container h2.dialog_heading {
 div#prefs_container div#prefs_tabs {
 	clear: both;
 }
-
 div#prefs_container div#prefs_tabs ul {
 	margin: 0;
 	padding: 0 0 0 10px;
 }
-div#prefs_container div#prefs_tabs ul li {
+.prefs-tab {
+	cursor: pointer;
 	display: block;
 	float: left;
 	font-size: 1.2em;
@@ -1217,15 +1217,18 @@ div#prefs_container div#prefs_tabs ul li {
 	border-right: 1px solid #787878;
 	border-top: 1px solid #787878;
 	margin-bottom: -1px;
-}
-.prefs_tab_disabled {
 	background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x;
 	border-bottom: 1px solid #787878;
 }
-.prefs_tab_enabled {
+.prefs-tab.selected {
 	background: none;
 	border-bottom: 1px solid #efefef;
 }
+.prefs-page {
+	border-top: 1px solid #787878;
+	clear: both;
+	padding: 7px;
+}
 div#stats_container h2.dialog_heading {
 	display: none;
 }
@@ -1280,16 +1283,6 @@ div#stats_container a {
 	margin: 10px 5px 10px 7px;
 }
 
-div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:hover,
-div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:active {
-	background: none;
-}
-div#prefs_container div#prefs_tabs div.prefs_tab {
-	border-top: 1px solid #787878;
-	clear: both;
-	padding: 7px;
-}
-
 div#prefs_container div#pref_error {
 	display: none;
 	width: 395px;