Commit c705f8b8 authored by dmitriz's avatar dmitriz

angularjs-perf: Removed todo-escaped directive

Using the native `ng-keydown` instead
parent 6f8b0d9b
...@@ -19,14 +19,20 @@ ...@@ -19,14 +19,20 @@
<input id="toggle-all" type="checkbox" ng-model="TC.allChecked" ng-click="TC.markAll(TC.allChecked)"> <input id="toggle-all" type="checkbox" ng-model="TC.allChecked" ng-click="TC.markAll(TC.allChecked)">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"> <ul id="todo-list">
<li ng-repeat="todo in TC.todos | filter:TC.statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo === TC.editedTodo}"> <li ng-repeat="todo in TC.todos | filter:TC.statusFilter track by $index"
ng-class="{completed: todo.completed, editing: todo === TC.editedTodo}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed"> <input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="TC.editTodo(todo)">{{todo.title}}</label> <label ng-dblclick="TC.editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="TC.removeTodo($index)"></button> <button class="destroy" ng-click="TC.removeTodo($index)"></button>
</div> </div>
<form ng-submit="TC.doneEditing(todo, $index)"> <form ng-submit="TC.doneEditing(todo, $index)">
<input class="edit" ng-trim="false" ng-model="todo.title" ng-blur="TC.doneEditing(todo, $index)" todo-escape="TC.revertEditing($index)" todo-focus="todo === TC.editedTodo"> <input class="edit"
ng-trim="false"
ng-model="todo.title"
ng-blur="TC.doneEditing(todo, $index)"
ng-keydown="($event.keyCode === TC.ESCAPE_KEY) && TC.revertEditing($index)"
todo-focus="todo === TC.editedTodo">
</form> </form>
</li> </li>
</ul> </ul>
...@@ -65,6 +71,5 @@ ...@@ -65,6 +71,5 @@
<script src="js/controllers/todoCtrl.js"></script> <script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script> <script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script> <script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body> </body>
</html> </html>
/* jshint undef: true, unused: true */
/*global angular */ /*global angular */
/*jshint unused:false */
(function () { (function () {
'use strict'; 'use strict';
...@@ -8,5 +8,5 @@ ...@@ -8,5 +8,5 @@
* *
* @type {angular.Module} * @type {angular.Module}
*/ */
angular.module('todomvc', ['todoCtrl', 'todoEscape', 'todoFocus', 'todoStorage']); angular.module('todomvc', ['todoCtrl', 'todoFocus', 'todoStorage']);
})(); })();
/* jshint undef: true, unused: true */
/*global angular */ /*global angular */
/*
* Line below lets us save `this` as `TC`
* to make properties look exactly the same as in the template
*/
//jscs:disable safeContextKeyword
(function () { (function () {
'use strict'; 'use strict';
...@@ -13,10 +20,15 @@ ...@@ -13,10 +20,15 @@
var TC = this; var TC = this;
var todos = TC.todos = todoStorage.get(); var todos = TC.todos = todoStorage.get();
TC.newTodo = {title: '', completed: false}; TC.ESCAPE_KEY = 27;
TC.editedTodo = {}; TC.editedTodo = {};
function resetTodo() {
TC.newTodo = {title: '', completed: false};
}
resetTodo();
if ($location.path() === '') { if ($location.path() === '') {
$location.path('/'); $location.path('/');
} }
...@@ -43,8 +55,7 @@ ...@@ -43,8 +55,7 @@
} }
todos.push(TC.newTodo); todos.push(TC.newTodo);
resetTodo();
TC.newTodo = {title: '', completed: false};
}; };
TC.editTodo = function (todo) { TC.editTodo = function (todo) {
...@@ -64,8 +75,8 @@ ...@@ -64,8 +75,8 @@
}; };
TC.revertEditing = function (index) { TC.revertEditing = function (index) {
TC.editedTodo = {};
todos[index] = TC.originalTodo; todos[index] = TC.originalTodo;
TC.doneEditing(TC.originalTodo);
}; };
TC.removeTodo = function (index) { TC.removeTodo = function (index) {
...@@ -85,3 +96,4 @@ ...@@ -85,3 +96,4 @@
}; };
}); });
})(); })();
//jscs:enable
/*global angular */
(function () {
'use strict';
angular.module('todoEscape', [])
/**
* Directive that executes an expression when the element it is applied to gets
* an `escape` keydown event.
*/
.directive('todoEscape', function () {
var ESCAPE_KEY = 27;
return function (scope, elem, attrs) {
elem.bind('keydown', function (event) {
if (event.keyCode === ESCAPE_KEY) {
scope.$apply(attrs.todoEscape);
}
});
scope.$on('$destroy', function () {
elem.unbind('keydown');
});
};
});
})();
/* jshint undef: true, unused: true */
/*global angular */ /*global angular */
(function () { (function () {
'use strict'; 'use strict';
......
/* jshint undef: true, unused: true */
/*global angular */ /*global angular */
(function () { (function () {
'use strict'; 'use strict';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment