Revert "feat(WebWorkers): Add WebWorker Todo Example. Add support for more DOM events."
This reverts commit d44827a4c5.
This broke master due to a race condition in our presubmit queue.
This commit is contained in:
Tobias Bosch
parent
d44827a4c5
commit
014b6cb397
|
|
@ -28,8 +28,7 @@ import {
|
|||
RenderFragmentRef,
|
||||
RenderElementRef,
|
||||
ViewType,
|
||||
ViewEncapsulation,
|
||||
PropertyBindingType
|
||||
ViewEncapsulation
|
||||
} from "angular2/src/render/api";
|
||||
import {WorkerElementRef} from 'angular2/src/web-workers/shared/api';
|
||||
import {AST, ASTWithSource} from 'angular2/src/change_detection/change_detection';
|
||||
|
|
@ -58,13 +57,6 @@ export class Serializer {
|
|||
viewEncapsulationMap[1] = ViewEncapsulation.NATIVE;
|
||||
viewEncapsulationMap[2] = ViewEncapsulation.NONE;
|
||||
this._enumRegistry.set(ViewEncapsulation, viewEncapsulationMap);
|
||||
|
||||
var propertyBindingTypeMap = new Map<int, any>();
|
||||
propertyBindingTypeMap[0] = PropertyBindingType.PROPERTY;
|
||||
propertyBindingTypeMap[1] = PropertyBindingType.ATTRIBUTE;
|
||||
propertyBindingTypeMap[2] = PropertyBindingType.CLASS;
|
||||
propertyBindingTypeMap[3] = PropertyBindingType.STYLE;
|
||||
this._enumRegistry.set(PropertyBindingType, propertyBindingTypeMap);
|
||||
}
|
||||
|
||||
serialize(obj: any, type: Type): Object {
|
||||
|
|
@ -101,8 +93,6 @@ export class Serializer {
|
|||
return this._renderViewStore.serializeRenderFragmentRef(obj);
|
||||
} else if (type == WorkerElementRef) {
|
||||
return this._serializeWorkerElementRef(obj);
|
||||
} else if (type == ElementPropertyBinding) {
|
||||
return this._serializeElementPropertyBinding(obj);
|
||||
} else if (type == EventBinding) {
|
||||
return this._serializeEventBinding(obj);
|
||||
} else {
|
||||
|
|
@ -147,8 +137,6 @@ export class Serializer {
|
|||
return this._deserializeWorkerElementRef(map);
|
||||
} else if (type == EventBinding) {
|
||||
return this._deserializeEventBinding(map);
|
||||
} else if (type == ElementPropertyBinding) {
|
||||
return this._deserializeElementPropertyBinding(map);
|
||||
} else {
|
||||
throw new BaseException("No deserializer for " + type.toString());
|
||||
}
|
||||
|
|
@ -177,7 +165,7 @@ export class Serializer {
|
|||
if (isPresent(type)) {
|
||||
var map: Map<string, any> = new Map();
|
||||
StringMapWrapper.forEach(obj,
|
||||
(val, key) => { map.set(key, this.deserialize(val, type, data)); });
|
||||
(key, val) => { map.set(key, this.deserialize(val, type, data)); });
|
||||
return map;
|
||||
} else {
|
||||
return MapWrapper.createFromStringMap(obj);
|
||||
|
|
@ -186,29 +174,13 @@ export class Serializer {
|
|||
|
||||
allocateRenderViews(fragmentCount: number) { this._renderViewStore.allocate(fragmentCount); }
|
||||
|
||||
private _serializeElementPropertyBinding(binding:
|
||||
ElementPropertyBinding): StringMap<string, any> {
|
||||
return {
|
||||
'type': serializeEnum(binding.type),
|
||||
'astWithSource': this.serialize(binding.astWithSource, ASTWithSource),
|
||||
'property': binding.property,
|
||||
'unit': binding.unit
|
||||
};
|
||||
}
|
||||
|
||||
private _deserializeElementPropertyBinding(map: StringMap<string, any>): ElementPropertyBinding {
|
||||
var type = deserializeEnum(map['type'], this._enumRegistry.get(PropertyBindingType));
|
||||
var ast = this.deserialize(map['astWithSource'], ASTWithSource, "binding");
|
||||
return new ElementPropertyBinding(type, ast, map['property'], map['unit']);
|
||||
}
|
||||
|
||||
private _serializeEventBinding(binding: EventBinding): StringMap<string, any> {
|
||||
return {'fullName': binding.fullName, 'source': this.serialize(binding.source, ASTWithSource)};
|
||||
}
|
||||
|
||||
private _deserializeEventBinding(map: StringMap<string, any>): EventBinding {
|
||||
return new EventBinding(map['fullName'],
|
||||
this.deserialize(map['source'], ASTWithSource, "action"));
|
||||
this.deserialize(map['source'], ASTWithSource, "binding"));
|
||||
}
|
||||
|
||||
private _serializeWorkerElementRef(elementRef: RenderElementRef): StringMap<string, any> {
|
||||
|
|
@ -251,12 +223,15 @@ export class Serializer {
|
|||
// TODO: make ASTs serializable
|
||||
var ast: AST;
|
||||
switch (data) {
|
||||
case "action":
|
||||
ast = this._parser.parseAction(obj['input'], obj['location']);
|
||||
case "interpolation":
|
||||
ast = this._parser.parseInterpolation(obj['input'], obj['location']);
|
||||
break;
|
||||
case "binding":
|
||||
ast = this._parser.parseBinding(obj['input'], obj['location']);
|
||||
break;
|
||||
case "simpleBinding":
|
||||
ast = this._parser.parseSimpleBinding(obj['input'], obj['location']);
|
||||
break;
|
||||
case "interpolation":
|
||||
ast = this._parser.parseInterpolation(obj['input'], obj['location']);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -52,45 +52,12 @@ final Map KEYBOARD_EVENT_PROPERTIES = {
|
|||
#type: String
|
||||
};
|
||||
|
||||
final Map EVENT_PROPERTIES = {
|
||||
#bubbles: bool,
|
||||
#cancelable: bool,
|
||||
#defaultPrevented: bool,
|
||||
#eventPhase: int,
|
||||
#timeStamp: int,
|
||||
#type: String
|
||||
};
|
||||
|
||||
// List of all elements with HTML value attribute.
|
||||
// Taken from: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
|
||||
final Set<String> NODES_WITH_VALUE =
|
||||
new Set<String>.from(["input", "select", "option", "button", "li", "meter", "progress", "param"]);
|
||||
|
||||
Map<String, dynamic> serializeGenericEvent(dynamic e) {
|
||||
return serializeEvent(e, EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
// TODO(jteplitz602): Allow users to specify the properties they need rather than always
|
||||
// adding value #3374
|
||||
Map<String, dynamic> serializeEventWithValue(dynamic e) {
|
||||
var serializedEvent = serializeEvent(e, EVENT_PROPERTIES);
|
||||
return addValue(e, serializedEvent);
|
||||
}
|
||||
Map<String, dynamic> serializeMouseEvent(dynamic e) {
|
||||
return serializeEvent(e, MOUSE_EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
Map<String, dynamic> serializeKeyboardEvent(dynamic e) {
|
||||
var serializedEvent = serializeEvent(e, KEYBOARD_EVENT_PROPERTIES);
|
||||
return addValue(e, serializedEvent);
|
||||
}
|
||||
|
||||
// TODO(jteplitz602): #3374. See above.
|
||||
Map<String, dynamic> addValue(dynamic e, Map<String, dynamic> serializedEvent) {
|
||||
if (NODES_WITH_VALUE.contains(e.target.tagName.toLowerCase())){
|
||||
serializedEvent['target'] = {'value': e.target.value};
|
||||
}
|
||||
return serializedEvent;
|
||||
return serializeEvent(e, KEYBOARD_EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
Map<String, dynamic> serializeEvent(dynamic e, Map<Symbol, Type> PROPERTIES) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {StringMap, Set} from 'angular2/src/facade/collection';
|
||||
import {StringMap} from 'angular2/src/facade/collection';
|
||||
|
||||
const MOUSE_EVENT_PROPERTIES = [
|
||||
"altKey",
|
||||
|
|
@ -31,37 +31,12 @@ const KEYBOARD_EVENT_PROPERTIES = [
|
|||
'which'
|
||||
];
|
||||
|
||||
const EVENT_PROPERTIES = ['type', 'bubbles', 'cancelable'];
|
||||
|
||||
const NODES_WITH_VALUE =
|
||||
new Set(["input", "select", "option", "button", "li", "meter", "progress", "param"]);
|
||||
|
||||
export function serializeGenericEvent(e: Event): StringMap<string, any> {
|
||||
return serializeEvent(e, EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
// TODO(jteplitz602): Allow users to specify the properties they need rather than always
|
||||
// adding value #3374
|
||||
export function serializeEventWithValue(e: Event): StringMap<string, any> {
|
||||
var serializedEvent = serializeEvent(e, EVENT_PROPERTIES);
|
||||
return addValue(e, serializedEvent);
|
||||
}
|
||||
|
||||
export function serializeMouseEvent(e: MouseEvent): StringMap<string, any> {
|
||||
return serializeEvent(e, MOUSE_EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
export function serializeKeyboardEvent(e: KeyboardEvent): StringMap<string, any> {
|
||||
var serializedEvent = serializeEvent(e, KEYBOARD_EVENT_PROPERTIES);
|
||||
return addValue(e, serializedEvent);
|
||||
}
|
||||
|
||||
// TODO(jteplitz602): #3374. See above.
|
||||
function addValue(e: Event, serializedEvent: StringMap<string, any>): StringMap<string, any> {
|
||||
if (NODES_WITH_VALUE.has((<HTMLElement>e.target).tagName.toLowerCase())) {
|
||||
serializedEvent['target'] = {'value': (<HTMLInputElement>e.target).value};
|
||||
}
|
||||
return serializedEvent;
|
||||
return serializeEvent(e, KEYBOARD_EVENT_PROPERTIES);
|
||||
}
|
||||
|
||||
function serializeEvent(e: any, properties: List<string>): StringMap<string, any> {
|
||||
|
|
|
|||
|
|
@ -35,9 +35,7 @@ import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {
|
||||
serializeMouseEvent,
|
||||
serializeKeyboardEvent,
|
||||
serializeGenericEvent,
|
||||
serializeEventWithValue
|
||||
serializeKeyboardEvent
|
||||
} from 'angular2/src/web-workers/ui/event_serializer';
|
||||
|
||||
/**
|
||||
|
|
@ -238,8 +236,7 @@ class EventDispatcher implements RenderEventDispatcher {
|
|||
dispatchRenderEvent(elementIndex: number, eventName: string, locals: Map<string, any>) {
|
||||
var e = locals.get('$event');
|
||||
var serializedEvent;
|
||||
// TODO (jteplitz602): support custom events #3350
|
||||
switch (e.type) {
|
||||
switch (eventName) {
|
||||
case "click":
|
||||
case "mouseup":
|
||||
case "mousedown":
|
||||
|
|
@ -258,60 +255,6 @@ class EventDispatcher implements RenderEventDispatcher {
|
|||
case "keyup":
|
||||
serializedEvent = serializeKeyboardEvent(e);
|
||||
break;
|
||||
case "input":
|
||||
case "change":
|
||||
case "blur":
|
||||
serializedEvent = serializeEventWithValue(e);
|
||||
break;
|
||||
case "abort":
|
||||
case "afterprint":
|
||||
case "beforeprint":
|
||||
case "cached":
|
||||
case "canplay":
|
||||
case "canplaythrough":
|
||||
case "chargingchange":
|
||||
case "chargingtimechange":
|
||||
case "close":
|
||||
case "dischargingtimechange":
|
||||
case "DOMContentLoaded":
|
||||
case "downloading":
|
||||
case "durationchange":
|
||||
case "emptied":
|
||||
case "ended":
|
||||
case "error":
|
||||
case "fullscreenchange":
|
||||
case "fullscreenerror":
|
||||
case "invalid":
|
||||
case "languagechange":
|
||||
case "levelfchange":
|
||||
case "loadeddata":
|
||||
case "loadedmetadata":
|
||||
case "obsolete":
|
||||
case "offline":
|
||||
case "online":
|
||||
case "open":
|
||||
case "orientatoinchange":
|
||||
case "pause":
|
||||
case "pointerlockchange":
|
||||
case "pointerlockerror":
|
||||
case "play":
|
||||
case "playing":
|
||||
case "ratechange":
|
||||
case "readystatechange":
|
||||
case "reset":
|
||||
case "seeked":
|
||||
case "seeking":
|
||||
case "stalled":
|
||||
case "submit":
|
||||
case "success":
|
||||
case "suspend":
|
||||
case "timeupdate":
|
||||
case "updateready":
|
||||
case "visibilitychange":
|
||||
case "volumechange":
|
||||
case "waiting":
|
||||
serializedEvent = serializeGenericEvent(e);
|
||||
break;
|
||||
default:
|
||||
throw new BaseException(eventName + " not supported on WebWorkers");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {Injectable} from "angular2/di";
|
|||
import {Type} from "angular2/src/facade/lang";
|
||||
import {RenderViewRef, RenderEventDispatcher} from 'angular2/src/render/api';
|
||||
import {NgZone} from 'angular2/src/core/zone/ng_zone';
|
||||
import {deserializeGenericEvent} from './event_deserializer';
|
||||
|
||||
@Injectable()
|
||||
export class MessageBroker {
|
||||
|
|
@ -97,7 +96,6 @@ export class MessageBroker {
|
|||
private _dispatchEvent(eventData: RenderEventData): void {
|
||||
var dispatcher = this._eventDispatchRegistry.get(eventData.viewRef);
|
||||
this._zone.run(() => {
|
||||
eventData.locals['$event'] = deserializeGenericEvent(eventData.locals['$event']);
|
||||
dispatcher.dispatchRenderEvent(eventData.elementIndex, eventData.eventName, eventData.locals);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
library angular2.src.web_workers.worker.event_deserializer;
|
||||
|
||||
class GenericEvent {
|
||||
Map<String, dynamic> properties;
|
||||
EventTarget _target = null;
|
||||
|
||||
GenericEvent(this.properties);
|
||||
|
||||
bool get bubbles => properties['bubbles'];
|
||||
bool get cancelable => properties['cancelable'];
|
||||
bool get defaultPrevented => properties['defaultPrevented'];
|
||||
int get eventPhase => properties['eventPhase'];
|
||||
int get timeStamp => properties['timeStamp'];
|
||||
String get type => properties['type'];
|
||||
bool get altKey => properties['altKey'];
|
||||
|
||||
int get charCode => properties['charCode'];
|
||||
bool get ctrlKey => properties['ctrlKey'];
|
||||
int get detail => properties['detail'];
|
||||
int get keyCode => properties['keyCode'];
|
||||
int get keyLocation => properties['keyLocation'];
|
||||
Point get layer => _getPoint('layer');
|
||||
int get location => properties['location'];
|
||||
bool get repeat => properties['repeat'];
|
||||
bool get shiftKey => properties['shiftKey'];
|
||||
|
||||
int get button => properties['button'];
|
||||
Point get client => _getPoint('client');
|
||||
bool get metaKey => properties['metaKey'];
|
||||
Point get offset => _getPoint('offset');
|
||||
Point get page => _getPoint('page');
|
||||
Point get screen => _getPoint('screen');
|
||||
|
||||
EventTarget get target{
|
||||
if (_target != null){
|
||||
return _target;
|
||||
} else if (properties.containsKey("target")){
|
||||
_target = new EventTarget(properties['target']);
|
||||
return _target;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
dynamic _getPoint(name) {
|
||||
Map<String, dynamic> point = properties[name];
|
||||
return new Point(point['x'], point['y'], point['magnitude']);
|
||||
}
|
||||
}
|
||||
|
||||
class EventTarget {
|
||||
dynamic value;
|
||||
|
||||
EventTarget(Map<String, dynamic> properties) {
|
||||
value = properties['value'];
|
||||
}
|
||||
}
|
||||
|
||||
class Point {
|
||||
int x;
|
||||
int y;
|
||||
double magnitude;
|
||||
|
||||
Point(this.x, this.y, this.magnitude);
|
||||
}
|
||||
|
||||
GenericEvent deserializeGenericEvent(Map<String, dynamic> serializedEvent) {
|
||||
return new GenericEvent(serializedEvent);
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import {StringMap} from "angular2/src/facade/collection";
|
||||
|
||||
// no deserialization is necessary in TS.
|
||||
// This is only here to match dart interface
|
||||
export function deserializeGenericEvent(serializedEvent: StringMap<string, any>):
|
||||
StringMap<string, any> {
|
||||
return serializedEvent;
|
||||
}
|
||||
|
|
@ -171,7 +171,7 @@ export class WorkerRenderer implements Renderer {
|
|||
*/
|
||||
dehydrateView(viewRef: RenderViewRef) {
|
||||
var fnArgs = [new FnArg(viewRef, RenderViewRef)];
|
||||
var args = new UiArguments("renderer", "dehydrateView", fnArgs);
|
||||
var args = new UiArguments("renderer", "deyhdrateView", fnArgs);
|
||||
this._messageBroker.runOnUiThread(args, null);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,8 +53,7 @@ export function main() {
|
|||
'value': {
|
||||
'viewRef': viewRef.serialize(),
|
||||
'elementIndex': elementIndex,
|
||||
'eventName': eventName,
|
||||
'locals': {'$event': {'target': {value: null}}}
|
||||
'eventName': eventName
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
library examples.e2e_test.web_workers.kitchen_sink_spec;
|
||||
|
||||
main() {
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
library examples.e2e_test.web_workers.todo_spec;
|
||||
|
||||
main() {
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
|
||||
import {Promise} from 'angular2/src/facade/async';
|
||||
|
||||
describe('WebWorkers Todo', function() {
|
||||
afterEach(verifyNoBrowserErrors);
|
||||
|
||||
var URL = "examples/src/web_workers/todo/index.html";
|
||||
|
||||
it('should bootstrap', () => {
|
||||
browser.get(URL);
|
||||
|
||||
waitForBootstrap();
|
||||
expect(element(by.css("#todoapp header")).getText()).toEqual("todos");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function waitForBootstrap(): void {
|
||||
browser.wait(protractor.until.elementLocated(by.css("todo-app #todoapp")), 5000);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
library examples.e2e_test.web_workers.web_workers_spec;
|
||||
|
||||
main() {
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
|
||||
import {Promise} from 'angular2/src/facade/async';
|
||||
|
||||
describe('WebWorkers Kitchen Sink', function() {
|
||||
describe('WebWorkers', function() {
|
||||
afterEach(verifyNoBrowserErrors);
|
||||
var selector = "hello-app .greeting";
|
||||
var URL = "examples/src/web_workers/kitchen_sink/index.html";
|
||||
var URL = "examples/src/web_workers/index.html";
|
||||
|
||||
it('should greet', () => {
|
||||
browser.get(URL);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
library examples.src.web_workers.kitchen_sink.background_index;
|
||||
library examples.src.web_workers.index;
|
||||
|
||||
import "index_common.dart" show HelloCmp;
|
||||
import "dart:isolate";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
library angular2.examples.web_workers.todo.index;
|
||||
library angular2.examples.web_workers;
|
||||
|
||||
import "package:angular2/src/web-workers/ui/application.dart" show bootstrap;
|
||||
import "package:angular2/src/reflection/reflection_capabilities.dart";
|
||||
|
|
@ -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']); }
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
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");
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
$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); });
|
||||
|
|
@ -11,7 +11,7 @@ $SCRIPTS$ window = {
|
|||
};
|
||||
assert = function() {};
|
||||
|
||||
System.import("examples/src/web_workers/todo/background_index")
|
||||
System.import("examples/src/web_workers/background_index")
|
||||
.then(
|
||||
function(m) {
|
||||
console.log("running main");
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import {bootstrapWebworker} from "angular2/src/web-workers/worker/application";
|
||||
import {TodoApp} from "./index_common";
|
||||
|
||||
export function main() {
|
||||
bootstrapWebworker(TodoApp);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,399 +0,0 @@
|
|||
@charset "utf-8";
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #eaeaea;
|
||||
color: #4d4d4d;
|
||||
width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
#todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
#todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
#todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
-ms-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
label[for='toggle-all'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-all {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: -12px;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
border: none; /* Mobile Safari */
|
||||
}
|
||||
|
||||
#toggle-all:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
#toggle-all:checked:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
#todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
#todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: 506px;
|
||||
padding: 13px 17px 12px 17px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
#todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#todo-list li .toggle:after {
|
||||
content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
|
||||
}
|
||||
|
||||
#todo-list li .toggle:checked:after {
|
||||
content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
|
||||
}
|
||||
|
||||
#todo-list li label {
|
||||
white-space: pre;
|
||||
word-break: break-word;
|
||||
padding: 15px 60px 15px 15px;
|
||||
margin-left: 45px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
#todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
#todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
#todo-list li .destroy:after {
|
||||
content: '×';
|
||||
}
|
||||
|
||||
#todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
#footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#filters li a.selected,
|
||||
#filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
#filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
#clear-completed,
|
||||
html #clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#clear-completed::after {
|
||||
visibility: visible;
|
||||
content: 'Clear completed';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#clear-completed:hover::after {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
#toggle-all,
|
||||
#todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#toggle-all {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
#footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import {bootstrap} from "angular2/src/web-workers/ui/application";
|
||||
bootstrap("loader.js");
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import {NgFor, Component, View, formDirectives} from 'angular2/angular2';
|
||||
import {Store, Todo, TodoFactory} from './services/TodoStore';
|
||||
|
||||
@Component({selector: 'todo-app', viewInjector: [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); }
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
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); }
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -64,8 +64,7 @@ const kServedPaths = [
|
|||
'examples/src/material/radio',
|
||||
'examples/src/material/switcher',
|
||||
'examples/src/message_broker',
|
||||
'examples/src/web_workers/kitchen_sink',
|
||||
'examples/src/web_workers/todo'
|
||||
'examples/src/web_workers'
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue