feat(WebWorkers): Add WebWorker Todo Example. Add support for more DOM events.

Fixed breakage caused by previous DI commit in WebWorker Todo example

modules/examples/src/web_workers/kitchen_sink/background_index.dart

@@ -1,4 +1,4 @@
-library examples.src.web_workers.index;
+library examples.src.web_workers.kitchen_sink.background_index;
 
 import "index_common.dart" show HelloCmp;
 import "dart:isolate";

modules/examples/src/web_workers/kitchen_sink/index.dart

@@ -0,0 +1,10 @@
+library angular2.examples.web_workers.kitchen_sink.index;
+
+import "package:angular2/src/web-workers/ui/application.dart" show bootstrap;
+import "package:angular2/src/reflection/reflection_capabilities.dart";
+import "package:angular2/src/reflection/reflection.dart";
+
+main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap("background_index.dart");
+}

modules/examples/src/web_workers/kitchen_sink/index_common.ts

@@ -54,5 +54,5 @@ export class HelloCmp {
 
   changeGreeting(): void { this.greeting = 'howdy'; }
 
-  onKeyDown(event): void { this.lastKey = StringWrapper.fromCharCode(event['keyCode']); }
+  onKeyDown(event): void { this.lastKey = StringWrapper.fromCharCode(event.keyCode); }
 }

modules/examples/src/web_workers/kitchen_sink/loader.js

@@ -0,0 +1,24 @@
+$SCRIPTS$ window = {
+  setTimeout: setTimeout,
+  Map: Map,
+  Set: Set,
+  Array: Array,
+  Reflect: Reflect,
+  RegExp: RegExp,
+  Promise: Promise,
+  Date: Date,
+  zone: zone
+};
+assert = function() {};
+
+System.import("examples/src/web_workers/kitchen_sink/background_index")
+    .then(
+        function(m) {
+          console.log("running main");
+          try {
+            m.main();
+          } catch (e) {
+            console.error(e);
+          }
+        },
+        function(error) { console.error("error loading background", error); });

modules/examples/src/web_workers/todo/background_index.dart

@@ -0,0 +1,13 @@
+library examples.src.web_workers.todo.background_index;
+
+import "index_common.dart" show TodoApp;
+import "dart:isolate";
+import "package:angular2/src/web-workers/worker/application.dart"
+    show bootstrapWebworker;
+import "package:angular2/src/reflection/reflection_capabilities.dart";
+import "package:angular2/src/reflection/reflection.dart";
+
+main(List<String> args, SendPort replyTo) {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrapWebworker(replyTo, TodoApp).catchError((error) => throw error);
+}

modules/examples/src/web_workers/todo/background_index.ts

@@ -0,0 +1,6 @@
+import {bootstrapWebworker} from "angular2/src/web-workers/worker/application";
+import {TodoApp} from "./index_common";
+
+export function main() {
+  bootstrapWebworker(TodoApp);
+}

modules/examples/src/web_workers/todo/index.dart

@@ -1,4 +1,4 @@
-library angular2.examples.web_workers;
+library angular2.examples.web_workers.todo.index;
 
 import "package:angular2/src/web-workers/ui/application.dart" show bootstrap;
 import "package:angular2/src/reflection/reflection_capabilities.dart";

modules/examples/src/web_workers/todo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <title>Todo Angular 2 - WebWorker</title>
+  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
+<body>
+  <todo-app>
+    Loading...
+  </todo-app>
+
+
+  $SCRIPTS$
+</body>
+</html>

modules/examples/src/web_workers/todo/index.ts

@@ -0,0 +1,2 @@
+import {bootstrap} from "angular2/src/web-workers/ui/application";
+bootstrap("loader.js");

modules/examples/src/web_workers/todo/index_common.ts

@@ -0,0 +1,60 @@
+import {NgFor, Component, View, formDirectives} from 'angular2/angular2';
+import {Store, Todo, TodoFactory} from './services/TodoStore';
+
+@Component({selector: 'todo-app', viewBindings: [Store, TodoFactory]})
+@View({templateUrl: 'todo.html', directives: [NgFor, formDirectives]})
+export class TodoApp {
+  todoEdit: Todo = null;
+  inputValue: string;
+  hideActive: boolean = false;
+  hideCompleted: boolean = false;
+  isComplete: boolean = false;
+
+  constructor(public todoStore: Store, public factory: TodoFactory) {}
+
+  enterTodo(): void {
+    this.addTodo(this.inputValue);
+    this.inputValue = "";
+  }
+
+  doneEditing($event, todo: Todo): void {
+    var which = $event.keyCode;
+    if (which === 13) {
+      todo.title = todo.editTitle;
+      this.todoEdit = null;
+    } else if (which === 27) {
+      this.todoEdit = null;
+      todo.editTitle = todo.title;
+    }
+  }
+
+  editTodo(todo: Todo): void { this.todoEdit = todo; }
+
+  addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
+
+  completeMe(todo: Todo): void { todo.completed = !todo.completed; }
+
+  toggleCompleted(): void {
+    this.hideActive = !this.hideActive;
+    this.hideCompleted = false;
+  }
+
+  toggleActive(): void {
+    this.hideCompleted = !this.hideCompleted;
+    this.hideActive = false;
+  }
+
+  showAll(): void {
+    this.hideCompleted = false;
+    this.hideActive = false;
+  }
+
+  deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
+
+  toggleAll($event): void {
+    this.isComplete = !this.isComplete;
+    this.todoStore.list.forEach((todo: Todo) => { todo.completed = this.isComplete; });
+  }
+
+  clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
+}

modules/examples/src/web_workers/todo/loader.js

@@ -11,7 +11,7 @@ $SCRIPTS$ window = {
 };
 assert = function() {};
 
-System.import("examples/src/web_workers/background_index")
+System.import("examples/src/web_workers/todo/background_index")
     .then(
         function(m) {
           console.log("running main");

modules/examples/src/web_workers/todo/services/TodoStore.ts

@@ -0,0 +1,51 @@
+import {Injectable} from 'angular2/angular2';
+import {ListWrapper} from 'angular2/src/facade/collection';
+
+// base model for RecordStore
+export class KeyModel {
+  constructor(public key: number) {}
+}
+
+export class Todo extends KeyModel {
+  editTitle: string;
+  constructor(key: number, public title: string, public completed: boolean) {
+    super(key);
+    this.editTitle = title;
+  }
+}
+
+@Injectable()
+export class TodoFactory {
+  _uid: number = 0;
+
+  nextUid(): number { return ++this._uid; }
+
+  create(title: string, isCompleted: boolean): Todo {
+    return new Todo(this.nextUid(), title, isCompleted);
+  }
+}
+
+// Store manages any generic item that inherits from KeyModel
+@Injectable()
+export class Store {
+  list: List<KeyModel> = [];
+
+  add(record: KeyModel): void { this.list.push(record); }
+
+  remove(record: KeyModel): void { this._spliceOut(record); }
+
+  removeBy(callback: Function): void {
+    var records = ListWrapper.filter(this.list, callback);
+    ListWrapper.removeAll(this.list, records);
+  }
+
+  private _spliceOut(record: KeyModel) {
+    var i = this._indexFor(record);
+    if (i > -1) {
+      return ListWrapper.splice(this.list, i, 1)[0];
+    }
+    return null;
+  }
+
+  private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
+}

modules/examples/src/web_workers/todo/todo.html

@@ -0,0 +1,68 @@
+<section id="todoapp">
+
+  <header id="header">
+    <h1>todos</h1>
+    <input
+      id="new-todo"
+      placeholder="What needs to be done?"
+      [(ng-model)]="inputValue"
+      autofocus
+      #newtodo
+      (keyup.enter)="enterTodo()">
+  </header>
+
+  <section id="main">
+    <input id="toggle-all" type="checkbox" [checked]="isComplete" (click)="toggleAll($event)">
+    <label for="toggle-all">Mark all as complete</label>
+
+    <ul id="todo-list">
+
+      <li *ng-for="#todo of todoStore.list" [class.hidden]="hideActive && !todo.completed || hideCompleted && todo.completed">
+        <div class="view"
+            [class.hidden]="todoEdit == todo">
+
+          <input class="toggle" type="checkbox"
+                 (click)="completeMe(todo)"
+                 [checked]="todo.completed">
+
+          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+          <button class="destroy" (click)="deleteMe(todo)"></button>
+
+        </div>
+
+        <div>
+
+          <input class="edit"
+            [class.visible]="todoEdit == todo"
+            [(ng-model)]="todo.editTitle"
+            (keyup)="doneEditing($event, todo)">
+
+        </div>
+      </li>
+    </ul>
+
+  </section>
+
+  <footer id="footer">
+    <span id="todo-count"></span>
+    <div [class.hidden]="true"></div>
+    <ul id="filters">
+      <li>
+        <a href="#/" [class.selected]="!hideActive && !hideCompleted" (click)="showAll()">All</a>
+      </li>
+      <li>
+        <a href="#/active" [class.selected]="hideCompleted" (click)="toggleActive()">Active</a>
+      </li>
+      <li>
+        <a href="#/completed" [class.selected]="hideActive" (click)="toggleCompleted()">Completed</a>
+      </li>
+    </ul>
+    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
+  </footer>
+
+</section>
+
+<footer id="info">
+  <p>Double-click to edit a todo</p>
+  <p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
+</footer>