From 4869d71a2836444ca1daa973a42e5db13548b126 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <phartig@rdrei.net>
Date: Mon, 8 Jul 2013 20:41:05 +0200
Subject: [PATCH] angularjs: add escape behavior

---
 architecture-examples/angularjs/index.html     |  3 ++-
 .../angularjs/js/controllers/todoCtrl.js       |  9 ++++++++-
 .../angularjs/js/directives/todoEscape.js      | 18 ++++++++++++++++++
 .../angularjs/test/unit/todoCtrlSpec.js        |  9 +++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 architecture-examples/angularjs/js/directives/todoEscape.js

diff --git a/architecture-examples/angularjs/index.html b/architecture-examples/angularjs/index.html
index a2e97f1805..a3d65a3e98 100644
--- a/architecture-examples/angularjs/index.html
+++ b/architecture-examples/angularjs/index.html
@@ -26,7 +26,7 @@ <h1>todos</h1>
 							<button class="destroy" ng-click="removeTodo(todo)"></button>
 						</div>
 						<form ng-submit="doneEditing(todo)">
-							<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
+							<input class="edit" ng-model="todo.title" todo-escape="revertEditing(todo)" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
 						</form>
 					</li>
 				</ul>
@@ -66,5 +66,6 @@ <h1>todos</h1>
 		<script src="js/services/todoStorage.js"></script>
 		<script src="js/directives/todoFocus.js"></script>
 		<script src="js/directives/todoBlur.js"></script>
+		<script src="js/directives/todoEscape.js"></script>
 	</body>
 </html>
diff --git a/architecture-examples/angularjs/js/controllers/todoCtrl.js b/architecture-examples/angularjs/js/controllers/todoCtrl.js
index 205f989911..db16804c4b 100644
--- a/architecture-examples/angularjs/js/controllers/todoCtrl.js
+++ b/architecture-examples/angularjs/js/controllers/todoCtrl.js
@@ -1,4 +1,4 @@
-/*global todomvc */
+/*global todomvc, angular */
 'use strict';
 
 /**
@@ -47,6 +47,8 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 
 	$scope.editTodo = function (todo) {
 		$scope.editedTodo = todo;
+		// Clone the original todo to restore it on demand.
+		$scope.originalTodo = angular.extend({}, todo);
 	};
 
 	$scope.doneEditing = function (todo) {
@@ -58,6 +60,11 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 		}
 	};
 
+	$scope.revertEditing = function (todo) {
+		todos[todos.indexOf(todo)] = $scope.originalTodo;
+		$scope.doneEditing($scope.originalTodo);
+	};
+
 	$scope.removeTodo = function (todo) {
 		todos.splice(todos.indexOf(todo), 1);
 	};
diff --git a/architecture-examples/angularjs/js/directives/todoEscape.js b/architecture-examples/angularjs/js/directives/todoEscape.js
new file mode 100644
index 0000000000..41bc9a275d
--- /dev/null
+++ b/architecture-examples/angularjs/js/directives/todoEscape.js
@@ -0,0 +1,18 @@
+/*global todomvc */
+'use strict';
+
+/**
+ * Directive that executes an expression when the element it is applied to gets
+ * an `escape` keydown event.
+ */
+todomvc.directive('todoBlur', function () {
+	var ESCAPE_KEY = 27;
+	return function (scope, elem, attrs) {
+		elem.bind('keydown', function (event) {
+			if (event.keyCode === ESCAPE_KEY) {
+				scope.$apply(attrs.todoEscape);
+			}
+		});
+	};
+});
+
diff --git a/architecture-examples/angularjs/test/unit/todoCtrlSpec.js b/architecture-examples/angularjs/test/unit/todoCtrlSpec.js
index 6c345dfcdc..25edced13c 100644
--- a/architecture-examples/angularjs/test/unit/todoCtrlSpec.js
+++ b/architecture-examples/angularjs/test/unit/todoCtrlSpec.js
@@ -172,6 +172,15 @@
 				scope.$digest();
 				expect(scope.completedCount).toBe(5);
 			});
+
+			it('revertTodo() get a Todo to its previous state', function () {
+				var todo = todoList[0];
+				scope.editTodo(todo);
+				todo.title = 'Unicorn sparkly skypuffles.';
+				scope.revertEditing(todo);
+				scope.$digest();
+				expect(scope.todos[0].title).toBe('Uncompleted Item 0');
+			});
 		});
 	});
 }());