From bfd1b2e8caf931f4a27d414bce3fc7d688ccdef9 Mon Sep 17 00:00:00 2001
From: =?utf8?q?David=20=E2=80=98Bombe=E2=80=99=20Roden?=
 <bombe@pterodactylus.net>
Date: Sat, 15 Jan 2011 01:09:50 +0100
Subject: [PATCH] Ajaxify the edit button.

---
 src/main/resources/static/css/sone.css        | 18 ++++++++++
 src/main/resources/templates/editProfile.html | 50 +++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 445d841..55646f3 100644
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -16,6 +16,10 @@ input[type=text], textarea {
 	outline: none;
 }
 
+input[type=text].short {
+	width: 25em;
+}
+
 textarea {
 	height: 4em;
 }
@@ -447,6 +451,20 @@ textarea {
 	font-weight: bold;
 }
 
+#sone .profile-field .name.hidden {
+	display: none;
+}
+
+#sone .profile-field button.confirm {
+	font-weight: bold;
+	color: #080;
+}
+
+#sone .profile-field button.cancel {
+	font-weight: bold;
+	color: red;
+}
+
 #sone .profile-field .value {
 	margin-left: 2em;
 }
diff --git a/src/main/resources/templates/editProfile.html b/src/main/resources/templates/editProfile.html
index 49b4cfd..12cbd74 100644
--- a/src/main/resources/templates/editProfile.html
+++ b/src/main/resources/templates/editProfile.html
@@ -60,6 +60,55 @@
 					})($(this), confirmButton);
 				});
 			});
+
+			/* ajaxify the edit button. */
+			$("#sone #edit-profile .edit-field-name button").each(function() {
+				profileField = $(this).parents(".profile-field");
+				fieldNameElement = profileField.find(".name");
+				inputField = $("input[type=text].short", profileField);
+				confirmButton = $("button.confirm", profileField);
+				cancelButton = $("button.cancel", profileField);
+				(function(editButton, inputField, confirmButton, cancelButton, fieldNameElement) {
+					cleanUp = function(editButton, inputField, confirmButton, cancelButton, fieldNameElement) {
+						editButton.removeAttr("disabled");
+						inputField.addClass("hidden");
+						confirmButton.addClass("hidden");
+						cancelButton.addClass("hidden");
+						fieldNameElement.removeClass("hidden");
+					};
+					confirmButton.click(function() {
+						inputField.attr("disabled", "disabled");
+						confirmButton.attr("disabled", "disabled");
+						cancelButton.attr("disabled", "disabled");
+						editProfileField(confirmButton.parents(".profile-field").attr("id"), inputField.val(), function() {
+							fieldNameElement.text(inputField.val());
+							cleanUp(editButton, inputField, confirmButton, cancelButton, fieldNameElement);
+						});
+						return false;
+					});
+					cancelButton.click(function() {
+						cleanUp(editButton, inputField, confirmButton, cancelButton, fieldNameElement);
+						return false;
+					});
+					inputField.keypress(function(event) {
+						if (event.which == 13) {
+							confirmButton.click();
+							return false;
+						} else if (event.which == 27) {
+							cancelButton.click();
+							return false;
+						}
+					});
+					editButton.click(function() {
+						editButton.attr("disabled", "disabled");
+						fieldNameElement.addClass("hidden");
+						inputField.removeAttr("disabled").val(fieldNameElement.text()).removeClass("hidden").focus().select();
+						confirmButton.removeAttr("disabled").removeClass("hidden");
+						cancelButton.removeAttr("disabled").removeClass("hidden");
+						return false;
+					});
+				})($(this), inputField, confirmButton, cancelButton, fieldNameElement);
+			});
 		});
 	</script>
 
@@ -114,6 +163,7 @@
 		<%foreach fields field fieldLoop>
 			<div class="profile-field" id="<% field.id|html>">
 				<div class="name"><% field.name|html></div>
+				<input class="short hidden" type="text"><button class="confirm hidden" type="button">✔</button><button class="cancel hidden" type="button">✘</button>
 				<div class="edit-field-name"><button type="submit" name="edit-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.Edit|l10n|html></button></div>
 				<div class="delete-field-name"><button type="submit" name="delete-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.Delete|l10n|html></button></div>
 				<div class="<%if fieldLoop.last>hidden <%/if>move-down-field"><button type="submit" name="move-down-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.MoveDown|l10n|html></button></div>
-- 
2.7.4