mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(): fix NavController typescript errors
This commit is contained in:
Adam Bradley
@ -1,3 +1,4 @@
|
||||
import {ViewController} from '../components/nav/view-controller';
|
||||
import {CSS, rafFrames} from '../util/dom';
|
||||
import {assign} from '../util/util';
|
||||
|
||||
@ -564,7 +565,7 @@ export class Animation {
|
||||
return new AnimationClass(element);
|
||||
}
|
||||
|
||||
static createTransition(enteringView, leavingView, opts = {}) {
|
||||
static createTransition(enteringView: ViewController, leavingView: ViewController, opts: any = {}) {
|
||||
let TransitionClass = AnimationRegistry[opts.animation];
|
||||
if (!TransitionClass) {
|
||||
// didn't find a transition animation, default to ios-transition
|
||||
@ -574,7 +575,7 @@ export class Animation {
|
||||
return new TransitionClass(enteringView, leavingView, opts);
|
||||
}
|
||||
|
||||
static register(name, AnimationClass) {
|
||||
static register(name: string, AnimationClass) {
|
||||
AnimationRegistry[name] = AnimationClass;
|
||||
}
|
||||
|
||||
@ -601,7 +602,8 @@ class Animate {
|
||||
// and correct API methods under the hood, so really doesn't matter
|
||||
|
||||
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);
|
||||
@ -609,7 +611,8 @@ class Animate {
|
||||
this.shouldAnimate = (duration > 32);
|
||||
|
||||
if (!this.shouldAnimate) {
|
||||
return inlineStyle(ele, this.toEffect);
|
||||
inlineStyle(ele, this.toEffect);
|
||||
return;
|
||||
}
|
||||
|
||||
this.ele = ele;
|
||||
@ -635,7 +638,7 @@ class Animate {
|
||||
this.effects.push( convertProperties(this.toEffect) );
|
||||
}
|
||||
|
||||
play(done) {
|
||||
play(done?: Function) {
|
||||
const self = this;
|
||||
|
||||
if (self.ani) {
|
||||
@ -761,7 +764,7 @@ function parseEffect(inputEffect) {
|
||||
}
|
||||
|
||||
function convertProperties(inputEffect) {
|
||||
let outputEffect = {};
|
||||
let outputEffect: any = {};
|
||||
let transforms = [];
|
||||
let value, property;
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ import {Form} from '../../util/form';
|
||||
'role': 'checkbox',
|
||||
'class': 'item',
|
||||
'tappable': '',
|
||||
'tabindex': 0,
|
||||
'tabindex': '0',
|
||||
'[attr.aria-disabled]': 'disabled'
|
||||
},
|
||||
template:
|
||||
@ -41,8 +41,9 @@ import {Form} from '../../util/form';
|
||||
'</div>'
|
||||
})
|
||||
export class Checkbox {
|
||||
private _checked: boolean;
|
||||
private labelId: string;
|
||||
@Input() value: string = '';
|
||||
@Input() public checked: any = false;
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() id: string;
|
||||
|
||||
@ -84,9 +85,10 @@ export class Checkbox {
|
||||
return !!this._checked;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set 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);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import {Component, ElementRef, Optional, NgZone} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Config} from '../../config/config';
|
||||
import {raf} from '../../util/dom';
|
||||
@ -32,24 +31,26 @@ import {ScrollTo} from '../../animations/scroll-to';
|
||||
'<ng-content></ng-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 {Config} config The config object to change content's default settings.
|
||||
*/
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _config: Config,
|
||||
@Optional() viewCtrl: ViewController,
|
||||
private _app: IonicApp,
|
||||
private _zone: NgZone
|
||||
private _zone: NgZone,
|
||||
@Optional() viewCtrl: ViewController
|
||||
) {
|
||||
super(elementRef);
|
||||
this.scrollPadding = 0;
|
||||
|
||||
if (viewCtrl) {
|
||||
viewCtrl.setContent(this);
|
||||
viewCtrl.setContentRef(elementRef);
|
||||
viewCtrl.setContentRef(_elementRef);
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,21 +59,21 @@ export class Content extends Ion {
|
||||
*/
|
||||
ngOnInit() {
|
||||
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();
|
||||
};
|
||||
|
||||
if (self._config.get('tapPolyfill') === true) {
|
||||
self._zone.runOutsideAngular(function() {
|
||||
self.scrollElement.addEventListener('scroll', self._scroll);
|
||||
self._scrollEle.addEventListener('scroll', self._onScroll);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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.
|
||||
*/
|
||||
addScrollEventListener(handler) {
|
||||
if (!this.scrollElement) { return; }
|
||||
if (!this._scrollEle) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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 () => {
|
||||
this.scrollElement.removeEventListener('scroll', handler);
|
||||
this._scrollEle.removeEventListener('scroll', handler);
|
||||
}
|
||||
}
|
||||
|
||||
onScrollEnd(callback) {
|
||||
let lastScrollTop = null;
|
||||
let framesUnchanged = 0;
|
||||
let scrollElement = this.scrollElement;
|
||||
let _scrollEle = this._scrollEle;
|
||||
|
||||
function next() {
|
||||
let currentScrollTop = scrollElement.scrollTop;
|
||||
let currentScrollTop = _scrollEle.scrollTop;
|
||||
if (lastScrollTop !== null) {
|
||||
|
||||
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.
|
||||
*/
|
||||
addTouchMoveListener(handler) {
|
||||
if (!this.scrollElement) { return; }
|
||||
if (!this._scrollEle) { return; }
|
||||
|
||||
// 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 () => {
|
||||
this.scrollElement.removeEventListener('touchmove', handler);
|
||||
this._scrollEle.removeEventListener('touchmove', handler);
|
||||
}
|
||||
}
|
||||
|
||||
@ -215,7 +218,7 @@ export class Content extends Ion {
|
||||
this._scrollTo.dispose();
|
||||
}
|
||||
|
||||
this._scrollTo = new ScrollTo(this.scrollElement);
|
||||
this._scrollTo = new ScrollTo(this._scrollEle);
|
||||
|
||||
return this._scrollTo.start(x, y, duration, tolerance);
|
||||
}
|
||||
@ -250,7 +253,7 @@ export class Content extends Ion {
|
||||
this._scrollTo.dispose();
|
||||
}
|
||||
|
||||
this._scrollTo = new ScrollTo(this.scrollElement);
|
||||
this._scrollTo = new ScrollTo(this._scrollEle);
|
||||
|
||||
return this._scrollTo.start(0, 0, 300, 0);
|
||||
}
|
||||
@ -273,8 +276,8 @@ export class Content extends Ion {
|
||||
* {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth
|
||||
*/
|
||||
getDimensions() {
|
||||
let scrollElement = this.scrollElement;
|
||||
let parentElement = scrollElement.parentElement;
|
||||
let _scrollEle = this._scrollEle;
|
||||
let parentElement = _scrollEle.parentElement;
|
||||
|
||||
return {
|
||||
contentHeight: parentElement.offsetHeight,
|
||||
@ -285,13 +288,13 @@ export class Content extends Ion {
|
||||
contentLeft: parentElement.offsetLeft,
|
||||
contentRight: parentElement.offsetLeft + parentElement.offsetWidth,
|
||||
|
||||
scrollHeight: scrollElement.scrollHeight,
|
||||
scrollTop: scrollElement.scrollTop,
|
||||
scrollBottom: scrollElement.scrollTop + scrollElement.scrollHeight,
|
||||
scrollHeight: _scrollEle.scrollHeight,
|
||||
scrollTop: _scrollEle.scrollTop,
|
||||
scrollBottom: _scrollEle.scrollTop + _scrollEle.scrollHeight,
|
||||
|
||||
scrollWidth: scrollElement.scrollWidth,
|
||||
scrollLeft: scrollElement.scrollLeft,
|
||||
scrollRight: scrollElement.scrollLeft + scrollElement.scrollWidth,
|
||||
scrollWidth: _scrollEle.scrollWidth,
|
||||
scrollLeft: _scrollEle.scrollLeft,
|
||||
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
|
||||
* so content below the keyboard can be scrolled into view.
|
||||
*/
|
||||
addScrollPadding(newScrollPadding) {
|
||||
if (newScrollPadding > this.scrollPadding) {
|
||||
console.debug('addScrollPadding', newScrollPadding);
|
||||
add_padding(newPadding) {
|
||||
if (newPadding > this._padding) {
|
||||
console.debug('add_padding', newPadding);
|
||||
|
||||
this.scrollPadding = newScrollPadding;
|
||||
this.scrollElement.style.paddingBottom = newScrollPadding + 'px';
|
||||
this._padding = newPadding;
|
||||
this._scrollEle.style.paddingBottom = newPadding + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ export class NavController extends Ion {
|
||||
private _sbThreshold: any;
|
||||
public sbGesture: any;
|
||||
private initZIndex: number = 10;
|
||||
private id: number;
|
||||
public id: number;
|
||||
private _ids: number = -1;
|
||||
public providers: ResolvedProvider[];
|
||||
public router: any;
|
||||
@ -317,10 +317,10 @@ export class NavController extends Ion {
|
||||
* @param {Object} [opts={}] Any options you want to use pass to transtion
|
||||
* @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;
|
||||
|
||||
if (nav._tabs) {
|
||||
if (nav['_tabs']) {
|
||||
// TODO: must have until this goes in
|
||||
// https://github.com/angular/angular/issues/5481
|
||||
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
|
||||
* @returns {Promise} Returns a promise when the transition is completed
|
||||
*/
|
||||
pop(opts = {}): Promise<any> {
|
||||
pop(opts: any = {}): Promise<any> {
|
||||
if (!opts.animateFirst && !this.canGoBack()) {
|
||||
return Promise.reject('pop cannot go back');
|
||||
}
|
||||
@ -433,7 +433,7 @@ export class NavController extends Ion {
|
||||
* @param view {ViewController} to pop to
|
||||
* @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
|
||||
let viewIndex = this._views.indexOf(viewCtrl);
|
||||
let targetIndex = viewIndex + 1;
|
||||
@ -656,8 +656,8 @@ export class NavController extends Ion {
|
||||
* @param {Object} [opts={}] Any options you want to use pass
|
||||
* @returns {Promise} Returns a promise when the pages are set
|
||||
*/
|
||||
setPages(componentTypes: Array<Type>, opts = {}): Promise<any> {
|
||||
if (!componentTypes || !componentTypes.length) {
|
||||
setPages(components: Array<{componentType: Type, params?: any}>, opts: any = {}): Promise<any> {
|
||||
if (!components || !components.length) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
@ -684,22 +684,18 @@ export class NavController extends Ion {
|
||||
}
|
||||
}
|
||||
|
||||
let componentObj = null;
|
||||
let componentType = null;
|
||||
let viewCtrl = null;
|
||||
let componentType: Type = null;
|
||||
let viewCtrl: ViewController = null;
|
||||
|
||||
// create the ViewControllers that go before the new active ViewController
|
||||
// in the stack, but the previous views shouldn't render yet
|
||||
if (components.length > 1) {
|
||||
let newBeforeItems = components.slice(0, components.length - 1);
|
||||
for (let j = 0; j < newBeforeItems.length; j++) {
|
||||
componentObj = newBeforeItems[j];
|
||||
let newBeforeComponents: Array<{componentType: Type, params?: any}> = components.slice(0, components.length - 1);
|
||||
for (let j = 0; j < newBeforeComponents.length; j++) {
|
||||
componentType = newBeforeComponents[j].componentType;
|
||||
|
||||
if (componentObj) {
|
||||
// could be an object with a componentType property, or it is a componentType
|
||||
componentType = componentObj.componentType || componentObj;
|
||||
|
||||
viewCtrl = new ViewController(componentType, componentObj.params);
|
||||
if (componentType) {
|
||||
viewCtrl = new ViewController(componentType, newBeforeComponents[j].params);
|
||||
viewCtrl.setNav(this);
|
||||
viewCtrl.state = CACHED_STATE;
|
||||
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
|
||||
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
|
||||
* @returns {Promise} Returns a promise when done
|
||||
*/
|
||||
setRoot(componentType: ViewController, params: any = {}, opts: any = {}): Promise<any> {
|
||||
return this.setPages([{
|
||||
componentType,
|
||||
params
|
||||
}], opts);
|
||||
setRoot(componentType: Type, params: any = {}, opts: any = {}): Promise<any> {
|
||||
return this.setPages([ { componentType, params } ], opts);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1015,7 +1005,7 @@ export class NavController extends Ion {
|
||||
let component = this._viewManager.getComponent(pageElementRef);
|
||||
|
||||
// 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);
|
||||
|
||||
viewCtrl.addDestroy(() => {
|
||||
@ -1187,7 +1177,7 @@ export class NavController extends Ion {
|
||||
leavingView.state = STAGED_LEAVING_STATE;
|
||||
|
||||
// init the swipe back transition animation
|
||||
this._sbTrans = Transition.create(this, opts);
|
||||
this._sbTrans = Animation.createTransition(enteringView, leavingView, opts);
|
||||
this._sbTrans.easing('linear').progressStart();
|
||||
|
||||
});
|
||||
@ -1341,33 +1331,7 @@ export class NavController extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
navbarViewContainer(nbContainer) {
|
||||
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) {
|
||||
_add(viewCtrl: ViewController) {
|
||||
this._incId(viewCtrl);
|
||||
this._views.push(viewCtrl);
|
||||
}
|
||||
@ -1375,7 +1339,7 @@ export class NavController extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_incId(viewCtrl) {
|
||||
_incId(viewCtrl: ViewController) {
|
||||
viewCtrl.id = this.id + '-' + (++this._ids);
|
||||
}
|
||||
|
||||
@ -1389,7 +1353,7 @@ export class NavController extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getStagedEntering() {
|
||||
_getStagedEntering(): ViewController {
|
||||
for (let i = 0, ii = this._views.length; i < ii; i++) {
|
||||
if (this._views[i].state === STAGED_ENTERING_STATE) {
|
||||
return this._views[i];
|
||||
@ -1401,7 +1365,7 @@ export class NavController extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getStagedLeaving() {
|
||||
_getStagedLeaving(): ViewController {
|
||||
for (let i = 0, ii = this._views.length; i < ii; i++) {
|
||||
if (this._views[i].state === STAGED_LEAVING_STATE) {
|
||||
return this._views[i];
|
||||
@ -1427,7 +1391,7 @@ export class NavController extends Ion {
|
||||
* @param {Index} The index of the page you want to get
|
||||
* @returns {Component} Returns the component that matches the index given
|
||||
*/
|
||||
getByIndex(index): ViewController {
|
||||
getByIndex(index: number): ViewController {
|
||||
if (index < this._views.length && index > -1) {
|
||||
return this._views[index];
|
||||
}
|
||||
@ -1439,7 +1403,7 @@ export class NavController extends Ion {
|
||||
* @param {TODO} view TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
getPrevious(viewCtrl): ViewController {
|
||||
getPrevious(viewCtrl: ViewController): ViewController {
|
||||
if (viewCtrl) {
|
||||
let viewIndex = this._views.indexOf(viewCtrl);
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Directive, Optional} from 'angular2/core';
|
||||
import {Directive, Optional, Input} from 'angular2/core';
|
||||
import {NavController} from './nav-controller';
|
||||
import {NavRegistry} from './nav-registry';
|
||||
|
||||
@ -44,24 +44,20 @@ import {NavRegistry} from './nav-registry';
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[navPush]',
|
||||
inputs: [
|
||||
'instruction: navPush',
|
||||
'params: navParams'
|
||||
],
|
||||
host: {
|
||||
'(click)': 'onClick()',
|
||||
'role': 'link'
|
||||
}
|
||||
})
|
||||
export class NavPush {
|
||||
/**
|
||||
* TODO
|
||||
* @param {NavController} nav TODO
|
||||
*/
|
||||
constructor(@Optional() nav: NavController, registry: NavRegistry) {
|
||||
this.nav = nav;
|
||||
this.registry = registry;
|
||||
if (!nav) {
|
||||
@Input() navPush;
|
||||
@Input() navParams;
|
||||
|
||||
constructor(
|
||||
@Optional() private _nav: NavController,
|
||||
private registry: NavRegistry
|
||||
) {
|
||||
if (!_nav) {
|
||||
console.error('nav-push must be within a NavController');
|
||||
}
|
||||
}
|
||||
@ -72,22 +68,23 @@ export class NavPush {
|
||||
onClick() {
|
||||
let destination, params;
|
||||
|
||||
if (this.instruction instanceof Array) {
|
||||
if (this.instruction.length > 2) {
|
||||
if (this.navPush instanceof Array) {
|
||||
if (this.navPush.length > 2) {
|
||||
throw 'Too many [navPush] arguments, expects [View, { params }]'
|
||||
}
|
||||
destination = this.instruction[0];
|
||||
params = this.instruction[1] || this.params;
|
||||
destination = this.navPush[0];
|
||||
params = this.navPush[1] || this.navParams;
|
||||
|
||||
} else {
|
||||
destination = this.instruction;
|
||||
params = this.params;
|
||||
destination = this.navPush;
|
||||
params = this.navParams;
|
||||
}
|
||||
|
||||
if (typeof destination === "string") {
|
||||
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
|
||||
* @param {NavController} nav TODO
|
||||
*/
|
||||
constructor(@Optional() nav: NavController) {
|
||||
this.nav = nav;
|
||||
if (!nav) {
|
||||
constructor(@Optional() private _nav: NavController) {
|
||||
if (!_nav) {
|
||||
console.error('nav-pop must be within a NavController');
|
||||
}
|
||||
}
|
||||
@ -132,6 +128,6 @@ export class NavPop {
|
||||
* @private
|
||||
*/
|
||||
onClick() {
|
||||
this.nav && this.nav.pop();
|
||||
this._nav && this._nav.pop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,27 +15,21 @@ import {Nav} from './nav';
|
||||
selector: 'ion-nav'
|
||||
})
|
||||
export class NavRouter extends RouterOutlet {
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {ElementRef} _elementRef TODO
|
||||
* @param {DynamicComponentLoader} _loader TODO
|
||||
* @param {Router} _parentRouter TODO
|
||||
* @param {string} nameAttr Value of the element's 'name' attribute
|
||||
* @param {Nav} nav TODO
|
||||
*/
|
||||
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
|
||||
_parentRouter: Router, @Attribute('name') nameAttr: string,
|
||||
nav: Nav) {
|
||||
private _activeViewId;
|
||||
|
||||
constructor(
|
||||
_elementRef: ElementRef,
|
||||
_loader: DynamicComponentLoader,
|
||||
_parentRouter: Router,
|
||||
@Attribute('name') nameAttr: string,
|
||||
private _nav: Nav
|
||||
) {
|
||||
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
|
||||
// Ionic's NavController will call this NavRouter's "stateChange"
|
||||
// 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);
|
||||
|
||||
// prevent double navigations to the same view
|
||||
var lastView = this.nav.last();
|
||||
if (this.nav.isTransitioning() || lastView && lastView.componentType === componentType && lastView.params.data === nextInstruction.params) {
|
||||
var lastView = this._nav.last();
|
||||
if (this._nav.isTransitioning() || lastView && lastView.componentType === componentType && lastView.params.data === nextInstruction.params) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
||||
@ -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 {Config} from '../../config/config';
|
||||
@ -104,7 +104,8 @@ import {ViewController} from './view-controller';
|
||||
template: '<template #contents></template>'
|
||||
})
|
||||
export class Nav extends NavController {
|
||||
@Input() root: any;
|
||||
@Input() root: Type;
|
||||
@Input() swipeBackEnabled: any;
|
||||
|
||||
constructor(
|
||||
@Optional() hostNavCtrl: NavController,
|
||||
@ -116,10 +117,9 @@ export class Nav extends NavController {
|
||||
compiler: Compiler,
|
||||
viewManager: AppViewManager,
|
||||
zone: NgZone,
|
||||
renderer: Renderer,
|
||||
cd: ChangeDetectorRef
|
||||
renderer: Renderer
|
||||
) {
|
||||
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) {
|
||||
// an ion-nav can also act as an ion-page within a parent ion-nav
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,29 +1,36 @@
|
||||
import {NavController} from './nav-controller';
|
||||
import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
|
||||
|
||||
|
||||
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);
|
||||
|
||||
// Can check corners through use of eg 'left top'
|
||||
this.edges = opts.edge.split(' ');
|
||||
this.threshold = opts.threshold;
|
||||
this.navCtrl = navCtrl;
|
||||
}
|
||||
|
||||
onSlideStart() {
|
||||
this.navCtrl.swipeBackStart();
|
||||
this._nav.swipeBackStart();
|
||||
}
|
||||
|
||||
onSlide(slide, ev) {
|
||||
this.navCtrl.swipeBackProgress(slide.distance / slide.max);
|
||||
this._nav.swipeBackProgress(slide.distance / slide.max);
|
||||
}
|
||||
|
||||
onSlideEnd(slide, ev) {
|
||||
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
|
||||
this.navCtrl.swipeBackEnd(shouldComplete, 1);
|
||||
this._nav.swipeBackEnd(shouldComplete, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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 {Navbar} from '../navbar/navbar';
|
||||
|
||||
/**
|
||||
* @name ViewController
|
||||
@ -24,9 +25,16 @@ export class ViewController {
|
||||
public shouldDestroy: boolean = false;
|
||||
public shouldCache: boolean = false;
|
||||
public viewType: string = '';
|
||||
public id: string;
|
||||
private _leavingOpts: any = null;
|
||||
private _onDismiss: Function = null;
|
||||
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();
|
||||
|
||||
constructor(public componentType?: Type, public data: any = {}) {}
|
||||
@ -91,7 +99,7 @@ export class ViewController {
|
||||
* @private
|
||||
*/
|
||||
get name() {
|
||||
return this.componentType ? this.componentType.name : '';
|
||||
return this.componentType ? this.componentType['name'] : '';
|
||||
}
|
||||
|
||||
/**
|
||||
@ -140,14 +148,14 @@ export class ViewController {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setNavbarTemplateRef(templateRef) {
|
||||
setNavbarTemplateRef(templateRef: TemplateRef) {
|
||||
this._nbTmpRef = templateRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getNavbarTemplateRef() {
|
||||
getNavbarTemplateRef(): TemplateRef {
|
||||
return this._nbTmpRef;
|
||||
}
|
||||
|
||||
@ -161,14 +169,14 @@ export class ViewController {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setNavbarViewRef(viewContainerRef) {
|
||||
setNavbarViewRef(viewContainerRef: ViewContainerRef) {
|
||||
this._nbVwRef = viewContainerRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setPageRef(elementRef) {
|
||||
setPageRef(elementRef: ElementRef) {
|
||||
this._pgRef = elementRef;
|
||||
}
|
||||
|
||||
@ -176,14 +184,14 @@ export class ViewController {
|
||||
* @private
|
||||
* @returns {ElementRef} Returns the Page's ElementRef
|
||||
*/
|
||||
pageRef() {
|
||||
pageRef(): ElementRef {
|
||||
return this._pgRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setContentRef(elementRef) {
|
||||
setContentRef(elementRef: ElementRef) {
|
||||
this._cntRef = elementRef;
|
||||
}
|
||||
|
||||
@ -191,7 +199,7 @@ export class ViewController {
|
||||
* @private
|
||||
* @returns {ElementRef} Returns the Page's Content ElementRef
|
||||
*/
|
||||
contentRef() {
|
||||
contentRef(): ElementRef {
|
||||
return this._cntRef;
|
||||
}
|
||||
|
||||
@ -213,7 +221,7 @@ export class ViewController {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setNavbar(directive) {
|
||||
setNavbar(directive: Navbar) {
|
||||
this._nbDir = directive;
|
||||
}
|
||||
|
||||
@ -312,7 +320,7 @@ export class ViewController {
|
||||
setBackButtonText(val) {
|
||||
let navbar = this.getNavbar();
|
||||
if (navbar) {
|
||||
navbar.bbText = val;
|
||||
navbar.setBackButtonText(val);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {Icon} from '../icon/icon';
|
||||
@ -17,19 +17,18 @@ import {NavController} from '../nav/nav-controller';
|
||||
})
|
||||
class BackButton extends Ion {
|
||||
constructor(
|
||||
@Optional() navCtrl: NavController,
|
||||
@Optional() private _nav: NavController,
|
||||
elementRef: ElementRef,
|
||||
@Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
|
||||
) {
|
||||
super(elementRef);
|
||||
this.navCtrl = navCtrl;
|
||||
navbar && navbar.setBackButtonRef(elementRef);
|
||||
}
|
||||
|
||||
goBack(ev) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
this.navCtrl && this.navCtrl.pop();
|
||||
this._nav && this._nav.pop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,9 +93,9 @@ class ToolbarBackground {
|
||||
template:
|
||||
'<div class="toolbar-background"></div>' +
|
||||
'<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-default">{{bbText}}</span>' +
|
||||
'<span class="back-default">{{_bbText}}</span>' +
|
||||
'</span>' +
|
||||
'</button>' +
|
||||
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
|
||||
@ -109,28 +108,30 @@ class ToolbarBackground {
|
||||
'[hidden]': '_hidden',
|
||||
'class': 'toolbar'
|
||||
},
|
||||
inputs: [
|
||||
'hideBackButton'
|
||||
],
|
||||
directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
|
||||
})
|
||||
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(
|
||||
app: IonicApp,
|
||||
private _app: IonicApp,
|
||||
@Optional() viewCtrl: ViewController,
|
||||
elementRef: ElementRef,
|
||||
config: Config,
|
||||
renderer: Renderer
|
||||
private _renderer: Renderer
|
||||
) {
|
||||
super(elementRef, config);
|
||||
this.app = app;
|
||||
this.renderer = renderer;
|
||||
super(elementRef);
|
||||
|
||||
viewCtrl && viewCtrl.setNavbar(this);
|
||||
|
||||
this.bbIcon = config.get('backButtonIcon');
|
||||
this.bbText = config.get('backButtonText');
|
||||
this._bbIcon = config.get('backButtonIcon');
|
||||
this._bbText = config.get('backButtonText');
|
||||
}
|
||||
|
||||
/**
|
||||
@ -143,46 +144,50 @@ export class Navbar extends ToolbarBase {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getBackButtonRef() {
|
||||
return this.bbRef;
|
||||
setBackButtonText(text: string) {
|
||||
this._bbText = text;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setBackButtonRef(backButtonElementRef) {
|
||||
this.bbRef = backButtonElementRef;
|
||||
getBackButtonRef() {
|
||||
return this._bbRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setBackButtonRef(backButtonElementRef: ElementRef) {
|
||||
this._bbRef = backButtonElementRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getBackButtonTextRef() {
|
||||
return this.bbtRef;
|
||||
return this._bbtRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setBackButtonTextRef(backButtonTextElementRef) {
|
||||
this.bbtRef = backButtonTextElementRef;
|
||||
setBackButtonTextRef(backButtonTextElementRef: ElementRef) {
|
||||
this._bbtRef = backButtonTextElementRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setBackgroundRef(backgrouneElementRef) {
|
||||
this.bgRef = backgrouneElementRef;
|
||||
setBackgroundRef(backgrouneElementRef: ElementRef) {
|
||||
this._bgRef = backgrouneElementRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getBackgroundRef() {
|
||||
return this.bgRef;
|
||||
return this._bgRef;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -190,7 +195,7 @@ export class Navbar extends ToolbarBase {
|
||||
*/
|
||||
didEnter() {
|
||||
try {
|
||||
this.app.setTitle(this.getTitleText());
|
||||
this._app.setTitle(this.getTitleText());
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"link": "npm install && gulp src && npm link"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular2": "^2.0.0-beta.0",
|
||||
"angular2": "2.0.0-beta.0",
|
||||
"colors": "^1.1.2",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "0.33.6",
|
||||
|
||||
Reference in New Issue
Block a user