From 281ba28317f6f7f9651fdfd33bbbb12d4f221876 Mon Sep 17 00:00:00 2001
From: jzaefferer <joern.zaefferer@gmail.com>
Date: Fri, 8 Oct 2010 12:59:20 +0200
Subject: [PATCH] Converter demo: Added ability to remove individual
 conversions. Removed distance defaults until those can be added by hand.

---
 experiments/converter/application.js | 21 +++++++++++++++++---
 experiments/converter/index.html     | 29 ++++++++++++++++++----------
 experiments/converter/storage.js     | 15 ++++++++++++--
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/experiments/converter/application.js b/experiments/converter/application.js
index e45a8fa4..34432aee 100644
--- a/experiments/converter/application.js
+++ b/experiments/converter/application.js
@@ -10,7 +10,8 @@ $(function() {
 	};
 	
 	function list() {
-		var ul = $("#conversions").empty().removeAttr("data-mobilized", false);
+		var ul = $("#conversions").empty().removeAttr("data-mobilized"),
+			ulEdit = $("#edit-conversions").empty().removeAttr("data-mobilized");
 		$.each(all, function(index, conversion) {
 			// if last update was less then a minute ago, don't update
 			if (conversion.type == "currency" && !conversion.rate || conversion.updated && conversion.updated + 60000 < +new Date) {
@@ -27,11 +28,15 @@ $(function() {
 			$("#conversion-field").tmpl(conversion, {
 				symbols: symbols
 			}).appendTo(ul);
+			$("#conversion-edit-field").tmpl(conversion, {
+				symbols: symbols
+			}).appendTo(ulEdit);
 		});
 		$.mobilize(ul);
+		// TODO trigger a custom event instead of keyup?
+		$("#term").keyup();
 	}
 	var all = conversions.all();
-	list();
 	$("#term").keyup(function() {
 		var value = this.value;
 		$.each(all, function(index, conversion) {
@@ -40,7 +45,8 @@ $(function() {
 				: "Rate not available, yet."
 			);
 		});
-	}).keyup().focus();
+	}).focus();
+	list();
 	$("form").submit(function() {
 		$("#term").blur();
 		return false;
@@ -65,4 +71,13 @@ $(function() {
 		list();
 		return false;
 	});
+	
+	$("#edit-conversions").click(function(event) {
+		var target = $(event.target).closest(".deletebutton");
+		if (target.length) {
+			conversions.remove(target.prev("label").attr("for"));
+			list();
+		}
+		return false;
+	})
 });
\ No newline at end of file
diff --git a/experiments/converter/index.html b/experiments/converter/index.html
index 8fd46a3b..f409c1b2 100644
--- a/experiments/converter/index.html
+++ b/experiments/converter/index.html
@@ -17,6 +17,18 @@
 		.field { padding: 15px; }
 		.editbutton { float: right; }
 	</style>
+	<script id="conversion-field" type="text/x-jquery-tmpl">
+	    <li>
+			<label for="${from}${to}" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
+			<input type="text" readonly="readonly" name="${from}${to}" id="${from}${to}" value="" />
+		</li>
+	</script>
+	<script id="conversion-edit-field" type="text/x-jquery-tmpl">
+	    <li>
+			<label for="${from}${to}" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
+			<a href="#" class="deletebutton ui-aux">Delete</a>
+		</li>
+	</script>
 	
 	<div data-role="header">
 		<a href="#customize" class="editbutton ui-aux" data-transition="flip">Edit</a>
@@ -31,12 +43,6 @@
 		<div class="ui-content">
 			<ul id="conversions" data-role="listview" data-inset="true"></ul>
 		</div>
-		<script id="conversion-field" type="text/x-jquery-tmpl">
-		    <li>
-				<label for="name" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
-				<input type="text" readonly="readonly" name="${from}${to}" id="${from}${to}" value="" />
-			</li>
-		</script>
 	</div>
 </div>
 
@@ -48,15 +54,18 @@
 	
 	<div data-role="content" class="ui-body">
 		<h2>sort conversions, add new ones or delete some</h2>
-		<a href="#add-dialog" data-role="button" data-rel="dialog" data-transition="pop">Add currency conversion</a>
+		<a href="#add-currency-dialog" data-role="button" data-rel="dialog" data-transition="pop">Add currency conversion</a>
 		<a id="restore" href="#" data-role="button">Restore default</a>
 		<a id="clear" href="#" data-role="button">Delete all conversions</a>
+		<div class="ui-content">
+			<ul id="edit-conversions" data-role="listview" data-inset="true"></ul>
+		</div>
 	</div>
 </div>
 
-<div data-role="page" id="add-dialog" class="ui-body-a">
+<div data-role="page" id="add-currency-dialog" class="ui-body-a">
 	<div data-role="header" data-theme="d">
-		<h1>Add conversion</h1>
+		<h1>Add currency conversion</h1>
 		<a href="index.html" class="ui-back" data-icon="arrow-l">Cancel</a>
 	</div>
 	
@@ -74,7 +83,7 @@
 			<option value="USD">USD - US Dollar</option>
 			<option value="GBP">GBP - Great Britain Pound</option>
 		</select>
-		<a id="add" href="#add-dialog" data-role="button">Add conversion</a>
+		<a id="add" href="#add-dialog" data-role="button">Add currency conversion</a>
 	</div>
 </div>
 
diff --git a/experiments/converter/storage.js b/experiments/converter/storage.js
index 01849930..8604e91c 100644
--- a/experiments/converter/storage.js
+++ b/experiments/converter/storage.js
@@ -4,7 +4,9 @@
 			type: "currency",
 			from: "USD",
 			to: "EUR"
-		},
+		}
+		// TODO add back in as defaults once its possible to add other conversions, not just currencies
+		/*,
 		{
 			type: "distance",
 			from: "Miles",
@@ -16,7 +18,7 @@
 			from: "inch",
 			to: "centimeter",
 			rate: 2.54
-		}
+		}*/
 	];
 	
 	// TODO fallback to whatever else when localStorage isn't available
@@ -48,6 +50,15 @@
 			conversions.length = 0;
 			$.extend(conversions, defaults);
 			this.store();
+		},
+		remove: function(tofrom) {
+			$.each(conversions, function(index, conversion) {
+				if ((conversion.from + conversion.to) == tofrom) {
+					conversions.splice(index, 1);
+					return false;
+				}
+			});
+			this.store();
 		}
 	};