cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WebWorkers) Add DOM event support

Browse Source 
closes #3046
This commit is contained in:
Jason Teplitz
2015-07-10 16:09:18 -07:00
parent 8e960d4052
commit 7b834e02ec
27 changed files with 556 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/examples/src/message_broker/background_index.dart
View File

@ -4,6 +4,7 @@ import "package:angular2/src/web-workers/worker/application.dart"
show WorkerMessageBus, WorkerMessageBusSource, WorkerMessageBusSink;
import "package:angular2/src/web-workers/worker/broker.dart"
show MessageBroker, UiArguments;
import "package:angular2/src/web-workers/shared/serializer.dart" show Serializer;
import "dart:isolate";
@ -17,7 +18,7 @@ main(List<String> args, SendPort replyTo) {
}
});
MessageBroker broker = new MessageBroker(bus, null);
MessageBroker broker = new MessageBroker(bus, new Serializer(null, null, null), null);
var args = new UiArguments("test", "tester");
broker.runOnUiThread(args, String).then((data) {
bus.sink.send({"type": "result", "value": data});

2
modules/examples/src/message_broker/background_index.ts
View File

@ -14,7 +14,7 @@ export function main() {
}
});
var broker = new MessageBroker(bus, new Serializer(null));
var broker = new MessageBroker(bus, new Serializer(null, null, null), null);
var args = new UiArguments("test", "tester");
broker.runOnUiThread(args, String)
.then((data: string) => { bus.sink.send({type: "result", value: data}); });

2
modules/examples/src/message_broker/index.dart
View File

@ -19,7 +19,7 @@ main() {
.appendHtml("<span class='response'>${data['value']}</span>");
} else if (identical(data['type'], "test")) {
bus.sink.send(
{'type': "result", 'value': {'id': data['id'], 'value': VALUE}});
{'type': "result", 'id': data['id'], 'value': VALUE});
} else if (identical(data['type'], "result")) {
querySelector("#ui_result")
.appendHtml("<span class='result'>${data['value']}</span>");

2
modules/examples/src/message_broker/index.ts
View File

@ -19,7 +19,7 @@ bus.source.addListener((message) => {
document.getElementById("echo_result").innerHTML =
`<span class='response'>${message.data.value}</span>`;
} else if (message.data.type === "test") {
bus.sink.send({type: "result", value: {id: message.data.id, value: VALUE}});
bus.sink.send({type: "result", id: message.data.id, value: VALUE});
} else if (message.data.type == "result") {
document.getElementById("ui_result").innerHTML =
`<span class='result'>${message.data.value}</span>`;

2
modules/examples/src/web_workers/background_index.dart
View File

@ -9,5 +9,5 @@ import "package:angular2/src/reflection/reflection.dart";
main(List<String> args, SendPort replyTo) {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrapWebworker(replyTo, HelloCmp);
bootstrapWebworker(replyTo, HelloCmp).catchError((error) => throw error);
}

11
modules/examples/src/web_workers/example.html
View File

@ -1,11 +0,0 @@
<!doctype html>
<html>
<title>Hello Angular 2.0</title>
<body>
<hello-app>
Loading...
</hello-app>
$SCRIPTS$
</body>
</html>

0
modules/examples/src/web_workers/example.dart → modules/examples/src/web_workers/index.dart
View File

26
modules/examples/src/web_workers/index.html Normal file
View File

@ -0,0 +1,26 @@
<!doctype html>
<html>
<title>Hello Angular 2.0</title>
<style>
.sample-area {
text-align: center;
margin: 5px;
height: 50px;
line-height: 50px;
border-radius: 5px;
border: 1px solid #d0d0d0;
}
.sample-area:focus {
border: 1px solid blue;
color: blue;
font-weight: bold;
}
</style>
<body>
<hello-app>
Loading...
</hello-app>
$SCRIPTS$
</body>
</html>

0
modules/examples/src/web_workers/example.ts → modules/examples/src/web_workers/index.ts
View File

7
modules/examples/src/web_workers/index_common.ts
View File

@ -1,4 +1,5 @@
import {ElementRef, Component, Directive, View, Injectable, Renderer} from 'angular2/angular2';
import {StringWrapper} from 'angular2/src/facade/lang';
// A service available to the Injector, used by the HelloCmp component.
@Injectable()
@ -37,7 +38,8 @@ class RedDec {
// Expressions in the template (like {{greeting}}) are evaluated in the
// context of the HelloCmp class below.
template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
<button class="changeButton">change greeting</button>`,
<button class="changeButton" (click)="changeGreeting()">change greeting</button>
<div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>`,
// All directives used in the template need to be specified. This allows for
// modularity (RedDec can only be used in this template)
// and better tooling (the template can be invalidated if the attribute is
@ -46,8 +48,11 @@ class RedDec {
})
export class HelloCmp {
greeting: string;
lastKey: string = '(none)';
constructor(service: GreetingService) { this.greeting = service.greeting; }
changeGreeting(): void { this.greeting = 'howdy'; }
onKeyDown(event): void { this.lastKey = StringWrapper.fromCharCode(event['keyCode']); }
}

49
modules/examples/src/web_workers/loader.js
View File

@ -1,27 +1,24 @@
$SCRIPTS$
$SCRIPTS$ window = {
setTimeout: setTimeout,
Map: Map,
Set: Set,
Array: Array,
Reflect: Reflect,
RegExp: RegExp,
Promise: Promise,
Date: Date,
zone: zone
};
assert = function() {};
// TODO (jteplitz) Monkey patch this from within angular (#3207)
window = {
setTimeout: setTimeout,
Map: Map,
Set: Set,
Array: Array,
Reflect: Reflect,
RegExp: RegExp,
Promise: Promise,
Date: Date
};
assert = function() {}
System.import("examples/src/web_workers/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); });
System.import("examples/src/web_workers/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); });