Skip to content

T
todomvc
Commit 54a2ac0c authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Dart app: convert to tabs

parent a68cb9c5
Hide whitespace changes
Inline Side-by-side
Showing with 259 additions and 259 deletions
labs/architecture-examples/dart/web/dart/TodoApp.dart
View file @ 54a2ac0c
part of todomvc;
class TodoApp {
List<TodoWidget> todoWidgets = new List<TodoWidget>();
Element todoListElement = query('#todo-list');
Element mainElement = query('#main');
InputElement checkAllCheckboxElement = query('#toggle-all');
Element footerElement = query('#footer');
Element countElement = query('#todo-count');
Element clearCompletedElement = query('#clear-completed');
Element showAllElement = query('#filters a[href="#/"]');
Element showActiveElement = query('#filters a[href="#/active"]');
Element showCompletedElement = query('#filters a[href="#/completed"]');
TodoApp() {
initLocalStorage();
initElementEventListeners();
window.on.hashChange.add((e) => updateFilter());
updateFooterDisplay();
}
void initLocalStorage() {
var jsonList = window.localStorage["todos-vanilladart"];
if (jsonList != null) {
try {
var todos = JSON.parse(jsonList);
for (Map todo in todos) {
addTodo(new Todo.fromJson(todo));
}
} catch (e) {
window.console.log("Could not load todos form local storage.");
}
}
}
void initElementEventListeners() {
InputElement newTodoElement = query('#new-todo');
newTodoElement.on.keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) {
var title = newTodoElement.value.trim();
if (title != '') {
addTodo(new Todo(UUID.createUuid(), title));
newTodoElement.value = '';
updateFooterDisplay();
save();
}
}
});
checkAllCheckboxElement.on.click.add((Event e) {
InputElement target = e.srcElement;
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed != target.checked) {
todoWidget.toggle();
}
}
updateCounts();
save();
});
clearCompletedElement.on.click.add((MouseEvent e) {
var newList = new List<TodoWidget>();
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) {
todoWidget.element.remove();
} else {
newList.add(todoWidget);
}
}
todoWidgets = newList;
updateFooterDisplay();
save();
});
}
void addTodo(Todo todo) {
var todoWidget = new TodoWidget(this, todo);
todoWidgets.add(todoWidget);
todoListElement.nodes.add(todoWidget.createElement());
}
void updateFooterDisplay() {
if (todoWidgets.length == 0) {
checkAllCheckboxElement.style.display = 'none';
mainElement.style.display = 'none';
footerElement.style.display = 'none';
} else {
checkAllCheckboxElement.style.display = 'block';
mainElement.style.display = 'block';
footerElement.style.display = 'block';
}
updateCounts();
}
void updateCounts() {
var complete = 0;
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) {
complete++;
}
}
checkAllCheckboxElement.checked = (complete == todoWidgets.length);
var left = todoWidgets.length - complete;
countElement.innerHTML = '<b>${left}</b> item${left != 1 ? 's' : ''} left';
if (complete == 0) {
clearCompletedElement.style.display = 'none';
} else {
clearCompletedElement.style.display = 'block';
clearCompletedElement.text = 'Clear completed (${complete})';
}
updateFilter();
}
void removeTodo(TodoWidget todoWidget) {
todoWidgets.removeAt(todoWidgets.indexOf(todoWidget));
}
void updateFilter() {
switch(window.location.hash) {
case '#/active':
showActive();
break;
case '#/completed':
showCompleted();
break;
default:
showAll();
}
}
void showAll() {
setSelectedFilter(showAllElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = true;
}
}
void showActive() {
setSelectedFilter(showActiveElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = !todoWidget.todo.completed;
}
}
void showCompleted() {
setSelectedFilter(showCompletedElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = todoWidget.todo.completed;
}
}
void setSelectedFilter(Element e) {
showAllElement.classes.remove('selected');
showActiveElement.classes.remove('selected');
showCompletedElement.classes.remove('selected');
e.classes.add('selected');
}
void save() {
var todos = new List<Todo>();
for (TodoWidget todoWidget in todoWidgets) {
todos.add(todoWidget.todo);
}
window.localStorage["todos-vanilladart"] = JSON.stringify(todos);
}
List<TodoWidget> todoWidgets = new List<TodoWidget>();
Element todoListElement = query('#todo-list');
Element mainElement = query('#main');
InputElement checkAllCheckboxElement = query('#toggle-all');
Element footerElement = query('#footer');
Element countElement = query('#todo-count');
Element clearCompletedElement = query('#clear-completed');
Element showAllElement = query('#filters a[href="#/"]');
Element showActiveElement = query('#filters a[href="#/active"]');
Element showCompletedElement = query('#filters a[href="#/completed"]');
TodoApp() {
initLocalStorage();
initElementEventListeners();
window.on.hashChange.add((e) => updateFilter());
updateFooterDisplay();
}
void initLocalStorage() {
var jsonList = window.localStorage["todos-vanilladart"];
if (jsonList != null) {
try {
var todos = JSON.parse(jsonList);
for (Map todo in todos) {
addTodo(new Todo.fromJson(todo));
}
} catch (e) {
window.console.log("Could not load todos form local storage.");
}
}
}
void initElementEventListeners() {
InputElement newTodoElement = query('#new-todo');
newTodoElement.on.keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) {
var title = newTodoElement.value.trim();
if (title != '') {
addTodo(new Todo(UUID.createUuid(), title));
newTodoElement.value = '';
updateFooterDisplay();
save();
}
}
});
checkAllCheckboxElement.on.click.add((Event e) {
InputElement target = e.srcElement;
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed != target.checked) {
todoWidget.toggle();
}
}
updateCounts();
save();
});
clearCompletedElement.on.click.add((MouseEvent e) {
var newList = new List<TodoWidget>();
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) {
todoWidget.element.remove();
} else {
newList.add(todoWidget);
}
}
todoWidgets = newList;
updateFooterDisplay();
save();
});
}
void addTodo(Todo todo) {
var todoWidget = new TodoWidget(this, todo);
todoWidgets.add(todoWidget);
todoListElement.nodes.add(todoWidget.createElement());
}
void updateFooterDisplay() {
if (todoWidgets.length == 0) {
checkAllCheckboxElement.style.display = 'none';
mainElement.style.display = 'none';
footerElement.style.display = 'none';
} else {
checkAllCheckboxElement.style.display = 'block';
mainElement.style.display = 'block';
footerElement.style.display = 'block';
}
updateCounts();
}
void updateCounts() {
var complete = 0;
for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) {
complete++;
}
}
checkAllCheckboxElement.checked = (complete == todoWidgets.length);
var left = todoWidgets.length - complete;
countElement.innerHTML = '<b>${left}</b> item${left != 1 ? 's' : ''} left';
if (complete == 0) {
clearCompletedElement.style.display = 'none';
} else {
clearCompletedElement.style.display = 'block';
clearCompletedElement.text = 'Clear completed (${complete})';
}
updateFilter();
}
void removeTodo(TodoWidget todoWidget) {
todoWidgets.removeAt(todoWidgets.indexOf(todoWidget));
}
void updateFilter() {
switch(window.location.hash) {
case '#/active':
showActive();
break;
case '#/completed':
showCompleted();
break;
default:
showAll();
}
}
void showAll() {
setSelectedFilter(showAllElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = true;
}
}
void showActive() {
setSelectedFilter(showActiveElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = !todoWidget.todo.completed;
}
}
void showCompleted() {
setSelectedFilter(showCompletedElement);
for (TodoWidget todoWidget in todoWidgets) {
todoWidget.visible = todoWidget.todo.completed;
}
}
void setSelectedFilter(Element e) {
showAllElement.classes.remove('selected');
showActiveElement.classes.remove('selected');
showCompletedElement.classes.remove('selected');
e.classes.add('selected');
}
void save() {
var todos = new List<Todo>();
for (TodoWidget todoWidget in todoWidgets) {
todos.add(todoWidget.todo);
}
window.localStorage["todos-vanilladart"] = JSON.stringify(todos);
}
}
labs/architecture-examples/dart/web/dart/TodoWidget.dart
View file @ 54a2ac0c
part of todomvc;
class TodoWidget {
TodoApp todoApp;
Todo todo;
Element element;
InputElement toggleElement;
TodoApp todoApp;
Todo todo;
Element element;
InputElement toggleElement;
TodoWidget(this.todoApp, this.todo);
TodoWidget(this.todoApp, this.todo);
Element createElement() {
element = new Element.html('''
<li ${todo.completed ? 'class="completed"' : ''}>
<div class='view'>
<input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}>
<label class='todo-content'>${todo.title}</label>
<button class='destroy'></button>
</div>
<input class='edit' value='${todo.title}'>
</li>
''');
Element createElement() {
element = new Element.html('''
<li ${todo.completed ? 'class="completed"' : ''}>
<div class='view'>
<input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}>
<label class='todo-content'>${todo.title}</label>
<button class='destroy'></button>
</div>
<input class='edit' value='${todo.title}'>
</li>
''');
Element contentElement = element.query('.todo-content');
InputElement editElement = element.query('.edit');
Element contentElement = element.query('.todo-content');
InputElement editElement = element.query('.edit');
toggleElement = element.query('.toggle');
toggleElement = element.query('.toggle');
toggleElement.on.click.add((MouseEvent e) {
toggle();
todoApp.updateCounts();
todoApp.save();
});
toggleElement.on.click.add((MouseEvent e) {
toggle();
todoApp.updateCounts();
todoApp.save();
});
contentElement.on.doubleClick.add((MouseEvent e) {
element.classes.add('editing');
editElement.selectionStart = todo.title.length;
editElement.focus();
});
contentElement.on.doubleClick.add((MouseEvent e) {
element.classes.add('editing');
editElement.selectionStart = todo.title.length;
editElement.focus();
});
void removeTodo() {
element.remove();
todoApp.removeTodo(this);
todoApp.updateFooterDisplay();
}
void removeTodo() {
element.remove();
todoApp.removeTodo(this);
todoApp.updateFooterDisplay();
}
element.query('.destroy').on.click.add((MouseEvent e) {
removeTodo();
todoApp.save();
});
element.query('.destroy').on.click.add((MouseEvent e) {
removeTodo();
todoApp.save();
});
void doneEditing(event) {
todo.title = editElement.value.trim();
if (todo.title != '') {
contentElement.text = todo.title;
element.classes.remove('editing');
} else {
removeTodo();
}
todoApp.save();
}
void doneEditing(event) {
todo.title = editElement.value.trim();
if (todo.title != '') {
contentElement.text = todo.title;
element.classes.remove('editing');
} else {
removeTodo();
}
todoApp.save();
}
editElement.on
..keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) {
doneEditing(e);
}
})
..blur.add(doneEditing);
editElement.on
..keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) {
doneEditing(e);
}
})
..blur.add(doneEditing);
return element;
}
return element;
}
void set visible(bool visible) {
if (visible) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
void set visible(bool visible) {
if (visible) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
void toggle() {
todo.completed = !todo.completed;
toggleElement.checked = todo.completed;
if (todo.completed) {
element.classes.add('completed');
} else {
element.classes.remove('completed');
}
}
void toggle() {
todo.completed = !todo.completed;
toggleElement.checked = todo.completed;
if (todo.completed) {
element.classes.add('completed');
} else {
element.classes.remove('completed');
}
}
}
labs/architecture-examples/dart/web/dart/app.dart
View file @ 54a2ac0c
......@@ -8,35 +8,35 @@ part 'TodoWidget.dart';
part 'TodoApp.dart';
void main() {
new TodoApp();
new TodoApp();
}
class Todo {
String id;
String title;
bool completed;
String id;
String title;
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) {
id = json['id'];
title = json['title'];
completed = json['completed'];
}
Todo.fromJson(Map json) {
id = json['id'];
title = json['title'];
completed = json['completed'];
}
Map toJson() {
return {'id': id, 'title': title, 'completed': completed};
}
Map toJson() {
return {'id': id, 'title': title, 'completed': completed};
}
}
class UUID {
static Random random = new Random();
static Random random = new Random();
static String createUuid() {
return "${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}";
}
static String createUuid() {
return "${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}";
}
static String S4() {
return random.nextInt(65536).toRadixString(16);
}
static String S4() {
return random.nextInt(65536).toRadixString(16);
}
}
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7