Merge pull request #1545 from mhoyer/aurelia-update-0.2.0

Update todomvc-aurelia 0.2.0 (using Aurelia 1.0.0.beta-1)

.jscsrc

@@ -29,6 +29,9 @@
 		"**/generated/**",
 		"examples/ampersand/todomvc.bundle.js",
 		"examples/angular2/**/*.js",
+		"examples/aurelia/config.js",
+		"examples/aurelia/dist/*.js",
+		"examples/aurelia/jspm_packages/**/*.js",
 		"examples/duel/www/**",
 		"examples/duel/src/main/webapp/js/lib/**",
 		"examples/humble/js/**",

examples/aurelia/app.js

+import {Router} from 'aurelia-router';
+import {Todos} from './todos';
+
+export class App {
+	static inject() { return [Router]; }
+
+	constructor(router) {
+		this.router = router;
+		this.router.configure(this.configureRoutes);
+	}
+
+	configureRoutes(cfg) {
+		cfg.title = 'TodoMVC';
+		cfg.map([
+			{ route: ['', ':filter'], moduleId: 'todos' }
+		]);
+	}
+}

examples/aurelia/behaviors/focus.js

+import {Behavior} from 'aurelia-templating';
+
+export class Focus {
+	static metadata() {
+		return Behavior
+			.attachedBehavior('focus')
+			.withProperty('value', 'valueChanged', 'focus');
+	}
+
+	static inject() { return [Element]; }
+	constructor(element) {
+		this.element = element;
+	}
+
+	valueChanged(value) {
+		if (value) {
+			this.element.focus();
+		}
+	}
+}

examples/aurelia/dist/app.html

 <template>
-	<router-view></router-view>
+  <router-view></router-view>
 </template>

examples/aurelia/dist/app.js

+System.register(['aurelia-router', './todos'], function (_export) {
+	'use strict';
+
+	var Router, Todos, App;
+
+	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+	return {
+		setters: [function (_aureliaRouter) {
+			Router = _aureliaRouter.Router;
+		}, function (_todos) {
+			Todos = _todos.Todos;
+		}],
+		execute: function () {
+			App = (function () {
+				_createClass(App, null, [{
+					key: 'inject',
+					value: function inject() {
+						return [Router];
+					}
+				}]);
+
+				function App(router) {
+					_classCallCheck(this, App);
+
+					this.router = router;
+					this.router.configure(this.configureRoutes);
+				}
+
+				_createClass(App, [{
+					key: 'configureRoutes',
+					value: function configureRoutes(cfg) {
+						cfg.title = 'TodoMVC';
+						cfg.map([{ route: ['', ':filter'], moduleId: 'todos' }]);
+					}
+				}]);
+
+				return App;
+			})();
+
+			_export('App', App);
+		}
+	};
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7b0JBR2EsR0FBRzs7Ozs7Ozs7MkJBSFIsTUFBTTs7a0JBQ04sS0FBSzs7O0FBRUEsTUFBRztpQkFBSCxHQUFHOztZQUNGLGtCQUFHO0FBQUUsYUFBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO01BQUU7OztBQUV6QixhQUhDLEdBQUcsQ0FHSCxNQUFNLEVBQUU7MkJBSFIsR0FBRzs7QUFJZCxTQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztBQUNyQixTQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7S0FDNUM7O2lCQU5XLEdBQUc7O1lBUUEseUJBQUMsR0FBRyxFQUFFO0FBQ3BCLFNBQUcsQ0FBQyxLQUFLLEdBQUcsU0FBUyxDQUFDO0FBQ3RCLFNBQUcsQ0FBQyxHQUFHLENBQUMsQ0FDUCxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRSxTQUFTLENBQUMsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLENBQzdDLENBQUMsQ0FBQztNQUNIOzs7V0FiVyxHQUFHIiwiZmlsZSI6ImFwcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Um91dGVyfSBmcm9tICdhdXJlbGlhLXJvdXRlcic7XG5pbXBvcnQge1RvZG9zfSBmcm9tICcuL3RvZG9zJztcblxuZXhwb3J0IGNsYXNzIEFwcCB7XG5cdHN0YXRpYyBpbmplY3QoKSB7IHJldHVybiBbUm91dGVyXTsgfVxuXG5cdGNvbnN0cnVjdG9yKHJvdXRlcikge1xuXHRcdHRoaXMucm91dGVyID0gcm91dGVyO1xuXHRcdHRoaXMucm91dGVyLmNvbmZpZ3VyZSh0aGlzLmNvbmZpZ3VyZVJvdXRlcyk7XG5cdH1cblxuXHRjb25maWd1cmVSb3V0ZXMoY2ZnKSB7XG5cdFx0Y2ZnLnRpdGxlID0gJ1RvZG9NVkMnO1xuXHRcdGNmZy5tYXAoW1xuXHRcdFx0eyByb3V0ZTogWycnLCAnOmZpbHRlciddLCBtb2R1bGVJZDogJ3RvZG9zJyB9XG5cdFx0XSk7XG5cdH1cbn1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==

examples/aurelia/dist/main.js

+System.register([], function (_export) {
+	"use strict";
+
+	_export("configure", configure);
+
+	function configure(aurelia) {
+		aurelia.use.standardConfiguration();
+
+		aurelia.start().then(function (a) {
+			return a.setRoot();
+		});
+	}
+
+	return {
+		setters: [],
+		execute: function () {}
+	};
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBTyxVQUFTLFNBQVMsQ0FBQyxPQUFPLEVBQUU7QUFDbEMsU0FBTyxDQUFDLEdBQUcsQ0FDVCxxQkFBcUIsRUFBRSxDQUFDOztBQUUxQixTQUFPLENBQUMsS0FBSyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQUEsQ0FBQztVQUFJLENBQUMsQ0FBQyxPQUFPLEVBQUU7R0FBQSxDQUFDLENBQUM7RUFDdkMiLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBjb25maWd1cmUoYXVyZWxpYSkge1xuXHRhdXJlbGlhLnVzZVxuXHRcdC5zdGFuZGFyZENvbmZpZ3VyYXRpb24oKTtcblxuXHRhdXJlbGlhLnN0YXJ0KCkudGhlbihhID0+IGEuc2V0Um9vdCgpKTtcbn1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==

examples/aurelia/dist/todo-item.js

+System.register([], function (_export) {
+	"use strict";
+
+	var ENTER_KEY, ESC_KEY, TodoItem;
+
+	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	return {
+		setters: [],
+		execute: function () {
+			ENTER_KEY = 13;
+			ESC_KEY = 27;
+
+			TodoItem = (function () {
+				function TodoItem(title) {
+					_classCallCheck(this, TodoItem);
+
+					this.isCompleted = false;
+					this.isEditing = false;
+					this.title = title.trim();
+					this.editTitle = null;
+				}
+
+				_createClass(TodoItem, [{
+					key: "labelDoubleClicked",
+					value: function labelDoubleClicked() {
+						this.editTitle = this.title;
+						this.isEditing = true;
+					}
+				}, {
+					key: "finishEditing",
+					value: function finishEditing() {
+						this.title = this.editTitle.trim();
+						this.isEditing = false;
+					}
+				}, {
+					key: "onKeyUp",
+					value: function onKeyUp(ev) {
+						if (ev.keyCode === ENTER_KEY) {
+							return this.finishEditing();
+						}
+						if (ev.keyCode === ESC_KEY) {
+							this.editTitle = this.title;
+							this.isEditing = false;
+						}
+					}
+				}]);
+
+				return TodoItem;
+			})();
+
+			_export("TodoItem", TodoItem);
+		}
+	};
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRvZG8taXRlbS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7S0FBTSxTQUFTLEVBQ1QsT0FBTyxFQUVBLFFBQVE7Ozs7Ozs7OztBQUhmLFlBQVMsR0FBRyxFQUFFO0FBQ2QsVUFBTyxHQUFHLEVBQUU7O0FBRUwsV0FBUTtBQUNULGFBREMsUUFBUSxDQUNSLEtBQUssRUFBRTsyQkFEUCxRQUFROztBQUVuQixTQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztBQUN6QixTQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztBQUN2QixTQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztBQUMxQixTQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztLQUN0Qjs7aUJBTlcsUUFBUTs7WUFRRiw4QkFBRztBQUNwQixVQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7QUFDNUIsVUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7TUFDdEI7OztZQUVZLHlCQUFHO0FBQ2YsVUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO0FBQ25DLFVBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO01BQ3ZCOzs7WUFFTSxpQkFBQyxFQUFFLEVBQUU7QUFDWCxVQUFJLEVBQUUsQ0FBQyxPQUFPLEtBQUssU0FBUyxFQUFFO0FBQzdCLGNBQU8sSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO09BQzVCO0FBQ0QsVUFBSSxFQUFFLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRTtBQUMzQixXQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7QUFDNUIsV0FBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7T0FDdkI7TUFDRDs7O1dBMUJXLFFBQVEiLCJmaWxlIjoidG9kby1pdGVtLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgRU5URVJfS0VZID0gMTM7XG5jb25zdCBFU0NfS0VZID0gMjc7XG5cbmV4cG9ydCBjbGFzcyBUb2RvSXRlbSB7XG5cdGNvbnN0cnVjdG9yKHRpdGxlKSB7XG5cdFx0dGhpcy5pc0NvbXBsZXRlZCA9IGZhbHNlO1xuXHRcdHRoaXMuaXNFZGl0aW5nID0gZmFsc2U7XG5cdFx0dGhpcy50aXRsZSA9IHRpdGxlLnRyaW0oKTtcblx0XHR0aGlzLmVkaXRUaXRsZSA9IG51bGw7XG5cdH1cblxuXHRsYWJlbERvdWJsZUNsaWNrZWQoKSB7XG5cdFx0dGhpcy5lZGl0VGl0bGUgPSB0aGlzLnRpdGxlO1xuXHRcdHRoaXMuaXNFZGl0aW5nID0gdHJ1ZTtcblx0fVxuXG5cdGZpbmlzaEVkaXRpbmcoKSB7XG5cdFx0dGhpcy50aXRsZSA9IHRoaXMuZWRpdFRpdGxlLnRyaW0oKTtcblx0XHR0aGlzLmlzRWRpdGluZyA9IGZhbHNlO1xuXHR9XG5cblx0b25LZXlVcChldikge1xuXHRcdGlmIChldi5rZXlDb2RlID09PSBFTlRFUl9LRVkpIHtcblx0XHRcdHJldHVybiB0aGlzLmZpbmlzaEVkaXRpbmcoKTtcblx0XHR9XG5cdFx0aWYgKGV2LmtleUNvZGUgPT09IEVTQ19LRVkpIHtcblx0XHRcdHRoaXMuZWRpdFRpdGxlID0gdGhpcy50aXRsZTtcblx0XHRcdHRoaXMuaXNFZGl0aW5nID0gZmFsc2U7XG5cdFx0fVxuXHR9XG59XG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0=

examples/aurelia/dist/todos.html

 <template>
-	<import from="behaviors/focus"></import>
-	<header id="header">
-		<h1>todos</h1>
-		<form role="form" submit.delegate="addNewTodo(newTodoTitle)">
-			<input id="new-todo" value.bind="newTodoTitle" placeholder="What needs to be done?" autofocus>
-		</form>
-	</header>
-	<section id="main" show.bind="items.length">
-		<input id="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="areAllCheckedChanged()">
-		<label for="toggle-all">Mark all as complete</label>
-		<ul id="todo-list">
-			<li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
-				<div class="view">
-					<input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
-					<label click.delegate="todoItem.labelClicked()">${todoItem.title}</label>
-					<button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
-				</div>
-				<form role="form" submit.delegate="todoItem.finishEditing()">
-					<input class="edit" value.bind="todoItem.editTitle"
-								 blur.delegate="todoItem.finishEditing()"
-								 keyup.delegate="todoItem.onKeyUp($event)"
-								 focus.bind="todoItem.isEditing">
-				</form>
-			</li>
-		</ul>
-	</section>
-	<footer id="footer" show.bind="items.length">
-		<span id="todo-count">
-			<strong>${countTodosLeft}</strong>
-			${countTodosLeft == 1 ? 'item' : 'items'} left</span>
-		<ul id="filters">
-			<li>
-				<a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
-			</li>
-			<li>
-				<a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
-			</li>
-			<li>
-				<a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
-			</li>
-		</ul>
-		<button id="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length"></button>
-	</footer>
+  <import from="behaviors/focus"></import>
+
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus
+           keyup.delegate="onKeyUp($event)"
+           value.bind="newTodoTitle">
+  </header>
+
+  <section class="main" show.bind="items.length">
+    <input class="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="onToggleAllChanged()">
+    <label for="toggle-all">Mark all as complete</label>
+    <ul class="todo-list">
+      <li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
+        <div class="view">
+          <input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
+          <label dblclick.delegate="todoItem.labelDoubleClicked()">${todoItem.title}</label>
+          <button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
+        </div>
+        <input class="edit"
+               value.bind="todoItem.editTitle"
+               focus.bind="todoItem.isEditing"
+               focusout.delegate="todoItem.finishEditing($event)"
+               keyup.delegate="todoItem.onKeyUp($event)">
+      </li>
+    </ul>
+  </section>
+
+  <footer class="footer" show.bind="items.length">
+    <span class="todo-count">
+      <strong>${countTodosLeft}</strong>
+      ${countTodosLeft == 1 ? 'item' : 'items'} left</span>
+    <ul class="filters">
+      <li>
+        <a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
+      </li>
+      <li>
+        <a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
+      </li>
+      <li>
+        <a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
+      </li>
+    </ul>
+    <button class="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length">Clear completed</button>
+  </footer>
 </template>

examples/aurelia/index.html

 <!doctype html>
 <html lang="en" data-framework="aurelia">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>Aurelia • TodoMVC</title>
-		<link rel="stylesheet" href="jspm_packages/npm/todomvc-common@1.0.1/base.css">
-		<link rel="stylesheet" href="jspm_packages/npm/todomvc-app-css@1.0.1/index.css">
-	</head>
-	<body>
-		<section id="todoapp" aurelia-app>
-			<!-- this is where Aurelia will fill out the content -->
-		</section>
-		<footer id="info">
-			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p>
-			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-		</footer>
-		<script src="jspm_packages/npm/todomvc-common@1.0.1/base.js"></script>
-		<script src="jspm_packages/system.js"></script>
-		<script src="config.js"></script>
-		<script>
-			System.baseUrl = 'dist';
-			System.import('aurelia-bootstrapper');
-		</script>
-	</body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Aurelia • TodoMVC</title>
+  <link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-common@1.0.2/base.css">
+  <link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-app-css@2.0.4/index.css">
+</head>
+<body>
+  <section class="todoapp" aurelia-app="main">
+    <!-- this is where Aurelia will fill out the content -->
+  </section>
+
+  <footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  </footer>
+
+  <!-- Scripts here. Don't remove ↓ -->
+  <script src="jspm_packages/npm/todomvc-common@1.0.2/base.js"></script>
+  <script src="jspm_packages/system.js"></script>
+  <script src="config.js"></script>
+  <script>
+    System.import('aurelia-bootstrapper');
+  </script>
+</body>
 </html>

examples/aurelia/jspm_packages/npm/todomvc-app-css@1.0.1/index.css → examples/aurelia/jspm_packages/npm/todomvc-app-css@2.0.4/index.css

@@ -15,12 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -32,9 +29,7 @@ body {
 	max-width: 550px;
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 	font-weight: 300;
 }
 
@@ -47,7 +42,7 @@ input[type="checkbox"] {
 	display: none;
 }
 
-#todoapp {
+.todoapp {
 	background: #fff;
 	margin: 130px 0 40px 0;
 	position: relative;
@@ -55,25 +50,25 @@ input[type="checkbox"] {
 	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
 }
 
-#todoapp input::-webkit-input-placeholder {
+.todoapp input::-webkit-input-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp input::-moz-placeholder {
+.todoapp input::-moz-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp input::input-placeholder {
+.todoapp input::input-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp h1 {
+.todoapp h1 {
 	position: absolute;
 	top: -155px;
 	width: 100%;
@@ -83,11 +78,10 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
-#new-todo,
+.new-todo,
 .edit {
 	position: relative;
 	margin: 0;
@@ -102,22 +96,19 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
-#new-todo {
+.new-todo {
 	padding: 16px 16px 16px 60px;
 	border: none;
 	background: rgba(0, 0, 0, 0.003);
 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
 }
 
-#main {
+.main {
 	position: relative;
 	z-index: 2;
 	border-top: 1px solid #e6e6e6;
@@ -127,7 +118,7 @@ label[for='toggle-all'] {
 	display: none;
 }
 
-#toggle-all {
+.toggle-all {
 	position: absolute;
 	top: -55px;
 	left: -12px;
@@ -137,50 +128,50 @@ label[for='toggle-all'] {
 	border: none; /* Mobile Safari */
 }
 
-#toggle-all:before {
+.toggle-all:before {
 	content: '❯';
 	font-size: 22px;
 	color: #e6e6e6;
 	padding: 10px 27px 10px 27px;
 }
 
-#toggle-all:checked:before {
+.toggle-all:checked:before {
 	color: #737373;
 }
 
-#todo-list {
+.todo-list {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
-#todo-list li {
+.todo-list li {
 	position: relative;
 	font-size: 24px;
 	border-bottom: 1px solid #ededed;
 }
 
-#todo-list li:last-child {
+.todo-list li:last-child {
 	border-bottom: none;
 }
 
-#todo-list li.editing {
+.todo-list li.editing {
 	border-bottom: none;
 	padding: 0;
 }
 
-#todo-list li.editing .edit {
+.todo-list li.editing .edit {
 	display: block;
 	width: 506px;
 	padding: 13px 17px 12px 17px;
 	margin: 0 0 0 43px;
 }
 
-#todo-list li.editing .view {
+.todo-list li.editing .view {
 	display: none;
 }
 
-#todo-list li .toggle {
+.todo-list li .toggle {
 	text-align: center;
 	width: 40px;
 	/* auto, since non-WebKit browsers doesn't support input styling */
@@ -191,21 +182,20 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
-#todo-list li .toggle:after {
+.todo-list li .toggle:after {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
 }
 
-#todo-list li .toggle:checked:after {
+.todo-list li .toggle:checked:after {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
 }
 
-#todo-list li label {
-	white-space: pre;
-	word-break: break-word;
+.todo-list li label {
+	white-space: pre-line;
+	word-break: break-all;
 	padding: 15px 60px 15px 15px;
 	margin-left: 45px;
 	display: block;
@@ -213,12 +203,12 @@ label[for='toggle-all'] {
 	transition: color 0.4s;
 }
 
-#todo-list li.completed label {
+.todo-list li.completed label {
 	color: #d9d9d9;
 	text-decoration: line-through;
 }
 
-#todo-list li .destroy {
+.todo-list li .destroy {
 	display: none;
 	position: absolute;
 	top: 0;
@@ -233,27 +223,27 @@ label[for='toggle-all'] {
 	transition: color 0.2s ease-out;
 }
 
-#todo-list li .destroy:hover {
+.todo-list li .destroy:hover {
 	color: #af5b5e;
 }
 
-#todo-list li .destroy:after {
+.todo-list li .destroy:after {
 	content: '×';
 }
 
-#todo-list li:hover .destroy {
+.todo-list li:hover .destroy {
 	display: block;
 }
 
-#todo-list li .edit {
+.todo-list li .edit {
 	display: none;
 }
 
-#todo-list li.editing:last-child {
+.todo-list li.editing:last-child {
 	margin-bottom: -1px;
 }
 
-#footer {
+.footer {
 	color: #777;
 	padding: 10px 15px;
 	height: 20px;
@@ -261,7 +251,7 @@ label[for='toggle-all'] {
 	border-top: 1px solid #e6e6e6;
 }
 
-#footer:before {
+.footer:before {
 	content: '';
 	position: absolute;
 	right: 0;
@@ -276,16 +266,16 @@ label[for='toggle-all'] {
 	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
 }
 
-#todo-count {
+.todo-count {
 	float: left;
 	text-align: left;
 }
 
-#todo-count strong {
+.todo-count strong {
 	font-weight: 300;
 }
 
-#filters {
+.filters {
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -294,11 +284,11 @@ label[for='toggle-all'] {
 	left: 0;
 }
 
-#filters li {
+.filters li {
 	display: inline;
 }
 
-#filters li a {
+.filters li a {
 	color: inherit;
 	margin: 3px;
 	padding: 3px 7px;
@@ -307,39 +297,29 @@ label[for='toggle-all'] {
 	border-radius: 3px;
 }
 
-#filters li a.selected,
-#filters li a:hover {
+.filters li a.selected,
+.filters li a:hover {
 	border-color: rgba(175, 47, 47, 0.1);
 }
 
-#filters li a.selected {
+.filters li a.selected {
 	border-color: rgba(175, 47, 47, 0.2);
 }
 
-#clear-completed,
-html #clear-completed:active {
+.clear-completed,
+html .clear-completed:active {
 	float: right;
 	position: relative;
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
-	position: relative;
-}
-
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
 }
 
-#clear-completed:hover::after {
+.clear-completed:hover {
 	text-decoration: underline;
 }
 
-#info {
+.info {
 	margin: 65px auto 0;
 	color: #bfbfbf;
 	font-size: 10px;
@@ -347,17 +327,17 @@ html #clear-completed:active {
 	text-align: center;
 }
 
-#info p {
+.info p {
 	line-height: 1;
 }
 
-#info a {
+.info a {
 	color: inherit;
 	text-decoration: none;
 	font-weight: 400;
 }
 
-#info a:hover {
+.info a:hover {
 	text-decoration: underline;
 }
 
@@ -366,16 +346,16 @@ html #clear-completed:active {
 	Can't use it globally since it destroys checkboxes in Firefox
 */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-	#toggle-all,
-	#todo-list li .toggle {
+	.toggle-all,
+	.todo-list li .toggle {
 		background: none;
 	}
 
-	#todo-list li .toggle {
+	.todo-list li .toggle {
 		height: 40px;
 	}
 
-	#toggle-all {
+	.toggle-all {
 		-webkit-transform: rotate(90deg);
 		transform: rotate(90deg);
 		-webkit-appearance: none;
@@ -384,11 +364,11 @@ html #clear-completed:active {
 }
 
 @media (max-width: 430px) {
-	#footer {
+	.footer {
 		height: 50px;
 	}
 
-	#filters {
+	.filters {
 		bottom: 10px;
 	}
 }

examples/aurelia/jspm_packages/npm/todomvc-common@1.0.1/base.js → examples/aurelia/jspm_packages/npm/todomvc-common@1.0.2/base.js

@@ -116,7 +116,12 @@
 	})({});
 
 	if (location.hostname === 'todomvc.com') {
-		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
 	}
 	/* jshint ignore:end */
 
@@ -230,7 +235,7 @@
 			xhr.onload = function (e) {
 				var parsedResponse = JSON.parse(e.target.responseText);
 				if (parsedResponse instanceof Array) {
-					var count = parsedResponse.length
+					var count = parsedResponse.length;
 					if (count !== 0) {
 						issueLink.innerHTML = 'This app has ' + count + ' open issues';
 						document.getElementById('issue-count').style.display = 'inline';

examples/aurelia/main.js

+export function configure(aurelia) {
+	aurelia.use
+		.standardConfiguration();
+
+	aurelia.start().then(a => a.setRoot());
+}

examples/aurelia/readme.md

@@ -2,7 +2,6 @@
 
 > *Aurelia* is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.
 
-
 ## Local Installation
 
 Requirements:
@@ -13,45 +12,36 @@ Requirements:
 
 Clone the repository:
 
-```
-$ git clone https://github.com/mhoyer/todomvc-aurelia
-```
+    git clone https://github.com/mhoyer/todomvc-aurelia
 
 Install jspm and npm packages:
 
-```
-$ npm install
-$ jspm install
-```
+    npm install
+    jspm install
 
 Simply build, test, bundle, export:
 
-```
-$ gulp
-```
+    gulp
 
 Run tests and HTTP-server:
 
-```
-$ gulp watch
-```
-
+    gulp watch
 
 ## Resources
 
-- [Aurelia • TodoMVC](https://github.com/mhoyer/todomvc-aurelia) original sources
-- [Website](http://aurelia.io/)
-- [Documentation](http://aurelia.io/docs.html)
-- [Blog](http://blog.durandal.io/)
+- [Aurelia TodoMVC source](https://github.com/mhoyer/todomvc-aurelia)
+- [TodoMVC](https://github.com/tastejs/todomvc) home of all TodoMVC apps
+- [Aurelia Website](http://aurelia.io/)
+- [Aurelia Documentation](http://aurelia.io/docs.html)
+- [Durandal Blog](http://blog.durandal.io/)
 
 ### Support
 
-- [Twitter](http://twitter.com/pixelplastic)
-- [Gitter](https://gitter.im/Aurelia/Discuss)
+- [Twitter @pixelplastic](http://twitter.com/pixelplastic)
+- [Gitter Aurelia/Discuss](https://gitter.im/Aurelia/Discuss)
 
 *Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
 
-
 ## Implementation
 
 - Following the getting started tutorial: http://aurelia.io/get-started.html
@@ -59,6 +49,22 @@ $ gulp watch
 
 ### Changelog
 
+#### 0.2.0
+
+- Fixed [#5 - ```<form>``` wrapping](https://github.com/mhoyer/todomvc-aurelia/issues/5)
+- Fixed [#10 - FF backslash bug](https://github.com/mhoyer/todomvc-aurelia/issues/10)
+- Fixed [#11 - IE11 support - Object.observe](https://github.com/mhoyer/todomvc-aurelia/issues/11)
+- Updated Aurelia dependencies to latest 1.0.0-beta.1
+- Updated todomvc assets to latest versions
+
+#### 0.1.1
+
+- Prepared all assets (README, learn.json, index.html, etc) to fulfill the [Contribution Docs](https://github.com/tastejs/todomvc/blob/master/contributing.md)
+- Cleaned up obsolete files (```*.src.js```, empty ```css/app.css```)
+- Fixed [#6](https://github.com/mhoyer/todomvc-aurelia/issues/6)
+- Fixed [#7](https://github.com/mhoyer/todomvc-aurelia/issues/7)
+- Fixed [#9](https://github.com/mhoyer/todomvc-aurelia/issues/9)
+
 #### 0.1.0
 
 - Finished functional implementation to fulfill [TodoMVC Application Specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md)
@@ -68,7 +74,6 @@ $ gulp watch
 
 - See [Issues](https://github.com/mhoyer/todomvc-aurelia/issues/)
 
-
 ## Credit
 
 Created by [Marcel Hoyer](http://marcelhoyer.de)

examples/aurelia/todo-item.js

+const ENTER_KEY = 13;
+const ESC_KEY = 27;
+
+export class TodoItem {
+	constructor(title) {
+		this.isCompleted = false;
+		this.isEditing = false;
+		this.title = title.trim();
+		this.editTitle = null;
+	}
+
+	labelDoubleClicked() {
+		this.editTitle = this.title;
+		this.isEditing = true;
+	}
+
+	finishEditing() {
+		this.title = this.editTitle.trim();
+		this.isEditing = false;
+	}
+
+	onKeyUp(ev) {
+		if (ev.keyCode === ENTER_KEY) {
+			return this.finishEditing();
+		}
+		if (ev.keyCode === ESC_KEY) {
+			this.editTitle = this.title;
+			this.isEditing = false;
+		}
+	}
+}

examples/aurelia/todos.js

+import {ObserverLocator} from 'aurelia-binding';
+import {TodoItem} from './todo-item';
+import _ from 'underscore';
+
+const STORAGE_NAME = 'todomvc-aurelia';
+const ENTER_KEY = 13;
+
+export class Todos {
+	static inject() { return [ObserverLocator]; }
+	constructor(observerLocator, storage = null) {
+		this.items = [];
+		this.filteredItems = [];
+		this.filter = '';
+		this.newTodoTitle = null;
+		this.areAllChecked = false;
+
+		this.observerLocator = observerLocator;
+		this.storage = storage || localStorage;
+		this.load();
+	}
+
+	activate(params) {
+		this.updateFilteredItems(params.filter);
+	}
+
+	onKeyUp(ev) {
+		if (ev.keyCode === ENTER_KEY) {
+			this.addNewTodo(this.newTodoTitle);
+		}
+	}
+
+	addNewTodo(title = this.newTodoTitle) {
+		if (title == undefined) { return; }
+
+		title = title.trim();
+		if (title.length === 0) { return; }
+
+		const newTodoItem = new TodoItem(title);
+		this.observeItem(newTodoItem);
+		this.items.push(newTodoItem);
+		this.newTodoTitle = null;
+		this.updateAreAllCheckedState();
+		this.updateFilteredItems(this.filter);
+		this.save();
+	}
+
+	observeItem(todoItem) {
+		this.observerLocator
+			.getObserver(todoItem, 'title')
+			.subscribe((o, n) => this.onTitleChanged(todoItem));
+
+		this.observerLocator
+			.getObserver(todoItem, 'isCompleted')
+			.subscribe(() => this.onIsCompletedChanged());
+	}
+
+	onTitleChanged(todoItem) {
+		if (todoItem.title === '') {
+			this.deleteTodo(todoItem);
+			this.updateAreAllCheckedState();
+		}
+
+		this.save();
+	}
+
+	onIsCompletedChanged() {
+		this.updateAreAllCheckedState();
+		this.updateFilteredItems(this.filter);
+
+		this.save();
+	}
+
+	deleteTodo(todoItem) {
+		this.items = _(this.items).without(todoItem);
+		this.updateAreAllCheckedState();
+		this.updateFilteredItems(this.filter);
+		this.save();
+	}
+
+	onToggleAllChanged() {
+		this.items = _.map(this.items, item => {
+			item.isCompleted = this.areAllChecked;
+			return item;
+		});
+
+		this.updateFilteredItems(this.filter);
+	}
+
+	clearCompletedTodos() {
+		this.items = _(this.items).filter(i => !i.isCompleted);
+		this.areAllChecked = false;
+		this.updateFilteredItems(this.filter);
+		this.save();
+	}
+
+	get countTodosLeft() {
+		return _(this.items).filter(i => !i.isCompleted).length;
+	}
+
+	updateAreAllCheckedState() {
+		this.areAllChecked = _(this.items).all(i => i.isCompleted);
+	}
+
+	updateFilteredItems(filter) {
+		this.filter = filter || '!';
+
+		switch (filter) {
+			case 'active':
+				this.filteredItems = _(this.items).filter(i => !i.isCompleted);
+				break;
+			case 'completed':
+				this.filteredItems = _(this.items).filter(i =>	i.isCompleted);
+				break;
+			default:
+				this.filteredItems = this.items;
+				break;
+		}
+	}
+
+	load() {
+		const storageContent = this.storage.getItem(STORAGE_NAME);
+		if (storageContent == undefined) { return; }
+
+		const simpleItems = JSON.parse(storageContent);
+		this.items = _.map(simpleItems, item => {
+			const todoItem = new TodoItem(item.title);
+			todoItem.isCompleted = item.completed;
+
+			this.observeItem(todoItem);
+
+			return todoItem;
+		});
+		this.updateAreAllCheckedState();
+	}
+
+	save() {
+		const simpleItems = _.map(this.items, item => { return {
+			title: item.title,
+			completed: item.isCompleted
+		}});
+
+		this.storage.setItem(STORAGE_NAME, JSON.stringify(simpleItems));
+	}
+}