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 @@
"**/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/**",
......
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.
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>
<import from="behaviors/focus"></import>
<header id="header">
<header class="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>
<input class="new-todo" placeholder="What needs to be done?" autofocus
keyup.delegate="onKeyUp($event)"
value.bind="newTodoTitle">
</header>
<section id="main" show.bind="items.length">
<input id="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="areAllCheckedChanged()">
<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 id="todo-list">
<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 click.delegate="todoItem.labelClicked()">${todoItem.title}</label>
<label dblclick.delegate="todoItem.labelDoubleClicked()">${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>
<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 id="footer" show.bind="items.length">
<span id="todo-count">
<footer class="footer" show.bind="items.length">
<span class="todo-count">
<strong>${countTodosLeft}</strong>
${countTodosLeft == 1 ? 'item' : 'items'} left</span>
<ul id="filters">
<ul class="filters">
<li>
<a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
</li>
......@@ -40,6 +42,6 @@
<a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length"></button>
<button class="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length">Clear completed</button>
</footer>
</template>
This diff is collapsed.
<!doctype html>
<html lang="en" data-framework="aurelia">
<head>
<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>
<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 id="info">
<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>
<script src="jspm_packages/npm/todomvc-common@1.0.1/base.js"></script>
<!-- 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.baseUrl = 'dist';
System.import('aurelia-bootstrapper');
</script>
</body>
</body>
</html>
This diff is collapsed.
......@@ -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;
}
}
......@@ -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';
......
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 @@
> *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)
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