javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): fix NavController typescript errors

Browse Source
This commit is contained in:
Adam Bradley
2016-01-12 21:41:37 -06:00
parent fdbd0f5f67
commit 8fdc9ed673
12 changed files with 187 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ionic/animations/animation.ts
View File

@ -1,3 +1,4 @@
import {ViewController} from '../components/nav/view-controller';
import {CSS, rafFrames} from '../util/dom'; import {CSS, rafFrames} from '../util/dom';
import {assign} from '../util/util'; import {assign} from '../util/util';
@ -564,7 +565,7 @@ export class Animation {
return new AnimationClass(element); return new AnimationClass(element);
} }
static createTransition(enteringView, leavingView, opts = {}) { static createTransition(enteringView: ViewController, leavingView: ViewController, opts: any = {}) {
let TransitionClass = AnimationRegistry[opts.animation]; let TransitionClass = AnimationRegistry[opts.animation];
if (!TransitionClass) { if (!TransitionClass) {
// didn't find a transition animation, default to ios-transition // didn't find a transition animation, default to ios-transition
@ -574,7 +575,7 @@ export class Animation {
return new TransitionClass(enteringView, leavingView, opts); return new TransitionClass(enteringView, leavingView, opts);
} }
static register(name, AnimationClass) { static register(name: string, AnimationClass) {
AnimationRegistry[name] = AnimationClass; AnimationRegistry[name] = AnimationClass;
} }
@ -601,7 +602,8 @@ class Animate {
// and correct API methods under the hood, so really doesn't matter // and correct API methods under the hood, so really doesn't matter
if (!fromEffect) { if (!fromEffect) {
return console.error(ele.tagName, 'animation fromEffect required, toEffect:', toEffect); console.error(ele.tagName, 'animation fromEffect required, toEffect:', toEffect);
return;
} }
this.toEffect = parseEffect(toEffect); this.toEffect = parseEffect(toEffect);
@ -609,7 +611,8 @@ class Animate {
this.shouldAnimate = (duration > 32); this.shouldAnimate = (duration > 32);
if (!this.shouldAnimate) { if (!this.shouldAnimate) {
return inlineStyle(ele, this.toEffect); inlineStyle(ele, this.toEffect);
return;
} }
this.ele = ele; this.ele = ele;
@ -635,7 +638,7 @@ class Animate {
this.effects.push( convertProperties(this.toEffect) ); this.effects.push( convertProperties(this.toEffect) );
} }
play(done) { play(done?: Function) {
const self = this; const self = this;
if (self.ani) { if (self.ani) {
@ -761,7 +764,7 @@ function parseEffect(inputEffect) {
} }
function convertProperties(inputEffect) { function convertProperties(inputEffect) {
let outputEffect = {}; let outputEffect: any = {};
let transforms = []; let transforms = [];
let value, property; let value, property;

8
ionic/components/checkbox/checkbox.ts
View File

@ -27,7 +27,7 @@ import {Form} from '../../util/form';
'role': 'checkbox', 'role': 'checkbox',
'class': 'item', 'class': 'item',
'tappable': '', 'tappable': '',
'tabindex': 0, 'tabindex': '0',
'[attr.aria-disabled]': 'disabled' '[attr.aria-disabled]': 'disabled'
}, },
template: template:
@ -41,8 +41,9 @@ import {Form} from '../../util/form';
'</div>' '</div>'
}) })
export class Checkbox { export class Checkbox {
private _checked: boolean;
private labelId: string;
@Input() value: string = ''; @Input() value: string = '';
@Input() public checked: any = false;
@Input() disabled: boolean = false; @Input() disabled: boolean = false;
@Input() id: string; @Input() id: string;
@ -84,9 +85,10 @@ export class Checkbox {
return !!this._checked; return !!this._checked;
} }
@Input()
set checked(val) { set checked(val) {
this._checked = !!val; this._checked = !!val;
this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked); this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString());
this.onChange(this._checked); this.onChange(this._checked);
} }

79
ionic/components/content/content.ts
View File

@ -1,6 +1,5 @@
import {Component, ElementRef, Optional, NgZone} from 'angular2/core'; import {Component, ElementRef, Optional, NgZone} from 'angular2/core';
import {Ion} from '../ion';
import {IonicApp} from '../app/app'; import {IonicApp} from '../app/app';
import {Config} from '../../config/config'; import {Config} from '../../config/config';
import {raf} from '../../util/dom'; import {raf} from '../../util/dom';
@ -32,24 +31,26 @@ import {ScrollTo} from '../../animations/scroll-to';
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</scroll-content>' '</scroll-content>'
}) })
export class Content extends Ion { export class Content {
private _padding: number = 0;
private _scrollEle: HTMLElement;
private _onScroll: any;
private _scrollTo: ScrollTo;
/** /**
* @param {ElementRef} elementRef A reference to the component's DOM element. * @param {ElementRef} elementRef A reference to the component's DOM element.
* @param {Config} config The config object to change content's default settings. * @param {Config} config The config object to change content's default settings.
*/ */
constructor( constructor(
elementRef: ElementRef, private _elementRef: ElementRef,
private _config: Config, private _config: Config,
@Optional() viewCtrl: ViewController,
private _app: IonicApp, private _app: IonicApp,
private _zone: NgZone private _zone: NgZone,
@Optional() viewCtrl: ViewController
) { ) {
super(elementRef);
this.scrollPadding = 0;
if (viewCtrl) { if (viewCtrl) {
viewCtrl.setContent(this); viewCtrl.setContent(this);
viewCtrl.setContentRef(elementRef); viewCtrl.setContentRef(_elementRef);
} }
} }
@ -58,21 +59,21 @@ export class Content extends Ion {
*/ */
ngOnInit() { ngOnInit() {
let self = this; let self = this;
self.scrollElement = self.getNativeElement().children[0]; self._scrollEle = self._elementRef.nativeElement.children[0];
self._scroll = function(ev) { self._onScroll = function(ev) {
self._app.setScrolling(); self._app.setScrolling();
}; };
if (self._config.get('tapPolyfill') === true) { if (self._config.get('tapPolyfill') === true) {
self._zone.runOutsideAngular(function() { self._zone.runOutsideAngular(function() {
self.scrollElement.addEventListener('scroll', self._scroll); self._scrollEle.addEventListener('scroll', self._onScroll);
}); });
} }
} }
ngOnDestroy() { ngOnDestroy() {
this.scrollElement.removeEventListener('scroll', this._scroll); this._scrollEle.removeEventListener('scroll', this._onScroll);
} }
/** /**
@ -101,25 +102,27 @@ export class Content extends Ion {
* @returns {Function} A function that removes the scroll handler. * @returns {Function} A function that removes the scroll handler.
*/ */
addScrollEventListener(handler) { addScrollEventListener(handler) {
if (!this.scrollElement) { return; } if (!this._scrollEle) {
return;
}
// ensure we're not creating duplicates // ensure we're not creating duplicates
this.scrollElement.removeEventListener('scroll', handler); this._scrollEle.removeEventListener('scroll', handler);
this.scrollElement.addEventListener('scroll', handler); this._scrollEle.addEventListener('scroll', handler);
return () => { return () => {
this.scrollElement.removeEventListener('scroll', handler); this._scrollEle.removeEventListener('scroll', handler);
} }
} }
onScrollEnd(callback) { onScrollEnd(callback) {
let lastScrollTop = null; let lastScrollTop = null;
let framesUnchanged = 0; let framesUnchanged = 0;
let scrollElement = this.scrollElement; let _scrollEle = this._scrollEle;
function next() { function next() {
let currentScrollTop = scrollElement.scrollTop; let currentScrollTop = _scrollEle.scrollTop;
if (lastScrollTop !== null) { if (lastScrollTop !== null) {
if (Math.round(lastScrollTop) === Math.round(currentScrollTop)) { if (Math.round(lastScrollTop) === Math.round(currentScrollTop)) {
@ -169,15 +172,15 @@ export class Content extends Ion {
* @returns {Function} A function that removes the touchmove handler. * @returns {Function} A function that removes the touchmove handler.
*/ */
addTouchMoveListener(handler) { addTouchMoveListener(handler) {
if (!this.scrollElement) { return; } if (!this._scrollEle) { return; }
// ensure we're not creating duplicates // ensure we're not creating duplicates
this.scrollElement.removeEventListener('touchmove', handler); this._scrollEle.removeEventListener('touchmove', handler);
this.scrollElement.addEventListener('touchmove', handler); this._scrollEle.addEventListener('touchmove', handler);
return () => { return () => {
this.scrollElement.removeEventListener('touchmove', handler); this._scrollEle.removeEventListener('touchmove', handler);
} }
} }
@ -215,7 +218,7 @@ export class Content extends Ion {
this._scrollTo.dispose(); this._scrollTo.dispose();
} }
this._scrollTo = new ScrollTo(this.scrollElement); this._scrollTo = new ScrollTo(this._scrollEle);
return this._scrollTo.start(x, y, duration, tolerance); return this._scrollTo.start(x, y, duration, tolerance);
} }
@ -250,7 +253,7 @@ export class Content extends Ion {
this._scrollTo.dispose(); this._scrollTo.dispose();
} }
this._scrollTo = new ScrollTo(this.scrollElement); this._scrollTo = new ScrollTo(this._scrollEle);
return this._scrollTo.start(0, 0, 300, 0); return this._scrollTo.start(0, 0, 300, 0);
} }
@ -273,8 +276,8 @@ export class Content extends Ion {
* {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth * {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth
*/ */
getDimensions() { getDimensions() {
let scrollElement = this.scrollElement; let _scrollEle = this._scrollEle;
let parentElement = scrollElement.parentElement; let parentElement = _scrollEle.parentElement;
return { return {
contentHeight: parentElement.offsetHeight, contentHeight: parentElement.offsetHeight,
@ -285,13 +288,13 @@ export class Content extends Ion {
contentLeft: parentElement.offsetLeft, contentLeft: parentElement.offsetLeft,
contentRight: parentElement.offsetLeft + parentElement.offsetWidth, contentRight: parentElement.offsetLeft + parentElement.offsetWidth,
scrollHeight: scrollElement.scrollHeight, scrollHeight: _scrollEle.scrollHeight,
scrollTop: scrollElement.scrollTop, scrollTop: _scrollEle.scrollTop,
scrollBottom: scrollElement.scrollTop + scrollElement.scrollHeight, scrollBottom: _scrollEle.scrollTop + _scrollEle.scrollHeight,
scrollWidth: scrollElement.scrollWidth, scrollWidth: _scrollEle.scrollWidth,
scrollLeft: scrollElement.scrollLeft, scrollLeft: _scrollEle.scrollLeft,
scrollRight: scrollElement.scrollLeft + scrollElement.scrollWidth, scrollRight: _scrollEle.scrollLeft + _scrollEle.scrollWidth,
} }
} }
@ -300,12 +303,12 @@ export class Content extends Ion {
* Adds padding to the bottom of the scroll element when the keyboard is open * Adds padding to the bottom of the scroll element when the keyboard is open
* so content below the keyboard can be scrolled into view. * so content below the keyboard can be scrolled into view.
*/ */
addScrollPadding(newScrollPadding) { add_padding(newPadding) {
if (newScrollPadding > this.scrollPadding) { if (newPadding > this._padding) {
console.debug('addScrollPadding', newScrollPadding); console.debug('add_padding', newPadding);
this.scrollPadding = newScrollPadding; this._padding = newPadding;
this.scrollElement.style.paddingBottom = newScrollPadding + 'px'; this._scrollEle.style.paddingBottom = newPadding + 'px';
} }
} }

90
ionic/components/nav/nav-controller.ts
View File

@ -108,7 +108,7 @@ export class NavController extends Ion {
private _sbThreshold: any; private _sbThreshold: any;
public sbGesture: any; public sbGesture: any;
private initZIndex: number = 10; private initZIndex: number = 10;
private id: number; public id: number;
private _ids: number = -1; private _ids: number = -1;
public providers: ResolvedProvider[]; public providers: ResolvedProvider[];
public router: any; public router: any;
@ -317,10 +317,10 @@ export class NavController extends Ion {
* @param {Object} [opts={}] Any options you want to use pass to transtion * @param {Object} [opts={}] Any options you want to use pass to transtion
* @returns {Promise} Returns a promise, which resolves when the transition has completed * @returns {Promise} Returns a promise, which resolves when the transition has completed
*/ */
present(enteringView: ViewController, opts = {}): Promise<any> { present(enteringView: ViewController, opts: any = {}): Promise<any> {
let nav = this.rootNav; let nav = this.rootNav;
if (nav._tabs) { if (nav['_tabs']) {
// TODO: must have until this goes in // TODO: must have until this goes in
// https://github.com/angular/angular/issues/5481 // https://github.com/angular/angular/issues/5481
console.error('A parent <ion-nav> is required for ActionSheet/Alert/Modal'); console.error('A parent <ion-nav> is required for ActionSheet/Alert/Modal');
@ -382,7 +382,7 @@ export class NavController extends Ion {
* @param {Object} [opts={}] Any options you want to use pass to transtion * @param {Object} [opts={}] Any options you want to use pass to transtion
* @returns {Promise} Returns a promise when the transition is completed * @returns {Promise} Returns a promise when the transition is completed
*/ */
pop(opts = {}): Promise<any> { pop(opts: any = {}): Promise<any> {
if (!opts.animateFirst && !this.canGoBack()) { if (!opts.animateFirst && !this.canGoBack()) {
return Promise.reject('pop cannot go back'); return Promise.reject('pop cannot go back');
} }
@ -433,7 +433,7 @@ export class NavController extends Ion {
* @param view {ViewController} to pop to * @param view {ViewController} to pop to
* @param {Object} [opts={}] Any options you want to use pass to transtion * @param {Object} [opts={}] Any options you want to use pass to transtion
*/ */
popTo(viewCtrl: ViewController, opts = {}): Promise<any> { popTo(viewCtrl: ViewController, opts: any = {}): Promise<any> {
// Get the target index of the view to pop to // Get the target index of the view to pop to
let viewIndex = this._views.indexOf(viewCtrl); let viewIndex = this._views.indexOf(viewCtrl);
let targetIndex = viewIndex + 1; let targetIndex = viewIndex + 1;
@ -656,8 +656,8 @@ export class NavController extends Ion {
* @param {Object} [opts={}] Any options you want to use pass * @param {Object} [opts={}] Any options you want to use pass
* @returns {Promise} Returns a promise when the pages are set * @returns {Promise} Returns a promise when the pages are set
*/ */
setPages(componentTypes: Array<Type>, opts = {}): Promise<any> { setPages(components: Array<{componentType: Type, params?: any}>, opts: any = {}): Promise<any> {
if (!componentTypes || !componentTypes.length) { if (!components || !components.length) {
return Promise.resolve(); return Promise.resolve();
} }
@ -684,22 +684,18 @@ export class NavController extends Ion {
} }
} }
let componentObj = null; let componentType: Type = null;
let componentType = null; let viewCtrl: ViewController = null;
let viewCtrl = null;
// create the ViewControllers that go before the new active ViewController // create the ViewControllers that go before the new active ViewController
// in the stack, but the previous views shouldn't render yet // in the stack, but the previous views shouldn't render yet
if (components.length > 1) { if (components.length > 1) {
let newBeforeItems = components.slice(0, components.length - 1); let newBeforeComponents: Array<{componentType: Type, params?: any}> = components.slice(0, components.length - 1);
for (let j = 0; j < newBeforeItems.length; j++) { for (let j = 0; j < newBeforeComponents.length; j++) {
componentObj = newBeforeItems[j]; componentType = newBeforeComponents[j].componentType;
if (componentObj) { if (componentType) {
// could be an object with a componentType property, or it is a componentType viewCtrl = new ViewController(componentType, newBeforeComponents[j].params);
componentType = componentObj.componentType || componentObj;
viewCtrl = new ViewController(componentType, componentObj.params);
viewCtrl.setNav(this); viewCtrl.setNav(this);
viewCtrl.state = CACHED_STATE; viewCtrl.state = CACHED_STATE;
viewCtrl.shouldDestroy = false; viewCtrl.shouldDestroy = false;
@ -711,13 +707,10 @@ export class NavController extends Ion {
} }
} }
// get the component that will become the active item
// it'll be the last one in the given components array
componentObj = components[ components.length - 1 ];
componentType = componentObj.componentType || componentObj;
// transition the leaving and entering // transition the leaving and entering
return this.push(componentType, componentObj.params, opts); return this.push(components[ components.length - 1 ].componentType,
components[ components.length - 1 ].params,
opts);
} }
/** /**
@ -727,11 +720,8 @@ export class NavController extends Ion {
* @param {Object} [opts={}] Any options you want to use pass to transtion * @param {Object} [opts={}] Any options you want to use pass to transtion
* @returns {Promise} Returns a promise when done * @returns {Promise} Returns a promise when done
*/ */
setRoot(componentType: ViewController, params: any = {}, opts: any = {}): Promise<any> { setRoot(componentType: Type, params: any = {}, opts: any = {}): Promise<any> {
return this.setPages([{ return this.setPages([ { componentType, params } ], opts);
componentType,
params
}], opts);
} }
/** /**
@ -1015,7 +1005,7 @@ export class NavController extends Ion {
let component = this._viewManager.getComponent(pageElementRef); let component = this._viewManager.getComponent(pageElementRef);
// auto-add page css className created from component JS class name // auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase(viewCtrl.componentType.name); let cssClassName = pascalCaseToDashCase(viewCtrl.componentType['name']);
this._renderer.setElementClass(pageElementRef, cssClassName, true); this._renderer.setElementClass(pageElementRef, cssClassName, true);
viewCtrl.addDestroy(() => { viewCtrl.addDestroy(() => {
@ -1187,7 +1177,7 @@ export class NavController extends Ion {
leavingView.state = STAGED_LEAVING_STATE; leavingView.state = STAGED_LEAVING_STATE;
// init the swipe back transition animation // init the swipe back transition animation
this._sbTrans = Transition.create(this, opts); this._sbTrans = Animation.createTransition(enteringView, leavingView, opts);
this._sbTrans.easing('linear').progressStart(); this._sbTrans.easing('linear').progressStart();
}); });
@ -1341,33 +1331,7 @@ export class NavController extends Ion {
/** /**
* @private * @private
*/ */
navbarViewContainer(nbContainer) { _add(viewCtrl: ViewController) {
if (nbContainer) {
this._nbContainer = nbContainer;
}
if (this._nbContainer) {
return this._nbContainer;
}
if (this.parent) {
return this.parent.navbarViewContainer();
}
}
/**
* @private
* @returns {TODO} TODO
*/
anchorElementRef() {
if (arguments.length) {
this._anchorER = arguments[0];
}
return this._anchorER;
}
/**
* @private
*/
_add(viewCtrl) {
this._incId(viewCtrl); this._incId(viewCtrl);
this._views.push(viewCtrl); this._views.push(viewCtrl);
} }
@ -1375,7 +1339,7 @@ export class NavController extends Ion {
/** /**
* @private * @private
*/ */
_incId(viewCtrl) { _incId(viewCtrl: ViewController) {
viewCtrl.id = this.id + '-' + (++this._ids); viewCtrl.id = this.id + '-' + (++this._ids);
} }
@ -1389,7 +1353,7 @@ export class NavController extends Ion {
/** /**
* @private * @private
*/ */
_getStagedEntering() { _getStagedEntering(): ViewController {
for (let i = 0, ii = this._views.length; i < ii; i++) { for (let i = 0, ii = this._views.length; i < ii; i++) {
if (this._views[i].state === STAGED_ENTERING_STATE) { if (this._views[i].state === STAGED_ENTERING_STATE) {
return this._views[i]; return this._views[i];
@ -1401,7 +1365,7 @@ export class NavController extends Ion {
/** /**
* @private * @private
*/ */
_getStagedLeaving() { _getStagedLeaving(): ViewController {
for (let i = 0, ii = this._views.length; i < ii; i++) { for (let i = 0, ii = this._views.length; i < ii; i++) {
if (this._views[i].state === STAGED_LEAVING_STATE) { if (this._views[i].state === STAGED_LEAVING_STATE) {
return this._views[i]; return this._views[i];
@ -1427,7 +1391,7 @@ export class NavController extends Ion {
* @param {Index} The index of the page you want to get * @param {Index} The index of the page you want to get
* @returns {Component} Returns the component that matches the index given * @returns {Component} Returns the component that matches the index given
*/ */
getByIndex(index): ViewController { getByIndex(index: number): ViewController {
if (index < this._views.length && index > -1) { if (index < this._views.length && index > -1) {
return this._views[index]; return this._views[index];
} }
@ -1439,7 +1403,7 @@ export class NavController extends Ion {
* @param {TODO} view TODO * @param {TODO} view TODO
* @returns {TODO} TODO * @returns {TODO} TODO
*/ */
getPrevious(viewCtrl): ViewController { getPrevious(viewCtrl: ViewController): ViewController {
if (viewCtrl) { if (viewCtrl) {
let viewIndex = this._views.indexOf(viewCtrl); let viewIndex = this._views.indexOf(viewCtrl);

44
ionic/components/nav/nav-push.ts
View File

@ -1,4 +1,4 @@
import {Directive, Optional} from 'angular2/core'; import {Directive, Optional, Input} from 'angular2/core';
import {NavController} from './nav-controller'; import {NavController} from './nav-controller';
import {NavRegistry} from './nav-registry'; import {NavRegistry} from './nav-registry';
@ -44,24 +44,20 @@ import {NavRegistry} from './nav-registry';
*/ */
@Directive({ @Directive({
selector: '[navPush]', selector: '[navPush]',
inputs: [
'instruction: navPush',
'params: navParams'
],
host: { host: {
'(click)': 'onClick()', '(click)': 'onClick()',
'role': 'link' 'role': 'link'
} }
}) })
export class NavPush { export class NavPush {
/** @Input() navPush;
* TODO @Input() navParams;
* @param {NavController} nav TODO
*/ constructor(
constructor(@Optional() nav: NavController, registry: NavRegistry) { @Optional() private _nav: NavController,
this.nav = nav; private registry: NavRegistry
this.registry = registry; ) {
if (!nav) { if (!_nav) {
console.error('nav-push must be within a NavController'); console.error('nav-push must be within a NavController');
} }
} }
@ -72,22 +68,23 @@ export class NavPush {
onClick() { onClick() {
let destination, params; let destination, params;
if (this.instruction instanceof Array) { if (this.navPush instanceof Array) {
if (this.instruction.length > 2) { if (this.navPush.length > 2) {
throw 'Too many [navPush] arguments, expects [View, { params }]' throw 'Too many [navPush] arguments, expects [View, { params }]'
} }
destination = this.instruction[0]; destination = this.navPush[0];
params = this.instruction[1] || this.params; params = this.navPush[1] || this.navParams;
} else { } else {
destination = this.instruction; destination = this.navPush;
params = this.params; params = this.navParams;
} }
if (typeof destination === "string") { if (typeof destination === "string") {
destination = this.registry.get(destination); destination = this.registry.get(destination);
} }
this.nav && this.nav.push(destination, params); this._nav && this._nav.push(destination, params);
} }
} }
@ -122,9 +119,8 @@ export class NavPop {
* TODO * TODO
* @param {NavController} nav TODO * @param {NavController} nav TODO
*/ */
constructor(@Optional() nav: NavController) { constructor(@Optional() private _nav: NavController) {
this.nav = nav; if (!_nav) {
if (!nav) {
console.error('nav-pop must be within a NavController'); console.error('nav-pop must be within a NavController');
} }
} }
@ -132,6 +128,6 @@ export class NavPop {
* @private * @private
*/ */
onClick() { onClick() {
this.nav && this.nav.pop(); this._nav && this._nav.pop();
} }
} }

30
ionic/components/nav/nav-router.ts
View File

@ -15,27 +15,21 @@ import {Nav} from './nav';
selector: 'ion-nav' selector: 'ion-nav'
}) })
export class NavRouter extends RouterOutlet { export class NavRouter extends RouterOutlet {
private _activeViewId;
/** constructor(
* TODO _elementRef: ElementRef,
* @param {ElementRef} _elementRef TODO _loader: DynamicComponentLoader,
* @param {DynamicComponentLoader} _loader TODO _parentRouter: Router,
* @param {Router} _parentRouter TODO @Attribute('name') nameAttr: string,
* @param {string} nameAttr Value of the element's 'name' attribute private _nav: Nav
* @param {Nav} nav TODO ) {
*/
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
_parentRouter: Router, @Attribute('name') nameAttr: string,
nav: Nav) {
super(_elementRef, _loader, _parentRouter, nameAttr); super(_elementRef, _loader, _parentRouter, nameAttr);
// Nav is Ionic's NavController, which we injected into this class
this.nav = nav;
// register this router with Ionic's NavController // register this router with Ionic's NavController
// Ionic's NavController will call this NavRouter's "stateChange" // Ionic's NavController will call this NavRouter's "stateChange"
// method when the NavController has...changed its state // method when the NavController has...changed its state
nav.registerRouter(this); _nav.registerRouter(this);
} }
/** /**
@ -50,13 +44,13 @@ export class NavRouter extends RouterOutlet {
var childRouter = this._parentRouter.childRouter(componentType); var childRouter = this._parentRouter.childRouter(componentType);
// prevent double navigations to the same view // prevent double navigations to the same view
var lastView = this.nav.last(); var lastView = this._nav.last();
if (this.nav.isTransitioning() || lastView && lastView.componentType === componentType && lastView.params.data === nextInstruction.params) { if (this._nav.isTransitioning() || lastView && lastView.componentType === componentType && lastView.params.data === nextInstruction.params) {
return Promise.resolve(); return Promise.resolve();
} }
// tell the NavController which componentType, and it's params, to navigate to // tell the NavController which componentType, and it's params, to navigate to
return this.nav.push(componentType, nextInstruction.params); return this._nav.push(componentType, nextInstruction.params);
} }
reuse(nextInstruction: ComponentInstruction) { reuse(nextInstruction: ComponentInstruction) {

10
ionic/components/nav/nav.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Input, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core'; import {Component, Directive, ElementRef, Host, Input, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef, Type} from 'angular2/core';
import {IonicApp} from '../app/app'; import {IonicApp} from '../app/app';
import {Config} from '../../config/config'; import {Config} from '../../config/config';
@ -104,7 +104,8 @@ import {ViewController} from './view-controller';
template: '<template #contents></template>' template: '<template #contents></template>'
}) })
export class Nav extends NavController { export class Nav extends NavController {
@Input() root: any; @Input() root: Type;
@Input() swipeBackEnabled: any;
constructor( constructor(
@Optional() hostNavCtrl: NavController, @Optional() hostNavCtrl: NavController,
@ -116,10 +117,9 @@ export class Nav extends NavController {
compiler: Compiler, compiler: Compiler,
viewManager: AppViewManager, viewManager: AppViewManager,
zone: NgZone, zone: NgZone,
renderer: Renderer, renderer: Renderer
cd: ChangeDetectorRef
) { ) {
super(hostNavCtrl, app, config, keyboard, elementRef, 'contents', compiler, viewManager, zone, renderer, cd); super(hostNavCtrl, app, config, keyboard, elementRef, 'contents', compiler, viewManager, zone, renderer);
if (viewCtrl) { if (viewCtrl) {
// an ion-nav can also act as an ion-page within a parent ion-nav // an ion-nav can also act as an ion-page within a parent ion-nav

57
ionic/components/nav/overlay-controller.ts
View File

@ -1,57 +0,0 @@
import {ViewController} from '../view-controller';
import {Config} from '../../config/config';
import {IonicApp} from '../app/app';
export class OverlayController extends ViewController {
constructor(navCtrl, componentType, opts={}) {
super(null, AlertCmp, opts);
this.data.inputs = this.data.inputs || [];
let buttons = this.data.buttons || [];
this.data.buttons = [];
for (let button of buttons) {
this.addButton(button);
}
this.enterAnimationKey = 'alertEnter';
this.leaveAnimationKey = 'alertLeave';
}
setTitle(title) {
this.data.title = title;
}
setSubTitle(subTitle) {
this.data.subTitle = subTitle;
}
setBody(body) {
this.data.body = body;
}
addInput(input) {
input.value = isDefined(input.value) ? input.value : '';
this.data.inputs.push(input);
}
addButton(button) {
if (typeof button === 'string') {
button = {
text: button
};
}
this.data.buttons.push(button);
}
close() {
let index = this._nav.indexOf(this);
this._nav.remove(index, { animateFirst: true });
}
onClose(handler) {
this.data.onClose = handler;
}
}

17
ionic/components/nav/swipe-back.ts
View File

@ -1,29 +1,36 @@
import {NavController} from './nav-controller';
import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture'; import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
export class SwipeBackGesture extends SlideEdgeGesture { export class SwipeBackGesture extends SlideEdgeGesture {
public edges: Array<string>;
public threshold: string;
constructor(element: Element, opts: Object = {}, navCtrl) { constructor(
element: HTMLElement,
opts: any = {},
private _nav: NavController
) {
super(element, opts); super(element, opts);
// Can check corners through use of eg 'left top' // Can check corners through use of eg 'left top'
this.edges = opts.edge.split(' '); this.edges = opts.edge.split(' ');
this.threshold = opts.threshold; this.threshold = opts.threshold;
this.navCtrl = navCtrl;
} }
onSlideStart() { onSlideStart() {
this.navCtrl.swipeBackStart(); this._nav.swipeBackStart();
} }
onSlide(slide, ev) { onSlide(slide, ev) {
this.navCtrl.swipeBackProgress(slide.distance / slide.max); this._nav.swipeBackProgress(slide.distance / slide.max);
} }
onSlideEnd(slide, ev) { onSlideEnd(slide, ev) {
let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5); let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5);
// TODO: calculate a better playback rate depending on velocity and distance // TODO: calculate a better playback rate depending on velocity and distance
this.navCtrl.swipeBackEnd(shouldComplete, 1); this._nav.swipeBackEnd(shouldComplete, 1);
} }
} }

30
ionic/components/nav/view-controller.ts
View File

@ -1,5 +1,6 @@
import {Output, EventEmitter, Type} from 'angular2/core'; import {Output, EventEmitter, Type, TemplateRef, ViewContainerRef, ElementRef} from 'angular2/core';
import {NavController, NavParams} from './nav-controller'; import {NavController, NavParams} from './nav-controller';
import {Navbar} from '../navbar/navbar';
/** /**
* @name ViewController * @name ViewController
@ -24,9 +25,16 @@ export class ViewController {
public shouldDestroy: boolean = false; public shouldDestroy: boolean = false;
public shouldCache: boolean = false; public shouldCache: boolean = false;
public viewType: string = ''; public viewType: string = '';
public id: string;
private _leavingOpts: any = null; private _leavingOpts: any = null;
private _onDismiss: Function = null; private _onDismiss: Function = null;
private _nav: NavController; private _nav: NavController;
private _nbTmpRef: TemplateRef;
private _nbVwRef: ViewContainerRef;
private _pgRef: ElementRef;
private _cntRef: ElementRef;
private _nbDir: Navbar;
private _cntDir: any;
@Output() private _emitter: EventEmitter<any> = new EventEmitter(); @Output() private _emitter: EventEmitter<any> = new EventEmitter();
constructor(public componentType?: Type, public data: any = {}) {} constructor(public componentType?: Type, public data: any = {}) {}
@ -91,7 +99,7 @@ export class ViewController {
* @private * @private
*/ */
get name() { get name() {
return this.componentType ? this.componentType.name : ''; return this.componentType ? this.componentType['name'] : '';
} }
/** /**
@ -140,14 +148,14 @@ export class ViewController {
/** /**
* @private * @private
*/ */
setNavbarTemplateRef(templateRef) { setNavbarTemplateRef(templateRef: TemplateRef) {
this._nbTmpRef = templateRef; this._nbTmpRef = templateRef;
} }
/** /**
* @private * @private
*/ */
getNavbarTemplateRef() { getNavbarTemplateRef(): TemplateRef {
return this._nbTmpRef; return this._nbTmpRef;
} }
@ -161,14 +169,14 @@ export class ViewController {
/** /**
* @private * @private
*/ */
setNavbarViewRef(viewContainerRef) { setNavbarViewRef(viewContainerRef: ViewContainerRef) {
this._nbVwRef = viewContainerRef; this._nbVwRef = viewContainerRef;
} }
/** /**
* @private * @private
*/ */
setPageRef(elementRef) { setPageRef(elementRef: ElementRef) {
this._pgRef = elementRef; this._pgRef = elementRef;
} }
@ -176,14 +184,14 @@ export class ViewController {
* @private * @private
* @returns {ElementRef} Returns the Page's ElementRef * @returns {ElementRef} Returns the Page's ElementRef
*/ */
pageRef() { pageRef(): ElementRef {
return this._pgRef; return this._pgRef;
} }
/** /**
* @private * @private
*/ */
setContentRef(elementRef) { setContentRef(elementRef: ElementRef) {
this._cntRef = elementRef; this._cntRef = elementRef;
} }
@ -191,7 +199,7 @@ export class ViewController {
* @private * @private
* @returns {ElementRef} Returns the Page's Content ElementRef * @returns {ElementRef} Returns the Page's Content ElementRef
*/ */
contentRef() { contentRef(): ElementRef {
return this._cntRef; return this._cntRef;
} }
@ -213,7 +221,7 @@ export class ViewController {
/** /**
* @private * @private
*/ */
setNavbar(directive) { setNavbar(directive: Navbar) {
this._nbDir = directive; this._nbDir = directive;
} }
@ -312,7 +320,7 @@ export class ViewController {
setBackButtonText(val) { setBackButtonText(val) {
let navbar = this.getNavbar(); let navbar = this.getNavbar();
if (navbar) { if (navbar) {
navbar.bbText = val; navbar.setBackButtonText(val);
} }
} }

65
ionic/components/navbar/navbar.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/core'; import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef, Input} from 'angular2/core';
import {Ion} from '../ion'; import {Ion} from '../ion';
import {Icon} from '../icon/icon'; import {Icon} from '../icon/icon';
@ -17,19 +17,18 @@ import {NavController} from '../nav/nav-controller';
}) })
class BackButton extends Ion { class BackButton extends Ion {
constructor( constructor(
@Optional() navCtrl: NavController, @Optional() private _nav: NavController,
elementRef: ElementRef, elementRef: ElementRef,
@Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
) { ) {
super(elementRef); super(elementRef);
this.navCtrl = navCtrl;
navbar && navbar.setBackButtonRef(elementRef); navbar && navbar.setBackButtonRef(elementRef);
} }
goBack(ev) { goBack(ev) {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
this.navCtrl && this.navCtrl.pop(); this._nav && this._nav.pop();
} }
} }
@ -94,9 +93,9 @@ class ToolbarBackground {
template: template:
'<div class="toolbar-background"></div>' + '<div class="toolbar-background"></div>' +
'<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' + '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
'<ion-icon class="back-button-icon" [name]="bbIcon"></ion-icon>' + '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
'<span class="back-button-text">' + '<span class="back-button-text">' +
'<span class="back-default">{{bbText}}</span>' + '<span class="back-default">{{_bbText}}</span>' +
'</span>' + '</span>' +
'</button>' + '</button>' +
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' + '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
@ -109,28 +108,30 @@ class ToolbarBackground {
'[hidden]': '_hidden', '[hidden]': '_hidden',
'class': 'toolbar' 'class': 'toolbar'
}, },
inputs: [
'hideBackButton'
],
directives: [BackButton, BackButtonText, Icon, ToolbarBackground] directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
}) })
export class Navbar extends ToolbarBase { export class Navbar extends ToolbarBase {
private _bbIcon: string;
private _bbText: string;
private _hidden: boolean;
private _bbRef: ElementRef;
private _bbtRef: ElementRef;
private _bgRef: ElementRef;
@Input() hideBackButton: any;
constructor( constructor(
app: IonicApp, private _app: IonicApp,
@Optional() viewCtrl: ViewController, @Optional() viewCtrl: ViewController,
elementRef: ElementRef, elementRef: ElementRef,
config: Config, config: Config,
renderer: Renderer private _renderer: Renderer
) { ) {
super(elementRef, config); super(elementRef);
this.app = app;
this.renderer = renderer;
viewCtrl && viewCtrl.setNavbar(this); viewCtrl && viewCtrl.setNavbar(this);
this.bbIcon = config.get('backButtonIcon'); this._bbIcon = config.get('backButtonIcon');
this.bbText = config.get('backButtonText'); this._bbText = config.get('backButtonText');
} }
/** /**
@ -143,46 +144,50 @@ export class Navbar extends ToolbarBase {
} }
} }
/** setBackButtonText(text: string) {
* @private this._bbText = text;
*/
getBackButtonRef() {
return this.bbRef;
} }
/** /**
* @private * @private
*/ */
setBackButtonRef(backButtonElementRef) { getBackButtonRef() {
this.bbRef = backButtonElementRef; return this._bbRef;
}
/**
* @private
*/
setBackButtonRef(backButtonElementRef: ElementRef) {
this._bbRef = backButtonElementRef;
} }
/** /**
* @private * @private
*/ */
getBackButtonTextRef() { getBackButtonTextRef() {
return this.bbtRef; return this._bbtRef;
} }
/** /**
* @private * @private
*/ */
setBackButtonTextRef(backButtonTextElementRef) { setBackButtonTextRef(backButtonTextElementRef: ElementRef) {
this.bbtRef = backButtonTextElementRef; this._bbtRef = backButtonTextElementRef;
} }
/** /**
* @private * @private
*/ */
setBackgroundRef(backgrouneElementRef) { setBackgroundRef(backgrouneElementRef: ElementRef) {
this.bgRef = backgrouneElementRef; this._bgRef = backgrouneElementRef;
} }
/** /**
* @private * @private
*/ */
getBackgroundRef() { getBackgroundRef() {
return this.bgRef; return this._bgRef;
} }
/** /**
@ -190,7 +195,7 @@ export class Navbar extends ToolbarBase {
*/ */
didEnter() { didEnter() {
try { try {
this.app.setTitle(this.getTitleText()); this._app.setTitle(this.getTitleText());
} catch(e) { } catch(e) {
console.error(e); console.error(e);
} }

2
package.json
View File

@ -13,7 +13,7 @@
"link": "npm install && gulp src && npm link" "link": "npm install && gulp src && npm link"
}, },
"dependencies": { "dependencies": {
"angular2": "^2.0.0-beta.0", "angular2": "2.0.0-beta.0",
"colors": "^1.1.2", "colors": "^1.1.2",
"es6-promise": "^3.0.2", "es6-promise": "^3.0.2",
"es6-shim": "0.33.6", "es6-shim": "0.33.6",