refactor(render): ts’ify render api
This commit is contained in:
Tobias Bosch
parent
bd8724e652
commit
1beadb8607
|
|
@ -2,12 +2,17 @@
|
|||
* This file contains declarations of global symbols we reference in our code
|
||||
*/
|
||||
|
||||
/// <reference path="typings/hammerjs/hammerjs"/>
|
||||
/// <reference path="typings/zone/zone.d.ts"/>
|
||||
|
||||
declare var assert: any;
|
||||
declare var global: Window;
|
||||
type int = number;
|
||||
|
||||
interface List<T> extends Array<T> {}
|
||||
|
||||
interface StringMap<K,V> extends Object {}
|
||||
|
||||
interface Window {
|
||||
Object: typeof Object;
|
||||
Array: typeof Array;
|
||||
|
|
@ -20,4 +25,6 @@ interface Window {
|
|||
assert: typeof assert;
|
||||
gc(): void;
|
||||
Reflect: any;
|
||||
zone: Zone;
|
||||
Hammer: HammerStatic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {ProtoElementInjector, ElementInjector, PreBuiltObjects, DirectiveBinding
|
|||
import {ElementBinder} from './element_binder';
|
||||
import {IMPLEMENTS, int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
|
||||
import * as renderApi from 'angular2/src/render/api';
|
||||
import {EventDispatcher} from 'angular2/src/render/api';
|
||||
|
||||
export class AppViewContainer {
|
||||
views: List<AppView>;
|
||||
|
|
@ -21,8 +22,7 @@ export class AppViewContainer {
|
|||
*
|
||||
*/
|
||||
@IMPLEMENTS(ChangeDispatcher)
|
||||
// TODO(tbosch): this is not supported in dart2js (no '.' is allowed)
|
||||
// @IMPLEMENTS(renderApi.EventDispatcher)
|
||||
@IMPLEMENTS(EventDispatcher)
|
||||
export class AppView {
|
||||
render:renderApi.RenderViewRef;
|
||||
/// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
// TODO(vicb): implement this class properly
|
||||
// The current stub implementation is only here to please cjs tests
|
||||
export class NgZone {
|
||||
constructor({enableLongStackTrace}) {
|
||||
}
|
||||
|
||||
initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}) {
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
return fn();
|
||||
}
|
||||
|
||||
runOutsideAngular(fn) {
|
||||
return fn();
|
||||
}
|
||||
}
|
||||
|
|
@ -19,12 +19,12 @@ export class NgZone {
|
|||
// onTurnDone hook at the end of the current VM turn.
|
||||
_innerZone;
|
||||
|
||||
_onTurnStart:Function;
|
||||
_onTurnDone:Function;
|
||||
_onErrorHandler:Function;
|
||||
_onTurnStart: () => void;
|
||||
_onTurnDone: () => void;
|
||||
_onErrorHandler: (error, stack) => void;
|
||||
|
||||
// Number of microtasks pending from _innerZone (& descendants)
|
||||
_pendingMicrotask: number;
|
||||
_pendingMicrotasks: number;
|
||||
// Whether some code has been executed in the _innerZone (& descendants) in the current turn
|
||||
_hasExecutedCodeInInnerZone: boolean;
|
||||
// run() call depth in _mountZone. 0 at the end of a macrotask
|
||||
|
|
@ -32,6 +32,10 @@ export class NgZone {
|
|||
// zone.run(() => {}); // nested call -> in-turn
|
||||
// });
|
||||
_nestedRun: number;
|
||||
|
||||
// TODO(vicb): implement this class properly for node.js environment
|
||||
// This disabled flag is only here to please cjs tests
|
||||
_disabled: boolean;
|
||||
|
||||
/**
|
||||
* Associates with this
|
||||
|
|
@ -50,19 +54,31 @@ export class NgZone {
|
|||
this._pendingMicrotasks = 0;
|
||||
this._hasExecutedCodeInInnerZone = false;
|
||||
this._nestedRun = 0;
|
||||
|
||||
this._mountZone = global.zone;
|
||||
this._innerZone = this._createInnerZone(this._mountZone, enableLongStackTrace)
|
||||
|
||||
if (global.zone) {
|
||||
this._disabled = false;
|
||||
this._mountZone = global.zone;
|
||||
this._innerZone = this._createInnerZone(this._mountZone, enableLongStackTrace)
|
||||
} else {
|
||||
this._disabled = true;
|
||||
this._mountZone = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the zone hooks.
|
||||
*
|
||||
* @param {Function} onTurnStart called before code executes in the inner zone for each VM turn
|
||||
* @param {Function} onTurnDone called at the end of a VM turn if code has executed in the inner zone
|
||||
* @param {Function} onErrorHandler called when an exception is thrown by a macro or micro task
|
||||
* @param {() => void} onTurnStart called before code executes in the inner zone for each VM turn
|
||||
* @param {() => void} onTurnDone called at the end of a VM turn if code has executed in the inner
|
||||
* zone
|
||||
* @param {(error, stack) => void} onErrorHandler called when an exception is thrown by a macro or
|
||||
* micro task
|
||||
*/
|
||||
initCallbacks({onTurnStart, onTurnDone, onErrorHandler} = {}) {
|
||||
initCallbacks({onTurnStart, onTurnDone, onErrorHandler}: {
|
||||
onTurnStart?: () => void,
|
||||
onTurnDone?: () => void,
|
||||
onErrorHandler?: (error, stack) => void
|
||||
} = {}) {
|
||||
this._onTurnStart = normalizeBlank(onTurnStart);
|
||||
this._onTurnDone = normalizeBlank(onTurnDone);
|
||||
this._onErrorHandler = normalizeBlank(onErrorHandler);
|
||||
|
|
@ -78,12 +94,17 @@ export class NgZone {
|
|||
* var zone: NgZone = [ref to the application zone];
|
||||
*
|
||||
* zone.run(() => {
|
||||
* // the change detection will run after this function and the microtasks it enqueues have executed.
|
||||
* // the change detection will run after this function and the microtasks it enqueues have
|
||||
* executed.
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
run(fn) {
|
||||
return this._innerZone.run(fn);
|
||||
run(fn) {
|
||||
if (this._disabled) {
|
||||
return fn();
|
||||
} else {
|
||||
return this._innerZone.run(fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -102,8 +123,12 @@ export class NgZone {
|
|||
* });
|
||||
* ```
|
||||
*/
|
||||
runOutsideAngular(fn) {
|
||||
return this._mountZone.run(fn);
|
||||
runOutsideAngular(fn) {
|
||||
if (this._disabled) {
|
||||
return fn();
|
||||
} else {
|
||||
return this._mountZone.run(fn);
|
||||
}
|
||||
}
|
||||
|
||||
_createInnerZone(zone, enableLongStackTrace) {
|
||||
|
|
@ -111,21 +136,15 @@ export class NgZone {
|
|||
var errorHandling;
|
||||
|
||||
if (enableLongStackTrace) {
|
||||
errorHandling = StringMapWrapper.merge(Zone.longStackTraceZone, {
|
||||
onError: function (e) {
|
||||
ngZone._onError(this, e)
|
||||
}
|
||||
});
|
||||
errorHandling = StringMapWrapper.merge(Zone.longStackTraceZone,
|
||||
{onError: function(e) { ngZone._onError(this, e) }});
|
||||
} else {
|
||||
errorHandling = {
|
||||
onError: function (e) {
|
||||
ngZone._onError(this, e)
|
||||
}
|
||||
onError: function(e) { ngZone._onError(this, e) }
|
||||
};
|
||||
}
|
||||
|
||||
return zone
|
||||
.fork(errorHandling)
|
||||
return zone.fork(errorHandling)
|
||||
.fork({
|
||||
'$run': function(parentRun) {
|
||||
return function() {
|
||||
|
|
@ -140,8 +159,10 @@ export class NgZone {
|
|||
return parentRun.apply(this, arguments);
|
||||
} finally {
|
||||
ngZone._nestedRun--;
|
||||
// If there are no more pending microtasks, we are at the end of a VM turn (or in onTurnStart)
|
||||
// _nestedRun will be 0 at the end of a macrotasks (it could be > 0 when there are nested calls
|
||||
// If there are no more pending microtasks, we are at the end of a VM turn (or in
|
||||
// onTurnStart)
|
||||
// _nestedRun will be 0 at the end of a macrotasks (it could be > 0 when there are
|
||||
// nested calls
|
||||
// to run()).
|
||||
if (ngZone._pendingMicrotasks == 0 && ngZone._nestedRun == 0) {
|
||||
if (ngZone._onTurnDone && ngZone._hasExecutedCodeInInnerZone) {
|
||||
|
|
@ -273,7 +273,7 @@ defaultDoc() {
|
|||
getBoundingClientRect(el) {
|
||||
return el.getBoundingClientRect();
|
||||
}
|
||||
getTitle() {
|
||||
getTitle(): string {
|
||||
return document.title;
|
||||
}
|
||||
setTitle(newTitle: string) {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export class DomAdapter {
|
|||
removeStyle(element, stylename: string) { throw _abstract(); }
|
||||
getStyle(element, stylename: string) { throw _abstract(); }
|
||||
tagName(element): string { throw _abstract(); }
|
||||
attributeMap(element) { throw _abstract(); }
|
||||
attributeMap(element): Map<string, string> { throw _abstract(); }
|
||||
hasAttribute(element, attribute: string): boolean { throw _abstract(); }
|
||||
getAttribute(element, attribute: string): string { throw _abstract(); }
|
||||
setAttribute(element, name: string, value: string) { throw _abstract(); }
|
||||
|
|
@ -90,7 +90,7 @@ export class DomAdapter {
|
|||
createHtmlDocument() { throw _abstract(); }
|
||||
defaultDoc(): any { throw _abstract(); }
|
||||
getBoundingClientRect(el) { throw _abstract(); }
|
||||
getTitle() { throw _abstract(); }
|
||||
getTitle(): string { throw _abstract(); }
|
||||
setTitle(newTitle: string) { throw _abstract(); }
|
||||
elementMatches(n, selector: string): boolean { throw _abstract(); }
|
||||
isTemplateElement(el: any): boolean { throw _abstract(); }
|
||||
|
|
|
|||
|
|
@ -20,21 +20,21 @@ import {ASTWithSource} from 'angular2/change_detection';
|
|||
* its output will be stored in precompiled templates.
|
||||
*/
|
||||
export class EventBinding {
|
||||
fullName: string; // name/target:name, e.g "click", "window:resize"
|
||||
fullName: string; // name/target:name, e.g "click", "window:resize"
|
||||
source: ASTWithSource;
|
||||
|
||||
constructor(fullName :string, source: ASTWithSource) {
|
||||
constructor(fullName: string, source: ASTWithSource) {
|
||||
this.fullName = fullName;
|
||||
this.source = source;
|
||||
}
|
||||
}
|
||||
|
||||
export class ElementBinder {
|
||||
index:number;
|
||||
parentIndex:number;
|
||||
distanceToParent:number;
|
||||
directives:List<DirectiveBinder>;
|
||||
nestedProtoView:ProtoViewDto;
|
||||
index: number;
|
||||
parentIndex: number;
|
||||
distanceToParent: number;
|
||||
directives: List<DirectiveBinder>;
|
||||
nestedProtoView: ProtoViewDto;
|
||||
propertyBindings: Map<string, ASTWithSource>;
|
||||
variableBindings: Map<string, ASTWithSource>;
|
||||
// Note: this contains a preprocessed AST
|
||||
|
|
@ -50,7 +50,11 @@ export class ElementBinder {
|
|||
propertyBindings, variableBindings,
|
||||
eventBindings, textBindings,
|
||||
readAttributes
|
||||
}) {
|
||||
}:{index?:number, parentIndex?:number, distanceToParent?:number,
|
||||
directives?:List<DirectiveBinder>, nestedProtoView?:ProtoViewDto,
|
||||
propertyBindings?:Map<string, ASTWithSource>, variableBindings?:Map<string, ASTWithSource>,
|
||||
eventBindings?:List<EventBinding>, textBindings?:List<ASTWithSource>,
|
||||
readAttributes?:Map<string, string>}={}) {
|
||||
this.index = index;
|
||||
this.parentIndex = parentIndex;
|
||||
this.distanceToParent = distanceToParent;
|
||||
|
|
@ -66,7 +70,7 @@ export class ElementBinder {
|
|||
|
||||
export class DirectiveBinder {
|
||||
// Index into the array of directives in the View instance
|
||||
directiveIndex:any;
|
||||
directiveIndex: number;
|
||||
propertyBindings: Map<string, ASTWithSource>;
|
||||
// Note: this contains a preprocessed AST
|
||||
// that replaced the values that should be extracted from the element
|
||||
|
|
@ -75,6 +79,9 @@ export class DirectiveBinder {
|
|||
hostPropertyBindings: Map<string, ASTWithSource>;
|
||||
constructor({
|
||||
directiveIndex, propertyBindings, eventBindings, hostPropertyBindings
|
||||
}:{
|
||||
directiveIndex?:number, propertyBindings?:Map<string, ASTWithSource>,
|
||||
eventBindings?:List<EventBinding>, hostPropertyBindings?:Map<string, ASTWithSource>
|
||||
}) {
|
||||
this.directiveIndex = directiveIndex;
|
||||
this.propertyBindings = propertyBindings;
|
||||
|
|
@ -96,11 +103,16 @@ export class ProtoViewDto {
|
|||
static get EMBEDDED_VIEW_TYPE() { return 2; }
|
||||
|
||||
render: RenderProtoViewRef;
|
||||
elementBinders:List<ElementBinder>;
|
||||
elementBinders: List<ElementBinder>;
|
||||
variableBindings: Map<string, string>;
|
||||
type: number;
|
||||
|
||||
constructor({render, elementBinders, variableBindings, type}={}) {
|
||||
constructor({
|
||||
render, elementBinders, variableBindings, type
|
||||
}:{
|
||||
render?:RenderProtoViewRef, elementBinders?:List<ElementBinder>,
|
||||
variableBindings?:Map<string, string>, type?:number
|
||||
}) {
|
||||
this.render = render;
|
||||
this.elementBinders = elementBinders;
|
||||
this.variableBindings = variableBindings;
|
||||
|
|
@ -111,25 +123,31 @@ export class ProtoViewDto {
|
|||
export class DirectiveMetadata {
|
||||
static get DIRECTIVE_TYPE() { return 0; }
|
||||
static get COMPONENT_TYPE() { return 1; }
|
||||
id:any;
|
||||
selector:string;
|
||||
compileChildren:boolean;
|
||||
events:List<string>;
|
||||
hostListeners:Map<string, string>;
|
||||
hostProperties:Map<string, string>;
|
||||
hostAttributes:Map<string, string>;
|
||||
hostActions:Map<string, string>;
|
||||
properties:Map<string, string>;
|
||||
readAttributes:List<string>;
|
||||
type:number;
|
||||
callOnDestroy:boolean;
|
||||
callOnChange:boolean;
|
||||
callOnAllChangesDone:boolean;
|
||||
id: any;
|
||||
selector: string;
|
||||
compileChildren: boolean;
|
||||
events: List<string>;
|
||||
hostListeners: Map<string, string>;
|
||||
hostProperties: Map<string, string>;
|
||||
hostAttributes: Map<string, string>;
|
||||
hostActions: Map<string, string>;
|
||||
properties: Map<string, string>;
|
||||
readAttributes: List<string>;
|
||||
type: number;
|
||||
callOnDestroy: boolean;
|
||||
callOnChange: boolean;
|
||||
callOnAllChangesDone: boolean;
|
||||
changeDetection: string;
|
||||
constructor({id, selector, compileChildren, events, hostListeners, hostProperties,
|
||||
constructor({
|
||||
id, selector, compileChildren, events, hostListeners, hostProperties,
|
||||
hostAttributes, hostActions, properties, readAttributes, type,
|
||||
callOnDestroy, callOnChange, callOnAllChangesDone,
|
||||
changeDetection
|
||||
}:{
|
||||
id?:string, selector?:string, compileChildren?:boolean, events?:List<string>, hostListeners?:Map<string, string>, hostProperties?:Map<string, string>,
|
||||
hostAttributes?:Map<string, string>, hostActions?:Map<string, string>, properties?:Map<string, string>, readAttributes?:List<string>, type?:number,
|
||||
callOnDestroy?:boolean, callOnChange?:boolean, callOnAllChangesDone?:boolean,
|
||||
changeDetection?:string
|
||||
}) {
|
||||
this.id = id;
|
||||
this.selector = selector;
|
||||
|
|
@ -150,12 +168,10 @@ export class DirectiveMetadata {
|
|||
}
|
||||
|
||||
// An opaque reference to a DomProtoView
|
||||
export class RenderProtoViewRef {
|
||||
}
|
||||
export class RenderProtoViewRef {}
|
||||
|
||||
// An opaque reference to a DomView
|
||||
export class RenderViewRef {
|
||||
}
|
||||
export class RenderViewRef {}
|
||||
|
||||
export class ViewDefinition {
|
||||
componentId: string;
|
||||
|
|
@ -163,7 +179,11 @@ export class ViewDefinition {
|
|||
template: string;
|
||||
directives: List<DirectiveMetadata>;
|
||||
|
||||
constructor({componentId, absUrl, template, directives}) {
|
||||
constructor({
|
||||
componentId, absUrl, template, directives
|
||||
}:{
|
||||
componentId?:string, absUrl?:string, template?:string, directives?:List<DirectiveMetadata>
|
||||
}) {
|
||||
this.componentId = componentId;
|
||||
this.absUrl = absUrl;
|
||||
this.template = template;
|
||||
|
|
@ -175,123 +195,120 @@ export class RenderCompiler {
|
|||
/**
|
||||
* Creats a ProtoViewDto that contains a single nested component with the given componentId.
|
||||
*/
|
||||
compileHost(componentId):Promise<ProtoViewDto> { return null; }
|
||||
compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> { return null; }
|
||||
|
||||
/**
|
||||
* Compiles a single DomProtoView. Non recursive so that
|
||||
* we don't need to serialize all possible components over the wire,
|
||||
* but only the needed ones based on previous calls.
|
||||
*/
|
||||
compile(template:ViewDefinition):Promise<ProtoViewDto> { return null; }
|
||||
compile(template: ViewDefinition): Promise<ProtoViewDto> { return null; }
|
||||
}
|
||||
|
||||
export class Renderer {
|
||||
/**
|
||||
* Creates a root host view that includes the given element.
|
||||
* @param {RenderProtoViewRef} hostProtoViewRef a RenderProtoViewRef of type ProtoViewDto.HOST_VIEW_TYPE
|
||||
* @param {any} hostElementSelector css selector for the host element (will be queried against the main document)
|
||||
* @param {RenderProtoViewRef} hostProtoViewRef a RenderProtoViewRef of type
|
||||
* ProtoViewDto.HOST_VIEW_TYPE
|
||||
* @param {any} hostElementSelector css selector for the host element (will be queried against the
|
||||
* main document)
|
||||
* @return {RenderViewRef} the created view
|
||||
*/
|
||||
createRootHostView(hostProtoViewRef:RenderProtoViewRef, hostElementSelector:string):RenderViewRef {
|
||||
createRootHostView(hostProtoViewRef: RenderProtoViewRef,
|
||||
hostElementSelector: string): RenderViewRef {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Detaches a free host view's element from the DOM.
|
||||
*/
|
||||
detachFreeHostView(parentHostViewRef:RenderViewRef, hostViewRef:RenderViewRef) {
|
||||
}
|
||||
detachFreeHostView(parentHostViewRef: RenderViewRef, hostViewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Creates a regular view out of the given ProtoView
|
||||
*/
|
||||
createView(protoViewRef:RenderProtoViewRef):RenderViewRef {
|
||||
return null;
|
||||
}
|
||||
createView(protoViewRef: RenderProtoViewRef): RenderViewRef { return null; }
|
||||
|
||||
/**
|
||||
* Destroys the given view after it has been dehydrated and detached
|
||||
*/
|
||||
destroyView(viewRef:RenderViewRef) {
|
||||
}
|
||||
destroyView(viewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Attaches a componentView into the given hostView at the given element
|
||||
*/
|
||||
attachComponentView(hostViewRef:RenderViewRef, elementIndex:number, componentViewRef:RenderViewRef) {
|
||||
}
|
||||
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number,
|
||||
componentViewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Detaches a componentView into the given hostView at the given element
|
||||
*/
|
||||
detachComponentView(hostViewRef:RenderViewRef, boundElementIndex:number, componentViewRef:RenderViewRef) {
|
||||
}
|
||||
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number,
|
||||
componentViewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Attaches a view into a ViewContainer (in the given parentView at the given element) at the given index.
|
||||
* Attaches a view into a ViewContainer (in the given parentView at the given element) at the
|
||||
* given index.
|
||||
*/
|
||||
attachViewInContainer(parentViewRef:RenderViewRef, boundElementIndex:number, atIndex:number, viewRef:RenderViewRef) {
|
||||
}
|
||||
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
|
||||
viewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Detaches a view into a ViewContainer (in the given parentView at the given element) at the given index.
|
||||
* Detaches a view into a ViewContainer (in the given parentView at the given element) at the
|
||||
* given index.
|
||||
*/
|
||||
// TODO(tbosch): this should return a promise as it can be animated!
|
||||
detachViewInContainer(parentViewRef:RenderViewRef, boundElementIndex:number, atIndex:number, viewRef:RenderViewRef) {
|
||||
}
|
||||
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
|
||||
viewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views inside of the view pool.
|
||||
* Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views
|
||||
* inside of the view pool.
|
||||
*/
|
||||
hydrateView(viewRef:RenderViewRef) {
|
||||
}
|
||||
hydrateView(viewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Dehydrates a view after it has been attached. Hydration/dehydration is used for reusing views inside of the view pool.
|
||||
* Dehydrates a view after it has been attached. Hydration/dehydration is used for reusing views
|
||||
* inside of the view pool.
|
||||
*/
|
||||
dehydrateView(viewRef:RenderViewRef) {
|
||||
}
|
||||
dehydrateView(viewRef: RenderViewRef) {}
|
||||
|
||||
/**
|
||||
* Sets a property on an element.
|
||||
* Note: This will fail if the property was not mentioned previously as a host property
|
||||
* in the ProtoView
|
||||
*/
|
||||
setElementProperty(viewRef:RenderViewRef, elementIndex:number, propertyName:string, propertyValue:any):void {
|
||||
}
|
||||
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string,
|
||||
propertyValue: any) {}
|
||||
|
||||
/**
|
||||
* Calls an action.
|
||||
* Note: This will fail if the action was not mentioned previously as a host action
|
||||
* in the ProtoView
|
||||
*/
|
||||
callAction(viewRef:RenderViewRef, elementIndex:number, actionExpression:string, actionArgs:any):void {
|
||||
}
|
||||
callAction(viewRef: RenderViewRef, elementIndex: number, actionExpression: string,
|
||||
actionArgs: any) {}
|
||||
|
||||
/**
|
||||
* Sets the value of a text node.
|
||||
*/
|
||||
setText(viewRef:RenderViewRef, textNodeIndex:number, text:string):void {
|
||||
}
|
||||
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string) {}
|
||||
|
||||
/**
|
||||
* Sets the dispatcher for all events of the given view
|
||||
*/
|
||||
setEventDispatcher(viewRef:RenderViewRef, dispatcher:any/*api.EventDispatcher*/):void {
|
||||
}
|
||||
setEventDispatcher(viewRef: RenderViewRef, dispatcher: EventDispatcher) {}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A dispatcher for all events happening in a view.
|
||||
*/
|
||||
export class EventDispatcher {
|
||||
export interface EventDispatcher {
|
||||
/**
|
||||
* Called when an event was triggered for a on-* attribute on an element.
|
||||
* @param {Map<string, any>} locals Locals to be used to evaluate the
|
||||
* event expressions
|
||||
*/
|
||||
dispatchEvent(
|
||||
elementIndex:number, eventName:string, locals:Map<string, any>
|
||||
):void {}
|
||||
dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>);
|
||||
}
|
||||
|
|
@ -8,9 +8,9 @@ import {CompileStep} from './compile_step';
|
|||
* Right now it only allows to add a parent element.
|
||||
*/
|
||||
export class CompileControl {
|
||||
_steps:List<CompileStep>;
|
||||
_currentStepIndex:number;
|
||||
_parent:CompileElement;
|
||||
_steps: List<CompileStep>;
|
||||
_currentStepIndex: number;
|
||||
_parent: CompileElement;
|
||||
_results;
|
||||
_additionalChildren;
|
||||
_ignoreCurrentElement: boolean;
|
||||
|
|
@ -24,16 +24,14 @@ export class CompileControl {
|
|||
}
|
||||
|
||||
// only public so that it can be used by compile_pipeline
|
||||
internalProcess(results, startStepIndex, parent:CompileElement, current:CompileElement) {
|
||||
internalProcess(results, startStepIndex, parent: CompileElement, current: CompileElement) {
|
||||
this._results = results;
|
||||
var previousStepIndex = this._currentStepIndex;
|
||||
var previousParent = this._parent;
|
||||
|
||||
this._ignoreCurrentElement = false;
|
||||
|
||||
for (var i = startStepIndex;
|
||||
i < this._steps.length && !this._ignoreCurrentElement;
|
||||
i++) {
|
||||
for (var i = startStepIndex; i < this._steps.length && !this._ignoreCurrentElement; i++) {
|
||||
var step = this._steps[i];
|
||||
this._parent = parent;
|
||||
this._currentStepIndex = i;
|
||||
|
|
@ -53,12 +51,12 @@ export class CompileControl {
|
|||
return localAdditionalChildren;
|
||||
}
|
||||
|
||||
addParent(newElement:CompileElement) {
|
||||
this.internalProcess(this._results, this._currentStepIndex+1, this._parent, newElement);
|
||||
addParent(newElement: CompileElement) {
|
||||
this.internalProcess(this._results, this._currentStepIndex + 1, this._parent, newElement);
|
||||
this._parent = newElement;
|
||||
}
|
||||
|
||||
addChild(element:CompileElement) {
|
||||
addChild(element: CompileElement) {
|
||||
if (isBlank(this._additionalChildren)) {
|
||||
this._additionalChildren = ListWrapper.create();
|
||||
}
|
||||
|
|
@ -71,7 +69,5 @@ export class CompileControl {
|
|||
* When a step calls `ignoreCurrentElement`, no further steps are executed on the current
|
||||
* element and no `CompileElement` is added to the result list.
|
||||
*/
|
||||
ignoreCurrentElement() {
|
||||
this._ignoreCurrentElement = true;
|
||||
}
|
||||
ignoreCurrentElement() { this._ignoreCurrentElement = true; }
|
||||
}
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {int, isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
int,
|
||||
isBlank,
|
||||
isPresent,
|
||||
Type,
|
||||
StringJoiner,
|
||||
assertionsEnabled
|
||||
} from 'angular2/src/facade/lang';
|
||||
|
||||
import {ProtoViewBuilder, ElementBinderBuilder} from '../view/proto_view_builder';
|
||||
|
||||
|
|
@ -11,14 +18,15 @@ import {ProtoViewBuilder, ElementBinderBuilder} from '../view/proto_view_builder
|
|||
*/
|
||||
export class CompileElement {
|
||||
element;
|
||||
_attrs:Map;
|
||||
_classList:List;
|
||||
isViewRoot:boolean;
|
||||
inheritedProtoView:ProtoViewBuilder;
|
||||
distanceToInheritedBinder:number;
|
||||
inheritedElementBinder:ElementBinderBuilder;
|
||||
_attrs: Map<string, string>;
|
||||
_classList: List<string>;
|
||||
isViewRoot: boolean;
|
||||
inheritedProtoView: ProtoViewBuilder;
|
||||
distanceToInheritedBinder: number;
|
||||
inheritedElementBinder: ElementBinderBuilder;
|
||||
compileChildren: boolean;
|
||||
elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of error
|
||||
elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of
|
||||
// error
|
||||
|
||||
constructor(element, compilationUnit = '') {
|
||||
this.element = element;
|
||||
|
|
@ -34,7 +42,7 @@ export class CompileElement {
|
|||
this.distanceToInheritedBinder = 0;
|
||||
this.compileChildren = true;
|
||||
// description is calculated here as compilation steps may change the element
|
||||
var tplDesc = assertionsEnabled()? getElementDescription(element) : null;
|
||||
var tplDesc = assertionsEnabled() ? getElementDescription(element) : null;
|
||||
if (compilationUnit !== '') {
|
||||
this.elementDescription = compilationUnit;
|
||||
if (isPresent(tplDesc)) this.elementDescription += ": " + tplDesc;
|
||||
|
|
@ -50,7 +58,8 @@ export class CompileElement {
|
|||
bindElement() {
|
||||
if (!this.isBound()) {
|
||||
var parentBinder = this.inheritedElementBinder;
|
||||
this.inheritedElementBinder = this.inheritedProtoView.bindElement(this.element, this.elementDescription);
|
||||
this.inheritedElementBinder =
|
||||
this.inheritedProtoView.bindElement(this.element, this.elementDescription);
|
||||
if (isPresent(parentBinder)) {
|
||||
this.inheritedElementBinder.setParent(parentBinder, this.distanceToInheritedBinder);
|
||||
}
|
||||
|
|
@ -59,22 +68,18 @@ export class CompileElement {
|
|||
return this.inheritedElementBinder;
|
||||
}
|
||||
|
||||
refreshAttrs() {
|
||||
this._attrs = null;
|
||||
}
|
||||
refreshAttrs() { this._attrs = null; }
|
||||
|
||||
attrs():Map<string,string> {
|
||||
attrs(): Map<string, string> {
|
||||
if (isBlank(this._attrs)) {
|
||||
this._attrs = DOM.attributeMap(this.element);
|
||||
}
|
||||
return this._attrs;
|
||||
}
|
||||
|
||||
refreshClassList() {
|
||||
this._classList = null;
|
||||
}
|
||||
refreshClassList() { this._classList = null; }
|
||||
|
||||
classList():List<string> {
|
||||
classList(): List<string> {
|
||||
if (isBlank(this._classList)) {
|
||||
this._classList = ListWrapper.create();
|
||||
var elClassList = DOM.classList(this.element);
|
||||
|
|
@ -84,12 +89,11 @@ export class CompileElement {
|
|||
}
|
||||
return this._classList;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// return an HTML representation of an element start tag - without its content
|
||||
// this is used to give contextual information in case of errors
|
||||
function getElementDescription(domElement):string {
|
||||
function getElementDescription(domElement): string {
|
||||
var buf = new StringJoiner();
|
||||
var atts = DOM.attributeMap(domElement);
|
||||
|
||||
|
|
@ -100,9 +104,9 @@ function getElementDescription(domElement):string {
|
|||
addDescriptionAttribute(buf, "id", MapWrapper.get(atts, "id"));
|
||||
addDescriptionAttribute(buf, "class", MapWrapper.get(atts, "class"));
|
||||
MapWrapper.forEach(atts, (attValue, attName) => {
|
||||
if (attName !== "id" && attName !== "class") {
|
||||
addDescriptionAttribute(buf, attName, attValue);
|
||||
}
|
||||
if (attName !== "id" && attName !== "class") {
|
||||
addDescriptionAttribute(buf, attName, attValue);
|
||||
}
|
||||
});
|
||||
|
||||
buf.add(">");
|
||||
|
|
@ -110,12 +114,12 @@ function getElementDescription(domElement):string {
|
|||
}
|
||||
|
||||
|
||||
function addDescriptionAttribute(buffer:StringJoiner, attName:string, attValue) {
|
||||
function addDescriptionAttribute(buffer: StringJoiner, attName: string, attValue) {
|
||||
if (isPresent(attValue)) {
|
||||
if (attValue.length === 0) {
|
||||
buffer.add(' ' + attName);
|
||||
} else {
|
||||
buffer.add(' ' + attName + '="' + attValue + '"');
|
||||
}
|
||||
if (attValue.length === 0) {
|
||||
buffer.add(' ' + attName);
|
||||
} else {
|
||||
buffer.add(' ' + attName + '="' + attValue + '"');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,12 +12,11 @@ import {ProtoViewDto} from '../../api';
|
|||
* all elements in a template.
|
||||
*/
|
||||
export class CompilePipeline {
|
||||
_control:CompileControl;
|
||||
constructor(steps:List<CompileStep>) {
|
||||
this._control = new CompileControl(steps);
|
||||
}
|
||||
_control: CompileControl;
|
||||
constructor(steps: List<CompileStep>) { this._control = new CompileControl(steps); }
|
||||
|
||||
process(rootElement, protoViewType:number = null, compilationCtxtDescription:string = ''):List {
|
||||
process(rootElement, protoViewType: number = null,
|
||||
compilationCtxtDescription: string = ''): List<CompileElement> {
|
||||
if (isBlank(protoViewType)) {
|
||||
protoViewType = ProtoViewDto.COMPONENT_VIEW_TYPE;
|
||||
}
|
||||
|
|
@ -25,13 +24,12 @@ export class CompilePipeline {
|
|||
var rootCompileElement = new CompileElement(rootElement, compilationCtxtDescription);
|
||||
rootCompileElement.inheritedProtoView = new ProtoViewBuilder(rootElement, protoViewType);
|
||||
rootCompileElement.isViewRoot = true;
|
||||
this._process(results, null, rootCompileElement,
|
||||
compilationCtxtDescription
|
||||
);
|
||||
this._process(results, null, rootCompileElement, compilationCtxtDescription);
|
||||
return results;
|
||||
}
|
||||
|
||||
_process(results, parent:CompileElement, current:CompileElement, compilationCtxtDescription:string = '') {
|
||||
_process(results, parent: CompileElement, current: CompileElement,
|
||||
compilationCtxtDescription: string = '') {
|
||||
var additionalChildren = this._control.internalProcess(results, 0, parent, current);
|
||||
|
||||
if (current.compileChildren) {
|
||||
|
|
@ -44,7 +42,7 @@ export class CompilePipeline {
|
|||
var childCompileElement = new CompileElement(node, compilationCtxtDescription);
|
||||
childCompileElement.inheritedProtoView = current.inheritedProtoView;
|
||||
childCompileElement.inheritedElementBinder = current.inheritedElementBinder;
|
||||
childCompileElement.distanceToInheritedBinder = current.distanceToInheritedBinder+1;
|
||||
childCompileElement.distanceToInheritedBinder = current.distanceToInheritedBinder + 1;
|
||||
this._process(results, current, childCompileElement);
|
||||
}
|
||||
node = nextNode;
|
||||
|
|
@ -52,7 +50,7 @@ export class CompilePipeline {
|
|||
}
|
||||
|
||||
if (isPresent(additionalChildren)) {
|
||||
for (var i=0; i<additionalChildren.length; i++) {
|
||||
for (var i = 0; i < additionalChildren.length; i++) {
|
||||
this._process(results, current, additionalChildren[i]);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import * as compileControlModule from './compile_control';
|
|||
* One part of the compile process.
|
||||
* Is guaranteed to be called in depth first order
|
||||
*/
|
||||
export class CompileStep {
|
||||
process(parent:CompileElement, current:CompileElement, control:compileControlModule.CompileControl) {}
|
||||
export interface CompileStep {
|
||||
process(parent: CompileElement, current: CompileElement,
|
||||
control: compileControlModule.CompileControl): void;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ import {ShadowDomCompileStep} from '../shadow_dom/shadow_dom_compile_step';
|
|||
import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
|
||||
|
||||
export class CompileStepFactory {
|
||||
createSteps(template: ViewDefinition, subTaskPromises: List<Promise>):List<CompileStep> {
|
||||
createSteps(template: ViewDefinition, subTaskPromises: List<Promise<any>>): List<CompileStep> {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ export class DefaultStepFactory extends CompileStepFactory {
|
|||
this._shadowDomStrategy = shadowDomStrategy;
|
||||
}
|
||||
|
||||
createSteps(template: ViewDefinition, subTaskPromises: List<Promise>) {
|
||||
createSteps(template: ViewDefinition, subTaskPromises: List<Promise<any>>) {
|
||||
return [
|
||||
new ViewSplitter(this._parser),
|
||||
new PropertyBindingParser(this._parser),
|
||||
|
|
@ -1,10 +1,16 @@
|
|||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
|
||||
import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
|
||||
import {BaseException, isPresent} from 'angular2/src/facade/lang';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
import {ViewDefinition, ProtoViewDto, DirectiveMetadata, RenderCompiler, RenderProtoViewRef} from '../../api';
|
||||
import {
|
||||
ViewDefinition,
|
||||
ProtoViewDto,
|
||||
DirectiveMetadata,
|
||||
RenderCompiler,
|
||||
RenderProtoViewRef
|
||||
} from '../../api';
|
||||
import {CompilePipeline} from './compile_pipeline';
|
||||
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
|
||||
import {CompileStepFactory, DefaultStepFactory} from './compile_step_factory';
|
||||
|
|
@ -26,26 +32,27 @@ export class DomCompiler extends RenderCompiler {
|
|||
this._stepFactory = stepFactory;
|
||||
}
|
||||
|
||||
compile(template: ViewDefinition):Promise<ProtoViewDto> {
|
||||
compile(template: ViewDefinition): Promise<ProtoViewDto> {
|
||||
var tplPromise = this._templateLoader.load(template);
|
||||
return PromiseWrapper.then(tplPromise,
|
||||
(el) => this._compileTemplate(template, el, ProtoViewDto.COMPONENT_VIEW_TYPE),
|
||||
(_) => { throw new BaseException(`Failed to load the template "${template.componentId}"`); }
|
||||
);
|
||||
return PromiseWrapper.then(
|
||||
tplPromise, (el) => this._compileTemplate(template, el, ProtoViewDto.COMPONENT_VIEW_TYPE),
|
||||
(_) => {
|
||||
throw new BaseException(`Failed to load the template "${template.componentId}"`);
|
||||
});
|
||||
}
|
||||
|
||||
compileHost(directiveMetadata: DirectiveMetadata):Promise<ProtoViewDto> {
|
||||
compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> {
|
||||
var hostViewDef = new ViewDefinition({
|
||||
componentId: directiveMetadata.id,
|
||||
absUrl: null,
|
||||
template: null,
|
||||
absUrl: null, template: null,
|
||||
directives: [directiveMetadata]
|
||||
});
|
||||
var element = DOM.createElement(directiveMetadata.selector);
|
||||
return this._compileTemplate(hostViewDef, element, ProtoViewDto.HOST_VIEW_TYPE);
|
||||
}
|
||||
|
||||
_compileTemplate(viewDef: ViewDefinition, tplElement, protoViewType:number):Promise<ProtoViewDto> {
|
||||
_compileTemplate(viewDef: ViewDefinition, tplElement,
|
||||
protoViewType: number): Promise<ProtoViewDto> {
|
||||
var subTaskPromises = [];
|
||||
var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef, subTaskPromises));
|
||||
var compileElements = pipeline.process(tplElement, protoViewType, viewDef.componentId);
|
||||
|
|
@ -62,7 +69,8 @@ export class DomCompiler extends RenderCompiler {
|
|||
|
||||
@Injectable()
|
||||
export class DefaultDomCompiler extends DomCompiler {
|
||||
constructor(parser:Parser, shadowDomStrategy:ShadowDomStrategy, templateLoader: TemplateLoader) {
|
||||
constructor(parser: Parser, shadowDomStrategy: ShadowDomStrategy,
|
||||
templateLoader: TemplateLoader) {
|
||||
super(new DefaultStepFactory(parser, shadowDomStrategy), templateLoader);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
import {isPresent, isBlank, BaseException, assertionsEnabled, RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
isPresent,
|
||||
isBlank,
|
||||
BaseException,
|
||||
assertionsEnabled,
|
||||
RegExpWrapper,
|
||||
StringWrapper
|
||||
} from 'angular2/src/facade/lang';
|
||||
import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {Parser} from 'angular2/change_detection';
|
||||
|
|
@ -16,17 +23,16 @@ import {dashCaseToCamelCase, camelCaseToDashCase, EVENT_TARGET_SEPARATOR} from '
|
|||
* Parses the directives on a single element. Assumes ViewSplitter has already created
|
||||
* <template> elements for template directives.
|
||||
*/
|
||||
export class DirectiveParser extends CompileStep {
|
||||
_selectorMatcher:SelectorMatcher;
|
||||
_directives:List<DirectiveMetadata>;
|
||||
_parser:Parser;
|
||||
export class DirectiveParser implements CompileStep {
|
||||
_selectorMatcher: SelectorMatcher;
|
||||
_directives: List<DirectiveMetadata>;
|
||||
_parser: Parser;
|
||||
|
||||
constructor(parser: Parser, directives:List<DirectiveMetadata>) {
|
||||
super();
|
||||
constructor(parser: Parser, directives: List<DirectiveMetadata>) {
|
||||
this._parser = parser;
|
||||
this._selectorMatcher = new SelectorMatcher();
|
||||
this._directives = directives;
|
||||
for (var i=0; i<directives.length; i++) {
|
||||
for (var i = 0; i < directives.length; i++) {
|
||||
var directive = directives[i];
|
||||
var selector = CssSelector.parse(directive.selector);
|
||||
this._ensureComponentOnlyHasElementSelector(selector, directive);
|
||||
|
|
@ -36,25 +42,25 @@ export class DirectiveParser extends CompileStep {
|
|||
|
||||
_ensureComponentOnlyHasElementSelector(selector, directive) {
|
||||
var isElementSelector = selector.length === 1 && selector[0].isElementSelector();
|
||||
if (! isElementSelector && directive.type === DirectiveMetadata.COMPONENT_TYPE) {
|
||||
throw new BaseException(`Component '${directive.id}' can only have an element selector, but had '${directive.selector}'`);
|
||||
if (!isElementSelector && directive.type === DirectiveMetadata.COMPONENT_TYPE) {
|
||||
throw new BaseException(
|
||||
`Component '${directive.id}' can only have an element selector, but had '${directive.selector}'`);
|
||||
}
|
||||
}
|
||||
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
process(parent: CompileElement, current: CompileElement, control: CompileControl) {
|
||||
var attrs = current.attrs();
|
||||
var classList = current.classList();
|
||||
|
||||
var cssSelector = new CssSelector();
|
||||
var nodeName = DOM.nodeName(current.element);
|
||||
cssSelector.setElement(nodeName);
|
||||
for (var i=0; i < classList.length; i++) {
|
||||
for (var i = 0; i < classList.length; i++) {
|
||||
cssSelector.addClassName(classList[i]);
|
||||
}
|
||||
|
||||
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
||||
cssSelector.addAttribute(attrName, attrValue);
|
||||
});
|
||||
MapWrapper.forEach(attrs,
|
||||
(attrValue, attrName) => { cssSelector.addAttribute(attrName, attrValue); });
|
||||
|
||||
var componentDirective;
|
||||
var foundDirectiveIndices = [];
|
||||
|
|
@ -66,7 +72,8 @@ export class DirectiveParser extends CompileStep {
|
|||
// components need to go first, so it is easier to locate them in the result.
|
||||
ListWrapper.insert(foundDirectiveIndices, 0, directiveIndex);
|
||||
if (isPresent(componentDirective)) {
|
||||
throw new BaseException(`Only one component directive is allowed per element - check ${current.elementDescription}`);
|
||||
throw new BaseException(
|
||||
`Only one component directive is allowed per element - check ${current.elementDescription}`);
|
||||
}
|
||||
componentDirective = directive;
|
||||
elementBinder.setComponentId(directive.id);
|
||||
|
|
@ -95,7 +102,8 @@ export class DirectiveParser extends CompileStep {
|
|||
}
|
||||
if (isPresent(directive.hostProperties)) {
|
||||
MapWrapper.forEach(directive.hostProperties, (hostPropertyName, directivePropertyName) => {
|
||||
this._bindHostProperty(hostPropertyName, directivePropertyName, current, directiveBinderBuilder);
|
||||
this._bindHostProperty(hostPropertyName, directivePropertyName, current,
|
||||
directiveBinderBuilder);
|
||||
});
|
||||
}
|
||||
if (isPresent(directive.hostAttributes)) {
|
||||
|
|
@ -104,9 +112,8 @@ export class DirectiveParser extends CompileStep {
|
|||
});
|
||||
}
|
||||
if (isPresent(directive.readAttributes)) {
|
||||
ListWrapper.forEach(directive.readAttributes, (attrName) => {
|
||||
elementBinder.readAttribute(attrName);
|
||||
});
|
||||
ListWrapper.forEach(directive.readAttributes,
|
||||
(attrName) => { elementBinder.readAttribute(attrName); });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -115,27 +122,21 @@ export class DirectiveParser extends CompileStep {
|
|||
var pipes = this._splitBindConfig(bindConfig);
|
||||
var elProp = ListWrapper.removeAt(pipes, 0);
|
||||
|
||||
var bindingAst = MapWrapper.get(
|
||||
compileElement.bindElement().propertyBindings,
|
||||
dashCaseToCamelCase(elProp)
|
||||
);
|
||||
var bindingAst =
|
||||
MapWrapper.get(compileElement.bindElement().propertyBindings, dashCaseToCamelCase(elProp));
|
||||
|
||||
if (isBlank(bindingAst)) {
|
||||
var attributeValue = MapWrapper.get(compileElement.attrs(), camelCaseToDashCase(elProp));
|
||||
if (isPresent(attributeValue)) {
|
||||
bindingAst = this._parser.wrapLiteralPrimitive(
|
||||
attributeValue,
|
||||
compileElement.elementDescription
|
||||
);
|
||||
bindingAst =
|
||||
this._parser.wrapLiteralPrimitive(attributeValue, compileElement.elementDescription);
|
||||
}
|
||||
}
|
||||
|
||||
// Bindings are optional, so this binding only needs to be set up if an expression is given.
|
||||
if (isPresent(bindingAst)) {
|
||||
var fullExpAstWithBindPipes = this._parser.addPipes(bindingAst, pipes);
|
||||
directiveBinderBuilder.bindProperty(
|
||||
dirProperty, fullExpAstWithBindPipes
|
||||
);
|
||||
directiveBinderBuilder.bindProperty(dirProperty, fullExpAstWithBindPipes);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,24 +155,23 @@ export class DirectiveParser extends CompileStep {
|
|||
directiveBinderBuilder.bindHostAction(actionName, actionExpression, ast);
|
||||
}
|
||||
|
||||
_bindHostProperty(hostPropertyName, directivePropertyName, compileElement, directiveBinderBuilder) {
|
||||
_bindHostProperty(hostPropertyName, directivePropertyName, compileElement,
|
||||
directiveBinderBuilder) {
|
||||
var ast = this._parser.parseBinding(directivePropertyName,
|
||||
`hostProperties of ${compileElement.elementDescription}`);
|
||||
`hostProperties of ${compileElement.elementDescription}`);
|
||||
directiveBinderBuilder.bindHostProperty(hostPropertyName, ast);
|
||||
}
|
||||
|
||||
_addHostAttribute(attrName, attrValue, compileElement) {
|
||||
if (StringWrapper.equals(attrName, 'class')) {
|
||||
ListWrapper.forEach(attrValue.split(' '), (className) => {
|
||||
DOM.addClass(compileElement.element, className);
|
||||
});
|
||||
ListWrapper.forEach(attrValue.split(' '),
|
||||
(className) => { DOM.addClass(compileElement.element, className); });
|
||||
} else if (!DOM.hasAttribute(compileElement.element, attrName)) {
|
||||
DOM.setAttribute(compileElement.element, attrName, attrValue);
|
||||
}
|
||||
}
|
||||
|
||||
_splitBindConfig(bindConfig:string) {
|
||||
_splitBindConfig(bindConfig: string) {
|
||||
return ListWrapper.map(bindConfig.split('|'), (s) => s.trim());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,92 +22,82 @@ var BIND_NAME_REGEXP = RegExpWrapper.create(
|
|||
/**
|
||||
* Parses the property bindings on a single element.
|
||||
*/
|
||||
export class PropertyBindingParser extends CompileStep {
|
||||
_parser:Parser;
|
||||
export class PropertyBindingParser implements CompileStep {
|
||||
_parser: Parser;
|
||||
|
||||
constructor(parser:Parser) {
|
||||
super();
|
||||
this._parser = parser;
|
||||
}
|
||||
constructor(parser: Parser) { this._parser = parser; }
|
||||
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
process(parent: CompileElement, current: CompileElement, control: CompileControl) {
|
||||
var attrs = current.attrs();
|
||||
var newAttrs = MapWrapper.create();
|
||||
|
||||
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
||||
var bindParts = RegExpWrapper.firstMatch(BIND_NAME_REGEXP, attrName);
|
||||
if (isPresent(bindParts)) {
|
||||
if (isPresent(bindParts[1])) { // match: bind-prop
|
||||
if (isPresent(bindParts[1])) { // match: bind-prop
|
||||
this._bindProperty(bindParts[5], attrValue, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[2])) { // match: var-name / var-name="iden" / #name / #name="iden"
|
||||
} else if (isPresent(
|
||||
bindParts[2])) { // match: var-name / var-name="iden" / #name / #name="iden"
|
||||
var identifier = bindParts[5];
|
||||
var value = attrValue == '' ? '\$implicit' : attrValue;
|
||||
this._bindVariable(identifier, value, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[3])) { // match: on-event
|
||||
} else if (isPresent(bindParts[3])) { // match: on-event
|
||||
this._bindEvent(bindParts[5], attrValue, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[4])) { // match: bindon-prop
|
||||
} else if (isPresent(bindParts[4])) { // match: bindon-prop
|
||||
this._bindProperty(bindParts[5], attrValue, current, newAttrs);
|
||||
this._bindAssignmentEvent(bindParts[5], attrValue, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[6])) { // match: [(expr)]
|
||||
} else if (isPresent(bindParts[6])) { // match: [(expr)]
|
||||
this._bindProperty(bindParts[6], attrValue, current, newAttrs);
|
||||
this._bindAssignmentEvent(bindParts[6], attrValue, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[7])) { // match: [expr]
|
||||
} else if (isPresent(bindParts[7])) { // match: [expr]
|
||||
this._bindProperty(bindParts[7], attrValue, current, newAttrs);
|
||||
|
||||
} else if (isPresent(bindParts[8])) { // match: (event)
|
||||
} else if (isPresent(bindParts[8])) { // match: (event)
|
||||
this._bindEvent(bindParts[8], attrValue, current, newAttrs);
|
||||
}
|
||||
} else {
|
||||
var expr = this._parser.parseInterpolation(
|
||||
attrValue, current.elementDescription
|
||||
);
|
||||
var expr = this._parser.parseInterpolation(attrValue, current.elementDescription);
|
||||
if (isPresent(expr)) {
|
||||
this._bindPropertyAst(attrName, expr, current, newAttrs);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
MapWrapper.forEach(newAttrs, (attrValue, attrName) => {
|
||||
MapWrapper.set(attrs, attrName, attrValue);
|
||||
});
|
||||
MapWrapper.forEach(newAttrs,
|
||||
(attrValue, attrName) => { MapWrapper.set(attrs, attrName, attrValue); });
|
||||
}
|
||||
|
||||
_bindVariable(identifier, value, current:CompileElement, newAttrs) {
|
||||
_bindVariable(identifier, value, current: CompileElement, newAttrs) {
|
||||
current.bindElement().bindVariable(dashCaseToCamelCase(identifier), value);
|
||||
MapWrapper.set(newAttrs, identifier, value);
|
||||
}
|
||||
|
||||
_bindProperty(name, expression, current:CompileElement, newAttrs) {
|
||||
this._bindPropertyAst(
|
||||
name,
|
||||
this._parser.parseBinding(expression, current.elementDescription),
|
||||
current,
|
||||
newAttrs
|
||||
);
|
||||
_bindProperty(name, expression, current: CompileElement, newAttrs) {
|
||||
this._bindPropertyAst(name, this._parser.parseBinding(expression, current.elementDescription),
|
||||
current, newAttrs);
|
||||
}
|
||||
|
||||
_bindPropertyAst(name, ast, current:CompileElement, newAttrs) {
|
||||
_bindPropertyAst(name, ast, current: CompileElement, newAttrs) {
|
||||
var binder = current.bindElement();
|
||||
var camelCaseName = dashCaseToCamelCase(name);
|
||||
binder.bindProperty(camelCaseName, ast);
|
||||
MapWrapper.set(newAttrs, name, ast.source);
|
||||
}
|
||||
|
||||
_bindAssignmentEvent(name, expression, current:CompileElement, newAttrs) {
|
||||
_bindAssignmentEvent(name, expression, current: CompileElement, newAttrs) {
|
||||
this._bindEvent(name, `${expression}=$event`, current, newAttrs);
|
||||
}
|
||||
|
||||
_bindEvent(name, expression, current:CompileElement, newAttrs) {
|
||||
_bindEvent(name, expression, current: CompileElement, newAttrs) {
|
||||
current.bindElement().bindEvent(
|
||||
dashCaseToCamelCase(name), this._parser.parseAction(expression, current.elementDescription)
|
||||
);
|
||||
dashCaseToCamelCase(name),
|
||||
this._parser.parseAction(expression, current.elementDescription));
|
||||
// Don't detect directives for event names for now,
|
||||
// so don't add the event name to the CompileElement.attrs
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,17 +1,24 @@
|
|||
import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
|
||||
import {isPresent, isBlank, RegExpWrapper, RegExpMatcherWrapper, StringWrapper, BaseException} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
isPresent,
|
||||
isBlank,
|
||||
RegExpWrapper,
|
||||
RegExpMatcherWrapper,
|
||||
StringWrapper,
|
||||
BaseException
|
||||
} from 'angular2/src/facade/lang';
|
||||
|
||||
const _EMPTY_ATTR_VALUE = '';
|
||||
|
||||
// TODO: Can't use `const` here as
|
||||
// in Dart this is not transpiled into `final` yet...
|
||||
var _SELECTOR_REGEXP =
|
||||
RegExpWrapper.create('(\\:not\\()|' + //":not("
|
||||
'([-\\w]+)|' + // "tag"
|
||||
'(?:\\.([-\\w]+))|' + // ".class"
|
||||
'(?:\\[([-\\w*]+)(?:=([^\\]]*))?\\])|' + // "[name]", "[name=value]" or "[name*=value]"
|
||||
'(?:\\))|' + // ")"
|
||||
'(\\s*,\\s*)'); // ","
|
||||
var _SELECTOR_REGEXP = RegExpWrapper.create(
|
||||
'(\\:not\\()|' + //":not("
|
||||
'([-\\w]+)|' + // "tag"
|
||||
'(?:\\.([-\\w]+))|' + // ".class"
|
||||
'(?:\\[([-\\w*]+)(?:=([^\\]]*))?\\])|' + // "[name]", "[name=value]" or "[name*=value]"
|
||||
'(?:\\))|' + // ")"
|
||||
'(\\s*,\\s*)'); // ","
|
||||
|
||||
/**
|
||||
* A css selector contains an element name,
|
||||
|
|
@ -19,110 +26,107 @@ var _SELECTOR_REGEXP =
|
|||
* of selecting subsets out of them.
|
||||
*/
|
||||
export class CssSelector {
|
||||
element:string;
|
||||
classNames:List;
|
||||
attrs:List;
|
||||
element: string;
|
||||
classNames: List<string>;
|
||||
attrs: List<string>;
|
||||
notSelector: CssSelector;
|
||||
static parse(selector:string): List<CssSelector> {
|
||||
static parse(selector: string): List<CssSelector> {
|
||||
var results = ListWrapper.create();
|
||||
var _addResult = (res, cssSel) => {
|
||||
if (isPresent(cssSel.notSelector) && isBlank(cssSel.element)
|
||||
&& ListWrapper.isEmpty(cssSel.classNames) && ListWrapper.isEmpty(cssSel.attrs)) {
|
||||
if (isPresent(cssSel.notSelector) && isBlank(cssSel.element) &&
|
||||
ListWrapper.isEmpty(cssSel.classNames) && ListWrapper.isEmpty(cssSel.attrs)) {
|
||||
cssSel.element = "*";
|
||||
}
|
||||
ListWrapper.push(res, cssSel);
|
||||
}
|
||||
var cssSelector = new CssSelector();
|
||||
var matcher = RegExpWrapper.matcher(_SELECTOR_REGEXP, selector);
|
||||
var match;
|
||||
var current = cssSelector;
|
||||
while (isPresent(match = RegExpMatcherWrapper.next(matcher))) {
|
||||
if (isPresent(match[1])) {
|
||||
if (isPresent(cssSelector.notSelector)) {
|
||||
throw new BaseException('Nesting :not is not allowed in a selector');
|
||||
}
|
||||
current.notSelector = new CssSelector();
|
||||
current = current.notSelector;
|
||||
}
|
||||
if (isPresent(match[2])) {
|
||||
current.setElement(match[2]);
|
||||
}
|
||||
if (isPresent(match[3])) {
|
||||
current.addClassName(match[3]);
|
||||
}
|
||||
if (isPresent(match[4])) {
|
||||
current.addAttribute(match[4], match[5]);
|
||||
}
|
||||
if (isPresent(match[6])) {
|
||||
_addResult(results, cssSelector);
|
||||
cssSelector = current = new CssSelector();
|
||||
}
|
||||
}
|
||||
_addResult(results, cssSelector);
|
||||
return results;
|
||||
} ListWrapper.push(res, cssSel);
|
||||
}
|
||||
var cssSelector = new CssSelector();
|
||||
var matcher = RegExpWrapper.matcher(_SELECTOR_REGEXP, selector);
|
||||
var match;
|
||||
var current = cssSelector;
|
||||
while (isPresent(match = RegExpMatcherWrapper.next(matcher))) {
|
||||
if (isPresent(match[1])) {
|
||||
if (isPresent(cssSelector.notSelector)) {
|
||||
throw new BaseException('Nesting :not is not allowed in a selector');
|
||||
}
|
||||
current.notSelector = new CssSelector();
|
||||
current = current.notSelector;
|
||||
}
|
||||
if (isPresent(match[2])) {
|
||||
current.setElement(match[2]);
|
||||
}
|
||||
if (isPresent(match[3])) {
|
||||
current.addClassName(match[3]);
|
||||
}
|
||||
if (isPresent(match[4])) {
|
||||
current.addAttribute(match[4], match[5]);
|
||||
}
|
||||
if (isPresent(match[6])) {
|
||||
_addResult(results, cssSelector);
|
||||
cssSelector = current = new CssSelector();
|
||||
}
|
||||
}
|
||||
_addResult(results, cssSelector);
|
||||
return results;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.element = null;
|
||||
this.classNames = ListWrapper.create();
|
||||
this.attrs = ListWrapper.create();
|
||||
this.notSelector = null;
|
||||
}
|
||||
constructor() {
|
||||
this.element = null;
|
||||
this.classNames = ListWrapper.create();
|
||||
this.attrs = ListWrapper.create();
|
||||
this.notSelector = null;
|
||||
}
|
||||
|
||||
isElementSelector():boolean {
|
||||
return isPresent(this.element) &&
|
||||
ListWrapper.isEmpty(this.classNames) &&
|
||||
ListWrapper.isEmpty(this.attrs) &&
|
||||
isBlank(this.notSelector);
|
||||
}
|
||||
isElementSelector(): boolean {
|
||||
return isPresent(this.element) && ListWrapper.isEmpty(this.classNames) &&
|
||||
ListWrapper.isEmpty(this.attrs) && isBlank(this.notSelector);
|
||||
}
|
||||
|
||||
setElement(element:string = null) {
|
||||
if (isPresent(element)) {
|
||||
element = element.toLowerCase();
|
||||
setElement(element: string = null) {
|
||||
if (isPresent(element)) {
|
||||
element = element.toLowerCase();
|
||||
}
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) {
|
||||
ListWrapper.push(this.attrs, name.toLowerCase());
|
||||
if (isPresent(value)) {
|
||||
value = value.toLowerCase();
|
||||
} else {
|
||||
value = _EMPTY_ATTR_VALUE;
|
||||
}
|
||||
ListWrapper.push(this.attrs, value);
|
||||
}
|
||||
|
||||
addClassName(name: string) {
|
||||
ListWrapper.push(this.classNames, name.toLowerCase());
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
var res = '';
|
||||
if (isPresent(this.element)) {
|
||||
res += this.element;
|
||||
}
|
||||
if (isPresent(this.classNames)) {
|
||||
for (var i = 0; i < this.classNames.length; i++) {
|
||||
res += '.' + this.classNames[i];
|
||||
}
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
addAttribute(name:string, value:string = _EMPTY_ATTR_VALUE) {
|
||||
ListWrapper.push(this.attrs, name.toLowerCase());
|
||||
if (isPresent(value)) {
|
||||
value = value.toLowerCase();
|
||||
} else {
|
||||
value = _EMPTY_ATTR_VALUE;
|
||||
}
|
||||
ListWrapper.push(this.attrs, value);
|
||||
}
|
||||
|
||||
addClassName(name:string) {
|
||||
ListWrapper.push(this.classNames, name.toLowerCase());
|
||||
}
|
||||
|
||||
toString():string {
|
||||
var res = '';
|
||||
if (isPresent(this.element)) {
|
||||
res += this.element;
|
||||
}
|
||||
if (isPresent(this.classNames)) {
|
||||
for (var i=0; i<this.classNames.length; i++) {
|
||||
res += '.' + this.classNames[i];
|
||||
if (isPresent(this.attrs)) {
|
||||
for (var i = 0; i < this.attrs.length;) {
|
||||
var attrName = this.attrs[i++];
|
||||
var attrValue = this.attrs[i++];
|
||||
res += '[' + attrName;
|
||||
if (attrValue.length > 0) {
|
||||
res += '=' + attrValue;
|
||||
}
|
||||
res += ']';
|
||||
}
|
||||
if (isPresent(this.attrs)) {
|
||||
for (var i=0; i<this.attrs.length;) {
|
||||
var attrName = this.attrs[i++];
|
||||
var attrValue = this.attrs[i++]
|
||||
res += '[' + attrName;
|
||||
if (attrValue.length > 0) {
|
||||
res += '=' + attrValue;
|
||||
}
|
||||
res += ']';
|
||||
}
|
||||
}
|
||||
if (isPresent(this.notSelector)) {
|
||||
res += ":not(" + this.notSelector.toString() + ")";
|
||||
}
|
||||
return res;
|
||||
}
|
||||
if (isPresent(this.notSelector)) {
|
||||
res += ":not(" + this.notSelector.toString() + ")";
|
||||
}
|
||||
return res;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -130,13 +134,20 @@ export class CssSelector {
|
|||
* are contained in a given CssSelector.
|
||||
*/
|
||||
export class SelectorMatcher {
|
||||
_elementMap:Map;
|
||||
_elementPartialMap:Map;
|
||||
_classMap:Map;
|
||||
_classPartialMap:Map;
|
||||
_attrValueMap:Map;
|
||||
_attrValuePartialMap:Map;
|
||||
_listContexts:List;
|
||||
static createNotMatcher(notSelector:CssSelector) {
|
||||
var notMatcher = new SelectorMatcher();
|
||||
notMatcher._addSelectable(notSelector, null, null);
|
||||
return notMatcher;
|
||||
}
|
||||
|
||||
private _elementMap: Map<string, string>;
|
||||
private _elementPartialMap: Map<string, string>;
|
||||
private _classMap: Map<string, string>;
|
||||
private _classPartialMap: Map<string, string>;
|
||||
private _attrValueMap: Map<string, string>;
|
||||
private _attrValuePartialMap: Map<string, string>;
|
||||
private _listContexts: List<SelectorListContext>;
|
||||
|
||||
constructor() {
|
||||
this._elementMap = MapWrapper.create();
|
||||
this._elementPartialMap = MapWrapper.create();
|
||||
|
|
@ -150,14 +161,14 @@ export class SelectorMatcher {
|
|||
this._listContexts = ListWrapper.create();
|
||||
}
|
||||
|
||||
addSelectables(cssSelectors:List<CssSelector>, callbackCtxt) {
|
||||
addSelectables(cssSelectors: List<CssSelector>, callbackCtxt: any) {
|
||||
var listContext = null;
|
||||
if (cssSelectors.length > 1) {
|
||||
listContext= new SelectorListContext(cssSelectors);
|
||||
listContext = new SelectorListContext(cssSelectors);
|
||||
ListWrapper.push(this._listContexts, listContext);
|
||||
}
|
||||
for (var i = 0; i < cssSelectors.length; i++) {
|
||||
this.addSelectable(cssSelectors[i], callbackCtxt, listContext);
|
||||
this._addSelectable(cssSelectors[i], callbackCtxt, listContext);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +177,7 @@ export class SelectorMatcher {
|
|||
* @param cssSelector A css selector
|
||||
* @param callbackCtxt An opaque object that will be given to the callback of the `match` function
|
||||
*/
|
||||
addSelectable(cssSelector, callbackCtxt, listContext: SelectorListContext) {
|
||||
private _addSelectable(cssSelector: CssSelector, callbackCtxt: any, listContext: SelectorListContext) {
|
||||
var matcher = this;
|
||||
var element = cssSelector.element;
|
||||
var classNames = cssSelector.classNames;
|
||||
|
|
@ -184,7 +195,7 @@ export class SelectorMatcher {
|
|||
}
|
||||
|
||||
if (isPresent(classNames)) {
|
||||
for (var index = 0; index<classNames.length; index++) {
|
||||
for (var index = 0; index < classNames.length; index++) {
|
||||
var isTerminal = attrs.length === 0 && index === classNames.length - 1;
|
||||
var className = classNames[index];
|
||||
if (isTerminal) {
|
||||
|
|
@ -196,12 +207,12 @@ export class SelectorMatcher {
|
|||
}
|
||||
|
||||
if (isPresent(attrs)) {
|
||||
for (var index = 0; index<attrs.length; ) {
|
||||
for (var index = 0; index < attrs.length;) {
|
||||
var isTerminal = index === attrs.length - 2;
|
||||
var attrName = attrs[index++];
|
||||
var attrValue = attrs[index++];
|
||||
var map = isTerminal ? matcher._attrValueMap : matcher._attrValuePartialMap;
|
||||
var valuesMap = MapWrapper.get(map, attrName)
|
||||
var valuesMap = MapWrapper.get(map, attrName);
|
||||
if (isBlank(valuesMap)) {
|
||||
valuesMap = MapWrapper.create();
|
||||
MapWrapper.set(map, attrName, valuesMap);
|
||||
|
|
@ -215,8 +226,8 @@ export class SelectorMatcher {
|
|||
}
|
||||
}
|
||||
|
||||
_addTerminal(map:Map<string,string>, name:string, selectable) {
|
||||
var terminalList = MapWrapper.get(map, name)
|
||||
private _addTerminal(map: Map<string, string>, name: string, selectable: SelectorContext) {
|
||||
var terminalList = MapWrapper.get(map, name);
|
||||
if (isBlank(terminalList)) {
|
||||
terminalList = ListWrapper.create();
|
||||
MapWrapper.set(map, name, terminalList);
|
||||
|
|
@ -224,8 +235,8 @@ export class SelectorMatcher {
|
|||
ListWrapper.push(terminalList, selectable);
|
||||
}
|
||||
|
||||
_addPartial(map:Map<string,string>, name:string) {
|
||||
var matcher = MapWrapper.get(map, name)
|
||||
private _addPartial(map: Map<string, string>, name: string) {
|
||||
var matcher = MapWrapper.get(map, name);
|
||||
if (isBlank(matcher)) {
|
||||
matcher = new SelectorMatcher();
|
||||
MapWrapper.set(map, name, matcher);
|
||||
|
|
@ -240,7 +251,7 @@ export class SelectorMatcher {
|
|||
* @param matchedCallback This callback will be called with the object handed into `addSelectable`
|
||||
* @return boolean true if a match was found
|
||||
*/
|
||||
match(cssSelector:CssSelector, matchedCallback:Function):boolean {
|
||||
match(cssSelector: CssSelector, matchedCallback /*: (CssSelector, any) => void*/): boolean {
|
||||
var result = false;
|
||||
var element = cssSelector.element;
|
||||
var classNames = cssSelector.classNames;
|
||||
|
|
@ -251,35 +262,42 @@ export class SelectorMatcher {
|
|||
}
|
||||
|
||||
result = this._matchTerminal(this._elementMap, element, cssSelector, matchedCallback) || result;
|
||||
result = this._matchPartial(this._elementPartialMap, element, cssSelector, matchedCallback) || result;
|
||||
result = this._matchPartial(this._elementPartialMap, element, cssSelector, matchedCallback) ||
|
||||
result;
|
||||
|
||||
if (isPresent(classNames)) {
|
||||
for (var index = 0; index<classNames.length; index++) {
|
||||
for (var index = 0; index < classNames.length; index++) {
|
||||
var className = classNames[index];
|
||||
result = this._matchTerminal(this._classMap, className, cssSelector, matchedCallback) || result;
|
||||
result = this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) || result;
|
||||
result =
|
||||
this._matchTerminal(this._classMap, className, cssSelector, matchedCallback) || result;
|
||||
result =
|
||||
this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) ||
|
||||
result;
|
||||
}
|
||||
}
|
||||
|
||||
if (isPresent(attrs)) {
|
||||
for (var index = 0; index<attrs.length;) {
|
||||
for (var index = 0; index < attrs.length;) {
|
||||
var attrName = attrs[index++];
|
||||
var attrValue = attrs[index++];
|
||||
|
||||
var valuesMap = MapWrapper.get(this._attrValueMap, attrName);
|
||||
if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
|
||||
result = this._matchTerminal(valuesMap, _EMPTY_ATTR_VALUE, cssSelector, matchedCallback) || result;
|
||||
result =
|
||||
this._matchTerminal(valuesMap, _EMPTY_ATTR_VALUE, cssSelector, matchedCallback) ||
|
||||
result;
|
||||
}
|
||||
result = this._matchTerminal(valuesMap, attrValue, cssSelector, matchedCallback) || result;
|
||||
|
||||
valuesMap = MapWrapper.get(this._attrValuePartialMap, attrName)
|
||||
valuesMap = MapWrapper.get(this._attrValuePartialMap, attrName);
|
||||
result = this._matchPartial(valuesMap, attrValue, cssSelector, matchedCallback) || result;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
_matchTerminal(map:Map<string,string> = null, name, cssSelector, matchedCallback):boolean {
|
||||
_matchTerminal(map: Map<string, string>, name, cssSelector: CssSelector,
|
||||
matchedCallback /*: (CssSelector, any) => void*/): boolean {
|
||||
if (isBlank(map) || isBlank(name)) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -294,18 +312,19 @@ export class SelectorMatcher {
|
|||
}
|
||||
var selectable;
|
||||
var result = false;
|
||||
for (var index=0; index<selectables.length; index++) {
|
||||
for (var index = 0; index < selectables.length; index++) {
|
||||
selectable = selectables[index];
|
||||
result = selectable.finalize(cssSelector, matchedCallback) || result;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
_matchPartial(map:Map<string,string> = null, name, cssSelector, matchedCallback):boolean {
|
||||
_matchPartial(map: Map<string, string>, name, cssSelector: CssSelector,
|
||||
matchedCallback /*: (CssSelector, any) => void*/): boolean {
|
||||
if (isBlank(map) || isBlank(name)) {
|
||||
return false;
|
||||
}
|
||||
var nestedSelector = MapWrapper.get(map, name)
|
||||
var nestedSelector = MapWrapper.get(map, name);
|
||||
if (isBlank(nestedSelector)) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -321,7 +340,7 @@ class SelectorListContext {
|
|||
selectors: List<CssSelector>;
|
||||
alreadyMatched: boolean;
|
||||
|
||||
constructor(selectors:List<CssSelector>) {
|
||||
constructor(selectors: List<CssSelector>) {
|
||||
this.selectors = selectors;
|
||||
this.alreadyMatched = false;
|
||||
}
|
||||
|
|
@ -329,26 +348,27 @@ class SelectorListContext {
|
|||
|
||||
// Store context to pass back selector and context when a selector is matched
|
||||
class SelectorContext {
|
||||
selector:CssSelector;
|
||||
notSelector:CssSelector;
|
||||
cbContext; // callback context
|
||||
selector: CssSelector;
|
||||
notSelector: CssSelector;
|
||||
cbContext; // callback context
|
||||
listContext: SelectorListContext;
|
||||
|
||||
constructor(selector:CssSelector, cbContext, listContext: SelectorListContext) {
|
||||
constructor(selector: CssSelector, cbContext: any, listContext: SelectorListContext) {
|
||||
this.selector = selector;
|
||||
this.notSelector = selector.notSelector;
|
||||
this.cbContext = cbContext;
|
||||
this.listContext = listContext;
|
||||
}
|
||||
|
||||
finalize(cssSelector: CssSelector, callback) {
|
||||
finalize(cssSelector: CssSelector, callback /*: (CssSelector, any) => void*/) {
|
||||
var result = true;
|
||||
if (isPresent(this.notSelector) && (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
|
||||
var notMatcher = new SelectorMatcher();
|
||||
notMatcher.addSelectable(this.notSelector, null, null);
|
||||
if (isPresent(this.notSelector) &&
|
||||
(isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
|
||||
var notMatcher = SelectorMatcher.createNotMatcher(this.notSelector);
|
||||
result = !notMatcher.match(cssSelector, null);
|
||||
}
|
||||
if (result && isPresent(callback) && (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
|
||||
if (result && isPresent(callback) &&
|
||||
(isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
|
||||
if (isPresent(this.listContext)) {
|
||||
this.listContext.alreadyMatched = true;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {isBlank, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
|
||||
import {Map, MapWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
|
||||
import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
|
||||
|
|
@ -16,14 +16,14 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
|
|||
@Injectable()
|
||||
export class TemplateLoader {
|
||||
_xhr: XHR;
|
||||
_htmlCache: StringMap;
|
||||
_htmlCache: StringMap<string, /*element*/ any>;
|
||||
|
||||
constructor(xhr: XHR, urlResolver: UrlResolver) {
|
||||
this._xhr = xhr;
|
||||
this._htmlCache = StringMapWrapper.create();
|
||||
}
|
||||
|
||||
load(template: ViewDefinition):Promise {
|
||||
load(template: ViewDefinition): Promise</*element*/ any> {
|
||||
if (isPresent(template.template)) {
|
||||
return PromiseWrapper.resolve(DOM.createTemplate(template.template));
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ export class TemplateLoader {
|
|||
var promise = StringMapWrapper.get(this._htmlCache, url);
|
||||
|
||||
if (isBlank(promise)) {
|
||||
promise = this._xhr.get(url).then(function (html) {
|
||||
promise = this._xhr.get(url).then(function(html) {
|
||||
var template = DOM.createTemplate(html);
|
||||
return template;
|
||||
});
|
||||
|
|
@ -41,7 +41,7 @@ export class TemplateLoader {
|
|||
|
||||
// We need to clone the result as others might change it
|
||||
// (e.g. the compiler).
|
||||
return promise.then( (tplElement) => DOM.clone(tplElement) );
|
||||
return promise.then((tplElement) => DOM.clone(tplElement));
|
||||
}
|
||||
|
||||
throw new BaseException('View should have either the url or template property set');
|
||||
|
|
@ -10,21 +10,18 @@ import {CompileControl} from './compile_control';
|
|||
/**
|
||||
* Parses interpolations in direct text child nodes of the current element.
|
||||
*/
|
||||
export class TextInterpolationParser extends CompileStep {
|
||||
_parser:Parser;
|
||||
export class TextInterpolationParser implements CompileStep {
|
||||
_parser: Parser;
|
||||
|
||||
constructor(parser:Parser) {
|
||||
super();
|
||||
this._parser = parser;
|
||||
}
|
||||
constructor(parser: Parser) { this._parser = parser; }
|
||||
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
process(parent: CompileElement, current: CompileElement, control: CompileControl) {
|
||||
if (!current.compileChildren) {
|
||||
return;
|
||||
}
|
||||
var element = current.element;
|
||||
var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
|
||||
for (var i=0; i<childNodes.length; i++) {
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
var node = childNodes[i];
|
||||
if (DOM.isTextNode(node)) {
|
||||
var text = DOM.nodeValue(node);
|
||||
|
|
@ -25,28 +25,26 @@ import {dashCaseToCamelCase} from '../util';
|
|||
* as we want to do locate elements with bindings using `getElementsByClassName` later on,
|
||||
* which should not descend into the nested view.
|
||||
*/
|
||||
export class ViewSplitter extends CompileStep {
|
||||
_parser:Parser;
|
||||
export class ViewSplitter implements CompileStep {
|
||||
_parser: Parser;
|
||||
|
||||
constructor(parser:Parser) {
|
||||
super();
|
||||
this._parser = parser;
|
||||
}
|
||||
constructor(parser: Parser) { this._parser = parser; }
|
||||
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
process(parent: CompileElement, current: CompileElement, control: CompileControl) {
|
||||
var attrs = current.attrs();
|
||||
var templateBindings = MapWrapper.get(attrs, 'template');
|
||||
var hasTemplateBinding = isPresent(templateBindings);
|
||||
|
||||
// look for template shortcuts such as *ng-if="condition" and treat them as template="if condition"
|
||||
// look for template shortcuts such as *ng-if="condition" and treat them as template="if
|
||||
// condition"
|
||||
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
||||
if (StringWrapper.startsWith(attrName, '*')) {
|
||||
var key = StringWrapper.substring(attrName, 1); // remove the star
|
||||
if (hasTemplateBinding) {
|
||||
// 2nd template binding detected
|
||||
throw new BaseException(`Only one template directive per element is allowed: ` +
|
||||
`${templateBindings} and ${key} cannot be used simultaneously ` +
|
||||
`in ${current.elementDescription}`);
|
||||
`${templateBindings} and ${key} cannot be used simultaneously ` +
|
||||
`in ${current.elementDescription}`);
|
||||
} else {
|
||||
templateBindings = (attrValue.length == 0) ? key : key + ' ' + attrValue;
|
||||
hasTemplateBinding = true;
|
||||
|
|
@ -67,7 +65,8 @@ export class ViewSplitter extends CompileStep {
|
|||
this._moveChildNodes(DOM.content(current.element), DOM.content(viewRoot.element));
|
||||
control.addChild(viewRoot);
|
||||
}
|
||||
} if (hasTemplateBinding) {
|
||||
}
|
||||
if (hasTemplateBinding) {
|
||||
var newParent = new CompileElement(DOM.createTemplate(''));
|
||||
newParent.inheritedProtoView = current.inheritedProtoView;
|
||||
newParent.inheritedElementBinder = current.inheritedElementBinder;
|
||||
|
|
@ -102,19 +101,17 @@ export class ViewSplitter extends CompileStep {
|
|||
DOM.appendChild(newParentElement, currentElement);
|
||||
}
|
||||
|
||||
_parseTemplateBindings(templateBindings:string, compileElement:CompileElement) {
|
||||
var bindings = this._parser.parseTemplateBindings(templateBindings, compileElement.elementDescription);
|
||||
for (var i=0; i<bindings.length; i++) {
|
||||
_parseTemplateBindings(templateBindings: string, compileElement: CompileElement) {
|
||||
var bindings =
|
||||
this._parser.parseTemplateBindings(templateBindings, compileElement.elementDescription);
|
||||
for (var i = 0; i < bindings.length; i++) {
|
||||
var binding = bindings[i];
|
||||
if (binding.keyIsVar) {
|
||||
compileElement.bindElement().bindVariable(
|
||||
dashCaseToCamelCase(binding.key), binding.name
|
||||
);
|
||||
compileElement.bindElement().bindVariable(dashCaseToCamelCase(binding.key), binding.name);
|
||||
MapWrapper.set(compileElement.attrs(), binding.key, binding.name);
|
||||
} else if (isPresent(binding.expression)) {
|
||||
compileElement.bindElement().bindProperty(
|
||||
dashCaseToCamelCase(binding.key), binding.expression
|
||||
);
|
||||
compileElement.bindElement().bindProperty(dashCaseToCamelCase(binding.key),
|
||||
binding.expression);
|
||||
MapWrapper.set(compileElement.attrs(), binding.key, binding.expression.source);
|
||||
} else {
|
||||
DOM.setAttribute(compileElement.element, binding.key, '');
|
||||
|
|
@ -6,7 +6,7 @@ import {DirectiveMetadata} from 'angular2/src/render/api';
|
|||
* Converts a [DirectiveMetadata] to a map representation. This creates a copy,
|
||||
* that is, subsequent changes to `meta` will not be mirrored in the map.
|
||||
*/
|
||||
export function directiveMetadataToMap(meta: DirectiveMetadata): Map {
|
||||
export function directiveMetadataToMap(meta: DirectiveMetadata): Map<string, any> {
|
||||
return MapWrapper.createFromPairs([
|
||||
['id', meta.id],
|
||||
['selector', meta.selector],
|
||||
|
|
@ -27,18 +27,18 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map {
|
|||
* [DirectiveMetadata] object. This creates a copy, that is, subsequent changes
|
||||
* to `map` will not be mirrored in the [DirectiveMetadata] object.
|
||||
*/
|
||||
export function directiveMetadataFromMap(map: Map): DirectiveMetadata {
|
||||
export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetadata {
|
||||
return new DirectiveMetadata({
|
||||
id: MapWrapper.get(map, 'id'),
|
||||
selector: MapWrapper.get(map, 'selector'),
|
||||
compileChildren: MapWrapper.get(map, 'compileChildren'),
|
||||
hostListeners: _cloneIfPresent(MapWrapper.get(map, 'hostListeners')),
|
||||
hostProperties: _cloneIfPresent(MapWrapper.get(map, 'hostProperties')),
|
||||
hostActions: _cloneIfPresent(MapWrapper.get(map, 'hostActions')),
|
||||
hostAttributes: _cloneIfPresent(MapWrapper.get(map, 'hostAttributes')),
|
||||
properties: _cloneIfPresent(MapWrapper.get(map, 'properties')),
|
||||
readAttributes: _cloneIfPresent(MapWrapper.get(map, 'readAttributes')),
|
||||
type: MapWrapper.get(map, 'type')
|
||||
id:<string>MapWrapper.get(map, 'id'),
|
||||
selector:<string>MapWrapper.get(map, 'selector'),
|
||||
compileChildren:<boolean>MapWrapper.get(map, 'compileChildren'),
|
||||
hostListeners:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostListeners')),
|
||||
hostProperties:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostProperties')),
|
||||
hostActions:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostActions')),
|
||||
hostAttributes:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostAttributes')),
|
||||
properties:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
|
||||
readAttributes:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'readAttributes')),
|
||||
type:<number>MapWrapper.get(map, 'type')
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Inject, Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Inject, Injectable} from 'angular2/di';
|
||||
import {int, isPresent, isBlank, BaseException, RegExpWrapper} from 'angular2/src/facade/lang';
|
||||
import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
|
||||
|
||||
|
|
@ -21,18 +21,20 @@ export const DOCUMENT_TOKEN = 'DocumentToken';
|
|||
|
||||
@Injectable()
|
||||
export class DomRenderer extends Renderer {
|
||||
_eventManager:EventManager;
|
||||
_shadowDomStrategy:ShadowDomStrategy;
|
||||
_eventManager: EventManager;
|
||||
_shadowDomStrategy: ShadowDomStrategy;
|
||||
_document;
|
||||
|
||||
constructor(eventManager:EventManager, shadowDomStrategy:ShadowDomStrategy, @Inject(DOCUMENT_TOKEN) document) {
|
||||
constructor(eventManager: EventManager, shadowDomStrategy: ShadowDomStrategy,
|
||||
@Inject(DOCUMENT_TOKEN) document) {
|
||||
super();
|
||||
this._eventManager = eventManager;
|
||||
this._shadowDomStrategy = shadowDomStrategy;
|
||||
this._document = document;
|
||||
}
|
||||
|
||||
createRootHostView(hostProtoViewRef:RenderProtoViewRef, hostElementSelector:string):RenderViewRef {
|
||||
createRootHostView(hostProtoViewRef: RenderProtoViewRef,
|
||||
hostElementSelector: string): RenderViewRef {
|
||||
var hostProtoView = resolveInternalDomProtoView(hostProtoViewRef);
|
||||
var element = DOM.querySelector(this._document, hostElementSelector);
|
||||
if (isBlank(element)) {
|
||||
|
|
@ -41,21 +43,22 @@ export class DomRenderer extends Renderer {
|
|||
return new DomViewRef(this._createView(hostProtoView, element));
|
||||
}
|
||||
|
||||
detachFreeHostView(parentHostViewRef:RenderViewRef, hostViewRef:RenderViewRef) {
|
||||
detachFreeHostView(parentHostViewRef: RenderViewRef, hostViewRef: RenderViewRef) {
|
||||
var hostView = resolveInternalDomView(hostViewRef);
|
||||
this._removeViewNodes(hostView);
|
||||
}
|
||||
|
||||
createView(protoViewRef:RenderProtoViewRef):RenderViewRef {
|
||||
createView(protoViewRef: RenderProtoViewRef): RenderViewRef {
|
||||
var protoView = resolveInternalDomProtoView(protoViewRef);
|
||||
return new DomViewRef(this._createView(protoView, null));
|
||||
}
|
||||
|
||||
destroyView(view:RenderViewRef) {
|
||||
destroyView(view: RenderViewRef) {
|
||||
// noop for now
|
||||
}
|
||||
|
||||
attachComponentView(hostViewRef:RenderViewRef, elementIndex:number, componentViewRef:RenderViewRef) {
|
||||
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number,
|
||||
componentViewRef: RenderViewRef) {
|
||||
var hostView = resolveInternalDomView(hostViewRef);
|
||||
var componentView = resolveInternalDomView(componentViewRef);
|
||||
var element = hostView.boundElements[elementIndex];
|
||||
|
|
@ -69,19 +72,20 @@ export class DomRenderer extends Renderer {
|
|||
componentView.shadowRoot = shadowRoot;
|
||||
}
|
||||
|
||||
setComponentViewRootNodes(componentViewRef:RenderViewRef, rootNodes:List) {
|
||||
setComponentViewRootNodes(componentViewRef: RenderViewRef, rootNodes: List</*node*/ any>) {
|
||||
var componentView = resolveInternalDomView(componentViewRef);
|
||||
this._removeViewNodes(componentView);
|
||||
componentView.rootNodes = rootNodes;
|
||||
this._moveViewNodesIntoParent(componentView.shadowRoot, componentView);
|
||||
}
|
||||
|
||||
getHostElement(hostViewRef:RenderViewRef) {
|
||||
getHostElement(hostViewRef: RenderViewRef) {
|
||||
var hostView = resolveInternalDomView(hostViewRef);
|
||||
return hostView.boundElements[0];
|
||||
}
|
||||
|
||||
detachComponentView(hostViewRef:RenderViewRef, boundElementIndex:number, componentViewRef:RenderViewRef) {
|
||||
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number,
|
||||
componentViewRef: RenderViewRef) {
|
||||
var hostView = resolveInternalDomView(hostViewRef);
|
||||
var componentView = resolveInternalDomView(componentViewRef);
|
||||
this._removeViewNodes(componentView);
|
||||
|
|
@ -93,7 +97,8 @@ export class DomRenderer extends Renderer {
|
|||
componentView.shadowRoot = null;
|
||||
}
|
||||
|
||||
attachViewInContainer(parentViewRef:RenderViewRef, boundElementIndex:number, atIndex:number, viewRef:RenderViewRef) {
|
||||
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
|
||||
viewRef: RenderViewRef) {
|
||||
var parentView = resolveInternalDomView(parentViewRef);
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
var viewContainer = this._getOrCreateViewContainer(parentView, boundElementIndex);
|
||||
|
|
@ -118,7 +123,8 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
detachViewInContainer(parentViewRef:RenderViewRef, boundElementIndex:number, atIndex:number, viewRef:RenderViewRef) {
|
||||
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
|
||||
viewRef: RenderViewRef) {
|
||||
var parentView = resolveInternalDomView(parentViewRef);
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
var viewContainer = parentView.viewContainers[boundElementIndex];
|
||||
|
|
@ -137,7 +143,7 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
hydrateView(viewRef:RenderViewRef) {
|
||||
hydrateView(viewRef: RenderViewRef) {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
if (view.hydrated) throw new BaseException('The view is already hydrated.');
|
||||
view.hydrated = true;
|
||||
|
|
@ -149,7 +155,7 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
//add global events
|
||||
// add global events
|
||||
view.eventHandlerRemovers = ListWrapper.create();
|
||||
var binders = view.proto.elementBinders;
|
||||
for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
|
||||
|
|
@ -157,7 +163,8 @@ export class DomRenderer extends Renderer {
|
|||
if (isPresent(binder.globalEvents)) {
|
||||
for (var i = 0; i < binder.globalEvents.length; i++) {
|
||||
var globalEvent = binder.globalEvents[i];
|
||||
var remover = this._createGlobalEventListener(view, binderIdx, globalEvent.name, globalEvent.target, globalEvent.fullName);
|
||||
var remover = this._createGlobalEventListener(view, binderIdx, globalEvent.name,
|
||||
globalEvent.target, globalEvent.fullName);
|
||||
ListWrapper.push(view.eventHandlerRemovers, remover);
|
||||
}
|
||||
}
|
||||
|
|
@ -167,10 +174,10 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
dehydrateView(viewRef:RenderViewRef) {
|
||||
dehydrateView(viewRef: RenderViewRef) {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
|
||||
//remove global events
|
||||
// remove global events
|
||||
for (var i = 0; i < view.eventHandlerRemovers.length; i++) {
|
||||
view.eventHandlerRemovers[i]();
|
||||
}
|
||||
|
|
@ -179,31 +186,35 @@ export class DomRenderer extends Renderer {
|
|||
view.hydrated = false;
|
||||
}
|
||||
|
||||
setElementProperty(viewRef:RenderViewRef, elementIndex:number, propertyName:string, propertyValue:any):void {
|
||||
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string,
|
||||
propertyValue: any): void {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
view.setElementProperty(elementIndex, propertyName, propertyValue);
|
||||
}
|
||||
|
||||
callAction(viewRef:RenderViewRef, elementIndex:number, actionExpression:string, actionArgs:any):void {
|
||||
callAction(viewRef: RenderViewRef, elementIndex: number, actionExpression: string,
|
||||
actionArgs: any): void {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
view.callAction(elementIndex, actionExpression, actionArgs);
|
||||
}
|
||||
|
||||
setText(viewRef:RenderViewRef, textNodeIndex:number, text:string):void {
|
||||
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
DOM.setText(view.boundTextNodes[textNodeIndex], text);
|
||||
}
|
||||
|
||||
setEventDispatcher(viewRef:RenderViewRef, dispatcher:any/*api.EventDispatcher*/):void {
|
||||
setEventDispatcher(viewRef: RenderViewRef, dispatcher: any /*api.EventDispatcher*/): void {
|
||||
var view = resolveInternalDomView(viewRef);
|
||||
view.eventDispatcher = dispatcher;
|
||||
}
|
||||
|
||||
_createView(protoView:DomProtoView, inplaceElement): DomView {
|
||||
var rootElementClone = isPresent(inplaceElement) ? inplaceElement : DOM.importIntoDoc(protoView.element);
|
||||
_createView(protoView: DomProtoView, inplaceElement): DomView {
|
||||
var rootElementClone =
|
||||
isPresent(inplaceElement) ? inplaceElement : DOM.importIntoDoc(protoView.element);
|
||||
var elementsWithBindingsDynamic;
|
||||
if (protoView.isTemplateElement) {
|
||||
elementsWithBindingsDynamic = DOM.querySelectorAll(DOM.content(rootElementClone), NG_BINDING_CLASS_SELECTOR);
|
||||
elementsWithBindingsDynamic =
|
||||
DOM.querySelectorAll(DOM.content(rootElementClone), NG_BINDING_CLASS_SELECTOR);
|
||||
} else {
|
||||
elementsWithBindingsDynamic = DOM.getElementsByClassName(rootElementClone, NG_BINDING_CLASS);
|
||||
}
|
||||
|
|
@ -216,9 +227,10 @@ export class DomRenderer extends Renderer {
|
|||
var viewRootNodes;
|
||||
if (protoView.isTemplateElement) {
|
||||
var childNode = DOM.firstChild(DOM.content(rootElementClone));
|
||||
viewRootNodes = []; // TODO(perf): Should be fixed size, since we could pre-compute in in DomProtoView
|
||||
viewRootNodes =
|
||||
[]; // TODO(perf): Should be fixed size, since we could pre-compute in in DomProtoView
|
||||
// Note: An explicit loop is the fastest way to convert a DOM array into a JS array!
|
||||
while(childNode != null) {
|
||||
while (childNode != null) {
|
||||
ListWrapper.push(viewRootNodes, childNode);
|
||||
childNode = DOM.nextSibling(childNode);
|
||||
}
|
||||
|
|
@ -243,7 +255,7 @@ export class DomRenderer extends Renderer {
|
|||
// boundTextNodes
|
||||
var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
|
||||
var textNodeIndices = binder.textNodeIndices;
|
||||
for (var i = 0; i<textNodeIndices.length; i++) {
|
||||
for (var i = 0; i < textNodeIndices.length; i++) {
|
||||
ListWrapper.push(boundTextNodes, childNodes[textNodeIndices[i]]);
|
||||
}
|
||||
|
||||
|
|
@ -255,10 +267,7 @@ export class DomRenderer extends Renderer {
|
|||
contentTags[binderIdx] = contentTag;
|
||||
}
|
||||
|
||||
var view = new DomView(
|
||||
protoView, viewRootNodes,
|
||||
boundTextNodes, boundElements, contentTags
|
||||
);
|
||||
var view = new DomView(protoView, viewRootNodes, boundTextNodes, boundElements, contentTags);
|
||||
|
||||
for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
|
||||
var binder = binders[binderIdx];
|
||||
|
|
@ -281,7 +290,8 @@ export class DomRenderer extends Renderer {
|
|||
// events
|
||||
if (isPresent(binder.eventLocals) && isPresent(binder.localEvents)) {
|
||||
for (var i = 0; i < binder.localEvents.length; i++) {
|
||||
this._createEventListener(view, element, binderIdx, binder.localEvents[i].name, binder.eventLocals);
|
||||
this._createEventListener(view, element, binderIdx, binder.localEvents[i].name,
|
||||
binder.eventLocals);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -290,9 +300,8 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
|
||||
_createEventListener(view, element, elementIndex, eventName, eventLocals) {
|
||||
this._eventManager.addEventListener(element, eventName, (event) => {
|
||||
view.dispatchEvent(elementIndex, eventName, event);
|
||||
});
|
||||
this._eventManager.addEventListener(
|
||||
element, eventName, (event) => { view.dispatchEvent(elementIndex, eventName, event); });
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -317,7 +326,7 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
_getOrCreateViewContainer(parentView:DomView, boundElementIndex) {
|
||||
_getOrCreateViewContainer(parentView: DomView, boundElementIndex) {
|
||||
var vc = parentView.viewContainers[boundElementIndex];
|
||||
if (isBlank(vc)) {
|
||||
vc = new DomViewContainer();
|
||||
|
|
@ -327,9 +336,7 @@ export class DomRenderer extends Renderer {
|
|||
}
|
||||
|
||||
_createGlobalEventListener(view, elementIndex, eventName, eventTarget, fullName): Function {
|
||||
return this._eventManager.addGlobalEventListener(eventTarget, eventName, (event) => {
|
||||
view.dispatchEvent(elementIndex, fullName, event);
|
||||
});
|
||||
return this._eventManager.addGlobalEventListener(
|
||||
eventTarget, eventName, (event) => { view.dispatchEvent(elementIndex, fullName, event); });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -20,18 +20,18 @@ export class EventManager {
|
|||
addEventListener(element, eventName: string, handler: Function) {
|
||||
var withoutBubbleSymbol = this._removeBubbleSymbol(eventName);
|
||||
var plugin = this._findPluginFor(withoutBubbleSymbol);
|
||||
plugin.addEventListener(element, withoutBubbleSymbol, handler, withoutBubbleSymbol != eventName);
|
||||
plugin.addEventListener(element, withoutBubbleSymbol, handler,
|
||||
withoutBubbleSymbol != eventName);
|
||||
}
|
||||
|
||||
addGlobalEventListener(target: string, eventName: string, handler: Function): Function {
|
||||
var withoutBubbleSymbol = this._removeBubbleSymbol(eventName);
|
||||
var plugin = this._findPluginFor(withoutBubbleSymbol);
|
||||
return plugin.addGlobalEventListener(target, withoutBubbleSymbol, handler, withoutBubbleSymbol != eventName);
|
||||
return plugin.addGlobalEventListener(target, withoutBubbleSymbol, handler,
|
||||
withoutBubbleSymbol != eventName);
|
||||
}
|
||||
|
||||
getZone(): NgZone {
|
||||
return this._zone;
|
||||
}
|
||||
getZone(): NgZone { return this._zone; }
|
||||
|
||||
_findPluginFor(eventName: string): EventManagerPlugin {
|
||||
var plugins = this._plugins;
|
||||
|
|
@ -56,15 +56,14 @@ export class EventManagerPlugin {
|
|||
// That is equivalent to having supporting $event.target
|
||||
// The bubbling flag (currently ^) is stripped before calling the supports and
|
||||
// addEventListener methods.
|
||||
supports(eventName: string): boolean {
|
||||
return false;
|
||||
}
|
||||
supports(eventName: string): boolean { return false; }
|
||||
|
||||
addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
|
||||
throw "not implemented";
|
||||
}
|
||||
|
||||
addGlobalEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean): Function {
|
||||
addGlobalEventListener(element, eventName: string, handler: Function,
|
||||
shouldSupportBubble: boolean): Function {
|
||||
throw "not implemented";
|
||||
}
|
||||
}
|
||||
|
|
@ -74,37 +73,30 @@ export class DomEventsPlugin extends EventManagerPlugin {
|
|||
|
||||
// This plugin should come last in the list of plugins, because it accepts all
|
||||
// events.
|
||||
supports(eventName: string): boolean {
|
||||
return true;
|
||||
}
|
||||
supports(eventName: string): boolean { return true; }
|
||||
|
||||
addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
|
||||
var outsideHandler = this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
|
||||
this.manager._zone.runOutsideAngular(() => {
|
||||
DOM.on(element, eventName, outsideHandler);
|
||||
});
|
||||
var outsideHandler =
|
||||
this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
|
||||
this.manager._zone.runOutsideAngular(() => { DOM.on(element, eventName, outsideHandler); });
|
||||
}
|
||||
|
||||
addGlobalEventListener(target:string, eventName: string, handler: Function, shouldSupportBubble: boolean): Function {
|
||||
addGlobalEventListener(target: string, eventName: string, handler: Function,
|
||||
shouldSupportBubble: boolean): Function {
|
||||
var element = DOM.getGlobalEventTarget(target);
|
||||
var outsideHandler = this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
|
||||
return this.manager._zone.runOutsideAngular(() => {
|
||||
return DOM.onAndCancel(element, eventName, outsideHandler);
|
||||
});
|
||||
var outsideHandler =
|
||||
this._getOutsideHandler(shouldSupportBubble, element, handler, this.manager._zone);
|
||||
return this.manager._zone.runOutsideAngular(
|
||||
() => { return DOM.onAndCancel(element, eventName, outsideHandler); });
|
||||
}
|
||||
|
||||
_getOutsideHandler(shouldSupportBubble: boolean, element, handler: Function, zone: NgZone) {
|
||||
return shouldSupportBubble ?
|
||||
DomEventsPlugin.bubbleCallback(element, handler, zone) :
|
||||
DomEventsPlugin.sameElementCallback(element, handler, zone);
|
||||
return shouldSupportBubble ? DomEventsPlugin.bubbleCallback(element, handler, zone) :
|
||||
DomEventsPlugin.sameElementCallback(element, handler, zone);
|
||||
}
|
||||
|
||||
static sameElementCallback(element, handler, zone) {
|
||||
return (event) => {
|
||||
if (event.target === element) {
|
||||
zone.run(() => handler(event));
|
||||
}
|
||||
};
|
||||
return (event) => { if (event.target === element) { zone.run(() => handler(event)); } };
|
||||
}
|
||||
|
||||
static bubbleCallback(element, handler, zone) {
|
||||
|
|
@ -41,9 +41,7 @@ var _eventNames = {
|
|||
|
||||
|
||||
export class HammerGesturesPluginCommon extends EventManagerPlugin {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() { super(); }
|
||||
|
||||
supports(eventName: string): boolean {
|
||||
eventName = eventName.toLowerCase();
|
||||
|
|
@ -2,11 +2,9 @@ import {HammerGesturesPluginCommon} from './hammer_common';
|
|||
import {isPresent, BaseException} from 'angular2/src/facade/lang';
|
||||
|
||||
export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() { super(); }
|
||||
|
||||
supports(eventName:string):boolean {
|
||||
supports(eventName: string): boolean {
|
||||
if (!super.supports(eventName)) return false;
|
||||
|
||||
if (!isPresent(window.Hammer)) {
|
||||
|
|
@ -16,22 +14,19 @@ export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
|
|||
return true;
|
||||
}
|
||||
|
||||
addEventListener(element, eventName:string, handler:Function, shouldSupportBubble: boolean) {
|
||||
if (shouldSupportBubble) throw new BaseException('Hammer.js plugin does not support bubbling gestures.');
|
||||
addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
|
||||
if (shouldSupportBubble)
|
||||
throw new BaseException('Hammer.js plugin does not support bubbling gestures.');
|
||||
var zone = this.manager.getZone();
|
||||
eventName = eventName.toLowerCase();
|
||||
|
||||
zone.runOutsideAngular(function () {
|
||||
zone.runOutsideAngular(function() {
|
||||
// Creating the manager bind events, must be done outside of angular
|
||||
var mc = new Hammer(element);
|
||||
mc.get('pinch').set({enable: true});
|
||||
mc.get('rotate').set({enable: true});
|
||||
|
||||
mc.on(eventName, function (eventObj) {
|
||||
zone.run(function () {
|
||||
handler(eventObj);
|
||||
});
|
||||
});
|
||||
mc.on(eventName, function(eventObj) { zone.run(function() { handler(eventObj); }); });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +1,37 @@
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {isPresent, isBlank, StringWrapper, RegExpWrapper, BaseException, NumberWrapper} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
isPresent,
|
||||
isBlank,
|
||||
StringWrapper,
|
||||
RegExpWrapper,
|
||||
BaseException,
|
||||
NumberWrapper
|
||||
} from 'angular2/src/facade/lang';
|
||||
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {EventManagerPlugin} from './event_manager';
|
||||
|
||||
var modifierKeys = ['alt', 'control', 'meta', 'shift'];
|
||||
var modifierKeyGetters = {
|
||||
'alt': (event) => event.altKey,
|
||||
'control': (event) => event.ctrlKey,
|
||||
'meta': (event) => event.metaKey,
|
||||
'shift': (event) => event.shiftKey
|
||||
}
|
||||
var modifierKeyGetters =
|
||||
{
|
||||
'alt': (event) => event.altKey,
|
||||
'control': (event) => event.ctrlKey,
|
||||
'meta': (event) => event.metaKey,
|
||||
'shift': (event) => event.shiftKey
|
||||
}
|
||||
|
||||
export class KeyEventsPlugin extends EventManagerPlugin {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() { super(); }
|
||||
|
||||
supports(eventName: string): boolean {
|
||||
return isPresent(KeyEventsPlugin.parseEventName(eventName));
|
||||
}
|
||||
|
||||
addEventListener(element, eventName: string, handler: Function,
|
||||
shouldSupportBubble: boolean) {
|
||||
addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
|
||||
var parsedEvent = KeyEventsPlugin.parseEventName(eventName);
|
||||
|
||||
var outsideHandler = KeyEventsPlugin.eventCallback(element, shouldSupportBubble,
|
||||
StringMapWrapper.get(parsedEvent, 'fullKey'), handler, this.manager.getZone());
|
||||
StringMapWrapper.get(parsedEvent, 'fullKey'),
|
||||
handler, this.manager.getZone());
|
||||
|
||||
this.manager.getZone().runOutsideAngular(() => {
|
||||
DOM.on(element, StringMapWrapper.get(parsedEvent, 'domEventName'), outsideHandler);
|
||||
|
|
@ -36,7 +42,9 @@ export class KeyEventsPlugin extends EventManagerPlugin {
|
|||
eventName = eventName.toLowerCase();
|
||||
var parts = eventName.split('.');
|
||||
var domEventName = ListWrapper.removeAt(parts, 0);
|
||||
if ((parts.length === 0) || !(StringWrapper.equals(domEventName, 'keydown') || StringWrapper.equals(domEventName, 'keyup'))) {
|
||||
if ((parts.length === 0) ||
|
||||
!(StringWrapper.equals(domEventName, 'keydown') ||
|
||||
StringWrapper.equals(domEventName, 'keyup'))) {
|
||||
return null;
|
||||
}
|
||||
var key = ListWrapper.removeLast(parts);
|
||||
|
|
@ -55,10 +63,7 @@ export class KeyEventsPlugin extends EventManagerPlugin {
|
|||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
'domEventName': domEventName,
|
||||
'fullKey': fullKey
|
||||
};
|
||||
return {'domEventName': domEventName, 'fullKey': fullKey};
|
||||
}
|
||||
|
||||
static getEventFullKey(event): string {
|
||||
|
|
@ -66,9 +71,9 @@ export class KeyEventsPlugin extends EventManagerPlugin {
|
|||
var key = DOM.getEventKey(event);
|
||||
key = key.toLowerCase();
|
||||
if (StringWrapper.equals(key, ' ')) {
|
||||
key = 'space'; // for readability
|
||||
key = 'space'; // for readability
|
||||
} else if (StringWrapper.equals(key, '.')) {
|
||||
key = 'dot'; // because '.' is used as a separator in event names
|
||||
key = 'dot'; // because '.' is used as a separator in event names
|
||||
}
|
||||
ListWrapper.forEach(modifierKeys, (modifierName) => {
|
||||
if (modifierName != key) {
|
||||
|
|
@ -83,11 +88,10 @@ export class KeyEventsPlugin extends EventManagerPlugin {
|
|||
}
|
||||
|
||||
static eventCallback(element, shouldSupportBubble, fullKey, handler, zone) {
|
||||
return (event) => {
|
||||
var correctElement = shouldSupportBubble || event.target === element;
|
||||
if (correctElement && KeyEventsPlugin.getEventFullKey(event) === fullKey) {
|
||||
zone.run(() => handler(event));
|
||||
}
|
||||
};
|
||||
}
|
||||
return (event) => { var correctElement = shouldSupportBubble || event.target === element;
|
||||
if (correctElement && KeyEventsPlugin.getEventFullKey(event) === fullKey) {
|
||||
zone.run(() => handler(event));
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,8 @@ import {isPresent} from 'angular2/src/facade/lang';
|
|||
import {List, ListWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
class ContentStrategy {
|
||||
nodes:List;
|
||||
insert(nodes:List){}
|
||||
nodes: List</*node*/ any>;
|
||||
insert(nodes: List</*node*/ any>) {}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -26,7 +26,7 @@ class RenderedContent extends ContentStrategy {
|
|||
|
||||
// Inserts the nodes in between the start and end scripts.
|
||||
// Previous content is removed.
|
||||
insert(nodes:List) {
|
||||
insert(nodes: List</*node*/ any>) {
|
||||
this.nodes = nodes;
|
||||
DOM.insertAllBefore(this.endScript, nodes);
|
||||
this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]);
|
||||
|
|
@ -34,8 +34,7 @@ class RenderedContent extends ContentStrategy {
|
|||
|
||||
_removeNodesUntil(node) {
|
||||
var p = DOM.parentElement(this.beginScript);
|
||||
for (var next = DOM.nextSibling(this.beginScript);
|
||||
next !== node;
|
||||
for (var next = DOM.nextSibling(this.beginScript); next !== node;
|
||||
next = DOM.nextSibling(this.beginScript)) {
|
||||
DOM.removeChild(p, next);
|
||||
}
|
||||
|
|
@ -48,15 +47,15 @@ class RenderedContent extends ContentStrategy {
|
|||
* and thus does not get rendered but only affect the distribution of its parent component.
|
||||
*/
|
||||
class IntermediateContent extends ContentStrategy {
|
||||
destinationLightDom:ldModule.LightDom;
|
||||
destinationLightDom: ldModule.LightDom;
|
||||
|
||||
constructor(destinationLightDom:ldModule.LightDom) {
|
||||
constructor(destinationLightDom: ldModule.LightDom) {
|
||||
super();
|
||||
this.nodes = [];
|
||||
this.destinationLightDom = destinationLightDom;
|
||||
}
|
||||
|
||||
insert(nodes:List) {
|
||||
insert(nodes: List</*node*/ any>) {
|
||||
this.nodes = nodes;
|
||||
this.destinationLightDom.redistribute();
|
||||
}
|
||||
|
|
@ -64,27 +63,22 @@ class IntermediateContent extends ContentStrategy {
|
|||
|
||||
|
||||
export class Content {
|
||||
select:string;
|
||||
_strategy:ContentStrategy;
|
||||
select: string;
|
||||
private _strategy: ContentStrategy;
|
||||
contentStartElement;
|
||||
|
||||
constructor(contentStartEl, selector:string) {
|
||||
constructor(contentStartEl, selector: string) {
|
||||
this.select = selector;
|
||||
this.contentStartElement = contentStartEl;
|
||||
this._strategy = null;
|
||||
}
|
||||
|
||||
init(destinationLightDom:ldModule.LightDom) {
|
||||
this._strategy = isPresent(destinationLightDom) ?
|
||||
new IntermediateContent(destinationLightDom) :
|
||||
new RenderedContent(this.contentStartElement);
|
||||
init(destinationLightDom: ldModule.LightDom) {
|
||||
this._strategy = isPresent(destinationLightDom) ? new IntermediateContent(destinationLightDom) :
|
||||
new RenderedContent(this.contentStartElement);
|
||||
}
|
||||
|
||||
nodes():List {
|
||||
return this._strategy.nodes;
|
||||
}
|
||||
nodes(): List</*node*/ any> { return this._strategy.nodes; }
|
||||
|
||||
insert(nodes:List) {
|
||||
this._strategy.insert(nodes);
|
||||
}
|
||||
insert(nodes: List</*node*/ any>) { this._strategy.insert(nodes); }
|
||||
}
|
||||
|
|
@ -7,7 +7,11 @@ import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
|
|||
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
|
||||
import {EmulatedUnscopedShadowDomStrategy} from './emulated_unscoped_shadow_dom_strategy';
|
||||
import {
|
||||
getContentAttribute, getHostAttribute, getComponentId, shimCssForComponent, insertStyleElement
|
||||
getContentAttribute,
|
||||
getHostAttribute,
|
||||
getComponentId,
|
||||
shimCssForComponent,
|
||||
insertStyleElement
|
||||
} from './util';
|
||||
|
||||
/**
|
||||
|
|
@ -30,29 +34,28 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
|
|||
this.styleInliner = styleInliner;
|
||||
}
|
||||
|
||||
processStyleElement(hostComponentId:string, templateUrl:string, styleEl):Promise {
|
||||
processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
|
||||
var cssText = DOM.getText(styleEl);
|
||||
|
||||
cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
|
||||
var css = this.styleInliner.inlineImports(cssText, templateUrl);
|
||||
var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);
|
||||
|
||||
if (PromiseWrapper.isPromise(css)) {
|
||||
if (isPresent(inlinedCss.asyncResult)) {
|
||||
DOM.setText(styleEl, '');
|
||||
return css.then((css) => {
|
||||
return inlinedCss.asyncResult.then((css) => {
|
||||
css = shimCssForComponent(css, hostComponentId);
|
||||
DOM.setText(styleEl, css);
|
||||
});
|
||||
} else {
|
||||
css = shimCssForComponent(css, hostComponentId);
|
||||
var css = shimCssForComponent(inlinedCss.syncResult, hostComponentId);
|
||||
DOM.setText(styleEl, css);
|
||||
DOM.remove(styleEl);
|
||||
insertStyleElement(this.styleHost, styleEl);
|
||||
return null;
|
||||
}
|
||||
|
||||
DOM.remove(styleEl);
|
||||
insertStyleElement(this.styleHost, styleEl);
|
||||
return null;
|
||||
}
|
||||
|
||||
processElement(hostComponentId:string, elementComponentId:string, element) {
|
||||
processElement(hostComponentId: string, elementComponentId: string, element) {
|
||||
// Shim the element as a child of the compiled component
|
||||
if (isPresent(hostComponentId)) {
|
||||
var contentAttribute = getContentAttribute(getComponentId(hostComponentId));
|
||||
|
|
@ -28,19 +28,15 @@ export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {
|
|||
this.styleHost = styleHost;
|
||||
}
|
||||
|
||||
hasNativeContentElement():boolean {
|
||||
return false;
|
||||
}
|
||||
hasNativeContentElement(): boolean { return false; }
|
||||
|
||||
prepareShadowRoot(el) {
|
||||
return el;
|
||||
}
|
||||
prepareShadowRoot(el) { return el; }
|
||||
|
||||
constructLightDom(lightDomView:viewModule.DomView, el): LightDom {
|
||||
constructLightDom(lightDomView: viewModule.DomView, el): LightDom {
|
||||
return new LightDom(lightDomView, el);
|
||||
}
|
||||
|
||||
processStyleElement(hostComponentId:string, templateUrl:string, styleEl):Promise {
|
||||
processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
|
||||
var cssText = DOM.getText(styleEl);
|
||||
cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
|
||||
DOM.setText(styleEl, cssText);
|
||||
|
|
@ -9,7 +9,7 @@ export class DestinationLightDom {}
|
|||
|
||||
class _Root {
|
||||
node;
|
||||
boundElementIndex:number;
|
||||
boundElementIndex: number;
|
||||
|
||||
constructor(node, boundElementIndex) {
|
||||
this.node = node;
|
||||
|
|
@ -21,32 +21,26 @@ class _Root {
|
|||
// once interfaces are supported
|
||||
export class LightDom {
|
||||
// The light DOM of the element is enclosed inside the lightDomView
|
||||
lightDomView:viewModule.DomView;
|
||||
lightDomView: viewModule.DomView;
|
||||
// The shadow DOM
|
||||
shadowDomView:viewModule.DomView;
|
||||
shadowDomView: viewModule.DomView;
|
||||
// The nodes of the light DOM
|
||||
nodes:List;
|
||||
roots:List<_Root>;
|
||||
nodes: List</*node*/ any>;
|
||||
private _roots: List<_Root>;
|
||||
|
||||
constructor(lightDomView:viewModule.DomView, element) {
|
||||
constructor(lightDomView: viewModule.DomView, element) {
|
||||
this.lightDomView = lightDomView;
|
||||
this.nodes = DOM.childNodesAsList(element);
|
||||
|
||||
this.roots = null;
|
||||
this._roots = null;
|
||||
this.shadowDomView = null;
|
||||
}
|
||||
|
||||
attachShadowDomView(shadowDomView:viewModule.DomView) {
|
||||
this.shadowDomView = shadowDomView;
|
||||
}
|
||||
attachShadowDomView(shadowDomView: viewModule.DomView) { this.shadowDomView = shadowDomView; }
|
||||
|
||||
detachShadowDomView() {
|
||||
this.shadowDomView = null;
|
||||
}
|
||||
detachShadowDomView() { this.shadowDomView = null; }
|
||||
|
||||
redistribute() {
|
||||
redistributeNodes(this.contentTags(), this.expandedDomNodes());
|
||||
}
|
||||
redistribute() { redistributeNodes(this.contentTags(), this.expandedDomNodes()); }
|
||||
|
||||
contentTags(): List<Content> {
|
||||
if (isPresent(this.shadowDomView)) {
|
||||
|
|
@ -57,19 +51,18 @@ export class LightDom {
|
|||
}
|
||||
|
||||
// Collects the Content directives from the view and all its child views
|
||||
_collectAllContentTags(view: viewModule.DomView, acc:List<Content>):List<Content> {
|
||||
private _collectAllContentTags(view: viewModule.DomView, acc: List<Content>): List<Content> {
|
||||
var contentTags = view.contentTags;
|
||||
var vcs = view.viewContainers;
|
||||
for (var i=0; i<vcs.length; i++) {
|
||||
for (var i = 0; i < vcs.length; i++) {
|
||||
var vc = vcs[i];
|
||||
var contentTag = contentTags[i];
|
||||
if (isPresent(contentTag)) {
|
||||
ListWrapper.push(acc, contentTag);
|
||||
}
|
||||
if (isPresent(vc)) {
|
||||
ListWrapper.forEach(vc.contentTagContainers(), (view) => {
|
||||
this._collectAllContentTags(view, acc);
|
||||
});
|
||||
ListWrapper.forEach(vc.contentTagContainers(),
|
||||
(view) => { this._collectAllContentTags(view, acc); });
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
|
|
@ -79,12 +72,11 @@ export class LightDom {
|
|||
// - nodes from enclosed ViewContainers,
|
||||
// - nodes from enclosed content tags,
|
||||
// - plain DOM nodes
|
||||
expandedDomNodes():List {
|
||||
expandedDomNodes(): List</*node*/ any> {
|
||||
var res = [];
|
||||
|
||||
var roots = this._roots();
|
||||
var roots = this._findRoots();
|
||||
for (var i = 0; i < roots.length; ++i) {
|
||||
|
||||
var root = roots[i];
|
||||
if (isPresent(root.boundElementIndex)) {
|
||||
var vc = this.lightDomView.viewContainers[root.boundElementIndex];
|
||||
|
|
@ -105,14 +97,14 @@ export class LightDom {
|
|||
|
||||
// Returns a list of Roots for all the nodes of the light DOM.
|
||||
// The Root object contains the DOM node and its corresponding boundElementIndex
|
||||
_roots() {
|
||||
if (isPresent(this.roots)) return this.roots;
|
||||
private _findRoots() {
|
||||
if (isPresent(this._roots)) return this._roots;
|
||||
|
||||
var boundElements = this.lightDomView.boundElements;
|
||||
|
||||
this.roots = ListWrapper.map(this.nodes, (n) => {
|
||||
this._roots = ListWrapper.map(this.nodes, (n) => {
|
||||
var boundElementIndex = null;
|
||||
for (var i=0; i<boundElements.length; i++) {
|
||||
for (var i = 0; i < boundElements.length; i++) {
|
||||
var boundEl = boundElements[i];
|
||||
if (isPresent(boundEl) && boundEl === n) {
|
||||
boundElementIndex = i;
|
||||
|
|
@ -122,12 +114,12 @@ export class LightDom {
|
|||
return new _Root(n, boundElementIndex);
|
||||
});
|
||||
|
||||
return this.roots;
|
||||
return this._roots;
|
||||
}
|
||||
}
|
||||
|
||||
// Projects the light DOM into the shadow DOM
|
||||
function redistributeNodes(contents:List<Content>, nodes:List) {
|
||||
function redistributeNodes(contents: List<Content>, nodes: List</*node*/ any>) {
|
||||
for (var i = 0; i < contents.length; ++i) {
|
||||
var content = contents[i];
|
||||
var select = content.select;
|
||||
|
|
@ -19,11 +19,9 @@ export class NativeShadowDomStrategy extends ShadowDomStrategy {
|
|||
this.styleUrlResolver = styleUrlResolver;
|
||||
}
|
||||
|
||||
prepareShadowRoot(el) {
|
||||
return DOM.createShadowRoot(el);
|
||||
}
|
||||
prepareShadowRoot(el) { return DOM.createShadowRoot(el); }
|
||||
|
||||
processStyleElement(hostComponentId:string, templateUrl:string, styleEl):Promise {
|
||||
processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
|
||||
var cssText = DOM.getText(styleEl);
|
||||
cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
|
||||
DOM.setText(styleEl, cssText);
|
||||
|
|
@ -16,7 +16,8 @@ import {
|
|||
*
|
||||
* Please make sure to keep to edits in sync with the source file.
|
||||
*
|
||||
* Source: https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
|
||||
* Source:
|
||||
* https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
|
||||
*
|
||||
* The original file level comment is reproduced below
|
||||
*/
|
||||
|
|
@ -139,9 +140,7 @@ import {
|
|||
export class ShadowCss {
|
||||
strictStyling: boolean;
|
||||
|
||||
constructor() {
|
||||
this.strictStyling = true;
|
||||
}
|
||||
constructor() { this.strictStyling = true; }
|
||||
|
||||
/*
|
||||
* Shim a style element with the given selector. Returns cssText that can
|
||||
|
|
@ -186,9 +185,8 @@ export class ShadowCss {
|
|||
**/
|
||||
_insertPolyfillDirectivesInCssText(cssText: string): string {
|
||||
// Difference with webcomponents.js: does not handle comments
|
||||
return StringWrapper.replaceAllMapped(cssText, _cssContentNextSelectorRe, function(m) {
|
||||
return m[1] + '{';
|
||||
});
|
||||
return StringWrapper.replaceAllMapped(cssText, _cssContentNextSelectorRe,
|
||||
function(m) { return m[1] + '{'; });
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -225,16 +223,14 @@ export class ShadowCss {
|
|||
* scopeName .foo { ... }
|
||||
*/
|
||||
_scopeCssText(cssText: string, scopeSelector: string, hostSelector: string): string {
|
||||
|
||||
var unscoped = this._extractUnscopedRulesFromCssText(cssText);
|
||||
cssText = this._insertPolyfillHostInCssText(cssText);
|
||||
cssText = this._convertColonHost(cssText);
|
||||
cssText = this._convertColonHostContext(cssText);
|
||||
cssText = this._convertShadowDOMSelectors(cssText);
|
||||
if (isPresent(scopeSelector)) {
|
||||
_withCssRules(cssText, (rules) => {
|
||||
cssText = this._scopeRules(rules, scopeSelector, hostSelector);
|
||||
});
|
||||
_withCssRules(cssText,
|
||||
(rules) => { cssText = this._scopeRules(rules, scopeSelector, hostSelector); });
|
||||
}
|
||||
cssText = cssText + '\n' + unscoped;
|
||||
return cssText.trim();
|
||||
|
|
@ -276,8 +272,7 @@ export class ShadowCss {
|
|||
* scopeName.foo > .bar
|
||||
*/
|
||||
_convertColonHost(cssText: string): string {
|
||||
return this._convertColonRule(cssText, _cssColonHostRe,
|
||||
this._colonHostPartReplacer);
|
||||
return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -297,7 +292,7 @@ export class ShadowCss {
|
|||
*/
|
||||
_convertColonHostContext(cssText: string): string {
|
||||
return this._convertColonRule(cssText, _cssColonHostContextRe,
|
||||
this._colonHostContextPartReplacer);
|
||||
this._colonHostContextPartReplacer);
|
||||
}
|
||||
|
||||
_convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string {
|
||||
|
|
@ -349,7 +344,8 @@ export class ShadowCss {
|
|||
var rule = cssRules[i];
|
||||
if (DOM.isStyleRule(rule) || DOM.isPageRule(rule)) {
|
||||
cssText += this._scopeSelector(rule.selectorText, scopeSelector, hostSelector,
|
||||
this.strictStyling) + ' {\n';
|
||||
this.strictStyling) +
|
||||
' {\n';
|
||||
cssText += this._propertiesFromRule(rule) + '\n}\n\n';
|
||||
} else if (DOM.isMediaRule(rule)) {
|
||||
cssText += '@media ' + rule.media.mediaText + ' {\n';
|
||||
|
|
@ -365,7 +361,7 @@ export class ShadowCss {
|
|||
if (isPresent(rule.cssText)) {
|
||||
cssText += rule.cssText + '\n\n';
|
||||
}
|
||||
} catch(x) {
|
||||
} catch (x) {
|
||||
if (DOM.isKeyframesRule(rule) && isPresent(rule.cssRules)) {
|
||||
cssText += this._ieSafeCssTextFromKeyFrameRule(rule);
|
||||
}
|
||||
|
|
@ -387,15 +383,15 @@ export class ShadowCss {
|
|||
}
|
||||
|
||||
_scopeSelector(selector: string, scopeSelector: string, hostSelector: string,
|
||||
strict: boolean): string {
|
||||
strict: boolean): string {
|
||||
var r = [], parts = selector.split(',');
|
||||
for (var i = 0; i < parts.length; i++) {
|
||||
var p = parts[i];
|
||||
p = p.trim();
|
||||
if (this._selectorNeedsScoping(p, scopeSelector)) {
|
||||
p = strict && !StringWrapper.contains(p, _polyfillHostNoCombinator) ?
|
||||
this._applyStrictSelectorScope(p, scopeSelector) :
|
||||
this._applySelectorScope(p, scopeSelector, hostSelector);
|
||||
this._applyStrictSelectorScope(p, scopeSelector) :
|
||||
this._applySelectorScope(p, scopeSelector, hostSelector);
|
||||
}
|
||||
ListWrapper.push(r, p);
|
||||
}
|
||||
|
|
@ -436,26 +432,23 @@ export class ShadowCss {
|
|||
_applyStrictSelectorScope(selector: string, scopeSelector: string): string {
|
||||
var isRe = RegExpWrapper.create('\\[is=([^\\]]*)\\]');
|
||||
scopeSelector = StringWrapper.replaceAllMapped(scopeSelector, isRe, (m) => m[1]);
|
||||
var splits = [' ', '>', '+', '~'],
|
||||
scoped = selector,
|
||||
attrName = '[' + scopeSelector + ']';
|
||||
var splits = [' ', '>', '+', '~'], scoped = selector, attrName = '[' + scopeSelector + ']';
|
||||
for (var i = 0; i < splits.length; i++) {
|
||||
var sep = splits[i];
|
||||
var parts = scoped.split(sep);
|
||||
scoped = ListWrapper.map(parts, function(p) {
|
||||
// remove :host since it should be unnecessary
|
||||
var t = StringWrapper.replaceAll(p.trim(), _polyfillHostRe, '');
|
||||
if (t.length > 0 &&
|
||||
!ListWrapper.contains(splits, t) &&
|
||||
!StringWrapper.contains(t, attrName)) {
|
||||
var re = RegExpWrapper.create('([^:]*)(:*)(.*)');
|
||||
var m = RegExpWrapper.firstMatch(re, t);
|
||||
if (isPresent(m)) {
|
||||
p = m[1] + attrName + m[2] + m[3];
|
||||
}
|
||||
}
|
||||
return p;
|
||||
}).join(sep);
|
||||
// remove :host since it should be unnecessary
|
||||
var t = StringWrapper.replaceAll(p.trim(), _polyfillHostRe, '');
|
||||
if (t.length > 0 && !ListWrapper.contains(splits, t) &&
|
||||
!StringWrapper.contains(t, attrName)) {
|
||||
var re = RegExpWrapper.create('([^:]*)(:*)(.*)');
|
||||
var m = RegExpWrapper.firstMatch(re, t);
|
||||
if (isPresent(m)) {
|
||||
p = m[1] + attrName + m[2] + m[3];
|
||||
}
|
||||
}
|
||||
return p;
|
||||
}).join(sep);
|
||||
}
|
||||
return scoped;
|
||||
}
|
||||
|
|
@ -475,8 +468,8 @@ export class ShadowCss {
|
|||
if (rule.style.content.length > 0 &&
|
||||
!isPresent(RegExpWrapper.firstMatch(attrRe, rule.style.content))) {
|
||||
var contentRe = RegExpWrapper.create('content:[^;]*;');
|
||||
cssText = StringWrapper.replaceAll(cssText, contentRe, 'content: \'' +
|
||||
rule.style.content + '\';');
|
||||
cssText =
|
||||
StringWrapper.replaceAll(cssText, contentRe, 'content: \'' + rule.style.content + '\';');
|
||||
}
|
||||
// TODO(sorvell): we can workaround this issue here, but we need a list
|
||||
// of troublesome properties to fix https://github.com/Polymer/platform/issues/53
|
||||
|
|
@ -484,8 +477,8 @@ export class ShadowCss {
|
|||
// inherit rules can be omitted from cssText
|
||||
// TODO(sorvell): remove when Blink bug is fixed:
|
||||
// https://code.google.com/p/chromium/issues/detail?id=358273
|
||||
//var style = rule.style;
|
||||
//for (var i = 0; i < style.length; i++) {
|
||||
// var style = rule.style;
|
||||
// for (var i = 0; i < style.length; i++) {
|
||||
// var name = style.item(i);
|
||||
// var value = style.getPropertyValue(name);
|
||||
// if (value == 'initial') {
|
||||
|
|
@ -497,11 +490,11 @@ export class ShadowCss {
|
|||
}
|
||||
|
||||
var _cssContentNextSelectorRe = RegExpWrapper.create(
|
||||
'polyfill-next-selector[^}]*content:[\\s]*?[\'"](.*?)[\'"][;\\s]*}([^{]*?){', 'im');
|
||||
var _cssContentRuleRe = RegExpWrapper.create(
|
||||
'(polyfill-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
|
||||
'polyfill-next-selector[^}]*content:[\\s]*?[\'"](.*?)[\'"][;\\s]*}([^{]*?){', 'im');
|
||||
var _cssContentRuleRe =
|
||||
RegExpWrapper.create('(polyfill-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
|
||||
var _cssContentUnscopedRuleRe = RegExpWrapper.create(
|
||||
'(polyfill-unscoped-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
|
||||
'(polyfill-unscoped-rule)[^}]*(content:[\\s]*[\'"](.*?)[\'"])[;\\s]*[^}]*}', 'im');
|
||||
var _polyfillHost = '-shadowcsshost';
|
||||
// note: :host-context pre-processed to -shadowcsshostcontext.
|
||||
var _polyfillHostContext = '-shadowcsscontext';
|
||||
|
|
@ -516,9 +509,9 @@ var _shadowDOMSelectorsRe = [
|
|||
RegExpWrapper.create('::shadow'),
|
||||
RegExpWrapper.create('::content'),
|
||||
// Deprecated selectors
|
||||
RegExpWrapper.create('/deep/'), // former >>>
|
||||
RegExpWrapper.create('/shadow-deep/'), // former /deep/
|
||||
RegExpWrapper.create('/shadow/'), // former ::shadow
|
||||
RegExpWrapper.create('/deep/'), // former >>>
|
||||
RegExpWrapper.create('/shadow-deep/'), // former /deep/
|
||||
RegExpWrapper.create('/shadow/'), // former ::shadow
|
||||
];
|
||||
var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
|
||||
var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im');
|
||||
|
|
@ -10,19 +10,19 @@ import {CompileControl} from '../compiler/compile_control';
|
|||
import {ViewDefinition} from '../../api';
|
||||
import {ShadowDomStrategy} from './shadow_dom_strategy';
|
||||
|
||||
export class ShadowDomCompileStep extends CompileStep {
|
||||
export class ShadowDomCompileStep implements CompileStep {
|
||||
_shadowDomStrategy: ShadowDomStrategy;
|
||||
_template: ViewDefinition;
|
||||
_subTaskPromises: List<Promise>;
|
||||
_subTaskPromises: List<Promise<any>>;
|
||||
|
||||
constructor(shadowDomStrategy: ShadowDomStrategy, template: ViewDefinition, subTaskPromises:List<Promise>) {
|
||||
super();
|
||||
constructor(shadowDomStrategy: ShadowDomStrategy, template: ViewDefinition,
|
||||
subTaskPromises: List<Promise<any>>) {
|
||||
this._shadowDomStrategy = shadowDomStrategy;
|
||||
this._template = template;
|
||||
this._subTaskPromises = subTaskPromises;
|
||||
}
|
||||
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
process(parent: CompileElement, current: CompileElement, control: CompileControl) {
|
||||
var tagName = DOM.tagName(current.element).toUpperCase();
|
||||
if (tagName == 'STYLE') {
|
||||
this._processStyleElement(current, control);
|
||||
|
|
@ -30,16 +30,14 @@ export class ShadowDomCompileStep extends CompileStep {
|
|||
this._processContentElement(current);
|
||||
} else {
|
||||
var componentId = current.isBound() ? current.inheritedElementBinder.componentId : null;
|
||||
this._shadowDomStrategy.processElement(
|
||||
this._template.componentId, componentId, current.element
|
||||
);
|
||||
this._shadowDomStrategy.processElement(this._template.componentId, componentId,
|
||||
current.element);
|
||||
}
|
||||
}
|
||||
|
||||
_processStyleElement(current:CompileElement, control:CompileControl) {
|
||||
_processStyleElement(current: CompileElement, control: CompileControl) {
|
||||
var stylePromise = this._shadowDomStrategy.processStyleElement(
|
||||
this._template.componentId, this._template.absUrl, current.element
|
||||
);
|
||||
this._template.componentId, this._template.absUrl, current.element);
|
||||
if (isPresent(stylePromise) && PromiseWrapper.isPromise(stylePromise)) {
|
||||
ListWrapper.push(this._subTaskPromises, stylePromise);
|
||||
}
|
||||
|
|
@ -49,7 +47,7 @@ export class ShadowDomCompileStep extends CompileStep {
|
|||
control.ignoreCurrentElement();
|
||||
}
|
||||
|
||||
_processContentElement(current:CompileElement) {
|
||||
_processContentElement(current: CompileElement) {
|
||||
if (this._shadowDomStrategy.hasNativeContentElement()) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -5,30 +5,24 @@ import * as viewModule from '../view/view';
|
|||
import {LightDom} from './light_dom';
|
||||
|
||||
export class ShadowDomStrategy {
|
||||
hasNativeContentElement():boolean {
|
||||
return true;
|
||||
}
|
||||
hasNativeContentElement(): boolean { return true; }
|
||||
|
||||
/**
|
||||
* Prepares and returns the shadow root for the given element.
|
||||
*/
|
||||
prepareShadowRoot(el):any {
|
||||
return null;
|
||||
}
|
||||
prepareShadowRoot(el): any { return null; }
|
||||
|
||||
constructLightDom(lightDomView:viewModule.DomView, el): LightDom {
|
||||
return null;
|
||||
}
|
||||
constructLightDom(lightDomView: viewModule.DomView, el): LightDom { return null; }
|
||||
|
||||
/**
|
||||
* An optional step that can modify the template style elements.
|
||||
*/
|
||||
processStyleElement(hostComponentId:string, templateUrl:string, styleElement):Promise {
|
||||
processStyleElement(hostComponentId: string, templateUrl: string, styleElement): Promise<any> {
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* An optional step that can modify the template elements (style elements exlcuded).
|
||||
*/
|
||||
processElement(hostComponentId:string, elementComponentId:string, element) {}
|
||||
processElement(hostComponentId: string, elementComponentId: string, element) {}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {XHR} from 'angular2/src/services/xhr';
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
|
|
@ -18,6 +18,10 @@ import {
|
|||
PromiseWrapper,
|
||||
} from 'angular2/src/facade/async';
|
||||
|
||||
export class SyncAsyncResult<T> {
|
||||
constructor(public syncResult: T, public asyncResult: Promise<T>) {}
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline @import rules in the given CSS.
|
||||
*
|
||||
|
|
@ -44,19 +48,18 @@ export class StyleInliner {
|
|||
* @param {string} baseUrl
|
||||
* @returns {*} a Promise<string> when @import rules are present, a string otherwise
|
||||
*/
|
||||
// TODO(vicb): Union types: returns either a Promise<string> or a string
|
||||
// TODO(vicb): commented out @import rules should not be inlined
|
||||
inlineImports(cssText: string, baseUrl: string) {
|
||||
inlineImports(cssText: string, baseUrl: string): SyncAsyncResult<string> {
|
||||
return this._inlineImports(cssText, baseUrl, []);
|
||||
}
|
||||
|
||||
_inlineImports(cssText: string, baseUrl: string, inlinedUrls: List<string>) {
|
||||
_inlineImports(cssText: string, baseUrl: string,
|
||||
inlinedUrls: List<string>): SyncAsyncResult<string> {
|
||||
var partIndex = 0;
|
||||
var parts = StringWrapper.split(cssText, _importRe);
|
||||
|
||||
if (parts.length === 1) {
|
||||
// no @import rule found, return the original css
|
||||
return cssText;
|
||||
return new SyncAsyncResult(cssText, null);
|
||||
}
|
||||
|
||||
var promises = [];
|
||||
|
|
@ -81,36 +84,32 @@ export class StyleInliner {
|
|||
promise = PromiseWrapper.resolve(prefix);
|
||||
} else {
|
||||
ListWrapper.push(inlinedUrls, url);
|
||||
promise = PromiseWrapper.then(
|
||||
this._xhr.get(url),
|
||||
(css) => {
|
||||
// resolve nested @import rules
|
||||
css = this._inlineImports(css, url, inlinedUrls);
|
||||
if (PromiseWrapper.isPromise(css)) {
|
||||
// wait until nested @import are inlined
|
||||
return css.then((css) => {
|
||||
return prefix + this._transformImportedCss(css, mediaQuery, url) + '\n'
|
||||
}) ;
|
||||
} else {
|
||||
// there are no nested @import, return the css
|
||||
return prefix + this._transformImportedCss(css, mediaQuery, url) + '\n';
|
||||
}
|
||||
},
|
||||
(error) => `/* failed to import ${url} */\n`
|
||||
);
|
||||
promise = PromiseWrapper.then(this._xhr.get(url), (rawCss) => {
|
||||
// resolve nested @import rules
|
||||
var inlinedCss = this._inlineImports(rawCss, url, inlinedUrls);
|
||||
if (isPresent(inlinedCss.asyncResult)) {
|
||||
// wait until nested @import are inlined
|
||||
return inlinedCss.asyncResult.then(
|
||||
(css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) + '\n'});
|
||||
} else {
|
||||
// there are no nested @import, return the css
|
||||
return prefix + this._transformImportedCss(inlinedCss.syncResult, mediaQuery, url) +
|
||||
'\n';
|
||||
}
|
||||
}, (error) => `/* failed to import ${url} */\n`);
|
||||
}
|
||||
ListWrapper.push(promises, promise);
|
||||
partIndex += 2;
|
||||
}
|
||||
|
||||
return PromiseWrapper.all(promises).then(function (cssParts) {
|
||||
return new SyncAsyncResult(null, PromiseWrapper.all(promises).then(function(cssParts) {
|
||||
var cssText = cssParts.join('');
|
||||
if (partIndex < parts.length) {
|
||||
// append then content located after the last @import rule
|
||||
cssText += parts[partIndex];
|
||||
}
|
||||
return cssText;
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
_transformImportedCss(css: string, mediaQuery: string, url: string): string {
|
||||
|
|
@ -134,7 +133,7 @@ function _extractMediaQuery(importRule: string): string {
|
|||
var match = RegExpWrapper.firstMatch(_mediaQueryRe, importRule);
|
||||
if (isBlank(match)) return null;
|
||||
var mediaQuery = match[1].trim();
|
||||
return (mediaQuery.length > 0) ? mediaQuery: null;
|
||||
return (mediaQuery.length > 0) ? mediaQuery : null;
|
||||
}
|
||||
|
||||
// Wraps the css in a media rule when the media query is not null
|
||||
|
|
@ -144,7 +143,7 @@ function _wrapInMediaRule(css: string, query: string): string {
|
|||
|
||||
var _importRe = RegExpWrapper.create('@import\\s+([^;]+);');
|
||||
var _urlRe = RegExpWrapper.create(
|
||||
'url\\(\\s*?[\'"]?([^\'")]+)[\'"]?|' + // url(url) or url('url') or url("url")
|
||||
'[\'"]([^\'")]+)[\'"]' // "url" or 'url'
|
||||
);
|
||||
'url\\(\\s*?[\'"]?([^\'")]+)[\'"]?|' + // url(url) or url('url') or url("url")
|
||||
'[\'"]([^\'")]+)[\'"]' // "url" or 'url'
|
||||
);
|
||||
var _mediaQueryRe = RegExpWrapper.create('[\'"][^\'"]+[\'"]\\s*\\)?\\s*(.*)');
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Some of the code comes from WebComponents.JS
|
||||
// https://github.com/webcomponents/webcomponentsjs/blob/master/src/HTMLImports/path.js
|
||||
|
||||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {RegExp, RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
|
||||
import {UrlResolver} from 'angular2/src/services/url_resolver';
|
||||
|
||||
|
|
@ -12,9 +12,7 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
|
|||
export class StyleUrlResolver {
|
||||
_resolver: UrlResolver;
|
||||
|
||||
constructor(resolver: UrlResolver) {
|
||||
this._resolver = resolver;
|
||||
}
|
||||
constructor(resolver: UrlResolver) { this._resolver = resolver; }
|
||||
|
||||
resolveUrls(cssText: string, baseUrl: string) {
|
||||
cssText = this._replaceUrls(cssText, _cssUrlRe, baseUrl);
|
||||
|
|
@ -8,14 +8,12 @@ export const EVENT_TARGET_SEPARATOR = ':';
|
|||
var CAMEL_CASE_REGEXP = RegExpWrapper.create('([A-Z])');
|
||||
var DASH_CASE_REGEXP = RegExpWrapper.create('-([a-z])');
|
||||
|
||||
export function camelCaseToDashCase(input:string) {
|
||||
return StringWrapper.replaceAllMapped(input, CAMEL_CASE_REGEXP, (m) => {
|
||||
return '-' + m[1].toLowerCase();
|
||||
});
|
||||
export function camelCaseToDashCase(input: string) {
|
||||
return StringWrapper.replaceAllMapped(input, CAMEL_CASE_REGEXP,
|
||||
(m) => { return '-' + m[1].toLowerCase(); });
|
||||
}
|
||||
|
||||
export function dashCaseToCamelCase(input:string) {
|
||||
return StringWrapper.replaceAllMapped(input, DASH_CASE_REGEXP, (m) => {
|
||||
return m[1].toUpperCase();
|
||||
});
|
||||
}
|
||||
export function dashCaseToCamelCase(input: string) {
|
||||
return StringWrapper.replaceAllMapped(input, DASH_CASE_REGEXP,
|
||||
(m) => { return m[1].toUpperCase(); });
|
||||
}
|
||||
|
|
@ -11,8 +11,8 @@ export class ElementBinder {
|
|||
localEvents: List<Event>;
|
||||
globalEvents: List<Event>;
|
||||
componentId: string;
|
||||
parentIndex:number;
|
||||
distanceToParent:number;
|
||||
parentIndex: number;
|
||||
distanceToParent: number;
|
||||
propertySetters: Map<string, SetterFn>;
|
||||
hostActions: Map<string, AST>;
|
||||
|
||||
|
|
@ -28,6 +28,18 @@ export class ElementBinder {
|
|||
parentIndex,
|
||||
distanceToParent,
|
||||
propertySetters
|
||||
}:{
|
||||
contentTagSelector?: string,
|
||||
textNodeIndices?: List<number>,
|
||||
nestedProtoView?: protoViewModule.DomProtoView,
|
||||
eventLocals?: AST,
|
||||
localEvents?: List<Event>,
|
||||
globalEvents?: List<Event>,
|
||||
componentId?: string,
|
||||
parentIndex?:number,
|
||||
distanceToParent?:number,
|
||||
propertySetters?: Map<string, SetterFn>,
|
||||
hostActions?: Map<string, AST>
|
||||
} = {}) {
|
||||
this.textNodeIndices = textNodeIndices;
|
||||
this.contentTagSelector = contentTagSelector;
|
||||
|
|
@ -1,4 +1,12 @@
|
|||
import {StringWrapper, RegExpWrapper, BaseException, isPresent, isBlank, isString, stringify} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
StringWrapper,
|
||||
RegExpWrapper,
|
||||
BaseException,
|
||||
isPresent,
|
||||
isBlank,
|
||||
isString,
|
||||
stringify
|
||||
} from 'angular2/src/facade/lang';
|
||||
import {ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {camelCaseToDashCase, dashCaseToCamelCase} from '../util';
|
||||
|
|
@ -7,6 +15,12 @@ import {reflector} from 'angular2/src/reflection/reflection';
|
|||
const STYLE_SEPARATOR = '.';
|
||||
var propertySettersCache = StringMapWrapper.create();
|
||||
var innerHTMLSetterCache;
|
||||
const ATTRIBUTE_PREFIX = 'attr.';
|
||||
var attributeSettersCache = StringMapWrapper.create();
|
||||
const CLASS_PREFIX = 'class.';
|
||||
var classSettersCache = StringMapWrapper.create();
|
||||
const STYLE_PREFIX = 'style.';
|
||||
var styleSettersCache = StringMapWrapper.create();
|
||||
|
||||
export function setterFactory(property: string): Function {
|
||||
var setterFn, styleParts, styleSuffix;
|
||||
|
|
@ -20,7 +34,7 @@ export function setterFactory(property: string): Function {
|
|||
setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix);
|
||||
} else if (StringWrapper.equals(property, 'innerHtml')) {
|
||||
if (isBlank(innerHTMLSetterCache)) {
|
||||
innerHTMLSetterCache = (el, value) => DOM.setInnerHTML(el, value);
|
||||
innerHTMLSetterCache = (el, value) => DOM.setInnerHTML(el, value);
|
||||
}
|
||||
setterFn = innerHTMLSetterCache;
|
||||
} else {
|
||||
|
|
@ -39,10 +53,7 @@ export function setterFactory(property: string): Function {
|
|||
return setterFn;
|
||||
}
|
||||
|
||||
const ATTRIBUTE_PREFIX = 'attr.';
|
||||
var attributeSettersCache = StringMapWrapper.create();
|
||||
|
||||
function _isValidAttributeValue(attrName:string, value: any): boolean {
|
||||
function _isValidAttributeValue(attrName: string, value: any): boolean {
|
||||
if (attrName == "role") {
|
||||
return isString(value);
|
||||
} else {
|
||||
|
|
@ -50,7 +61,7 @@ function _isValidAttributeValue(attrName:string, value: any): boolean {
|
|||
}
|
||||
}
|
||||
|
||||
function attributeSetterFactory(attrName:string): Function {
|
||||
function attributeSetterFactory(attrName: string): Function {
|
||||
var setterFn = StringMapWrapper.get(attributeSettersCache, attrName);
|
||||
var dashCasedAttributeName;
|
||||
|
||||
|
|
@ -62,7 +73,8 @@ function attributeSetterFactory(attrName:string): Function {
|
|||
} else {
|
||||
if (isPresent(value)) {
|
||||
throw new BaseException("Invalid " + dashCasedAttributeName +
|
||||
" attribute, only string values are allowed, got '" + stringify(value) + "'");
|
||||
" attribute, only string values are allowed, got '" +
|
||||
stringify(value) + "'");
|
||||
}
|
||||
DOM.removeAttribute(element, dashCasedAttributeName);
|
||||
}
|
||||
|
|
@ -73,10 +85,7 @@ function attributeSetterFactory(attrName:string): Function {
|
|||
return setterFn;
|
||||
}
|
||||
|
||||
const CLASS_PREFIX = 'class.';
|
||||
var classSettersCache = StringMapWrapper.create();
|
||||
|
||||
function classSetterFactory(className:string): Function {
|
||||
function classSetterFactory(className: string): Function {
|
||||
var setterFn = StringMapWrapper.get(classSettersCache, className);
|
||||
var dashCasedClassName;
|
||||
if (isBlank(setterFn)) {
|
||||
|
|
@ -94,10 +103,7 @@ function classSetterFactory(className:string): Function {
|
|||
return setterFn;
|
||||
}
|
||||
|
||||
const STYLE_PREFIX = 'style.';
|
||||
var styleSettersCache = StringMapWrapper.create();
|
||||
|
||||
function styleSetterFactory(styleName:string, styleSuffix:string): Function {
|
||||
function styleSetterFactory(styleName: string, styleSuffix: string): Function {
|
||||
var cacheKey = styleName + styleSuffix;
|
||||
var setterFn = StringMapWrapper.get(styleSettersCache, cacheKey);
|
||||
var dashCasedStyleName;
|
||||
|
|
@ -119,7 +125,7 @@ function styleSetterFactory(styleName:string, styleSuffix:string): Function {
|
|||
return setterFn;
|
||||
}
|
||||
|
||||
function resolvePropertyName(attrName:string): string {
|
||||
function resolvePropertyName(attrName: string): string {
|
||||
var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, attrName);
|
||||
return isPresent(mappedPropName) ? mappedPropName : attrName;
|
||||
}
|
||||
|
|
@ -8,14 +8,13 @@ import {NG_BINDING_CLASS} from '../util';
|
|||
|
||||
import {RenderProtoViewRef} from '../../api';
|
||||
|
||||
export function resolveInternalDomProtoView(protoViewRef:RenderProtoViewRef) {
|
||||
var domProtoViewRef:DomProtoViewRef = protoViewRef;
|
||||
return domProtoViewRef._protoView;
|
||||
export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef) {
|
||||
return (<DomProtoViewRef>protoViewRef)._protoView;
|
||||
}
|
||||
|
||||
export class DomProtoViewRef extends RenderProtoViewRef {
|
||||
_protoView:DomProtoView;
|
||||
constructor(protoView:DomProtoView) {
|
||||
_protoView: DomProtoView;
|
||||
constructor(protoView: DomProtoView) {
|
||||
super();
|
||||
this._protoView = protoView;
|
||||
}
|
||||
|
|
@ -23,17 +22,15 @@ export class DomProtoViewRef extends RenderProtoViewRef {
|
|||
|
||||
export class DomProtoView {
|
||||
element;
|
||||
elementBinders:List<ElementBinder>;
|
||||
isTemplateElement:boolean;
|
||||
rootBindingOffset:int;
|
||||
elementBinders: List<ElementBinder>;
|
||||
isTemplateElement: boolean;
|
||||
rootBindingOffset: number;
|
||||
|
||||
constructor({
|
||||
elementBinders,
|
||||
element
|
||||
}) {
|
||||
constructor({elementBinders, element}) {
|
||||
this.element = element;
|
||||
this.elementBinders = elementBinders;
|
||||
this.isTemplateElement = DOM.isTemplateElement(this.element);
|
||||
this.rootBindingOffset = (isPresent(this.element) && DOM.hasClass(this.element, NG_BINDING_CLASS)) ? 1 : 0;
|
||||
this.rootBindingOffset =
|
||||
(isPresent(this.element) && DOM.hasClass(this.element, NG_BINDING_CLASS)) ? 1 : 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,12 @@ import {ListWrapper, MapWrapper, Set, SetWrapper, List} from 'angular2/src/facad
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
import {
|
||||
ASTWithSource, AST, AstTransformer, AccessMember, LiteralArray, ImplicitReceiver
|
||||
ASTWithSource,
|
||||
AST,
|
||||
AstTransformer,
|
||||
AccessMember,
|
||||
LiteralArray,
|
||||
ImplicitReceiver
|
||||
} from 'angular2/change_detection';
|
||||
|
||||
import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './proto_view';
|
||||
|
|
@ -17,17 +22,17 @@ import {NG_BINDING_CLASS, EVENT_TARGET_SEPARATOR} from '../util';
|
|||
export class ProtoViewBuilder {
|
||||
rootElement;
|
||||
variableBindings: Map<string, string>;
|
||||
elements:List<ElementBinderBuilder>;
|
||||
type:number;
|
||||
elements: List<ElementBinderBuilder>;
|
||||
type: number;
|
||||
|
||||
constructor(rootElement, type:number) {
|
||||
constructor(rootElement, type: number) {
|
||||
this.rootElement = rootElement;
|
||||
this.elements = [];
|
||||
this.variableBindings = MapWrapper.create();
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
bindElement(element, description = null):ElementBinderBuilder {
|
||||
bindElement(element, description = null): ElementBinderBuilder {
|
||||
var builder = new ElementBinderBuilder(this.elements.length, element, description);
|
||||
ListWrapper.push(this.elements, builder);
|
||||
DOM.addClass(element, NG_BINDING_CLASS);
|
||||
|
|
@ -37,14 +42,15 @@ export class ProtoViewBuilder {
|
|||
|
||||
bindVariable(name, value) {
|
||||
// Store the variable map from value to variable, reflecting how it will be used later by
|
||||
// DomView. When a local is set to the view, a lookup for the variable name will take place keyed
|
||||
// DomView. When a local is set to the view, a lookup for the variable name will take place
|
||||
// keyed
|
||||
// by the "value", or exported identifier. For example, ng-for sets a view local of "index".
|
||||
// When this occurs, a lookup keyed by "index" must occur to find if there is a var referencing
|
||||
// it.
|
||||
MapWrapper.set(this.variableBindings, value, name);
|
||||
}
|
||||
|
||||
build():api.ProtoViewDto {
|
||||
build(): api.ProtoViewDto {
|
||||
var renderElementBinders = [];
|
||||
|
||||
var apiElementBinders = [];
|
||||
|
|
@ -75,37 +81,39 @@ export class ProtoViewBuilder {
|
|||
MapWrapper.set(propertySetters, propertyName, setterFactory(propertyName));
|
||||
});
|
||||
|
||||
var nestedProtoView =
|
||||
isPresent(ebb.nestedProtoView) ? ebb.nestedProtoView.build() : null;
|
||||
var nestedProtoView = isPresent(ebb.nestedProtoView) ? ebb.nestedProtoView.build() : null;
|
||||
var parentIndex = isPresent(ebb.parent) ? ebb.parent.index : -1;
|
||||
ListWrapper.push(apiElementBinders, new api.ElementBinder({
|
||||
index: ebb.index, parentIndex:parentIndex, distanceToParent:ebb.distanceToParent,
|
||||
index: ebb.index,
|
||||
parentIndex: parentIndex,
|
||||
distanceToParent: ebb.distanceToParent,
|
||||
directives: apiDirectiveBinders,
|
||||
nestedProtoView: nestedProtoView,
|
||||
propertyBindings: ebb.propertyBindings, variableBindings: ebb.variableBindings,
|
||||
propertyBindings: ebb.propertyBindings,
|
||||
variableBindings: ebb.variableBindings,
|
||||
eventBindings: ebb.eventBindings,
|
||||
textBindings: ebb.textBindings,
|
||||
readAttributes: ebb.readAttributes
|
||||
}));
|
||||
ListWrapper.push(renderElementBinders, new ElementBinder({
|
||||
textNodeIndices: ebb.textBindingIndices,
|
||||
contentTagSelector: ebb.contentTagSelector,
|
||||
parentIndex: parentIndex,
|
||||
distanceToParent: ebb.distanceToParent,
|
||||
nestedProtoView: isPresent(nestedProtoView) ? resolveInternalDomProtoView(nestedProtoView.render) : null,
|
||||
componentId: ebb.componentId,
|
||||
eventLocals: new LiteralArray(ebb.eventBuilder.buildEventLocals()),
|
||||
localEvents: ebb.eventBuilder.buildLocalEvents(),
|
||||
globalEvents: ebb.eventBuilder.buildGlobalEvents(),
|
||||
hostActions: hostActions,
|
||||
propertySetters: propertySetters
|
||||
}));
|
||||
textNodeIndices: ebb.textBindingIndices,
|
||||
contentTagSelector: ebb.contentTagSelector,
|
||||
parentIndex: parentIndex,
|
||||
distanceToParent: ebb.distanceToParent,
|
||||
nestedProtoView: isPresent(nestedProtoView) ?
|
||||
resolveInternalDomProtoView(nestedProtoView.render) :
|
||||
null,
|
||||
componentId: ebb.componentId,
|
||||
eventLocals: new LiteralArray(ebb.eventBuilder.buildEventLocals()),
|
||||
localEvents: ebb.eventBuilder.buildLocalEvents(),
|
||||
globalEvents: ebb.eventBuilder.buildGlobalEvents(),
|
||||
hostActions: hostActions,
|
||||
propertySetters: propertySetters
|
||||
}));
|
||||
});
|
||||
return new api.ProtoViewDto({
|
||||
render: new DomProtoViewRef(new DomProtoView({
|
||||
element: this.rootElement,
|
||||
elementBinders: renderElementBinders
|
||||
})),
|
||||
render: new DomProtoViewRef(
|
||||
new DomProtoView({element: this.rootElement, elementBinders: renderElementBinders})),
|
||||
type: this.type,
|
||||
elementBinders: apiElementBinders,
|
||||
variableBindings: this.variableBindings
|
||||
|
|
@ -115,18 +123,18 @@ export class ProtoViewBuilder {
|
|||
|
||||
export class ElementBinderBuilder {
|
||||
element;
|
||||
index:number;
|
||||
parent:ElementBinderBuilder;
|
||||
distanceToParent:number;
|
||||
directives:List<DirectiveBuilder>;
|
||||
nestedProtoView:ProtoViewBuilder;
|
||||
index: number;
|
||||
parent: ElementBinderBuilder;
|
||||
distanceToParent: number;
|
||||
directives: List<DirectiveBuilder>;
|
||||
nestedProtoView: ProtoViewBuilder;
|
||||
propertyBindings: Map<string, ASTWithSource>;
|
||||
variableBindings: Map<string, string>;
|
||||
eventBindings: List<api.EventBinding>;
|
||||
eventBuilder: EventBuilder;
|
||||
textBindingIndices: List<number>;
|
||||
textBindings: List<ASTWithSource>;
|
||||
contentTagSelector:string;
|
||||
contentTagSelector: string;
|
||||
readAttributes: Map<string, string>;
|
||||
componentId: string;
|
||||
|
||||
|
|
@ -148,7 +156,7 @@ export class ElementBinderBuilder {
|
|||
this.readAttributes = MapWrapper.create();
|
||||
}
|
||||
|
||||
setParent(parent:ElementBinderBuilder, distanceToParent):ElementBinderBuilder {
|
||||
setParent(parent: ElementBinderBuilder, distanceToParent): ElementBinderBuilder {
|
||||
this.parent = parent;
|
||||
if (isPresent(parent)) {
|
||||
this.distanceToParent = distanceToParent;
|
||||
|
|
@ -156,19 +164,19 @@ export class ElementBinderBuilder {
|
|||
return this;
|
||||
}
|
||||
|
||||
readAttribute(attrName:string) {
|
||||
readAttribute(attrName: string) {
|
||||
if (isBlank(MapWrapper.get(this.readAttributes, attrName))) {
|
||||
MapWrapper.set(this.readAttributes, attrName, DOM.getAttribute(this.element, attrName));
|
||||
}
|
||||
}
|
||||
|
||||
bindDirective(directiveIndex:number):DirectiveBuilder {
|
||||
bindDirective(directiveIndex: number): DirectiveBuilder {
|
||||
var directive = new DirectiveBuilder(directiveIndex);
|
||||
ListWrapper.push(this.directives, directive);
|
||||
return directive;
|
||||
}
|
||||
|
||||
bindNestedProtoView(rootElement):ProtoViewBuilder {
|
||||
bindNestedProtoView(rootElement): ProtoViewBuilder {
|
||||
if (isPresent(this.nestedProtoView)) {
|
||||
throw new BaseException('Only one nested view per element is allowed');
|
||||
}
|
||||
|
|
@ -179,8 +187,8 @@ export class ElementBinderBuilder {
|
|||
bindProperty(name, expression) {
|
||||
MapWrapper.set(this.propertyBindings, name, expression);
|
||||
|
||||
//TODO: required for Dart transformers. Remove when Dart transformers
|
||||
//run all the steps of the render compiler
|
||||
// TODO: required for Dart transformers. Remove when Dart transformers
|
||||
// run all the steps of the render compiler
|
||||
setterFactory(name);
|
||||
}
|
||||
|
||||
|
|
@ -192,9 +200,11 @@ export class ElementBinderBuilder {
|
|||
this.nestedProtoView.bindVariable(name, value);
|
||||
} else {
|
||||
// Store the variable map from value to variable, reflecting how it will be used later by
|
||||
// DomView. When a local is set to the view, a lookup for the variable name will take place keyed
|
||||
// DomView. When a local is set to the view, a lookup for the variable name will take place
|
||||
// keyed
|
||||
// by the "value", or exported identifier. For example, ng-for sets a view local of "index".
|
||||
// When this occurs, a lookup keyed by "index" must occur to find if there is a var referencing
|
||||
// When this occurs, a lookup keyed by "index" must occur to find if there is a var
|
||||
// referencing
|
||||
// it.
|
||||
MapWrapper.set(this.variableBindings, value, name);
|
||||
}
|
||||
|
|
@ -209,17 +219,13 @@ export class ElementBinderBuilder {
|
|||
ListWrapper.push(this.textBindings, expression);
|
||||
}
|
||||
|
||||
setContentTagSelector(value:string) {
|
||||
this.contentTagSelector = value;
|
||||
}
|
||||
setContentTagSelector(value: string) { this.contentTagSelector = value; }
|
||||
|
||||
setComponentId(componentId:string) {
|
||||
this.componentId = componentId;
|
||||
}
|
||||
setComponentId(componentId: string) { this.componentId = componentId; }
|
||||
}
|
||||
|
||||
export class DirectiveBuilder {
|
||||
directiveIndex:number;
|
||||
directiveIndex: number;
|
||||
propertyBindings: Map<string, ASTWithSource>;
|
||||
hostPropertyBindings: Map<string, ASTWithSource>;
|
||||
hostActions: List<HostAction>;
|
||||
|
|
@ -235,15 +241,13 @@ export class DirectiveBuilder {
|
|||
this.eventBuilder = new EventBuilder();
|
||||
}
|
||||
|
||||
bindProperty(name, expression) {
|
||||
MapWrapper.set(this.propertyBindings, name, expression);
|
||||
}
|
||||
bindProperty(name, expression) { MapWrapper.set(this.propertyBindings, name, expression); }
|
||||
|
||||
bindHostProperty(name, expression) {
|
||||
MapWrapper.set(this.hostPropertyBindings, name, expression);
|
||||
}
|
||||
|
||||
bindHostAction(actionName:string, actionExpression:string, expression:ASTWithSource) {
|
||||
bindHostAction(actionName: string, actionExpression: string, expression: ASTWithSource) {
|
||||
ListWrapper.push(this.hostActions, new HostAction(actionName, actionExpression, expression));
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +276,8 @@ export class EventBuilder extends AstTransformer {
|
|||
// var adjustedAst = astWithSource.ast.visit(this);
|
||||
var adjustedAst = source.ast;
|
||||
var fullName = isPresent(target) ? target + EVENT_TARGET_SEPARATOR + name : name;
|
||||
var result = new api.EventBinding(fullName, new ASTWithSource(adjustedAst, source.source, source.location));
|
||||
var result = new api.EventBinding(
|
||||
fullName, new ASTWithSource(adjustedAst, source.source, source.location));
|
||||
var event = new Event(name, target, fullName);
|
||||
if (isBlank(target)) {
|
||||
ListWrapper.push(this.localEvents, event);
|
||||
|
|
@ -282,14 +287,15 @@ export class EventBuilder extends AstTransformer {
|
|||
return result;
|
||||
}
|
||||
|
||||
visitAccessMember(ast:AccessMember) {
|
||||
visitAccessMember(ast: AccessMember) {
|
||||
var isEventAccess = false;
|
||||
var current = ast;
|
||||
var current: AST = ast;
|
||||
while (!isEventAccess && (current instanceof AccessMember)) {
|
||||
if (current.name == '$event') {
|
||||
var am = <AccessMember>current;
|
||||
if (am.name == '$event') {
|
||||
isEventAccess = true;
|
||||
}
|
||||
current = current.receiver;
|
||||
current = am.receiver;
|
||||
}
|
||||
|
||||
if (isEventAccess) {
|
||||
|
|
@ -301,17 +307,11 @@ export class EventBuilder extends AstTransformer {
|
|||
}
|
||||
}
|
||||
|
||||
buildEventLocals() {
|
||||
return this.locals;
|
||||
}
|
||||
buildEventLocals() { return this.locals; }
|
||||
|
||||
buildLocalEvents() {
|
||||
return this.localEvents;
|
||||
}
|
||||
buildLocalEvents() { return this.localEvents; }
|
||||
|
||||
buildGlobalEvents() {
|
||||
return this.globalEvents;
|
||||
}
|
||||
buildGlobalEvents() { return this.globalEvents; }
|
||||
|
||||
merge(eventBuilder: EventBuilder) {
|
||||
this._merge(this.localEvents, eventBuilder.localEvents);
|
||||
|
|
@ -8,19 +8,15 @@ import {DomProtoView} from './proto_view';
|
|||
import {LightDom} from '../shadow_dom/light_dom';
|
||||
import {Content} from '../shadow_dom/content_tag';
|
||||
|
||||
import {RenderViewRef} from '../../api';
|
||||
import {RenderViewRef, EventDispatcher} from '../../api';
|
||||
|
||||
// TODO(tbosch): enable this again!
|
||||
// import {EventDispatcher} from '../../api';
|
||||
|
||||
export function resolveInternalDomView(viewRef:RenderViewRef) {
|
||||
var domViewRef:DomViewRef = viewRef;
|
||||
return domViewRef._view;
|
||||
export function resolveInternalDomView(viewRef: RenderViewRef) {
|
||||
return (<DomViewRef>viewRef)._view;
|
||||
}
|
||||
|
||||
export class DomViewRef extends RenderViewRef {
|
||||
_view:DomView;
|
||||
constructor(view:DomView) {
|
||||
_view: DomView;
|
||||
constructor(view: DomView) {
|
||||
super();
|
||||
this._view = view;
|
||||
}
|
||||
|
|
@ -33,32 +29,20 @@ const NG_BINDING_CLASS = 'ng-binding';
|
|||
* Const of making objects: http://jsperf.com/instantiate-size-of-object
|
||||
*/
|
||||
export class DomView {
|
||||
boundElements:List;
|
||||
boundTextNodes:List;
|
||||
/// When the view is part of render tree, the DocumentFragment is empty, which is why we need
|
||||
/// to keep track of the nodes.
|
||||
rootNodes:List;
|
||||
// TODO(tbosch): move componentChildViews, viewContainers, contentTags, lightDoms into
|
||||
// a single array with records inside
|
||||
viewContainers: List<DomViewContainer>;
|
||||
contentTags: List<Content>;
|
||||
lightDoms: List<LightDom>;
|
||||
hostLightDom: LightDom;
|
||||
shadowRoot;
|
||||
proto: DomProtoView;
|
||||
hydrated: boolean;
|
||||
eventDispatcher: any/*EventDispatcher*/;
|
||||
eventDispatcher: EventDispatcher;
|
||||
eventHandlerRemovers: List<Function>;
|
||||
|
||||
constructor(
|
||||
proto:DomProtoView, rootNodes:List,
|
||||
boundTextNodes: List, boundElements:List, contentTags:List) {
|
||||
this.proto = proto;
|
||||
this.rootNodes = rootNodes;
|
||||
this.boundTextNodes = boundTextNodes;
|
||||
this.boundElements = boundElements;
|
||||
constructor(public proto: DomProtoView, public rootNodes: List</*node*/ any>,
|
||||
public boundTextNodes: List</*node*/ any>,
|
||||
public boundElements: List</*element*/ any>, public contentTags: List<Content>) {
|
||||
this.viewContainers = ListWrapper.createFixedSize(boundElements.length);
|
||||
this.contentTags = contentTags;
|
||||
this.lightDoms = ListWrapper.createFixedSize(boundElements.length);
|
||||
this.hostLightDom = null;
|
||||
this.hydrated = false;
|
||||
|
|
@ -67,7 +51,7 @@ export class DomView {
|
|||
this.shadowRoot = null;
|
||||
}
|
||||
|
||||
getDirectParentLightDom(boundElementIndex:number) {
|
||||
getDirectParentLightDom(boundElementIndex: number) {
|
||||
var binder = this.proto.elementBinders[boundElementIndex];
|
||||
var destLightDom = null;
|
||||
if (binder.parentIndex !== -1 && binder.distanceToParent === 1) {
|
||||
|
|
@ -76,26 +60,25 @@ export class DomView {
|
|||
return destLightDom;
|
||||
}
|
||||
|
||||
setElementProperty(elementIndex:number, propertyName:string, value:any) {
|
||||
var setter = MapWrapper.get(this.proto.elementBinders[elementIndex].propertySetters, propertyName);
|
||||
setElementProperty(elementIndex: number, propertyName: string, value: any) {
|
||||
var setter =
|
||||
MapWrapper.get(this.proto.elementBinders[elementIndex].propertySetters, propertyName);
|
||||
setter(this.boundElements[elementIndex], value);
|
||||
}
|
||||
|
||||
callAction(elementIndex:number, actionExpression:string, actionArgs:any) {
|
||||
callAction(elementIndex: number, actionExpression: string, actionArgs: any) {
|
||||
var binder = this.proto.elementBinders[elementIndex];
|
||||
var hostAction = MapWrapper.get(binder.hostActions, actionExpression);
|
||||
hostAction.eval(this.boundElements[elementIndex], this._localsWithAction(actionArgs));
|
||||
}
|
||||
|
||||
_localsWithAction(action:Object):Locals {
|
||||
_localsWithAction(action: Object): Locals {
|
||||
var map = MapWrapper.create();
|
||||
MapWrapper.set(map, '$action', action);
|
||||
return new Locals(null, map);
|
||||
}
|
||||
|
||||
setText(textIndex:number, value:string) {
|
||||
DOM.setText(this.boundTextNodes[textIndex], value);
|
||||
}
|
||||
setText(textIndex: number, value: string) { DOM.setText(this.boundTextNodes[textIndex], value); }
|
||||
|
||||
dispatchEvent(elementIndex, eventName, event): boolean {
|
||||
var allowDefaultBehavior = true;
|
||||
|
|
@ -104,9 +87,11 @@ export class DomView {
|
|||
MapWrapper.set(evalLocals, '$event', event);
|
||||
// TODO(tbosch): reenable this when we are parsing element properties
|
||||
// out of action expressions
|
||||
// var localValues = this.proto.elementBinders[elementIndex].eventLocals.eval(null, new Locals(null, evalLocals));
|
||||
// var localValues = this.proto.elementBinders[elementIndex].eventLocals.eval(null, new
|
||||
// Locals(null, evalLocals));
|
||||
// this.eventDispatcher.dispatchEvent(elementIndex, eventName, localValues);
|
||||
allowDefaultBehavior = this.eventDispatcher.dispatchEvent(elementIndex, eventName, evalLocals);
|
||||
allowDefaultBehavior =
|
||||
this.eventDispatcher.dispatchEvent(elementIndex, eventName, evalLocals);
|
||||
if (!allowDefaultBehavior) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
|
@ -10,16 +10,13 @@ export class DomViewContainer {
|
|||
this.views = [];
|
||||
}
|
||||
|
||||
contentTagContainers() {
|
||||
return this.views;
|
||||
}
|
||||
contentTagContainers() { return this.views; }
|
||||
|
||||
nodes():List {
|
||||
nodes(): List</*node*/ any> {
|
||||
var r = [];
|
||||
for (var i = 0; i < this.views.length; ++i) {
|
||||
r = ListWrapper.concat(r, this.views[i].rootNodes);
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
export class Title {
|
||||
|
||||
getTitle():string {
|
||||
return DOM.getTitle();
|
||||
}
|
||||
|
||||
setTitle(newTitle:string) {
|
||||
DOM.setTitle(newTitle);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
export class Title {
|
||||
getTitle(): string { return DOM.getTitle(); }
|
||||
|
||||
setTitle(newTitle: string) { DOM.setTitle(newTitle); }
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {isPresent, isBlank, RegExpWrapper, BaseException} from 'angular2/src/facade/lang';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
|
|
@ -18,15 +18,19 @@ export class UrlResolver {
|
|||
* ## When the `baseUrl` is null
|
||||
*
|
||||
* `url` is resolved in the context of the current document.
|
||||
* If the document location is 'http://www.foo.com/base' and the `url` is 'path/to/here', the resolved url will be
|
||||
* If the document location is 'http://www.foo.com/base' and the `url` is 'path/to/here', the
|
||||
* resolved url will be
|
||||
* 'http://www.foo.com/base/path/to/here'
|
||||
*
|
||||
* ## When the `baseUrl` is not null
|
||||
*
|
||||
* - when the `url` is null, the `baseUrl` is returned,
|
||||
* - due to a limitation in the process used to resolve urls (a HTMLLinkElement), `url` must not start with a `/`,
|
||||
* - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of `baseUrl` and `url`,
|
||||
* - if `url` is absolute (it has a scheme: 'http://', 'https://'), the `url` is returned (ignoring the `baseUrl`)
|
||||
* - due to a limitation in the process used to resolve urls (a HTMLLinkElement), `url` must not
|
||||
* start with a `/`,
|
||||
* - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
|
||||
* `baseUrl` and `url`,
|
||||
* - if `url` is absolute (it has a scheme: 'http://', 'https://'), the `url` is returned
|
||||
* (ignoring the `baseUrl`)
|
||||
*
|
||||
* @param {string} baseUrl
|
||||
* @param {string} url
|
||||
|
|
@ -41,10 +45,12 @@ export class UrlResolver {
|
|||
if (isBlank(url) || url == '') return baseUrl;
|
||||
|
||||
if (url[0] == '/') {
|
||||
// The `HTMLLinkElement` does not allow resolving this case (the `url` would be interpreted as relative):
|
||||
// The `HTMLLinkElement` does not allow resolving this case (the `url` would be interpreted as
|
||||
// relative):
|
||||
// - `baseUrl` = 'http://www.foo.com/base'
|
||||
// - `url` = '/absolute/path/to/here'
|
||||
// - the result would be 'http://www.foo.com/base/absolute/path/to/here' while 'http://www.foo.com/absolute/path/to/here'
|
||||
// - the result would be 'http://www.foo.com/base/absolute/path/to/here' while
|
||||
// 'http://www.foo.com/absolute/path/to/here'
|
||||
// is expected (without the 'base' segment).
|
||||
throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import {Promise} from 'angular2/src/facade/async';
|
||||
|
||||
export class XHR {
|
||||
get(url: string): Promise<string> {
|
||||
return null;
|
||||
}
|
||||
get(url: string): Promise<string> { return null; }
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from 'angular2/src/di/annotations_impl';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
|
||||
import {XHR} from './xhr';
|
||||
|
||||
|
|
@ -19,9 +19,7 @@ export class XHRImpl extends XHR {
|
|||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
completer.reject(`Failed to load ${url}`);
|
||||
};
|
||||
xhr.onerror = function() { completer.reject(`Failed to load ${url}`); };
|
||||
|
||||
xhr.send();
|
||||
return completer.promise;
|
||||
|
|
@ -22,8 +22,7 @@ export function makeDecorator(annotationCls) {
|
|||
}
|
||||
|
||||
export function makeParamDecorator(annotationCls) {
|
||||
return function() {
|
||||
var args = arguments;
|
||||
return function(... args) {
|
||||
var Reflect = global.Reflect;
|
||||
if (!(Reflect && Reflect.getMetadata)) {
|
||||
throw 'reflect-metadata shim is required when using parameter decorators';
|
||||
|
|
|
|||
|
|
@ -183,10 +183,9 @@ class MockStepFactory extends CompileStepFactory {
|
|||
}
|
||||
}
|
||||
|
||||
class MockStep extends CompileStep {
|
||||
class MockStep /*implements CompileStep*/ {
|
||||
processClosure:Function;
|
||||
constructor(process) {
|
||||
super();
|
||||
this.processClosure = process;
|
||||
}
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {describe, beforeEach, it, xit, expect, iit, ddescribe, el} from 'angular2/test_lib';
|
||||
import {isPresent, isBlank, assertionsEnabled} from 'angular2/src/facade/lang';
|
||||
import {isPresent, isBlank, assertionsEnabled, IMPLEMENTS} from 'angular2/src/facade/lang';
|
||||
import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {DirectiveParser} from 'angular2/src/render/dom/compiler/directive_parser';
|
||||
|
|
@ -225,10 +225,10 @@ export function main() {
|
|||
});
|
||||
}
|
||||
|
||||
class MockStep extends CompileStep {
|
||||
@IMPLEMENTS(CompileStep)
|
||||
class MockStep {
|
||||
processClosure:Function;
|
||||
constructor(process) {
|
||||
super();
|
||||
this.processClosure = process;
|
||||
}
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
|
||||
import {ListWrapper, List, MapWrapper} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {isPresent, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
|
||||
import {isPresent, NumberWrapper, StringWrapper, IMPLEMENTS} from 'angular2/src/facade/lang';
|
||||
|
||||
import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
|
||||
import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
|
||||
|
|
@ -182,10 +182,10 @@ export function main() {
|
|||
});
|
||||
}
|
||||
|
||||
class MockStep extends CompileStep {
|
||||
@IMPLEMENTS(CompileStep)
|
||||
class MockStep {
|
||||
processClosure:Function;
|
||||
constructor(process) {
|
||||
super();
|
||||
this.processClosure = process;
|
||||
}
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
|
|
@ -193,7 +193,8 @@ class MockStep extends CompileStep {
|
|||
}
|
||||
}
|
||||
|
||||
export class IgnoreChildrenStep extends CompileStep {
|
||||
@IMPLEMENTS(CompileStep)
|
||||
export class IgnoreChildrenStep {
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
var attributeMap = DOM.attributeMap(current.element);
|
||||
if (MapWrapper.contains(attributeMap, 'ignore-children')) {
|
||||
|
|
@ -202,7 +203,8 @@ export class IgnoreChildrenStep extends CompileStep {
|
|||
}
|
||||
}
|
||||
|
||||
class IgnoreCurrentElementStep extends CompileStep {
|
||||
@IMPLEMENTS(CompileStep)
|
||||
class IgnoreCurrentElementStep {
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
var attributeMap = DOM.attributeMap(current.element);
|
||||
if (MapWrapper.contains(attributeMap, 'ignore-current')) {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
|
||||
import {IMPLEMENTS} from 'angular2/src/facade/lang';
|
||||
import {PropertyBindingParser} from 'angular2/src/render/dom/compiler/property_binding_parser';
|
||||
import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
|
||||
import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
|
||||
import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step'
|
||||
import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
|
||||
import {CompileControl} from 'angular2/src/render/dom/compiler/compile_control';
|
||||
import {Lexer, Parser} from 'angular2/change_detection';
|
||||
|
||||
|
|
@ -164,10 +165,10 @@ export function main() {
|
|||
});
|
||||
}
|
||||
|
||||
class MockStep extends CompileStep {
|
||||
@IMPLEMENTS(CompileStep)
|
||||
class MockStep {
|
||||
processClosure:Function;
|
||||
constructor(process) {
|
||||
super();
|
||||
this.processClosure = process;
|
||||
}
|
||||
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@ import {RenderViewRef, ProtoViewDto, ViewDefinition, EventDispatcher, DirectiveM
|
|||
import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
|
||||
import {el, dispatchEvent} from 'angular2/test_lib';
|
||||
|
||||
export class TestView extends EventDispatcher {
|
||||
export class TestView {
|
||||
rawView:DomView;
|
||||
viewRef:RenderViewRef;
|
||||
events:List;
|
||||
|
||||
constructor(viewRef:RenderViewRef) {
|
||||
super();
|
||||
this.viewRef = viewRef;
|
||||
this.rawView = resolveInternalDomView(viewRef);
|
||||
this.events = [];
|
||||
|
|
@ -24,11 +23,11 @@ export class TestView extends EventDispatcher {
|
|||
}
|
||||
|
||||
|
||||
class LoggingEventDispatcher extends EventDispatcher {
|
||||
@IMPLEMENTS(EventDispatcher)
|
||||
class LoggingEventDispatcher {
|
||||
log:List;
|
||||
|
||||
constructor(log:List) {
|
||||
super();
|
||||
this.log = log;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@ export function main() {
|
|||
it('should return a string when there is no import statement', inject([StyleInliner], (inliner) => {
|
||||
var css = '.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base');
|
||||
expect(loadedCss).not.toBePromise();
|
||||
expect(loadedCss).toEqual(css);
|
||||
expect(loadedCss.syncResult).toEqual(css);
|
||||
}));
|
||||
|
||||
it('should inline @import rules',
|
||||
|
|
@ -41,9 +40,9 @@ export function main() {
|
|||
xhr.reply('http://base/one.css', '.one {}');
|
||||
var css = '@import url("one.css");.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('.one {}\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -59,9 +58,9 @@ export function main() {
|
|||
xhr.reply('http://base/one.css', '.one {}');
|
||||
var css = '@import url(one.css);.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('.one {}\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -76,9 +75,9 @@ export function main() {
|
|||
inject([StyleInliner, AsyncTestCompleter], (inliner, async) => {
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('/* failed to import http://base/one.css */\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -95,9 +94,9 @@ export function main() {
|
|||
xhr.reply('http://base/two.css', '.two {}');
|
||||
var css = '@import "one.css";@import "two.css";.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('.one {}\n.two {}\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -114,9 +113,9 @@ export function main() {
|
|||
xhr.reply('http://base/two.css', '.two {}');
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base/');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('.two {}\n.one {}\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -133,9 +132,9 @@ export function main() {
|
|||
xhr.reply('http://base/two.css', '@import "one.css";.two {}');
|
||||
var css = '@import "one.css";.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base/');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('.two {}\n.one {}\n.main {}');
|
||||
async.done();
|
||||
|
|
@ -151,9 +150,9 @@ export function main() {
|
|||
// Invalid rule: the url is not quoted
|
||||
var css = '@import one.css;.main {}';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base/');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('/* Invalid import rule: "@import one.css;" */.main {}');
|
||||
async.done();
|
||||
|
|
@ -171,9 +170,9 @@ export function main() {
|
|||
xhr.reply('http://base/one.css', '.one {}');
|
||||
var css = '@import "one.css" (min-width: 700px) and (orientation: landscape);';
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base/');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual('@media (min-width: 700px) and (orientation: landscape) {\n.one {}\n}\n');
|
||||
async.done();
|
||||
|
|
@ -193,9 +192,9 @@ export function main() {
|
|||
xhr.reply('http://base/nested/two.css', '.two {background-image: url("../img/two.jpg");}');
|
||||
var css = '@import "one.css";'
|
||||
var loadedCss = inliner.inlineImports(css, 'http://base/');
|
||||
expect(loadedCss).toBePromise();
|
||||
expect(loadedCss.asyncResult).toBePromise();
|
||||
PromiseWrapper.then(
|
||||
loadedCss,
|
||||
loadedCss.asyncResult,
|
||||
function(css) {
|
||||
expect(css).toEqual(
|
||||
".two {background-image: url('http://base/img/two.jpg');}\n" +
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ module.exports = function makeNodeTree(destinationPath) {
|
|||
include: ['angular2/**', 'benchpress/**', 'rtts_assert/**', '**/e2e_test/**'],
|
||||
exclude: [
|
||||
// the following code and tests are not compatible with CJS/node environment
|
||||
'angular2/src/core/zone/ng_zone.es6',
|
||||
'angular2/test/core/zone/**',
|
||||
'angular2/test/test_lib/fake_async_spec.js'
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue