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

toolbar and viewcontroller docs wip

Browse Source
This commit is contained in:
Tim Lancina
2015-08-31 11:09:40 -05:00
parent 92156d30c2
commit 407ff62258
3 changed files with 264 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/components/toolbar/toolbar.ts
View File

@ -4,7 +4,9 @@ import {Ion} from '../ion';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations'; import {IonicComponent} from '../../config/annotations';
/**
* TODO
*/
export class ToolbarBase extends Ion { export class ToolbarBase extends Ion {
constructor(elementRef: ElementRef, config: IonicConfig) { constructor(elementRef: ElementRef, config: IonicConfig) {
@ -13,6 +15,11 @@ export class ToolbarBase extends Ion {
this.itemEles = []; this.itemEles = [];
} }
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
titleElement(eleRef) { titleElement(eleRef) {
if (arguments.length) { if (arguments.length) {
this._nbTlEle = eleRef; this._nbTlEle = eleRef;
@ -20,6 +27,11 @@ export class ToolbarBase extends Ion {
return this._nbTlEle; return this._nbTlEle;
} }
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
itemElements(eleRef) { itemElements(eleRef) {
if (arguments.length) { if (arguments.length) {
this.itemEles.push(eleRef); this.itemEles.push(eleRef);
@ -27,6 +39,11 @@ export class ToolbarBase extends Ion {
return this.itemEles; return this.itemEles;
} }
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
titleText(eleRef) { titleText(eleRef) {
if (arguments.length) { if (arguments.length) {
this._ttTxt.push(eleRef); this._ttTxt.push(eleRef);
@ -34,6 +51,9 @@ export class ToolbarBase extends Ion {
return this._ttTxt; return this._ttTxt;
} }
/**
* TODO
*/
alignTitle() { alignTitle() {
// don't bother if we're not trying to center align the title // don't bother if we're not trying to center align the title
if (this.titleAlign !== 'center' || this.aligned) return; if (this.titleAlign !== 'center' || this.aligned) return;
@ -70,7 +90,9 @@ export class ToolbarBase extends Ion {
} }
/**
* TODO
*/
@IonicComponent({ @IonicComponent({
selector: 'ion-toolbar' selector: 'ion-toolbar'
}) })

144
ionic/components/view/view-controller.ts
View File

@ -12,7 +12,9 @@ import {Transition} from '../../transitions/transition';
import {ClickBlock} from '../../util/click-block'; import {ClickBlock} from '../../util/click-block';
import * as util from 'ionic/util'; import * as util from 'ionic/util';
/**
* TODO
*/
export class ViewController extends Ion { export class ViewController extends Ion {
constructor( constructor(
@ -51,6 +53,13 @@ export class ViewController extends Ion {
]); ]);
} }
/**
* TODO
* @param {TODO} componentType TODO
* @param {TODO} [params={}] TODO
* @param {TODO} [opts={}] TODO
* @returns {Promise} TODO
*/
push(componentType, params = {}, opts = {}) { push(componentType, params = {}, opts = {}) {
if (!componentType || this.isTransitioning()) { if (!componentType || this.isTransitioning()) {
return Promise.reject(); return Promise.reject();
@ -94,6 +103,11 @@ export class ViewController extends Ion {
return promise; return promise;
} }
/**
* TODO
* @param {TODO} [opts={}] TODO
* @returns {Promise} TODO
*/
pop(opts = {}) { pop(opts = {}) {
if (this.isTransitioning() || this.items.length < 2) { if (this.isTransitioning() || this.items.length < 2) {
return Promise.reject(); return Promise.reject();
@ -140,6 +154,9 @@ export class ViewController extends Ion {
/** /**
* Set the item stack to reflect the given component classes. * Set the item stack to reflect the given component classes.
* @param {TODO} components TODO
* @param {TODO} [opts={}] TODO
* @returns {Promise} TODO
*/ */
setItems(components, opts = {}) { setItems(components, opts = {}) {
if (!components || !components.length) { if (!components || !components.length) {
@ -199,6 +216,13 @@ export class ViewController extends Ion {
return this.push(componentType, componentObj.params, opts); return this.push(componentType, componentObj.params, opts);
} }
/**
* TODO
* @param {TODO} componentType TODO
* @param {TODO} [params={}] TODO
* @param {TODO} [opts={}] TODO
* @returns {Promise} TODO
*/
setRoot(componentType, params = {}, opts = {}) { setRoot(componentType, params = {}, opts = {}) {
return this.setItems([{ return this.setItems([{
componentType, componentType,
@ -206,6 +230,14 @@ export class ViewController extends Ion {
}], opts); }], opts);
} }
/**
* TODO
* @param {TODO} enteringItem TODO
* @param {TODO} leavingItem TODO
* @param {TODO} opts TODO
* @param {Function} callback TODO
* @returns {any} TODO
*/
transition(enteringItem, leavingItem, opts, callback) { transition(enteringItem, leavingItem, opts, callback) {
if (!enteringItem || enteringItem === leavingItem) { if (!enteringItem || enteringItem === leavingItem) {
return callback(); return callback();
@ -275,6 +307,9 @@ export class ViewController extends Ion {
} }
/**
* TODO
*/
swipeBackStart() { swipeBackStart() {
if (this.isTransitioning() || this.items.length < 2) { if (this.isTransitioning() || this.items.length < 2) {
return; return;
@ -354,6 +389,10 @@ export class ViewController extends Ion {
} }
/**
* TODO
* @param {TODO} progress TODO
*/
swipeBackProgress(progress) { swipeBackProgress(progress) {
if (this.sbTransition) { if (this.sbTransition) {
ClickBlock(true, 4000); ClickBlock(true, 4000);
@ -361,6 +400,12 @@ export class ViewController extends Ion {
} }
} }
/**
* TODO
* @param {TODO} completeSwipeBack TODO
* @param {TODO} progress TODO
* @param {TODO} playbackRate TODO
*/
swipeBackEnd(completeSwipeBack, progress, playbackRate) { swipeBackEnd(completeSwipeBack, progress, playbackRate) {
// to reverse the animation use a negative playbackRate // to reverse the animation use a negative playbackRate
if (this.sbTransition && this.sbActive) { if (this.sbTransition && this.sbActive) {
@ -386,6 +431,11 @@ export class ViewController extends Ion {
} }
} }
/**
* TODO
* @param {TODO} val TODO
* @returns {TODO} TODO
*/
isSwipeBackEnabled(val) { isSwipeBackEnabled(val) {
if (arguments.length) { if (arguments.length) {
this.sbEnabled = !!val; this.sbEnabled = !!val;
@ -393,6 +443,10 @@ export class ViewController extends Ion {
return this.sbEnabled; return this.sbEnabled;
} }
/**
* TODO
* @returns {TODO} TODO
*/
canSwipeBack() { canSwipeBack() {
if (this.sbEnabled) { if (this.sbEnabled) {
let activeItem = this.getActive(); let activeItem = this.getActive();
@ -403,6 +457,9 @@ export class ViewController extends Ion {
return false; return false;
} }
/**
* TODO
*/
transitionComplete() { transitionComplete() {
let destroys = []; let destroys = [];
@ -426,6 +483,10 @@ export class ViewController extends Ion {
ClickBlock(false); ClickBlock(false);
} }
/**
* TODO
* @returns {boolean} TODO
*/
isTransitioning() { isTransitioning() {
let state; let state;
for (let i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
@ -438,6 +499,10 @@ export class ViewController extends Ion {
return false; return false;
} }
/**
* TODO
* @returns {TODO} TODO
*/
getActive() { getActive() {
for (let i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
if (this.items[i].state === ACTIVE_STATE) { if (this.items[i].state === ACTIVE_STATE) {
@ -447,6 +512,11 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @param {TODO} instance TODO
* @returns {TODO} TODO
*/
getByInstance(instance) { getByInstance(instance) {
if (instance) { if (instance) {
for (let i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
@ -458,6 +528,11 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @param {TODO} index TODO
* @returns {TODO} TODO
*/
getByIndex(index) { getByIndex(index) {
if (index < this.items.length && index > -1) { if (index < this.items.length && index > -1) {
return this.items[index]; return this.items[index];
@ -465,6 +540,11 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @param {TODO} item TODO
* @returns {TODO} TODO
*/
getPrevious(item) { getPrevious(item) {
if (item) { if (item) {
return this.items[ this.items.indexOf(item) - 1 ]; return this.items[ this.items.indexOf(item) - 1 ];
@ -472,6 +552,10 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @returns {TODO} TODO
*/
getStagedEnteringItem() { getStagedEnteringItem() {
for (let i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
if (this.items[i].state === STAGED_ENTERING_STATE) { if (this.items[i].state === STAGED_ENTERING_STATE) {
@ -481,6 +565,10 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @returns {TODO} TODO
*/
getStagedLeavingItem() { getStagedLeavingItem() {
for (let i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
if (this.items[i].state === STAGED_LEAVING_STATE) { if (this.items[i].state === STAGED_LEAVING_STATE) {
@ -490,6 +578,11 @@ export class ViewController extends Ion {
return null; return null;
} }
/**
* TODO
* @param {TODO} nbContainer TODO
* @returns {TODO} TODO
*/
navbarViewContainer(nbContainer) { navbarViewContainer(nbContainer) {
if (nbContainer) { if (nbContainer) {
this._nbContainer = nbContainer; this._nbContainer = nbContainer;
@ -502,6 +595,10 @@ export class ViewController extends Ion {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
anchorElementRef() { anchorElementRef() {
if (arguments.length) { if (arguments.length) {
this._anchorER = arguments[0]; this._anchorER = arguments[0];
@ -509,6 +606,10 @@ export class ViewController extends Ion {
return this._anchorER; return this._anchorER;
} }
/**
* TODO
* @returns {TODO} TODO
*/
anchorViewContainerRef() { anchorViewContainerRef() {
if (arguments.length) { if (arguments.length) {
this._anchorVC = arguments[0]; this._anchorVC = arguments[0];
@ -516,6 +617,10 @@ export class ViewController extends Ion {
return this._anchorVC; return this._anchorVC;
} }
/**
* TODO
* @returns {TODO} TODO
*/
childNavbar() { childNavbar() {
if (arguments.length) { if (arguments.length) {
this._childNavbar = arguments[0]; this._childNavbar = arguments[0];
@ -523,23 +628,46 @@ export class ViewController extends Ion {
return this._childNavbar; return this._childNavbar;
} }
/**
* TODO
* @param {TODO} item TODO
* @returns {TODO} TODO
*/
add(item) { add(item) {
item.id = this.id + '-' + (++this._ids); item.id = this.id + '-' + (++this._ids);
this.items.push(item); this.items.push(item);
} }
/**
* TODO
* @param {TODO} itemOrIndex TODO
* @returns {TODO} TODO
*/
remove(itemOrIndex) { remove(itemOrIndex) {
util.array.remove(this.items, itemOrIndex); util.array.remove(this.items, itemOrIndex);
} }
/**
* TODO
* @param {TODO} item TODO
* @returns {TODO} TODO
*/
indexOf(item) { indexOf(item) {
return this.items.indexOf(item); return this.items.indexOf(item);
} }
/**
* TODO
* @returns {TODO} TODO
*/
length() { length() {
return this.items.length; return this.items.length;
} }
/**
* TODO
* @returns {TODO} TODO
*/
instances() { instances() {
let instances = []; let instances = [];
for (let item of this.items) { for (let item of this.items) {
@ -550,14 +678,28 @@ export class ViewController extends Ion {
return instances; return instances;
} }
/**
* TODO
* @param {TODO} item TODO
* @returns {TODO} TODO
*/
isActive(item) { isActive(item) {
return (item && item.state === ACTIVE_STATE); return (item && item.state === ACTIVE_STATE);
} }
/**
* TODO
* @param {TODO} item TODO
* @returns {TODO} TODO
*/
isStagedEntering(item) { isStagedEntering(item) {
return (item && item.state === STAGED_ENTERING_STATE); return (item && item.state === STAGED_ENTERING_STATE);
} }
/**
* TODO
* @param {TODO} router TODO
*/
registerRouter(router) { registerRouter(router) {
this.router = router; this.router = router;
} }

125
ionic/components/view/view-item.ts
View File

@ -3,7 +3,9 @@ import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
import {NavParams} from '../nav/nav-controller'; import {NavParams} from '../nav/nav-controller';
/**
* TODO
*/
export class ViewItem { export class ViewItem {
constructor(viewCtrl, componentType, params = {}) { constructor(viewCtrl, componentType, params = {}) {
@ -21,14 +23,29 @@ export class ViewItem {
this.templateRefs = {}; this.templateRefs = {};
} }
/**
* TODO
* @param {TODO} name TODO
* @param {TODO} protoViewRef TODO
*/
addProtoViewRef(name, protoViewRef) { addProtoViewRef(name, protoViewRef) {
this.protos[name] = protoViewRef; this.protos[name] = protoViewRef;
} }
/**
* TODO
* @param {TODO} name TODO
* @param {TODO} templateRef TODO
*/
addTemplateRef(name, templateRef) { addTemplateRef(name, templateRef) {
this.templateRefs[name] = templateRef; this.templateRefs[name] = templateRef;
} }
/**
* TODO
* @param {Function} callback TODO
* @returns {TODO} TODO
*/
stage(callback) { stage(callback) {
let viewCtrl = this.viewCtrl; let viewCtrl = this.viewCtrl;
@ -136,10 +153,18 @@ export class ViewItem {
}); });
} }
/**
* TODO
* @param {TODO} childPromise TODO
*/
addPromise(childPromise) { addPromise(childPromise) {
this._promises.push(childPromise); this._promises.push(childPromise);
} }
/**
* TODO
* @param {TODO} componentProtoViewRef TODO
*/
inspectStructure(componentProtoViewRef) { inspectStructure(componentProtoViewRef) {
let navbar = false; let navbar = false;
let key = '_'; let key = '_';
@ -173,6 +198,10 @@ export class ViewItem {
}; };
} }
/**
* TODO
* @returns {boolean} TODO
*/
enableBack() { enableBack() {
// update if it's possible to go back from this nav item // update if it's possible to go back from this nav item
if (this.viewCtrl) { if (this.viewCtrl) {
@ -184,6 +213,10 @@ export class ViewItem {
return false; return false;
} }
/**
* TODO
* @param {TODO} instance TODO
*/
setInstance(instance) { setInstance(instance) {
this.instance = instance; this.instance = instance;
this.instance._viewItem = this; this.instance._viewItem = this;
@ -193,6 +226,9 @@ export class ViewItem {
return (this.viewCtrl ? this.viewCtrl.indexOf(this) : -1); return (this.viewCtrl ? this.viewCtrl.indexOf(this) : -1);
} }
/**
* TODO
*/
destroy() { destroy() {
for (let i = 0; i < this.disposals.length; i++) { for (let i = 0; i < this.disposals.length; i++) {
this.disposals[i](); this.disposals[i]();
@ -208,6 +244,11 @@ export class ViewItem {
} }
} }
/**
* TODO
* @param {TODO} val TODO
* @returns {TODO} TODO
*/
viewElementRef(val) { viewElementRef(val) {
if (arguments.length) { if (arguments.length) {
this._vwEle = val; this._vwEle = val;
@ -215,6 +256,10 @@ export class ViewItem {
return this._vwEle; return this._vwEle;
} }
/**
* TODO
* @returns {TODO} TODO
*/
navbarView() { navbarView() {
if (arguments.length) { if (arguments.length) {
this._nbView = arguments[0]; this._nbView = arguments[0];
@ -222,6 +267,10 @@ export class ViewItem {
return this._nbView; return this._nbView;
} }
/**
* TODO
* @returns {TODO} TODO
*/
navbarElement() { navbarElement() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -229,6 +278,10 @@ export class ViewItem {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
titleElement() { titleElement() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -236,6 +289,10 @@ export class ViewItem {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
backButtonElement() { backButtonElement() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -243,6 +300,10 @@ export class ViewItem {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
backButtonTextElement() { backButtonTextElement() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -250,6 +311,10 @@ export class ViewItem {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
navbarItemElements() { navbarItemElements() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -257,6 +322,10 @@ export class ViewItem {
} }
} }
/**
* TODO
* @returns {TODO} TODO
*/
postRender() { postRender() {
// the elements are in the DOM and the browser // the elements are in the DOM and the browser
// has rendered them in their correct locations // has rendered them in their correct locations
@ -267,28 +336,28 @@ export class ViewItem {
} }
/* /**
The view has loaded. This event only happens once per view being * The view has loaded. This event only happens once per view being
created. If a view leaves but is cached, then this will not * created. If a view leaves but is cached, then this will not
fire again on a subsequent viewing. This method is a good place * fire again on a subsequent viewing. This method is a good place
to put your setup code for the view; however, it is not the * to put your setup code for the view; however, it is not the
recommended method to use when a view becomes active. * recommended method to use when a view becomes active.
*/ */
loaded() { loaded() {
this.instance && this.instance.viewLoaded && this.instance.viewLoaded(); this.instance && this.instance.viewLoaded && this.instance.viewLoaded();
} }
/* /**
The view is about to enter and become the active view. * The view is about to enter and become the active view.
*/ */
willEnter() { willEnter() {
this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter(); this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter();
} }
/* /**
The view has fully entered and is now the active view. This * The view has fully entered and is now the active view. This
will fire, whether it was the first load or loaded from the cache. * will fire, whether it was the first load or loaded from the cache.
*/ */
didEnter() { didEnter() {
let navbarView = this.navbarView(); let navbarView = this.navbarView();
if (navbarView) { if (navbarView) {
@ -297,31 +366,31 @@ export class ViewItem {
this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter(); this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter();
} }
/* /**
The view has is about to leave and no longer be the active view. * The view has is about to leave and no longer be the active view.
*/ */
willLeave() { willLeave() {
this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave(); this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave();
} }
/* /**
The view has finished leaving and is no longer the active view. This * The view has finished leaving and is no longer the active view. This
will fire, whether it is cached or unloaded. * will fire, whether it is cached or unloaded.
*/ */
didLeave() { didLeave() {
this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave(); this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave();
} }
/* /**
The view is about to be destroyed and have its elements removed. * The view is about to be destroyed and have its elements removed.
*/ */
willUnload() { willUnload() {
this.instance && this.instance.viewWillUnload && this.instance.viewWillUnload(); this.instance && this.instance.viewWillUnload && this.instance.viewWillUnload();
} }
/* /**
The view has been destroyed and its elements have been removed. * The view has been destroyed and its elements have been removed.
*/ */
didUnload() { didUnload() {
this.instance && this.instance.viewDidUnload && this.instance.viewDidUnload(); this.instance && this.instance.viewDidUnload && this.instance.viewDidUnload();
} }