Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0e826c3

Browse files
committed
Merge pull request #148 from NativeScript/platform-filters
Platform filters
2 parents d45b8f9 + 391ffbc commit 0e826c3

File tree

16 files changed

+508
-260
lines changed

16 files changed

+508
-260
lines changed

‎ng-sample/app/app.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {ImageTest} from "./examples/image/image-test";
2424
import {NavigationTest} from "./examples/navigation/navigation-test";
2525
import {ActionBarTest} from "./examples/action-bar/action-bar-test";
2626
import {ModalTest} from "./examples/modal/modal-test";
27+
import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
2728

2829
nativeScriptBootstrap(RendererTest);
2930
//nativeScriptBootstrap(Benchmark);
@@ -34,5 +35,6 @@ nativeScriptBootstrap(RendererTest);
3435
//nativeScriptBootstrap(ListTestAsync);
3536
//nativeScriptBootstrap(ImageTest);
3637
//nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]);
37-
//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
38+
//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
3839
// nativeScriptBootstrap(ModalTest);
40+
// nativeScriptBootstrap(PlatfromDirectivesTest);
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from 'angular2/core';
2+
3+
@Component({
4+
selector: 'action-bar-test',
5+
template: `
6+
<StackLayout>
7+
<android><Label text="This is Android specific content"></Label></android>
8+
<ios><Label text="This is IOS specific content"></Label></ios>
9+
<Label
10+
android:text="Android specific attribute"
11+
ios:text="Ios specific attribute"></Label>
12+
</StackLayout>
13+
`
14+
})
15+
export class PlatfromDirectivesTest {
16+
}
17+
18+

‎ng-sample/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"homepage": "https://github.com/NativeScript/template-hello-world",
2525
"dependencies": {
26-
"tns-core-modules": "^2.0.0-angular-1",
26+
"tns-core-modules": "^2.0.0-angular-2",
2727
"nativescript-intl": "^0.0.2",
2828
"angular2": "2.0.0-beta.9",
2929
"parse5": "1.4.2",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
},
1515
"scripts": {},
1616
"dependencies": {
17-
"tns-core-modules": "^2.0.0-angular-1",
17+
"tns-core-modules": "^2.0.0-angular-2",
1818
"nativescript-intl": "^0.0.2",
1919
"angular2": "2.0.0-beta.9",
2020
"es6-shim": "^0.33.3",

‎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/ns-directives.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {NumberValueAccessor} from '../value-accessors/number-value-accessor';
88
import {SelectedIndexValueAccessor} from '../value-accessors/selectedIndex-value-accessor';
99
import {TabViewDirective, TabViewItemDirective} from './tab-view';
1010
import {ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective} from './action-bar';
11+
import {AndroidFilterComponent, IosFilterComponent} from './platform-filters';
1112

1213
export const NS_DIRECTIVES: Type[] = [
1314
ListViewComponent,
@@ -22,5 +23,7 @@ export const NS_DIRECTIVES: Type[] = [
2223
ActionBarComponent,
2324
ActionBarScope,
2425
ActionItemDirective,
25-
NavigationButtonDirective
26+
NavigationButtonDirective,
27+
AndroidFilterComponent,
28+
IosFilterComponent
2629
];
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Component, Inject} from 'angular2/core';
2+
import {Device, platformNames} from "platform";
3+
import {DEVICE} from "../platform-providers";
4+
5+
@Component({
6+
selector: "android",
7+
template: `<ng-content *ngIf="show"></ng-content>`,
8+
})
9+
export class AndroidFilterComponent {
10+
public show: boolean;
11+
constructor( @Inject(DEVICE) device: Device) {
12+
this.show = (device.os === platformNames.android);
13+
}
14+
}
15+
16+
@Component({
17+
selector: "ios",
18+
template: `<ng-content *ngIf="show"></ng-content>`,
19+
})
20+
export class IosFilterComponent {
21+
public show: boolean;
22+
constructor( @Inject(DEVICE) device: Device) {
23+
this.show = (device.os === platformNames.ios);
24+
}
25+
}

‎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 *asutil 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)

AltStyle によって変換されたページ (->オリジナル) /