Commit 405ca697 authored by Sam Saccone's avatar Sam Saccone

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

Update todomvc-aurelia 0.2.0 (using Aurelia 1.0.0.beta-1)
parents 336c5bbb 77fec436
...@@ -29,6 +29,9 @@ ...@@ -29,6 +29,9 @@
"**/generated/**", "**/generated/**",
"examples/ampersand/todomvc.bundle.js", "examples/ampersand/todomvc.bundle.js",
"examples/angular2/**/*.js", "examples/angular2/**/*.js",
"examples/aurelia/config.js",
"examples/aurelia/dist/*.js",
"examples/aurelia/jspm_packages/**/*.js",
"examples/duel/www/**", "examples/duel/www/**",
"examples/duel/src/main/webapp/js/lib/**", "examples/duel/src/main/webapp/js/lib/**",
"examples/humble/js/**", "examples/humble/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' }
]);
}
}
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();
}
}
}
This diff is collapsed.
<template> <template>
<router-view></router-view> <router-view></router-view>
</template> </template>
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==
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
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==
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=
<template> <template>
<import from="behaviors/focus"></import> <import from="behaviors/focus"></import>
<header id="header">
<h1>todos</h1> <header class="header">
<form role="form" submit.delegate="addNewTodo(newTodoTitle)"> <h1>todos</h1>
<input id="new-todo" value.bind="newTodoTitle" placeholder="What needs to be done?" autofocus> <input class="new-todo" placeholder="What needs to be done?" autofocus
</form> keyup.delegate="onKeyUp($event)"
</header> value.bind="newTodoTitle">
<section id="main" show.bind="items.length"> </header>
<input id="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="areAllCheckedChanged()">
<label for="toggle-all">Mark all as complete</label> <section class="main" show.bind="items.length">
<ul id="todo-list"> <input class="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="onToggleAllChanged()">
<li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}"> <label for="toggle-all">Mark all as complete</label>
<div class="view"> <ul class="todo-list">
<input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted"> <li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
<label click.delegate="todoItem.labelClicked()">${todoItem.title}</label> <div class="view">
<button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button> <input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
</div> <label dblclick.delegate="todoItem.labelDoubleClicked()">${todoItem.title}</label>
<form role="form" submit.delegate="todoItem.finishEditing()"> <button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
<input class="edit" value.bind="todoItem.editTitle" </div>
blur.delegate="todoItem.finishEditing()" <input class="edit"
keyup.delegate="todoItem.onKeyUp($event)" value.bind="todoItem.editTitle"
focus.bind="todoItem.isEditing"> focus.bind="todoItem.isEditing"
</form> focusout.delegate="todoItem.finishEditing($event)"
</li> keyup.delegate="todoItem.onKeyUp($event)">
</ul> </li>
</section> </ul>
<footer id="footer" show.bind="items.length"> </section>
<span id="todo-count">
<strong>${countTodosLeft}</strong> <footer class="footer" show.bind="items.length">
${countTodosLeft == 1 ? 'item' : 'items'} left</span> <span class="todo-count">
<ul id="filters"> <strong>${countTodosLeft}</strong>
<li> ${countTodosLeft == 1 ? 'item' : 'items'} left</span>
<a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a> <ul class="filters">
</li> <li>
<li> <a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
<a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a> </li>
</li> <li>
<li> <a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
<a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a> </li>
</li> <li>
</ul> <a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
<button id="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length"></button> </li>
</footer> </ul>
<button class="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length">Clear completed</button>
</footer>
</template> </template>
This diff is collapsed.
<!doctype html> <!doctype html>
<html lang="en" data-framework="aurelia"> <html lang="en" data-framework="aurelia">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelia • TodoMVC</title> <title>Aurelia • TodoMVC</title>
<link rel="stylesheet" href="jspm_packages/npm/todomvc-common@1.0.1/base.css"> <link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-common@1.0.2/base.css">
<link rel="stylesheet" href="jspm_packages/npm/todomvc-app-css@1.0.1/index.css"> <link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-app-css@2.0.4/index.css">
</head> </head>
<body> <body>
<section id="todoapp" aurelia-app> <section class="todoapp" aurelia-app="main">
<!-- this is where Aurelia will fill out the content --> <!-- this is where Aurelia will fill out the content -->
</section> </section>
<footer id="info">
<p>Double-click to edit a todo</p> <footer class="info">
<p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p> <p>Double-click to edit a todo</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p>
</footer> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<script src="jspm_packages/npm/todomvc-common@1.0.1/base.js"></script> </footer>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script> <!-- Scripts here. Don't remove ↓ -->
<script> <script src="jspm_packages/npm/todomvc-common@1.0.2/base.js"></script>
System.baseUrl = 'dist'; <script src="jspm_packages/system.js"></script>
System.import('aurelia-bootstrapper'); <script src="config.js"></script>
</script> <script>
</body> System.import('aurelia-bootstrapper');
</script>
</body>
</html> </html>
This diff is collapsed.
...@@ -15,12 +15,9 @@ button { ...@@ -15,12 +15,9 @@ button {
font-weight: inherit; font-weight: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
-ms-appearance: none;
appearance: none; appearance: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
body { body {
...@@ -32,9 +29,7 @@ body { ...@@ -32,9 +29,7 @@ body {
max-width: 550px; max-width: 550px;
margin: 0 auto; margin: 0 auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300; font-weight: 300;
} }
...@@ -47,7 +42,7 @@ input[type="checkbox"] { ...@@ -47,7 +42,7 @@ input[type="checkbox"] {
display: none; display: none;
} }
#todoapp { .todoapp {
background: #fff; background: #fff;
margin: 130px 0 40px 0; margin: 130px 0 40px 0;
position: relative; position: relative;
...@@ -55,25 +50,25 @@ input[type="checkbox"] { ...@@ -55,25 +50,25 @@ input[type="checkbox"] {
0 25px 50px 0 rgba(0, 0, 0, 0.1); 0 25px 50px 0 rgba(0, 0, 0, 0.1);
} }
#todoapp input::-webkit-input-placeholder { .todoapp input::-webkit-input-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp input::-moz-placeholder { .todoapp input::-moz-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp input::input-placeholder { .todoapp input::input-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp h1 { .todoapp h1 {
position: absolute; position: absolute;
top: -155px; top: -155px;
width: 100%; width: 100%;
...@@ -83,11 +78,10 @@ input[type="checkbox"] { ...@@ -83,11 +78,10 @@ input[type="checkbox"] {
color: rgba(175, 47, 47, 0.15); color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
#new-todo, .new-todo,
.edit { .edit {
position: relative; position: relative;
margin: 0; margin: 0;
...@@ -102,22 +96,19 @@ input[type="checkbox"] { ...@@ -102,22 +96,19 @@ input[type="checkbox"] {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
} }
#new-todo { .new-todo {
padding: 16px 16px 16px 60px; padding: 16px 16px 16px 60px;
border: none; border: none;
background: rgba(0, 0, 0, 0.003); background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
} }
#main { .main {
position: relative; position: relative;
z-index: 2; z-index: 2;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
...@@ -127,7 +118,7 @@ label[for='toggle-all'] { ...@@ -127,7 +118,7 @@ label[for='toggle-all'] {
display: none; display: none;
} }
#toggle-all { .toggle-all {
position: absolute; position: absolute;
top: -55px; top: -55px;
left: -12px; left: -12px;
...@@ -137,50 +128,50 @@ label[for='toggle-all'] { ...@@ -137,50 +128,50 @@ label[for='toggle-all'] {
border: none; /* Mobile Safari */ border: none; /* Mobile Safari */
} }
#toggle-all:before { .toggle-all:before {
content: '❯'; content: '❯';
font-size: 22px; font-size: 22px;
color: #e6e6e6; color: #e6e6e6;
padding: 10px 27px 10px 27px; padding: 10px 27px 10px 27px;
} }
#toggle-all:checked:before { .toggle-all:checked:before {
color: #737373; color: #737373;
} }
#todo-list { .todo-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#todo-list li { .todo-list li {
position: relative; position: relative;
font-size: 24px; font-size: 24px;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
} }
#todo-list li:last-child { .todo-list li:last-child {
border-bottom: none; border-bottom: none;
} }
#todo-list li.editing { .todo-list li.editing {
border-bottom: none; border-bottom: none;
padding: 0; padding: 0;
} }
#todo-list li.editing .edit { .todo-list li.editing .edit {
display: block; display: block;
width: 506px; width: 506px;
padding: 13px 17px 12px 17px; padding: 13px 17px 12px 17px;
margin: 0 0 0 43px; margin: 0 0 0 43px;
} }
#todo-list li.editing .view { .todo-list li.editing .view {
display: none; display: none;
} }
#todo-list li .toggle { .todo-list li .toggle {
text-align: center; text-align: center;
width: 40px; width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */ /* auto, since non-WebKit browsers doesn't support input styling */
...@@ -191,21 +182,20 @@ label[for='toggle-all'] { ...@@ -191,21 +182,20 @@ label[for='toggle-all'] {
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ border: none; /* Mobile Safari */
-webkit-appearance: none; -webkit-appearance: none;
-ms-appearance: none;
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>'); 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>'); 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 { .todo-list li label {
white-space: pre; white-space: pre-line;
word-break: break-word; word-break: break-all;
padding: 15px 60px 15px 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
...@@ -213,12 +203,12 @@ label[for='toggle-all'] { ...@@ -213,12 +203,12 @@ label[for='toggle-all'] {
transition: color 0.4s; transition: color 0.4s;
} }
#todo-list li.completed label { .todo-list li.completed label {
color: #d9d9d9; color: #d9d9d9;
text-decoration: line-through; text-decoration: line-through;
} }
#todo-list li .destroy { .todo-list li .destroy {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -233,27 +223,27 @@ label[for='toggle-all'] { ...@@ -233,27 +223,27 @@ label[for='toggle-all'] {
transition: color 0.2s ease-out; transition: color 0.2s ease-out;
} }
#todo-list li .destroy:hover { .todo-list li .destroy:hover {
color: #af5b5e; color: #af5b5e;
} }
#todo-list li .destroy:after { .todo-list li .destroy:after {
content: '×'; content: '×';
} }
#todo-list li:hover .destroy { .todo-list li:hover .destroy {
display: block; display: block;
} }
#todo-list li .edit { .todo-list li .edit {
display: none; display: none;
} }
#todo-list li.editing:last-child { .todo-list li.editing:last-child {
margin-bottom: -1px; margin-bottom: -1px;
} }
#footer { .footer {
color: #777; color: #777;
padding: 10px 15px; padding: 10px 15px;
height: 20px; height: 20px;
...@@ -261,7 +251,7 @@ label[for='toggle-all'] { ...@@ -261,7 +251,7 @@ label[for='toggle-all'] {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
} }
#footer:before { .footer:before {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -276,16 +266,16 @@ label[for='toggle-all'] { ...@@ -276,16 +266,16 @@ label[for='toggle-all'] {
0 17px 2px -6px rgba(0, 0, 0, 0.2); 0 17px 2px -6px rgba(0, 0, 0, 0.2);
} }
#todo-count { .todo-count {
float: left; float: left;
text-align: left; text-align: left;
} }
#todo-count strong { .todo-count strong {
font-weight: 300; font-weight: 300;
} }
#filters { .filters {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
...@@ -294,11 +284,11 @@ label[for='toggle-all'] { ...@@ -294,11 +284,11 @@ label[for='toggle-all'] {
left: 0; left: 0;
} }
#filters li { .filters li {
display: inline; display: inline;
} }
#filters li a { .filters li a {
color: inherit; color: inherit;
margin: 3px; margin: 3px;
padding: 3px 7px; padding: 3px 7px;
...@@ -307,39 +297,29 @@ label[for='toggle-all'] { ...@@ -307,39 +297,29 @@ label[for='toggle-all'] {
border-radius: 3px; border-radius: 3px;
} }
#filters li a.selected, .filters li a.selected,
#filters li a:hover { .filters li a:hover {
border-color: rgba(175, 47, 47, 0.1); border-color: rgba(175, 47, 47, 0.1);
} }
#filters li a.selected { .filters li a.selected {
border-color: rgba(175, 47, 47, 0.2); border-color: rgba(175, 47, 47, 0.2);
} }
#clear-completed, .clear-completed,
html #clear-completed:active { html .clear-completed:active {
float: right; float: right;
position: relative; position: relative;
line-height: 20px; line-height: 20px;
text-decoration: none; text-decoration: none;
cursor: pointer; 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; text-decoration: underline;
} }
#info { .info {
margin: 65px auto 0; margin: 65px auto 0;
color: #bfbfbf; color: #bfbfbf;
font-size: 10px; font-size: 10px;
...@@ -347,17 +327,17 @@ html #clear-completed:active { ...@@ -347,17 +327,17 @@ html #clear-completed:active {
text-align: center; text-align: center;
} }
#info p { .info p {
line-height: 1; line-height: 1;
} }
#info a { .info a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
} }
#info a:hover { .info a:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -366,16 +346,16 @@ html #clear-completed:active { ...@@ -366,16 +346,16 @@ html #clear-completed:active {
Can't use it globally since it destroys checkboxes in Firefox Can't use it globally since it destroys checkboxes in Firefox
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, .toggle-all,
#todo-list li .toggle { .todo-list li .toggle {
background: none; background: none;
} }
#todo-list li .toggle { .todo-list li .toggle {
height: 40px; height: 40px;
} }
#toggle-all { .toggle-all {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
...@@ -384,11 +364,11 @@ html #clear-completed:active { ...@@ -384,11 +364,11 @@ html #clear-completed:active {
} }
@media (max-width: 430px) { @media (max-width: 430px) {
#footer { .footer {
height: 50px; height: 50px;
} }
#filters { .filters {
bottom: 10px; bottom: 10px;
} }
} }
...@@ -116,7 +116,12 @@ ...@@ -116,7 +116,12 @@
})({}); })({});
if (location.hostname === 'todomvc.com') { 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 */ /* jshint ignore:end */
...@@ -230,7 +235,7 @@ ...@@ -230,7 +235,7 @@
xhr.onload = function (e) { xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText); var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) { if (parsedResponse instanceof Array) {
var count = parsedResponse.length var count = parsedResponse.length;
if (count !== 0) { if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues'; issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline'; document.getElementById('issue-count').style.display = 'inline';
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export function configure(aurelia) {
aurelia.use
.standardConfiguration();
aurelia.start().then(a => a.setRoot());
}
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
> *Aurelia* is a next generation JavaScript client framework that leverages simple conventions to empower your creativity. > *Aurelia* is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.
## Local Installation ## Local Installation
Requirements: Requirements:
...@@ -13,45 +12,36 @@ Requirements: ...@@ -13,45 +12,36 @@ Requirements:
Clone the repository: Clone the repository:
``` git clone https://github.com/mhoyer/todomvc-aurelia
$ git clone https://github.com/mhoyer/todomvc-aurelia
```
Install jspm and npm packages: Install jspm and npm packages:
``` npm install
$ npm install jspm install
$ jspm install
```
Simply build, test, bundle, export: Simply build, test, bundle, export:
``` gulp
$ gulp
```
Run tests and HTTP-server: Run tests and HTTP-server:
``` gulp watch
$ gulp watch
```
## Resources ## Resources
- [Aurelia • TodoMVC](https://github.com/mhoyer/todomvc-aurelia) original sources - [Aurelia TodoMVC source](https://github.com/mhoyer/todomvc-aurelia)
- [Website](http://aurelia.io/) - [TodoMVC](https://github.com/tastejs/todomvc) home of all TodoMVC apps
- [Documentation](http://aurelia.io/docs.html) - [Aurelia Website](http://aurelia.io/)
- [Blog](http://blog.durandal.io/) - [Aurelia Documentation](http://aurelia.io/docs.html)
- [Durandal Blog](http://blog.durandal.io/)
### Support ### Support
- [Twitter](http://twitter.com/pixelplastic) - [Twitter @pixelplastic](http://twitter.com/pixelplastic)
- [Gitter](https://gitter.im/Aurelia/Discuss) - [Gitter Aurelia/Discuss](https://gitter.im/Aurelia/Discuss)
*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.* *Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
## Implementation ## Implementation
- Following the getting started tutorial: http://aurelia.io/get-started.html - Following the getting started tutorial: http://aurelia.io/get-started.html
...@@ -59,6 +49,22 @@ $ gulp watch ...@@ -59,6 +49,22 @@ $ gulp watch
### Changelog ### 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 #### 0.1.0
- Finished functional implementation to fulfill [TodoMVC Application Specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md) - Finished functional implementation to fulfill [TodoMVC Application Specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md)
...@@ -68,7 +74,6 @@ $ gulp watch ...@@ -68,7 +74,6 @@ $ gulp watch
- See [Issues](https://github.com/mhoyer/todomvc-aurelia/issues/) - See [Issues](https://github.com/mhoyer/todomvc-aurelia/issues/)
## Credit ## Credit
Created by [Marcel Hoyer](http://marcelhoyer.de) Created by [Marcel Hoyer](http://marcelhoyer.de)
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;
}
}
}
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));
}
}
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