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; 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) {
try { try {
var todos = JSON.parse(jsonList); var todos = JSON.parse(jsonList);
for (Map todo in todos) { for (Map todo in todos) {
addTodo(new Todo.fromJson(todo)); addTodo(new Todo.fromJson(todo));
} }
} catch (e) { } catch (e) {
window.console.log("Could not load todos form local storage."); window.console.log("Could not load todos form local storage.");
} }
} }
} }
void initElementEventListeners() { void initElementEventListeners() {
InputElement newTodoElement = query('#new-todo'); InputElement newTodoElement = query('#new-todo');
newTodoElement.on.keyPress.add((KeyboardEvent e) { newTodoElement.on.keyPress.add((KeyboardEvent e) {
if (e.keyIdentifier == KeyName.ENTER) { if (e.keyIdentifier == KeyName.ENTER) {
var title = newTodoElement.value.trim(); var title = newTodoElement.value.trim();
if (title != '') { if (title != '') {
addTodo(new Todo(UUID.createUuid(), title)); addTodo(new Todo(UUID.createUuid(), title));
newTodoElement.value = ''; newTodoElement.value = '';
updateFooterDisplay(); updateFooterDisplay();
save(); save();
} }
} }
}); });
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) {
if (todoWidget.todo.completed != target.checked) { if (todoWidget.todo.completed != target.checked) {
todoWidget.toggle(); todoWidget.toggle();
} }
} }
updateCounts(); updateCounts();
save(); save();
}); });
clearCompletedElement.on.click.add((MouseEvent e) { clearCompletedElement.on.click.add((MouseEvent e) {
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() {
if (todoWidgets.length == 0) { if (todoWidgets.length == 0) {
checkAllCheckboxElement.style.display = 'none'; checkAllCheckboxElement.style.display = 'none';
mainElement.style.display = 'none'; mainElement.style.display = 'none';
footerElement.style.display = 'none'; footerElement.style.display = 'none';
} else { } else {
checkAllCheckboxElement.style.display = 'block'; checkAllCheckboxElement.style.display = 'block';
mainElement.style.display = 'block'; mainElement.style.display = 'block';
footerElement.style.display = 'block'; footerElement.style.display = 'block';
} }
updateCounts(); updateCounts();
} }
void updateCounts() { void updateCounts() {
var complete = 0; var complete = 0;
for (TodoWidget todoWidget in todoWidgets) { for (TodoWidget todoWidget in todoWidgets) {
if (todoWidget.todo.completed) { if (todoWidget.todo.completed) {
complete++; complete++;
} }
} }
checkAllCheckboxElement.checked = (complete == todoWidgets.length); checkAllCheckboxElement.checked = (complete == todoWidgets.length);
var left = todoWidgets.length - complete; var left = todoWidgets.length - complete;
countElement.innerHTML = '<b>${left}</b> item${left != 1 ? 's' : ''} left'; countElement.innerHTML = '<b>${left}</b> item${left != 1 ? 's' : ''} left';
if (complete == 0) { if (complete == 0) {
clearCompletedElement.style.display = 'none'; clearCompletedElement.style.display = 'none';
} else { } else {
clearCompletedElement.style.display = 'block'; clearCompletedElement.style.display = 'block';
clearCompletedElement.text = 'Clear completed (${complete})'; clearCompletedElement.text = 'Clear completed (${complete})';
} }
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':
showActive(); showActive();
break; break;
case '#/completed': case '#/completed':
showCompleted(); showCompleted();
break; break;
default: default:
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) {
todos.add(todoWidget.todo); todos.add(todoWidget.todo);
} }
window.localStorage["todos-vanilladart"] = JSON.stringify(todos); window.localStorage["todos-vanilladart"] = JSON.stringify(todos);
} }
} }
labs/architecture-examples/dart/web/dart/TodoWidget.dart
View file @ 54a2ac0c
part of todomvc; part of todomvc;
class TodoWidget { class TodoWidget {
TodoApp todoApp; TodoApp todoApp;
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"' : ''}>
<div class='view'> <div class='view'>
<input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}> <input class='toggle' type='checkbox' ${todo.completed ? 'checked' : ''}>
<label class='todo-content'>${todo.title}</label> <label class='todo-content'>${todo.title}</label>
<button class='destroy'></button> <button class='destroy'></button>
</div> </div>
<input class='edit' value='${todo.title}'> <input class='edit' value='${todo.title}'>
</li> </li>
'''); ''');
Element contentElement = element.query('.todo-content'); Element contentElement = element.query('.todo-content');
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();
todoApp.save(); todoApp.save();
}); });
contentElement.on.doubleClick.add((MouseEvent e) { contentElement.on.doubleClick.add((MouseEvent e) {
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.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 != '') {
contentElement.text = todo.title; contentElement.text = todo.title;
element.classes.remove('editing'); element.classes.remove('editing');
} else { } else {
removeTodo(); removeTodo();
} }
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) {
doneEditing(e); doneEditing(e);
} }
}) })
..blur.add(doneEditing); ..blur.add(doneEditing);
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';
} }
} }
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');
} }
} }
} }
labs/architecture-examples/dart/web/dart/app.dart
View file @ 54a2ac0c
...@@ -8,35 +8,35 @@ part 'TodoWidget.dart'; ...@@ -8,35 +8,35 @@ part 'TodoWidget.dart';
part 'TodoApp.dart'; part 'TodoApp.dart';
void main() { void main() {
new TodoApp(); new TodoApp();
} }
class Todo { 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};
} }
} }
class UUID { class UUID {
static Random random = new Random(); static Random random = new Random();
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);
} }
} }
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