Commit ff0a29ce authored by Pascal Hartig's avatar Pascal Hartig

Improvements, switch to angular base version

- Strict mode
- Split up directives
- Require 'app' in 'main' to improve loading time
- Added Igor to contributors list
parent 9b3f7f1e
......@@ -34,7 +34,7 @@
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todoCompleted(todo)">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label>{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
......@@ -64,7 +64,13 @@
</section>
<footer id="info">
<p>Double-click to edit a todo.</p>
<p>Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>, <a href="http://jacobmumm.com">Jacob Mumm</a>, <a href="https://twitter.com/passy">Pascal Hartig</a></p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>,
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://twitter.com/passy">Pascal Hartig</a>
</p>
</footer>
<script src="../../../assets/base.js"></script>
<script data-main="js/main" src="../../../assets/require.min.js"></script>
......
'use strict';
define([], function () {
return angular.module('todomvc', []);
});
'use strict';
/**
* The main controller for the app. The controller:
* - retrieves and persist the model via the todoStorage service
* -
* exposes the model to the template and
* - exposes the model to the template and provides event handlers
*/
define(['app', 'services/todoStorage'], function (app) {
......@@ -11,34 +11,36 @@ define(['app', 'services/todoStorage'], function (app) {
var todos = $scope.todos = todoStorage.get();
$scope.newTodo = "";
$scope.remainingCount = filterFilter(todos, {completed: false}).length;
$scope.editedTodo = null;
$scope.$watch('todos', function() {
$scope.remainingCount = filterFilter(todos, {completed: false}).length;
$scope.doneCount = todos.length - $scope.remainingCount;
$scope.allChecked = !$scope.remainingCount
todoStorage.put(todos);
}, true);
if ( $location.path() === '' ) $location.path('/');
$scope.location = $location;
$scope.$watch('location.path()', function( path ) {
$scope.$watch( 'location.path()', function( path ) {
$scope.statusFilter = (path == '/active') ?
{ completed: false } : (path == '/completed') ?
{ completed: true } : null;
});
$scope.$watch('remainingCount == 0', function( val ) {
$scope.allChecked = val;
});
$scope.addTodo = function() {
if ($scope.newTodo.length === 0) return;
if ( !$scope.newTodo.length ) {
return;
}
todos.push({
title: $scope.newTodo,
title: this.newTodo,
completed: false
});
todoStorage.put(todos);
$scope.newTodo = '';
$scope.remainingCount++;
this.newTodo = '';
};
......@@ -49,21 +51,14 @@ define(['app', 'services/todoStorage'], function (app) {
$scope.doneEditing = function( todo ) {
$scope.editedTodo = null;
if ( !todo.title ) $scope.removeTodo(todo);
todoStorage.put(todos);
if ( !todo.title ) {
$scope.removeTodo(todo);
}
};
$scope.removeTodo = function( todo ) {
$scope.remainingCount -= todo.completed ? 0 : 1;
todos.splice(todos.indexOf(todo), 1);
todoStorage.put(todos);
};
$scope.todoCompleted = function( todo ) {
todo.completed ? $scope.remainingCount-- : $scope.remainingCount++;
todoStorage.put(todos);
};
......@@ -71,7 +66,6 @@ define(['app', 'services/todoStorage'], function (app) {
$scope.todos = todos = todos.filter(function( val ) {
return !val.completed;
});
todoStorage.put(todos);
};
......@@ -79,8 +73,6 @@ define(['app', 'services/todoStorage'], function (app) {
todos.forEach(function( todo ) {
todo.completed = done;
});
$scope.remainingCount = done ? 0 : todos.length;
todoStorage.put(todos);
};
}
]);
......
/**
* Directive that executes an expression when the element it is applied to loses focus.
*/
define(['app'], function (app) {
app.directive('todoBlur', function() {
return function( scope, elem, attrs ) {
elem.bind('blur', function() {
scope.$apply( attrs.todoBlur );
});
};
});
app.directive('todoFocus', function( $timeout ) {
return function( scope, elem, attrs ) {
scope.$watch( attrs.todoFocus, function( newval ) {
if ( newval ) {
$timeout(function() {
elem[0].focus();
elem[0].select();
}, 0 );
}
});
};
});
});
'use strict';
/**
* Directive that executes an expression when the element it is applied to loses focus.
*/
define(['app'], function ( app ) {
app.directive('todoBlur', function() {
return function( scope, elem, attrs ) {
elem.bind('blur', function() {
scope.$apply(attrs.todoBlur);
});
};
});
});
'use strict';
/**
* Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
*/
define(['app'], function ( app ) {
app.directive('todoFocus', function( $timeout ) {
return function( scope, elem, attrs ) {
scope.$watch(attrs.todoFocus, function( newval ) {
if ( newval ) {
$timeout(function() {
elem[0].focus();
elem[0].select();
}, 0, false);
}
});
};
});
});
// Author: Pascal Hartig <phartig@weluse.de>
// Filename: main.js
'use strict';
require.config({
paths: {
......@@ -12,8 +11,6 @@ require.config({
}
});
require(['angular', 'controllers/todo', 'directives/todo'], function (angular) {
require(['angular', 'app', 'controllers/todo', 'directives/todoFocus', 'directives/todoBlur'], function (angular) {
angular.bootstrap(document, ['todomvc']);
});
// vim:sts=4:sw=4:ft=javascript
'use strict';
/**
* Services that persists and retrieves TODOs from localStorage.
*/
......
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