TodoElement class isolated

MathieuLorber · Oct 20, 2012 · 7d3044e · 7d3044e
1 parent e5bb2f4
commit 7d3044e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 84 deletions.
diff --git a/labs/architecture-examples/dart/todomvc/TodoElement.dart b/labs/architecture-examples/dart/todomvc/TodoElement.dart
@@ -0,0 +1,77 @@
+part of todoApp;
+
+class TodoElement {
+  Todo todo;
+  Element element;
+  InputElement toggleElement;
+
+  TodoElement(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 contentElement = element.query('.todo-content');
+    InputElement editElement = element.query('.edit');
+
+    toggleElement = element.query('.toggle');
+
+    toggleElement.on.click.add((MouseEvent e) {
+      toggle();
+      updateCounts();
+    });
+    contentElement.on.doubleClick.add((MouseEvent e) {
+      element.classes.add('editing');
+      editElement.selectionStart = todo.title.length;
+      editElement.focus();
+    });
+
+    void removeTodo() {
+      element.remove();
+      todoElements.removeAt(todoElements.indexOf(this));
+      updateFooterDisplay();
+    }
+
+    element.query('.destroy').on.click.add((MouseEvent e) {
+      removeTodo();
+    });
+
+    void doneEditing() {
+      todo.title = editElement.value.trim();
+      if(todo.title != '') {
+        contentElement.innerHTML = todo.title;
+        element.classes.remove('editing');
+      } else {
+        removeTodo();
+      }
+    }
+
+    editElement.on.keyPress.add((KeyboardEvent e) {
+      if(e.keyIdentifier == KeyName.ENTER) {
+        doneEditing();
+      }
+    });
+    editElement.on.blur.add((Event e) {
+      doneEditing();
+    });
+    return element;
+  }
+
+  void toggle() {
+    todo.completed = !todo.completed;
+    toggleElement.checked = todo.completed;
+    if(todo.completed) {
+      element.classes.add('completed');
+    } else {
+      element.classes.remove('completed');
+    }
+  }
+}
diff --git a/labs/architecture-examples/dart/todomvc/todomvc.dart b/labs/architecture-examples/dart/todomvc/todomvc.dart
@@ -1,4 +1,8 @@
-#import('dart:html');
+library todoApp;
+
+import 'dart:html';
+
+part 'TodoElement.dart';
 
 List<TodoElement> todoElements = new List();
 Element todoListElement = query('#todo-list');
@@ -8,6 +12,12 @@ Element footerElement = query('#footer');
 Element countElement = query('#todo-count');
 Element clearCompletedElement = query('#clear-completed');
 
+class Todo {
+  int id;
+  String title;
+  bool completed;
+}
+
 void main() {
   InputElement newTodoElement = query('#new-todo');
 
@@ -79,7 +89,6 @@ void updateCounts() {
     }
   });
   checkAllCheckboxElement.checked = (complete == todoElements.length);
-  window.console.log('left : {$complete}');
   int left = todoElements.length - complete;
   countElement.innerHTML = '${left} item${left != 1 ? 's' : ''} left';
   if(complete == 0) {
@@ -89,85 +98,3 @@ void updateCounts() {
     clearCompletedElement.innerHTML = 'Clear completed (${complete})';
   }
 }
-
-class TodoElement {
-  Todo todo;
-  Element element;
-  InputElement toggleElement;
-
-  TodoElement(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 contentElement = element.query('.todo-content');
-    InputElement editElement = element.query('.edit');
-
-    toggleElement = element.query('.toggle');
-
-    toggleElement.on.click.add((MouseEvent e) {
-      toggle();
-      updateCounts();
-    });
-    contentElement.on.doubleClick.add((MouseEvent e) {
-      element.classes.add('editing');
-      editElement.selectionStart = todo.title.length;
-      editElement.focus();
-    });
-
-    void removeTodo() {
-      element.remove();
-      todoElements.removeAt(todoElements.indexOf(this));
-      updateFooterDisplay();
-    }
-
-    element.query('.destroy').on.click.add((MouseEvent e) {
-      removeTodo();
-    });
-
-    void doneEditing() {
-      todo.title = editElement.value.trim();
-      if(todo.title != '') {
-        contentElement.innerHTML = todo.title;
-        element.classes.remove('editing');
-      } else {
-        removeTodo();
-      }
-    }
-
-    editElement.on.keyPress.add((KeyboardEvent e) {
-      if(e.keyIdentifier == KeyName.ENTER) {
-        doneEditing();
-      }
-    });
-    editElement.on.blur.add((Event e) {
-      doneEditing();
-    });
-    return element;
-  }
-
-  void toggle() {
-    todo.completed = !todo.completed;
-    toggleElement.checked = todo.completed;
-    if(todo.completed) {
-      element.classes.add('completed');
-    } else {
-      element.classes.remove('completed');
-    }
-  }
-}
-
-class Todo {
-  int id;
-  String title;
-  bool completed;
-}