GFoley83/draggableAngularTodoList.js

## draggableAngularTodoList.js
/*global angular */
/*jshint unused:false */
'use strict';

/**
 * The main TodoMVC app module
 *
 * @type {angular.Module}
 */
var todomvc = angular.module('todomvc', ['firebase', 'ui']);

## index.html
<!doctype html>
<html xmlns:ng="http://angularjs.org" lang="en-nz" class="ng-app:todomvc" id="ng-app" data-ng-app="todomvc">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="user-scalable=yes, width=600, maximum-scale=1">
		<title>AngularJS | TodoMVC | Gavin Foley</title>
		<link rel="stylesheet" href="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/bower_components/todomvc-common/base.css">
		<style>
			body { background: #2c2c2c; }
			#todoapp { background: #fff; }
			#toggle-all:before { content: '\27B8'; }
			#toggle-all { top: -63px; left: -20px; }
			.ng-cloak {display: none}
		</style>
	</head>
	<body>
		<section id="todoapp" ng-controller="TodoCtrl">
			<header id="header">
				<h1>todos</h1>
				<form id="todo-form" ng-submit="addTodo()">
					<!-- Removed autofocus as interferes with mobile experience -->
					<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo">
				</form>
			</header>
			<section id="main" ng-show="todos.length" class="ng-cloak">
				<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
				<label for="toggle-all">Mark all as complete</label>
				<ul ui-sortable id="todo-list" ng-model="todos">
					<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
						<div class="view">
							<input class="toggle" type="checkbox" ng-model="todo.completed">
							<label ng-click="editTodo(todo)">{{todo.title}}</label>
							<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">
						</form>
					</li>
				</ul>
			</section>
			<footer id="footer" ng-show="todos.length" class="ng-cloak">
				<span id="todo-count"><strong>{{remainingCount}}</strong>
					<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
				</span>
				<ul id="filters">
					<li>
						<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
					</li>
					<li>
						<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
					</li>
					<li>
						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
					</li>
				</ul>
				<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
			</footer>
		</section>
		<footer id="info">
			<p>Click to edit a todo</p>
			<p>Drag &amp; Touch support added by Gavin Foley</p>
			<p>95% of the credit goes to the awesome <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>
		<!-- IE Polyfills -->
		<!--[if IE]>
			<script src="js/ie.js"></script>
		<![endif]-->

		<!-- Vendor scripts -->
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

		<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

		<script src="http://cdn.firebase.com/v0/firebase.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>

		<!-- Angular app scripts -->
		<script src="draggableAngularTodoList.js"></script>
		<script src="todoCtrl.js"></script>
		<script src="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/js/directives/todoFocus.js"></script>
		<script src="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/js/directives/todoBlur.js"></script>
	</body>
</html>

## todoCtrl.js
/*global 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 provides event handlers
 */
todomvc.controller('TodoCtrl', ['$scope', '$location', 'angularFire', 'filterFilter',
	function TodoCtrl($scope, $location, angularFire, filterFilter) {
		var url = "https://angularjs-sandbox.firebaseio.com/todogist";
		var promise = angularFire(url, $scope, 'todos');

		$scope.newTodo = '';
		$scope.editedTodo = null;

		if ($location.path() === '') {
			$location.path('/');
		}
		$scope.location = $location;

		promise.then(function(todos) {
			startWatch($scope, filterFilter);
		});
	}
]);

function startWatch($scope, filter) {
	$scope.$watch('todos', function () {
		$scope.remainingCount = filter($scope.todos, {completed: false}).length;
		$scope.completedCount = $scope.todos.length - $scope.remainingCount;
		$scope.allChecked = !$scope.remainingCount;
	}, true);

	$scope.$watch( 'location.path()', function( path ) {
		$scope.statusFilter = (path == '/active') ?
		{ completed: false } : (path == '/completed') ?
		{ completed: true } : null;
	});

	$scope.addTodo = function () {
		if (!$scope.newTodo.length) {
			return;
		}

		$scope.todos.push({
			title: $scope.newTodo,
			completed: false
		});

		$scope.newTodo = '';
	};

	$scope.editTodo = function (todo) {
		$scope.editedTodo = todo;
	};

	$scope.doneEditing = function (todo) {
		$scope.editedTodo = null;
		if (!todo.title) {
			$scope.removeTodo(todo);
		}
	};

	$scope.removeTodo = function (todo) {
		$scope.todos.splice($scope.todos.indexOf(todo), 1);
	};

	$scope.clearCompletedTodos = function () {
		$scope.todos = $scope.todos.filter(function (val) {
			return !val.completed;
		});
	};

	$scope.markAll = function (completed) {
		$scope.todos.forEach(function (todo) {
			todo.completed = completed;
		});
	};
}
	/global angular /
	/jshint unused:false /
	'use strict';

	/**
	* The main TodoMVC app module
	*
	* @type {angular.Module}
	*/
	var todomvc = angular.module('todomvc', ['firebase', 'ui']);
	<!doctype html>
	<html xmlns:ng="http://angularjs.org" lang="en-nz" class="ng-app:todomvc" id="ng-app" data-ng-app="todomvc">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="user-scalable=yes, width=600, maximum-scale=1">
	<title>AngularJS \| TodoMVC \| Gavin Foley</title>
	<link rel="stylesheet" href="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/bower_components/todomvc-common/base.css">
	<style>
	body { background: #2c2c2c; }
	#todoapp { background: #fff; }
	#toggle-all:before { content: '\27B8'; }
	#toggle-all { top: -63px; left: -20px; }
	.ng-cloak {display: none}
	</style>
	</head>
	<body>
	<section id="todoapp" ng-controller="TodoCtrl">
	<header id="header">
	<h1>todos</h1>
	<form id="todo-form" ng-submit="addTodo()">
	<!-- Removed autofocus as interferes with mobile experience -->
	<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo">
	</form>
	</header>
	<section id="main" ng-show="todos.length" class="ng-cloak">
	<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
	<label for="toggle-all">Mark all as complete</label>
	<ul ui-sortable id="todo-list" ng-model="todos">
	<li ng-repeat="todo in todos \| filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
	<div class="view">
	<input class="toggle" type="checkbox" ng-model="todo.completed">
	<label ng-click="editTodo(todo)">{{todo.title}}</label>
	<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">
	</form>
	</li>
	</ul>
	</section>
	<footer id="footer" ng-show="todos.length" class="ng-cloak">
	<span id="todo-count"><strong>{{remainingCount}}</strong>
	<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
	</span>
	<ul id="filters">
	<li>
	<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
	</li>
	<li>
	<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
	</li>
	<li>
	<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
	</li>
	</ul>
	<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
	</footer>
	</section>
	<footer id="info">
	<p>Click to edit a todo</p>
	<p>Drag & Touch support added by Gavin Foley</p>
	<p>95% of the credit goes to the awesome <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
	<!-- IE Polyfills -->
	<!--[if IE]>
	<script src="js/ie.js"></script>
	<![endif]-->

	<!-- Vendor scripts -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

	<script src="http://cdn.firebase.com/v0/firebase.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>

	<!-- Angular app scripts -->
	<script src="draggableAngularTodoList.js"></script>
	<script src="todoCtrl.js"></script>
	<script src="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/js/directives/todoFocus.js"></script>
	<script src="http://rawgithub.com/tastejs/todomvc/4ad2192b8ee6fb5dee52dd6bd3db83bb97c629fd/architecture-examples/angularjs/js/directives/todoBlur.js"></script>
	</body>
	</html>
	/global 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 provides event handlers
	*/
	todomvc.controller('TodoCtrl', ['$scope', '$location', 'angularFire', 'filterFilter',
	function TodoCtrl($scope, $location, angularFire, filterFilter) {
	var url = "https://angularjs-sandbox.firebaseio.com/todogist";
	var promise = angularFire(url, $scope, 'todos');

	$scope.newTodo = '';
	$scope.editedTodo = null;

	if ($location.path() === '') {
	$location.path('/');
	}
	$scope.location = $location;

	promise.then(function(todos) {
	startWatch($scope, filterFilter);
	});
	}
	]);

	function startWatch($scope, filter) {
	$scope.$watch('todos', function () {
	$scope.remainingCount = filter($scope.todos, {completed: false}).length;
	$scope.completedCount = $scope.todos.length - $scope.remainingCount;
	$scope.allChecked = !$scope.remainingCount;
	}, true);

	$scope.$watch( 'location.path()', function( path ) {
	$scope.statusFilter = (path == '/active') ?
	{ completed: false } : (path == '/completed') ?
	{ completed: true } : null;
	});

	$scope.addTodo = function () {
	if (!$scope.newTodo.length) {
	return;
	}

	$scope.todos.push({
	title: $scope.newTodo,
	completed: false
	});

	$scope.newTodo = '';
	};

	$scope.editTodo = function (todo) {
	$scope.editedTodo = todo;
	};

	$scope.doneEditing = function (todo) {
	$scope.editedTodo = null;
	if (!todo.title) {
	$scope.removeTodo(todo);
	}
	};

	$scope.removeTodo = function (todo) {
	$scope.todos.splice($scope.todos.indexOf(todo), 1);
	};

	$scope.clearCompletedTodos = function () {
	$scope.todos = $scope.todos.filter(function (val) {
	return !val.completed;
	});
	};

	$scope.markAll = function (completed) {
	$scope.todos.forEach(function (todo) {
	todo.completed = completed;
	});
	};
	}