Commit cbbdbae6 authored by Mathieu Lorber's avatar Mathieu Lorber

New formatter on all vanilladart code

parent fe473ce1
...@@ -5,7 +5,7 @@ class Todo { ...@@ -5,7 +5,7 @@ class Todo {
String title; String title;
bool completed; bool completed;
Todo(this.id, this.title, {this.completed : false}); Todo(this.id, this.title, {this.completed: false});
Todo.fromJson(Map json) { Todo.fromJson(Map json) {
id = json['id']; id = json['id'];
...@@ -15,10 +15,6 @@ class Todo { ...@@ -15,10 +15,6 @@ class Todo {
// this is automatically called by JSON.encode // this is automatically called by JSON.encode
Map toJson() { Map toJson() {
return { return {'id': id, 'title': title, 'completed': completed};
'id': id,
'title': title,
'completed': completed
};
} }
} }
\ No newline at end of file
part of todomvc; part of todomvc;
class TodoApp { class TodoApp {
List<TodoWidget> todoWidgets = new List<TodoWidget>();
List<TodoWidget> todoWidgets = new List<TodoWidget>();
Element todoListElement = querySelector('#todo-list');
Element todoListElement = querySelector('#todo-list'); Element mainElement = querySelector('#main');
Element mainElement = querySelector('#main'); InputElement checkAllCheckboxElement = querySelector('#toggle-all');
InputElement checkAllCheckboxElement = querySelector('#toggle-all'); Element footerElement = querySelector('#footer');
Element footerElement = querySelector('#footer'); Element countElement = querySelector('#todo-count');
Element countElement = querySelector('#todo-count'); Element clearCompletedElement = querySelector('#clear-completed');
Element clearCompletedElement = querySelector('#clear-completed'); Element showAllElement = querySelector('#filters a[href="#/"]');
Element showAllElement = querySelector('#filters a[href="#/"]'); Element showActiveElement = querySelector('#filters a[href="#/active"]');
Element showActiveElement = querySelector('#filters a[href="#/active"]'); Element showCompletedElement =
Element showCompletedElement = querySelector('#filters a[href="#/completed"]'); querySelector('#filters a[href="#/completed"]');
TodoApp() { TodoApp() {
initLocalStorage(); initLocalStorage();
initElementEventListeners(); initElementEventListeners();
window.onHashChange.listen((e) => updateFilter()); window.onHashChange.listen((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) {
try { try {
List<Map> todos = JSON.decode(jsonList); List<Map> todos = JSON.decode(jsonList);
todos.forEach((todo) => addTodo(new Todo.fromJson(todo))); todos.forEach((todo) => addTodo(new Todo.fromJson(todo)));
} catch (e) { } catch (e) {
print('Could not load todos form local storage.'); print('Could not load todos form local storage.');
} }
} }
} }
void initElementEventListeners() { void initElementEventListeners() {
InputElement newTodoElement = querySelector('#new-todo'); InputElement newTodoElement = querySelector('#new-todo');
newTodoElement.onKeyDown.listen((KeyboardEvent e) { newTodoElement.onKeyDown.listen((KeyboardEvent e) {
if (e.keyCode == KeyCode.ENTER) { if (e.keyCode == KeyCode.ENTER) {
var title = newTodoElement.value.trim(); var title = newTodoElement.value.trim();
if (title.isNotEmpty) { if (title.isNotEmpty) {
addTodo(new Todo(uuid(), title)); addTodo(new Todo(uuid(), title));
...@@ -47,113 +47,114 @@ class TodoApp { ...@@ -47,113 +47,114 @@ class TodoApp {
updateFooterDisplay(); updateFooterDisplay();
save(); save();
} }
} }
}); });
checkAllCheckboxElement.onClick.listen((e) { checkAllCheckboxElement.onClick.listen((e) {
for (var todoWidget in todoWidgets) { for (var todoWidget in todoWidgets) {
if (todoWidget.todo.completed != checkAllCheckboxElement.checked) { if (todoWidget.todo.completed != checkAllCheckboxElement.checked) {
todoWidget.toggle(); todoWidget.toggle();
} }
} }
updateCounts(); updateCounts();
save(); save();
}); });
clearCompletedElement.onClick.listen((_) { clearCompletedElement.onClick.listen((_) {
var newList = new List<TodoWidget>(); var newList = new List<TodoWidget>();
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) { if (todoWidget.todo.completed) {
todoWidget.element.remove(); todoWidget.element.remove();
} else { } else {
newList.add(todoWidget); newList.add(todoWidget);
} }
} }
todoWidgets = newList; todoWidgets = newList;
updateFooterDisplay(); updateFooterDisplay();
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);
todoListElement.nodes.add(todoWidget.createElement()); todoListElement.nodes.add(todoWidget.createElement());
} }
void updateFooterDisplay() { void updateFooterDisplay() {
var display = todoWidgets.length == 0 ? 'none' : 'block'; var display = todoWidgets.length == 0 ? 'none' : 'block';
checkAllCheckboxElement.style.display = display; checkAllCheckboxElement.style.display = display;
mainElement.style.display = display; mainElement.style.display = display;
footerElement.style.display = display; footerElement.style.display = display;
updateCounts(); updateCounts();
} }
void updateCounts() { void updateCounts() {
var complete = todoWidgets.where((w) => w.todo.completed).length; var complete = todoWidgets.where((w) => w.todo.completed).length;
checkAllCheckboxElement.checked = (complete == todoWidgets.length); checkAllCheckboxElement.checked = (complete == todoWidgets.length);
var left = todoWidgets.length - complete; var left = todoWidgets.length - complete;
countElement.innerHtml = '<strong>$left</strong> item${left != 1 ? 's' : ''} left'; countElement.innerHtml =
if (complete == 0) { '<strong>$left</strong> item${left != 1 ? 's' : ''} left';
clearCompletedElement.style.display = 'none'; if (complete == 0) {
} else { clearCompletedElement.style.display = 'none';
clearCompletedElement.style.display = 'block'; } else {
clearCompletedElement.text = 'Clear completed ($complete)'; clearCompletedElement.style.display = 'block';
} clearCompletedElement.text = 'Clear completed ($complete)';
updateFilter(); }
} updateFilter();
}
void removeTodo(TodoWidget todoWidget) {
todoWidgets.removeAt(todoWidgets.indexOf(todoWidget)); void removeTodo(TodoWidget todoWidget) {
} todoWidgets.removeAt(todoWidgets.indexOf(todoWidget));
}
void updateFilter() {
switch(window.location.hash) { void updateFilter() {
case '#/active': switch (window.location.hash) {
showActive(); case '#/active':
break; showActive();
case '#/completed': break;
showCompleted(); case '#/completed':
break; showCompleted();
default: break;
showAll(); default:
return; showAll();
} return;
} }
}
void showAll() {
setSelectedFilter(showAllElement); void showAll() {
for (var todoWidget in todoWidgets) { setSelectedFilter(showAllElement);
todoWidget.visible = true; for (var todoWidget in todoWidgets) {
} todoWidget.visible = true;
} }
}
void showActive() {
setSelectedFilter(showActiveElement); void showActive() {
for (var todoWidget in todoWidgets) { setSelectedFilter(showActiveElement);
todoWidget.visible = !todoWidget.todo.completed; for (var todoWidget in todoWidgets) {
} todoWidget.visible = !todoWidget.todo.completed;
} }
}
void showCompleted() {
setSelectedFilter(showCompletedElement); void showCompleted() {
for (var todoWidget in todoWidgets) { setSelectedFilter(showCompletedElement);
todoWidget.visible = todoWidget.todo.completed; for (var todoWidget in todoWidgets) {
} todoWidget.visible = todoWidget.todo.completed;
} }
}
void setSelectedFilter(Element e) {
showAllElement.classes.remove('selected'); void setSelectedFilter(Element e) {
showActiveElement.classes.remove('selected'); showAllElement.classes.remove('selected');
showCompletedElement.classes.remove('selected'); showActiveElement.classes.remove('selected');
e.classes.add('selected'); showCompletedElement.classes.remove('selected');
} e.classes.add('selected');
}
void save() {
var todos = new List<Todo>(); void save() {
for (var todoWidget in todoWidgets) { var todos = new List<Todo>();
todos.add(todoWidget.todo); for (var todoWidget in todoWidgets) {
} todos.add(todoWidget.todo);
window.localStorage['todos-vanilladart'] = JSON.encode(todos); }
} window.localStorage['todos-vanilladart'] = JSON.encode(todos);
}
} }
part of todomvc; part of todomvc;
class TodoWidget { class TodoWidget {
static const HtmlEscape htmlEscape = const HtmlEscape();
static const HtmlEscape htmlEscape = const HtmlEscape(); TodoApp todoApp;
Todo todo;
Element element;
InputElement toggleElement;
TodoApp todoApp; TodoWidget(this.todoApp, this.todo);
Todo todo;
Element element;
InputElement toggleElement;
TodoWidget(this.todoApp, this.todo); Element createElement() {
element = new Element.html('''
Element createElement() {
element = new Element.html('''
<li ${todo.completed ? 'class="completed"' : ''}> <li ${todo.completed ? 'class="completed"' : ''}>
<div class='view'> <div class='view'>
<input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}> <input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}>
...@@ -23,78 +22,78 @@ class TodoWidget { ...@@ -23,78 +22,78 @@ class TodoWidget {
</li> </li>
'''); ''');
Element contentElement = element.querySelector('.todo-content'); Element contentElement = element.querySelector('.todo-content');
InputElement editElement = element.querySelector('.edit'); InputElement editElement = element.querySelector('.edit');
toggleElement = element.querySelector('.toggle'); toggleElement = element.querySelector('.toggle');
toggleElement.onClick.listen((_) { toggleElement.onClick.listen((_) {
toggle(); toggle();
todoApp.updateCounts(); todoApp.updateCounts();
todoApp.save(); todoApp.save();
}); });
contentElement.onDoubleClick.listen((_) { contentElement.onDoubleClick.listen((_) {
element.classes.add('editing'); element.classes.add('editing');
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.querySelector('.destroy').onClick.listen((_) { element.querySelector('.destroy').onClick.listen((_) {
removeTodo(); removeTodo();
todoApp.save(); todoApp.save();
}); });
void doneEditing() { void doneEditing() {
editElement.value = editElement.value.trim(); editElement.value = editElement.value.trim();
todo.title = editElement.value; todo.title = editElement.value;
if (todo.title.isNotEmpty) { if (todo.title.isNotEmpty) {
contentElement.text = todo.title; contentElement.text = todo.title;
element.classes.remove('editing'); element.classes.remove('editing');
} else { } else {
removeTodo(); removeTodo();
} }
todoApp.save(); todoApp.save();
} }
void undoEditing() { void undoEditing() {
element.classes.remove('editing'); element.classes.remove('editing');
editElement.value = todo.title; editElement.value = todo.title;
} }
editElement editElement
..onKeyDown.listen((KeyboardEvent e) { ..onKeyDown.listen((KeyboardEvent e) {
switch (e.keyCode) { switch (e.keyCode) {
case KeyCode.ENTER: case KeyCode.ENTER:
doneEditing(); doneEditing();
break; break;
case KeyCode.ESC: case KeyCode.ESC:
undoEditing(); undoEditing();
break; break;
} }
}) })
..onBlur.listen((_) => doneEditing()); ..onBlur.listen((_) => doneEditing());
return element; return element;
} }
void set visible(bool visible) { void set visible(bool visible) {
element.style.display = visible ? 'block' : 'none'; element.style.display = visible ? 'block' : 'none';
} }
void toggle() { void toggle() {
todo.completed = !todo.completed; todo.completed = !todo.completed;
toggleElement.checked = todo.completed; toggleElement.checked = todo.completed;
if (todo.completed) { if (todo.completed) {
element.classes.add('completed'); element.classes.add('completed');
} else { } else {
element.classes.remove('completed'); element.classes.remove('completed');
} }
} }
} }
library todomvc; library todomvc;
import 'dart:html' import 'dart:html'
show Element, InputElement, KeyCode, KeyboardEvent, querySelector, window; show Element, InputElement, KeyCode, KeyboardEvent, querySelector, window;
import 'dart:convert' show HtmlEscape, JSON; import 'dart:convert' show HtmlEscape, JSON;
import 'package:todomvc_vanilladart/models.dart'; import 'package:todomvc_vanilladart/models.dart';
import 'package:todomvc_vanilladart/uuid.dart'; import 'package:todomvc_vanilladart/uuid.dart';
...@@ -10,5 +10,5 @@ part 'TodoWidget.dart'; ...@@ -10,5 +10,5 @@ part 'TodoWidget.dart';
part 'TodoApp.dart'; part 'TodoApp.dart';
void main() { void main() {
new TodoApp(); new TodoApp();
} }
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