diff --git a/ng-sample/app/app.ts b/ng-sample/app/app.ts index fe26d72d3..40131f25a 100644 --- a/ng-sample/app/app.ts +++ b/ng-sample/app/app.ts @@ -24,6 +24,7 @@ import {ImageTest} from "./examples/image/image-test"; import {NavigationTest} from "./examples/navigation/navigation-test"; import {ActionBarTest} from "./examples/action-bar/action-bar-test"; import {ModalTest} from "./examples/modal/modal-test"; +import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test"; nativeScriptBootstrap(RendererTest); //nativeScriptBootstrap(Benchmark); @@ -34,5 +35,6 @@ nativeScriptBootstrap(RendererTest); //nativeScriptBootstrap(ListTestAsync); //nativeScriptBootstrap(ImageTest); //nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]); -//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false }); +// nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false }); // nativeScriptBootstrap(ModalTest); +// nativeScriptBootstrap(PlatfromDirectivesTest); diff --git a/ng-sample/app/examples/platform-directives/platform-directives-test.ts b/ng-sample/app/examples/platform-directives/platform-directives-test.ts new file mode 100644 index 000000000..3ed8f1156 --- /dev/null +++ b/ng-sample/app/examples/platform-directives/platform-directives-test.ts @@ -0,0 +1,18 @@ +import {Component} from 'angular2/core'; + +@Component({ + selector: 'action-bar-test', + template: ` + + + + + + ` +}) +export class PlatfromDirectivesTest { +} + + diff --git a/ng-sample/package.json b/ng-sample/package.json index 0cc2915a2..eea477e00 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,7 +23,7 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "tns-core-modules": "^2.0.0-angular-1", + "tns-core-modules": "^2.0.0-angular-2", "nativescript-intl": "^0.0.2", "angular2": "2.0.0-beta.9", "parse5": "1.4.2", diff --git a/package.json b/package.json index 03573b020..22d0d4ebd 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "scripts": {}, "dependencies": { - "tns-core-modules": "^2.0.0-angular-1", + "tns-core-modules": "^2.0.0-angular-2", "nativescript-intl": "^0.0.2", "angular2": "2.0.0-beta.9", "es6-shim": "^0.33.3", diff --git a/src/nativescript-angular/application.ts b/src/nativescript-angular/application.ts index 38bdb4391..e59cfc419 100644 --- a/src/nativescript-angular/application.ts +++ b/src/nativescript-angular/application.ts @@ -39,7 +39,7 @@ import application = require('application'); export type ProviderArray = Array; -import {defaultPageProvider} from "./platform-providers"; +import {defaultPageProvider, defaultDeviceProvider} from "./platform-providers"; import * as nativescriptIntl from "nativescript-intl"; global.Intl = nativescriptIntl; @@ -68,6 +68,7 @@ export function bootstrap(appComponentType: any, provide(ExceptionHandler, {useFactory: () => new ExceptionHandler(DOM, true), deps: []}), defaultPageProvider, + defaultDeviceProvider, NativeScriptRootRenderer, provide(RootRenderer, {useClass: NativeScriptRootRenderer}), NativeScriptRenderer, diff --git a/src/nativescript-angular/directives/ns-directives.ts b/src/nativescript-angular/directives/ns-directives.ts index 670d847be..70f18cb41 100644 --- a/src/nativescript-angular/directives/ns-directives.ts +++ b/src/nativescript-angular/directives/ns-directives.ts @@ -8,6 +8,7 @@ import {NumberValueAccessor} from '../value-accessors/number-value-accessor'; import {SelectedIndexValueAccessor} from '../value-accessors/selectedIndex-value-accessor'; import {TabViewDirective, TabViewItemDirective} from './tab-view'; import {ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective} from './action-bar'; +import {AndroidFilterComponent, IosFilterComponent} from './platform-filters'; export const NS_DIRECTIVES: Type[] = [ ListViewComponent, @@ -22,5 +23,7 @@ export const NS_DIRECTIVES: Type[] = [ ActionBarComponent, ActionBarScope, ActionItemDirective, - NavigationButtonDirective + NavigationButtonDirective, + AndroidFilterComponent, + IosFilterComponent ]; diff --git a/src/nativescript-angular/directives/platform-filters.ts b/src/nativescript-angular/directives/platform-filters.ts new file mode 100644 index 000000000..8e6dd8e56 --- /dev/null +++ b/src/nativescript-angular/directives/platform-filters.ts @@ -0,0 +1,25 @@ +import {Component, Inject} from 'angular2/core'; +import {Device, platformNames} from "platform"; +import {DEVICE} from "../platform-providers"; + +@Component({ + selector: "android", + template: ``, +}) +export class AndroidFilterComponent { + public show: boolean; + constructor( @Inject(DEVICE) device: Device) { + this.show = (device.os === platformNames.android); + } +} + +@Component({ + selector: "ios", + template: ``, +}) +export class IosFilterComponent { + public show: boolean; + constructor( @Inject(DEVICE) device: Device) { + this.show = (device.os === platformNames.ios); + } +} \ No newline at end of file diff --git a/src/nativescript-angular/platform-providers.ts b/src/nativescript-angular/platform-providers.ts index 3c3645cf2..a81f93d3d 100644 --- a/src/nativescript-angular/platform-providers.ts +++ b/src/nativescript-angular/platform-providers.ts @@ -1,10 +1,12 @@ import {topmost} from 'ui/frame'; import {Page} from 'ui/page'; import {provide, Provider, OpaqueToken} from 'angular2/src/core/di'; +import {Device, ScreenMetrics, device, screen} from "platform"; export const APP_ROOT_VIEW = new OpaqueToken('App Root View'); +export const DEVICE = new OpaqueToken('platfrom device'); -export const defaultPageProvider = provide(Page, {useFactory: getDefaultPage}); +export const defaultPageProvider = provide(Page, { useFactory: getDefaultPage }); export function getDefaultPage(): Page { const frame = topmost(); @@ -14,3 +16,6 @@ export function getDefaultPage(): Page { return null; } } + +export const defaultDeviceProvider = provide(DEVICE, { useValue: device }); + diff --git a/src/nativescript-angular/renderer.ts b/src/nativescript-angular/renderer.ts index 081fb4c91..a787b16b2 100644 --- a/src/nativescript-angular/renderer.ts +++ b/src/nativescript-angular/renderer.ts @@ -5,7 +5,7 @@ import { RenderComponentType, RenderDebugInfo } from 'angular2/src/core/render/api'; -import {APP_ROOT_VIEW} from "./platform-providers"; +import {APP_ROOT_VIEW, DEVICE} from "./platform-providers"; import {isBlank} from 'angular2/src/facade/lang'; import {DOM} from 'angular2/src/platform/dom/dom_adapter'; import {COMPONENT_VARIABLE, CONTENT_ATTR} from 'angular2/src/platform/dom/dom_renderer'; @@ -13,16 +13,20 @@ import {View} from "ui/core/view"; import * as application from "application"; import {topmost} from 'ui/frame'; import {Page} from 'ui/page'; -import * as util from "./view-util"; +import {traceLog, ViewUtil, NgView} from "./view-util"; import {escapeRegexSymbols} from "utils/utils"; +import { Device } from "platform"; export { rendererTraceCategory } from "./view-util"; @Injectable() export class NativeScriptRootRenderer implements RootRenderer { private _rootView: View = null; - constructor(@Optional() @Inject(APP_ROOT_VIEW) rootView: View) { + private _viewUtil: ViewUtil; + + constructor( @Optional() @Inject(APP_ROOT_VIEW) rootView: View, @Inject(DEVICE) device: Device) { this._rootView = rootView; + this._viewUtil = new ViewUtil(device); } private _registeredComponents: Map = new Map(); @@ -38,6 +42,10 @@ export class NativeScriptRootRenderer implements RootRenderer { return this.rootView.page; } + public get viewUtil(): ViewUtil { + return this._viewUtil; + } + renderComponent(componentProto: RenderComponentType): Renderer { var renderer = this._registeredComponents.get(componentProto.id); if (isBlank(renderer)) { @@ -53,19 +61,24 @@ export class NativeScriptRenderer extends Renderer { private componentProtoId: string; private hasComponentStyles: boolean; private rootRenderer: NativeScriptRootRenderer; + + private get viewUtil(): ViewUtil { + return this.rootRenderer.viewUtil; + } + constructor(private _rootRenderer: NativeScriptRootRenderer, private componentProto: RenderComponentType) { super(); this.rootRenderer = _rootRenderer; let page = this.rootRenderer.page; let stylesLength = componentProto.styles.length; this.componentProtoId = componentProto.id; - for(let i = 0; i < stylesLength; i++) { + for (let i = 0; i < stylesLength; i++) { this.hasComponentStyles = true; let cssString = componentProto.styles[i] + ""; const realCSS = this.replaceNgAttribute(cssString, this.componentProtoId); application.addCss(realCSS); } - util.traceLog('NativeScriptRenderer created'); + traceLog('NativeScriptRenderer created'); } private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); @@ -73,120 +86,120 @@ export class NativeScriptRenderer extends Renderer { private replaceNgAttribute(input: string, componentId: string): string { return input.replace(this.attrReplacer, - "_ng_content_" + componentId.replace(this.attrSanitizer, "_")); + "_ng_content_" + componentId.replace(this.attrSanitizer, "_")); } renderComponent(componentProto: RenderComponentType): Renderer { return this._rootRenderer.renderComponent(componentProto); } - selectRootElement(selector: string): util.NgView { - util.traceLog('selectRootElement: ' + selector); - const rootView = this.rootRenderer.rootView; + selectRootElement(selector: string): NgView { + traceLog('selectRootElement: ' + selector); + const rootView = this.rootRenderer.rootView; rootView.nodeName = 'ROOT'; return rootView; } - createViewRoot(hostElement: util.NgView): util.NgView { - util.traceLog('CREATE VIEW ROOT: ' + hostElement.nodeName); + createViewRoot(hostElement: NgView): NgView { + traceLog('CREATE VIEW ROOT: ' + hostElement.nodeName); return hostElement; } - projectNodes(parentElement: util.NgView, nodes: util.NgView[]): void { - util.traceLog('NativeScriptRenderer.projectNodes'); + projectNodes(parentElement: NgView, nodes: NgView[]): void { + traceLog('NativeScriptRenderer.projectNodes'); nodes.forEach((node) => { - util.insertChild(parentElement, node); + this.viewUtil.insertChild(parentElement, node); }); } - attachViewAfter(anchorNode: util.NgView, viewRootNodes: util.NgView[]) { - util.traceLog('NativeScriptRenderer.attachViewAfter: ' + anchorNode.nodeName + ' ' + anchorNode); - const parent = (anchorNode.parent || anchorNode.templateParent); - const insertPosition = util.getChildIndex(parent, anchorNode); + attachViewAfter(anchorNode: NgView, viewRootNodes: NgView[]) { + traceLog('NativeScriptRenderer.attachViewAfter: ' + anchorNode.nodeName + ' ' + anchorNode); + const parent = (anchorNode.parent || anchorNode.templateParent); + const insertPosition = this.viewUtil.getChildIndex(parent, anchorNode); viewRootNodes.forEach((node, index) => { const childIndex = insertPosition + index + 1; - util.insertChild(parent, node, childIndex); + this.viewUtil.insertChild(parent, node, childIndex); this.animateNodeEnter(node); }); } - detachView(viewRootNodes: util.NgView[]) { - util.traceLog('NativeScriptRenderer.detachView'); + detachView(viewRootNodes: NgView[]) { + traceLog('NativeScriptRenderer.detachView'); for (var i = 0; i < viewRootNodes.length; i++) { var node = viewRootNodes[i]; - util.removeChild(node.parent, node); + this.viewUtil.removeChild(node.parent, node); this.animateNodeLeave(node); } } - animateNodeEnter(node: util.NgView) { + animateNodeEnter(node: NgView) { } - animateNodeLeave(node: util.NgView) { + animateNodeLeave(node: NgView) { } - public destroyView(hostElement: util.NgView, viewAllNodes: util.NgView[]) { - util.traceLog("NativeScriptRenderer.destroyView"); + public destroyView(hostElement: NgView, viewAllNodes: NgView[]) { + traceLog("NativeScriptRenderer.destroyView"); // Seems to be called on component dispose only (router outlet) //TODO: handle this when we resolve routing and navigation. } - setElementProperty(renderElement: util.NgView, propertyName: string, propertyValue: any) { - util.traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ': ' + propertyName + " = " + propertyValue); - util.setProperty(renderElement, propertyName, propertyValue); + setElementProperty(renderElement: NgView, propertyName: string, propertyValue: any) { + traceLog("NativeScriptRenderer.setElementProperty " + renderElement + ': ' + propertyName + " = " + propertyValue); + this.viewUtil.setProperty(renderElement, propertyName, propertyValue); } - setElementAttribute(renderElement: util.NgView, attributeName: string, attributeValue: string) { - util.traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ': ' + attributeName + " = " + attributeValue); + setElementAttribute(renderElement: NgView, attributeName: string, attributeValue: string) { + traceLog("NativeScriptRenderer.setElementAttribute " + renderElement + ': ' + attributeName + " = " + attributeValue); return this.setElementProperty(renderElement, attributeName, attributeValue); } - setElementClass(renderElement: util.NgView, className: string, isAdd: boolean): void { - util.traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd); + setElementClass(renderElement: NgView, className: string, isAdd: boolean): void { + traceLog("NativeScriptRenderer.setElementClass " + className + " - " + isAdd); if (isAdd) { - util.addClass(renderElement, className); + this.viewUtil.addClass(renderElement, className); } else { - util.removeClass(renderElement, className); + this.viewUtil.removeClass(renderElement, className); } } - setElementStyle(renderElement: util.NgView, styleName: string, styleValue: string): void { - util.setStyleProperty(renderElement, styleName, styleValue); + setElementStyle(renderElement: NgView, styleName: string, styleValue: string): void { + this.viewUtil.setStyleProperty(renderElement, styleName, styleValue); } /** * Used only in debug mode to serialize property changes to comment nodes, * such as