Skip to content

Commit 391ffbc

Browse files
vakrilovvakrilov
vakrilov
authored and
vakrilov
committed
Platform-componenets tests.
1 parent 589013f commit 391ffbc

File tree

11 files changed

+463
-287
lines changed

11 files changed

+463
-287
lines changed

‎ng-sample/app/app.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {ActionBarTest} from "./examples/action-bar/action-bar-test";
2626
import {ModalTest} from "./examples/modal/modal-test";
2727
import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
2828

29-
// nativeScriptBootstrap(RendererTest);
29+
nativeScriptBootstrap(RendererTest);
3030
//nativeScriptBootstrap(Benchmark);
3131
//nativeScriptBootstrap(ListTest);
3232
//nativeScriptBootstrap(ListTestAsync);
@@ -37,4 +37,4 @@ import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-di
3737
//nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]);
3838
// nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
3939
// nativeScriptBootstrap(ModalTest);
40-
nativeScriptBootstrap(PlatfromDirectivesTest);
40+
// nativeScriptBootstrap(PlatfromDirectivesTest);

‎src/nativescript-angular/application.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import application = require('application');
3939

4040
export type ProviderArray = Array<Type | Provider | any[]>;
4141

42-
import {defaultPageProvider} from "./platform-providers";
42+
import {defaultPageProvider, defaultDeviceProvider} from "./platform-providers";
4343

4444
import * as nativescriptIntl from "nativescript-intl";
4545
global.Intl = nativescriptIntl;
@@ -68,6 +68,7 @@ export function bootstrap(appComponentType: any,
6868
provide(ExceptionHandler, {useFactory: () => new ExceptionHandler(DOM, true), deps: []}),
6969

7070
defaultPageProvider,
71+
defaultDeviceProvider,
7172
NativeScriptRootRenderer,
7273
provide(RootRenderer, {useClass: NativeScriptRootRenderer}),
7374
NativeScriptRenderer,

‎src/nativescript-angular/directives/platform-filters.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
import {Component} from 'angular2/core';
2-
import {device, platformNames} from "platform";
1+
import {Component, Inject} from 'angular2/core';
2+
import {Device, platformNames} from "platform";
3+
import {DEVICE} from "../platform-providers";
34

45
@Component({
56
selector: "android",
67
template: `<ng-content *ngIf="show"></ng-content>`,
78
})
89
export class AndroidFilterComponent {
9-
public show: boolean = device.os === platformNames.android;
10+
public show: boolean;
11+
constructor( @Inject(DEVICE) device: Device) {
12+
this.show = (device.os === platformNames.android);
13+
}
1014
}
1115

1216
@Component({
1317
selector: "ios",
1418
template: `<ng-content *ngIf="show"></ng-content>`,
1519
})
1620
export class IosFilterComponent {
17-
public show: boolean = device.os === platformNames.ios;
21+
public show: boolean;
22+
constructor( @Inject(DEVICE) device: Device) {
23+
this.show = (device.os === platformNames.ios);
24+
}
1825
}

‎src/nativescript-angular/platform-providers.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import {topmost} from 'ui/frame';
22
import {Page} from 'ui/page';
33
import {provide, Provider, OpaqueToken} from 'angular2/src/core/di';
4+
import {Device, ScreenMetrics, device, screen} from "platform";
45

56
export const APP_ROOT_VIEW = new OpaqueToken('App Root View');
7+
export const DEVICE = new OpaqueToken('platfrom device');
68

7-
export const defaultPageProvider = provide(Page, {useFactory: getDefaultPage});
9+
export const defaultPageProvider = provide(Page, { useFactory: getDefaultPage });
810

911
export function getDefaultPage(): Page {
1012
const frame = topmost();
@@ -14,3 +16,6 @@ export function getDefaultPage(): Page {
1416
return null;
1517
}
1618
}
19+
20+
export const defaultDeviceProvider = provide(DEVICE, { useValue: device });
21+

‎src/nativescript-angular/renderer.ts

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@ import {
55
RenderComponentType,
66
RenderDebugInfo
77
} from 'angular2/src/core/render/api';
8-
import {APP_ROOT_VIEW} from "./platform-providers";
8+
import {APP_ROOT_VIEW, DEVICE} from "./platform-providers";
99
import {isBlank} from 'angular2/src/facade/lang';
1010
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
1111
import {COMPONENT_VARIABLE, CONTENT_ATTR} from 'angular2/src/platform/dom/dom_renderer';
1212
import {View} from "ui/core/view";
1313
import * as application from "application";
1414
import {topmost} from 'ui/frame';
1515
import {Page} from 'ui/page';
16-
import * as util from "./view-util";
16+
import {traceLog, ViewUtil, NgView} from "./view-util";
1717
import {escapeRegexSymbols} from "utils/utils";
18+
import { Device } from "platform";
1819

1920
export { rendererTraceCategory } from "./view-util";
2021

2122
@Injectable()
2223
export class NativeScriptRootRenderer implements RootRenderer {
2324
private _rootView: View = null;
24-
constructor(@Optional() @Inject(APP_ROOT_VIEW) rootView: View) {
25+
private _viewUtil: ViewUtil;
26+
27+
constructor( @Optional() @Inject(APP_ROOT_VIEW) rootView: View, @Inject(DEVICE) device: Device) {
2528
this._rootView = rootView;
29+
this._viewUtil = new ViewUtil(device);
2630
}
2731

2832
private _registeredComponents: Map<string, NativeScriptRenderer> = new Map<string, NativeScriptRenderer>();
@@ -38,6 +42,10 @@ export class NativeScriptRootRenderer implements RootRenderer {
3842
return <Page>this.rootView.page;
3943
}
4044

45+
public get viewUtil(): ViewUtil {
46+
return this._viewUtil;
47+
}
48+
4149
renderComponent(componentProto: RenderComponentType): Renderer {
4250
var renderer = this._registeredComponents.get(componentProto.id);
4351
if (isBlank(renderer)) {
@@ -53,140 +61,145 @@ export class NativeScriptRenderer extends Renderer {
5361
private componentProtoId: string;
5462
private hasComponentStyles: boolean;
5563
private rootRenderer: NativeScriptRootRenderer;
64+
65+
private get viewUtil(): ViewUtil {
66+
return this.rootRenderer.viewUtil;
67+
}
68+
5669
constructor(private _rootRenderer: NativeScriptRootRenderer, private componentProto: RenderComponentType) {
5770
super();
5871
this.rootRenderer = _rootRenderer;
5972
let page = this.rootRenderer.page;
6073
let stylesLength = componentProto.styles.length;
6174
this.componentProtoId = componentProto.id;
62-
for(let i = 0; i < stylesLength; i++) {
75+
for (let i = 0; i < stylesLength; i++) {
6376
this.hasComponentStyles = true;
6477
let cssString = componentProto.styles[i] + "";
6578
const realCSS = this.replaceNgAttribute(cssString, this.componentProtoId);
6679
application.addCss(realCSS);
6780
}
68-
util.traceLog('NativeScriptRenderer created');
81+
traceLog('NativeScriptRenderer created');
6982
}
7083

7184
private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
7285
private attrSanitizer = /-/g;
7386

7487
private replaceNgAttribute(input: string, componentId: string): string {
7588
return input.replace(this.attrReplacer,
76-
"_ng_content_" + componentId.replace(this.attrSanitizer, "_"));
89+
"_ng_content_" + componentId.replace(this.attrSanitizer, "_"));
7790
}
7891

7992
renderComponent(componentProto: RenderComponentType): Renderer {
8093
return this._rootRenderer.renderComponent(componentProto);
8194
}
8295

83-
selectRootElement(selector: string): util.NgView {
84-
util.traceLog('selectRootElement: ' + selector);
85-
const rootView = <util.NgView><any>this.rootRenderer.rootView;
96+
selectRootElement(selector: string): NgView {
97+
traceLog('selectRootElement: ' + selector);
98+
const rootView = <NgView><any>this.rootRenderer.rootView;
8699
rootView.nodeName = 'ROOT';
87100
return rootView;
88101
}
89102

90-
createViewRoot(hostElement: util.NgView): util.NgView {
91-
util.traceLog('CREATE VIEW ROOT: ' + hostElement.nodeName);
103+
createViewRoot(hostElement: NgView): NgView {
104+
traceLog('CREATE VIEW ROOT: ' + hostElement.nodeName);
92105
return hostElement;
93106
}
94107

95-
projectNodes(parentElement: util.NgView, nodes: util.NgView[]): void {
96-
util.traceLog('NativeScriptRenderer.projectNodes');
108+
projectNodes(parentElement: NgView, nodes: NgView[]): void {
109+
traceLog('NativeScriptRenderer.projectNodes');
97110
nodes.forEach((node) => {
98-
util.insertChild(parentElement, node);
111+
this.viewUtil.insertChild(parentElement, node);
99112
});
100113
}
101114

102-
attachViewAfter(anchorNode: util.NgView, viewRootNodes: util.NgView[]) {
103-
util.traceLog('NativeScriptRenderer.attachViewAfter: ' + anchorNode.nodeName + ' ' + anchorNode);
104-
const parent = (<util.NgView>anchorNode.parent || anchorNode.templateParent);
105-
const insertPosition = util.getChildIndex(parent, anchorNode);
115+
attachViewAfter(anchorNode: NgView, viewRootNodes: NgView[]) {
116+
traceLog('NativeScriptRenderer.attachViewAfter: ' + anchorNode.nodeName + ' ' + anchorNode);
117+
const parent = (<NgView>anchorNode.parent || anchorNode.templateParent);
118+
const insertPosition = this.viewUtil.getChildIndex(parent, anchorNode);
106119

107120
viewRootNodes.forEach((node, index) => {
108121
const childIndex = insertPosition + index + 1;
109-
util.insertChild(parent, node, childIndex);
122+
this.viewUtil.insertChild(parent, node, childIndex);
110123
this.animateNodeEnter(node);
111124
});
112125
}
113126

114-
detachView(viewRootNodes: util.NgView[]) {
115-
util.traceLog('NativeScriptRenderer.detachView');
127+
detachView(viewRootNodes: NgView[]) {
128+
traceLog('NativeScriptRenderer.detachView');
116129
for (var i = 0; i < viewRootNodes.length; i++) {
117130
var node = viewRootNodes[i];
118-
util.removeChild(<util.NgView>node.parent, node);
131+
this.viewUtil.removeChild(<NgView>node.parent, node);
119132
this.animateNodeLeave(node);
120133
}
121134
}
122135

123-
animateNodeEnter(node: util.NgView) {
136+
animateNodeEnter(node: NgView) {
124137
}
125138

126-
animateNodeLeave(node: util.NgView) {
139+
animateNodeLeave(node: NgView) {
127140
}
128141

129-
public destroyView(hostElement: util.NgView, viewAllNodes: util.NgView[]) {
130-
util.traceLog("NativeScriptRenderer.destroyView");
142+
public destroyView(hostElement: NgView, viewAllNodes: NgView[]) {
143+
traceLog("NativeScriptRenderer.destroyView");
131144
// Seems to be called on component dispose only (router outlet)
132145
//TODO: handle this when we resolve routing and navigation.
133146
}
134147

135-
setElementProperty(renderElement: util.NgView, propertyName: string, propertyValue: any) {
136-
util.traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ': ' + propertyName + " = " + propertyValue);
137-
util.setProperty(renderElement, propertyName, propertyValue);
148+
setElementProperty(renderElement: NgView, propertyName: string, propertyValue: any) {
149+
traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ': ' + propertyName + " = " + propertyValue);
150+
this.viewUtil.setProperty(renderElement, propertyName, propertyValue);
138151
}
139152

140-
setElementAttribute(renderElement: util.NgView, attributeName: string, attributeValue: string) {
141-
util.traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ': ' + attributeName + " = " + attributeValue);
153+
setElementAttribute(renderElement: NgView, attributeName: string, attributeValue: string) {
154+
traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ': ' + attributeName + " = " + attributeValue);
142155
return this.setElementProperty(renderElement, attributeName, attributeValue);
143156
}
144157

145-
setElementClass(renderElement: util.NgView, className: string, isAdd: boolean): void {
146-
util.traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd);
158+
setElementClass(renderElement: NgView, className: string, isAdd: boolean): void {
159+
traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd);
147160

148161
if (isAdd) {
149-
util.addClass(renderElement, className);
162+
this.viewUtil.addClass(renderElement, className);
150163
} else {
151-
util.removeClass(renderElement, className);
164+
this.viewUtil.removeClass(renderElement, className);
152165
}
153166
}
154167

155-
setElementStyle(renderElement: util.NgView, styleName: string, styleValue: string): void {
156-
util.setStyleProperty(renderElement, styleName, styleValue);
168+
setElementStyle(renderElement: NgView, styleName: string, styleValue: string): void {
169+
this.viewUtil.setStyleProperty(renderElement, styleName, styleValue);
157170
}
158171

159172
/**
160173
* Used only in debug mode to serialize property changes to comment nodes,
161174
* such as <template> placeholders.
162175
*/
163-
setBindingDebugInfo(renderElement: util.NgView, propertyName: string, propertyValue: string): void {
164-
util.traceLog('NativeScriptRenderer.setBindingDebugInfo: ' + renderElement + ', ' + propertyName + ' = ' + propertyValue);
176+
setBindingDebugInfo(renderElement: NgView, propertyName: string, propertyValue: string): void {
177+
traceLog('NativeScriptRenderer.setBindingDebugInfo: ' + renderElement + ', ' + propertyName + ' = ' + propertyValue);
165178
}
166179

167180
setElementDebugInfo(renderElement: any, info: RenderDebugInfo): void {
168-
util.traceLog('NativeScriptRenderer.setElementDebugInfo: ' + renderElement);
181+
traceLog('NativeScriptRenderer.setElementDebugInfo: ' + renderElement);
169182
}
170183

171184
/**
172185
* Calls a method on an element.
173186
*/
174-
invokeElementMethod(renderElement: util.NgView, methodName: string, args: Array<any>) {
175-
util.traceLog("NativeScriptRenderer.invokeElementMethod " + methodName + " " + args);
187+
invokeElementMethod(renderElement: NgView, methodName: string, args: Array<any>) {
188+
traceLog("NativeScriptRenderer.invokeElementMethod " + methodName + " " + args);
176189
}
177190

178191
setText(renderNode: any, text: string) {
179-
util.traceLog("NativeScriptRenderer.setText");
192+
traceLog("NativeScriptRenderer.setText");
180193
}
181194

182-
public createTemplateAnchor(parentElement: util.NgView): util.NgView {
183-
util.traceLog('NativeScriptRenderer.createTemplateAnchor');
184-
return util.createTemplateAnchor(parentElement);
195+
public createTemplateAnchor(parentElement: NgView): NgView {
196+
traceLog('NativeScriptRenderer.createTemplateAnchor');
197+
return this.viewUtil.createTemplateAnchor(parentElement);
185198
}
186199

187-
public createElement(parentElement: util.NgView, name: string): util.NgView {
188-
util.traceLog('NativeScriptRenderer.createElement: ' + name + ' parent: ' + parentElement + ', ' + (parentElement ? parentElement.nodeName : 'null'));
189-
return util.createView(name, parentElement, (view) => {
200+
public createElement(parentElement: NgView, name: string): NgView {
201+
traceLog('NativeScriptRenderer.createElement: ' + name + ' parent: ' + parentElement + ', ' + (parentElement ? parentElement.nodeName : 'null'));
202+
return this.viewUtil.createView(name, parentElement, (view) => {
190203
// Set an attribute to the view to scope component-specific css.
191204
// The property name is pre-generated by Angular.
192205
if (this.hasComponentStyles) {
@@ -196,13 +209,13 @@ export class NativeScriptRenderer extends Renderer {
196209
});
197210
}
198211

199-
public createText(value: string): util.NgView {
200-
util.traceLog('NativeScriptRenderer.createText');
201-
return util.createText(value);;
212+
public createText(value: string): NgView {
213+
traceLog('NativeScriptRenderer.createText');
214+
return this.viewUtil.createText(value);;
202215
}
203216

204-
public listen(renderElement: util.NgView, eventName: string, callback: Function): Function {
205-
util.traceLog('NativeScriptRenderer.listen: ' + eventName);
217+
public listen(renderElement: NgView, eventName: string, callback: Function): Function {
218+
traceLog('NativeScriptRenderer.listen: ' + eventName);
206219
let zonedCallback = (<any>global).zone.bind(callback);
207220
renderElement.on(eventName, zonedCallback);
208221
return () => renderElement.off(eventName, zonedCallback);

0 commit comments

Comments
 (0)