Commit 2265e783 authored by Sindre Sorhus's avatar Sindre Sorhus

Fix path to Dart app and some minor nitpick

parent 79ec609d
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
<a href="labs/architecture-examples/canjs/yui-widget/" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI Widget)</a> <a href="labs/architecture-examples/canjs/yui-widget/" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI Widget)</a>
</li> </li>
<li> <li>
<a href="labs/architecture-examples/dart/" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a> <a href="labs/architecture-examples/dart/web/" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a>
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -2,26 +2,26 @@ part of todomvc; ...@@ -2,26 +2,26 @@ part of todomvc;
class TodoApp { class TodoApp {
List<TodoWidget> todoWidgets = new List<TodoWidget>(); List<TodoWidget> todoWidgets = new List<TodoWidget>();
Element todoListElement = query('#todo-list'); Element todoListElement = query('#todo-list');
Element mainElement = query('#main'); Element mainElement = query('#main');
InputElement checkAllCheckboxElement = query('#toggle-all'); InputElement checkAllCheckboxElement = query('#toggle-all');
Element footerElement = query('#footer'); Element footerElement = query('#footer');
Element countElement = query('#todo-count'); Element countElement = query('#todo-count');
Element clearCompletedElement = query('#clear-completed'); Element clearCompletedElement = query('#clear-completed');
Element showAllElement = query('#filters a[href="#/"]'); Element showAllElement = query('#filters a[href="#/"]');
Element showActiveElement = query('#filters a[href="#/active"]'); Element showActiveElement = query('#filters a[href="#/active"]');
Element showCompletedElement = query('#filters a[href="#/completed"]'); Element showCompletedElement = query('#filters a[href="#/completed"]');
TodoApp() { TodoApp() {
initLocalStorage(); initLocalStorage();
initElementEventListeners(); initElementEventListeners();
window.on.hashChange.add((e) => updateFilter()); window.on.hashChange.add((e) => updateFilter());
updateFooterDisplay(); updateFooterDisplay();
} }
void initLocalStorage() { void initLocalStorage() {
var jsonList = window.localStorage["todos-vanilladart"]; var jsonList = window.localStorage["todos-vanilladart"];
if (jsonList != null) { if (jsonList != null) {
...@@ -35,7 +35,7 @@ class TodoApp { ...@@ -35,7 +35,7 @@ class TodoApp {
} }
} }
} }
void initElementEventListeners() { void initElementEventListeners() {
InputElement newTodoElement = query('#new-todo'); InputElement newTodoElement = query('#new-todo');
...@@ -50,7 +50,7 @@ class TodoApp { ...@@ -50,7 +50,7 @@ class TodoApp {
} }
} }
}); });
checkAllCheckboxElement.on.click.add((Event e) { checkAllCheckboxElement.on.click.add((Event e) {
InputElement target = e.srcElement; InputElement target = e.srcElement;
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
...@@ -76,7 +76,7 @@ class TodoApp { ...@@ -76,7 +76,7 @@ class TodoApp {
save(); save();
}); });
} }
void addTodo(Todo todo) { void addTodo(Todo todo) {
var todoWidget = new TodoWidget(this, todo); var todoWidget = new TodoWidget(this, todo);
todoWidgets.add(todoWidget); todoWidgets.add(todoWidget);
...@@ -114,11 +114,11 @@ class TodoApp { ...@@ -114,11 +114,11 @@ class TodoApp {
} }
updateFilter(); updateFilter();
} }
void removeTodo(TodoWidget todoWidget) { void removeTodo(TodoWidget todoWidget) {
todoWidgets.removeAt(todoWidgets.indexOf(todoWidget)); todoWidgets.removeAt(todoWidgets.indexOf(todoWidget));
} }
void updateFilter() { void updateFilter() {
switch(window.location.hash) { switch(window.location.hash) {
case '#/active': case '#/active':
...@@ -131,35 +131,35 @@ class TodoApp { ...@@ -131,35 +131,35 @@ class TodoApp {
showAll(); showAll();
} }
} }
void showAll() { void showAll() {
setSelectedFilter(showAllElement); setSelectedFilter(showAllElement);
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = true; todoWidget.visible = true;
} }
} }
void showActive() { void showActive() {
setSelectedFilter(showActiveElement); setSelectedFilter(showActiveElement);
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = !todoWidget.todo.completed; todoWidget.visible = !todoWidget.todo.completed;
} }
} }
void showCompleted() { void showCompleted() {
setSelectedFilter(showCompletedElement); setSelectedFilter(showCompletedElement);
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = todoWidget.todo.completed; todoWidget.visible = todoWidget.todo.completed;
} }
} }
void setSelectedFilter(Element e) { void setSelectedFilter(Element e) {
showAllElement.classes.remove('selected'); showAllElement.classes.remove('selected');
showActiveElement.classes.remove('selected'); showActiveElement.classes.remove('selected');
showCompletedElement.classes.remove('selected'); showCompletedElement.classes.remove('selected');
e.classes.add('selected'); e.classes.add('selected');
} }
void save() { void save() {
var todos = new List<Todo>(); var todos = new List<Todo>();
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
......
...@@ -5,9 +5,9 @@ class TodoWidget { ...@@ -5,9 +5,9 @@ class TodoWidget {
Todo todo; Todo todo;
Element element; Element element;
InputElement toggleElement; InputElement toggleElement;
TodoWidget(this.todoApp, this.todo); TodoWidget(this.todoApp, this.todo);
Element createElement() { Element createElement() {
element = new Element.html(''' element = new Element.html('''
<li ${todo.completed ? 'class="completed"' : ''}> <li ${todo.completed ? 'class="completed"' : ''}>
...@@ -24,7 +24,7 @@ class TodoWidget { ...@@ -24,7 +24,7 @@ class TodoWidget {
InputElement editElement = element.query('.edit'); InputElement editElement = element.query('.edit');
toggleElement = element.query('.toggle'); toggleElement = element.query('.toggle');
toggleElement.on.click.add((MouseEvent e) { toggleElement.on.click.add((MouseEvent e) {
toggle(); toggle();
todoApp.updateCounts(); todoApp.updateCounts();
...@@ -36,18 +36,18 @@ class TodoWidget { ...@@ -36,18 +36,18 @@ class TodoWidget {
editElement.selectionStart = todo.title.length; editElement.selectionStart = todo.title.length;
editElement.focus(); editElement.focus();
}); });
void removeTodo() { void removeTodo() {
element.remove(); element.remove();
todoApp.removeTodo(this); todoApp.removeTodo(this);
todoApp.updateFooterDisplay(); todoApp.updateFooterDisplay();
} }
element.query('.destroy').on.click.add((MouseEvent e) { element.query('.destroy').on.click.add((MouseEvent e) {
removeTodo(); removeTodo();
todoApp.save(); todoApp.save();
}); });
void doneEditing(event) { void doneEditing(event) {
todo.title = editElement.value.trim(); todo.title = editElement.value.trim();
if (todo.title != '') { if (todo.title != '') {
...@@ -58,7 +58,7 @@ class TodoWidget { ...@@ -58,7 +58,7 @@ class TodoWidget {
} }
todoApp.save(); todoApp.save();
} }
editElement.on editElement.on
..keyPress.add((KeyboardEvent e) { ..keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) { if (e.keyIdentifier == KeyName.ENTER) {
...@@ -69,9 +69,9 @@ class TodoWidget { ...@@ -69,9 +69,9 @@ class TodoWidget {
return element; return element;
} }
void set visible(bool visible) { void set visible(bool visible) {
if(visible) { if (visible) {
element.style.display = 'block'; element.style.display = 'block';
} else { } else {
element.style.display = 'none'; element.style.display = 'none';
......
...@@ -15,15 +15,15 @@ class Todo { ...@@ -15,15 +15,15 @@ class Todo {
String id; String id;
String title; String title;
bool completed; bool completed;
Todo(String this.id, String this.title, {bool this.completed : false}); Todo(String this.id, String this.title, {bool this.completed : false});
Todo.fromJson(Map json) { Todo.fromJson(Map json) {
id = json['id']; id = json['id'];
title = json['title']; title = json['title'];
completed = json['completed']; completed = json['completed'];
} }
Map toJson() { Map toJson() {
return {'id': id, 'title': title, 'completed': completed}; return {'id': id, 'title': title, 'completed': completed};
} }
...@@ -35,7 +35,7 @@ class UUID { ...@@ -35,7 +35,7 @@ class UUID {
static String createUuid() { static String createUuid() {
return "${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}"; return "${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}";
} }
static String S4() { static String S4() {
return random.nextInt(65536).toRadixString(16); return random.nextInt(65536).toRadixString(16);
} }
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<ul id="todo-list"></ul> <ul id="todo-list"></ul>
</section> </section>
<footer id="footer"> <footer id="footer">
<span id="todo-count"><strong>1</strong> item left</span> <span id="todo-count"><strong>0</strong> item left</span>
<ul id="filters"> <ul id="filters">
<li> <li>
<a class="selected" href="#/">All</a> <a class="selected" href="#/">All</a>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<a href="#/completed">Completed</a> <a href="#/completed">Completed</a>
</li> </li>
</ul> </ul>
<button id="clear-completed">Clear completed (1)</button> <button id="clear-completed">Clear completed</button>
</footer> </footer>
</section> </section>
<footer id="info"> <footer id="info">
......
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