javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '2.0' into dark-theme

Browse Source
This commit is contained in:
Matheus Cruz Rocha
2016-02-04 10:52:09 -03:00
parent 70bee0fcc6 60fdc5c2f3
commit 0c97a0fdba
100 changed files with 1320 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/alert/alert.ts
View File

@ -114,6 +114,7 @@ import {ViewController} from '../nav/view-controller';
* }
* ```
*
* @demo /docs/v2/demos/alert/
*/
export class Alert extends ViewController {

2
ionic/components/button/button.ts
View File

@ -24,7 +24,7 @@ import {Toolbar} from '../toolbar/toolbar';
* @property [color] - Dynamically set which color attribute this button should use.
* @description
* Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
* @demo /docs/v2/demos/buttons/
* @demo /docs/v2/demos/button/
* @see {@link /docs/v2/components#buttons Button Component Docs}
*/

11
ionic/components/card/card.scss
View File

@ -7,7 +7,6 @@
ion-card {
display: block;
overflow: hidden;
transform: translateZ(0);
}
ion-card img {
@ -25,3 +24,13 @@ ion-card-header {
ion-card-content {
display: block;
}
ion-card > :first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
ion-card > :last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}

1
ionic/components/icon/icon.ts
View File

@ -38,6 +38,7 @@ import {Config} from '../../config/config';
* inactive icon on iOS will use an outlined version of the icon same icon.
* Material Design icons do not change appearance depending if they're active
* or not. The `isActive` property is largely used by the tabbar.
* @demo /docs/v2/demos/icon/
* @see {@link /docs/v2/components#icons Icon Component Docs}
*
*/

2
ionic/components/input/input-base.ts
View File

@ -353,7 +353,7 @@ export class InputBase {
* @private
*/
clearTextInput() {
console.log("Should clear input");
console.debug("Should clear input");
}
/**

6
ionic/components/list/list.ts
View File

@ -66,9 +66,9 @@ export class List extends Ion {
*/
ngOnInit() {
if (isDefined(this.virtual)) {
console.log('Content', this.content);
console.log('Virtual?', this.virtual);
console.log('Items?', this.items.length, 'of \'em');
console.debug('Content', this.content);
console.debug('Virtual?', this.virtual);
console.debug('Items?', this.items.length, 'of \'em');
this._initVirtualScrolling();
}
}

12
ionic/components/list/virtual.ts
View File

@ -13,7 +13,7 @@ export class ListVirtualScroll {
shownItems = {};
enteringItems = [];
leavingItems = [];
constructor(list: List) {
this.list = list;
this.content = this.list.content;
@ -44,7 +44,7 @@ export class ListVirtualScroll {
this.virtualHeight = this.list.items.length * this.itemHeight;
this.itemsPerScreen = this.viewportHeight / this.itemHeight;
console.log('VIRTUAL: resize(viewportHeight:', this.viewportHeight,
console.debug('VIRTUAL: resize(viewportHeight:', this.viewportHeight,
'viewportScrollHeight:', this.viewportScrollHeight, 'virtualHeight:', this.virtualHeight,
', itemsPerScreen:', this.itemsPerScreen, ')');
}
@ -78,7 +78,7 @@ export class ListVirtualScroll {
// virtual items we draw
for (let i = topIndex, realIndex = 0; i < bottomIndex && i < items.length; i++, realIndex++) {
item = items[i];
console.log('Drawing item', i, item.title);
console.debug('Drawing item', i, item.title);
shownItemRef = this.shownItems[i];
@ -100,12 +100,12 @@ export class ListVirtualScroll {
while (this.leavingItems.length) {
let itemRef = this.leavingItems.pop();
console.log('Removing item', itemRef.item, itemRef.realIndex);
console.debug('Removing item', itemRef.item, itemRef.realIndex);
this.viewContainer.remove(itemRef.realIndex);
}
console.log('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.log('Container has', this.list.getNativeElement().children.length, 'children');
console.debug('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.debug('Container has', this.list.getNativeElement().children.length, 'children');
}
cellAtIndex(index) {

33
ionic/components/menu/menu-gestures.ts
View File

@ -3,7 +3,6 @@ import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
import {assign} from '../../util/util';
export class MenuContentGesture extends SlideEdgeGesture {
constructor(public menu: Menu, targetEl: Element, options = {}) {
@ -19,8 +18,36 @@ export class MenuContentGesture extends SlideEdgeGesture {
}
canStart(ev) {
let validAngle = ((-35 <= ev.angle && ev.angle <= 35) || (180 >= ev.angle && ev.angle >= 145) || (-180 <= ev.angle && ev.angle <= -145));
return this.menu.isOpen && this.menu.isEnabled && validAngle ? true : super.canStart(ev);
let menu = this.menu;
console.debug('menu canStart, id', menu.id, 'angle', ev.angle, 'distance', ev.distance);
if (!menu.isEnabled || !menu.isSwipeEnabled) {
console.debug('menu canStart, isEnabled', menu.isEnabled, 'isSwipeEnabled', menu.isSwipeEnabled, 'id', menu.id);
return false;
}
if (ev.distance > 50) {
// the distance is longer than you'd expect a side menu swipe to be
console.debug('menu canStart, distance too far', ev.distance, 'id', menu.id);
return false;
}
if (menu.side === 'left') {
// left side menu
if (ev.angle > -40 && ev.angle < 40) {
return super.canStart(ev);
}
} else if (menu.side === 'right') {
// right side menu
if ((ev.angle > 140 && ev.angle <= 180) || (ev.angle > -140 && ev.angle <= -180)) {
return super.canStart(ev);
}
}
// didn't pass the test, don't open this menu
return false;
}
// Set CSS, then wait one frame for it to apply before sliding starts

2
ionic/components/menu/menu.ts
View File

@ -282,7 +282,7 @@ export class Menu extends Ion {
setOpen(shouldOpen) {
// _isPrevented is used to prevent unwanted opening/closing after swiping open/close
// or swiping open the menu while pressing down on the menuToggle button
if (shouldOpen === this.isOpen || this._isPrevented()) {
if ((shouldOpen && this.isOpen) || this._isPrevented()) {
return Promise.resolve();
}

4
ionic/components/menu/test/basic/index.ts
View File

@ -64,8 +64,8 @@ class E2EApp {
console.log('onMenuOpening', ev);
}
isHidden() {
isChangeDetecting() {
console.log('Change detection', ++this.changeDetectionCount);
return false;
return true;
}
}

99
ionic/components/menu/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left" (opening)="onMenuOpening($event)">
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -12,7 +12,51 @@
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none [hidden]="isHidden()">
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
@ -40,9 +84,60 @@
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
<div [hidden]="isChangeDetecting()"></div>

2
ionic/components/menu/test/basic/page1.html
View File

@ -51,4 +51,6 @@
<button (click)="presentAlert()">Open alert</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>

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

@ -38,7 +38,7 @@ import {NavRegistry} from './nav-registry';
* ```html
* <button [navPush]="[pushPage, params]"></button>
* ```
* @demo /docs/v2/demos/nav-push-pop/
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../NavPop NavPop API Docs}
*/
@ -52,9 +52,9 @@ import {NavRegistry} from './nav-registry';
export class NavPush {
@Input() navPush;
@Input() navParams;
constructor(
@Optional() private _nav: NavController,
@Optional() private _nav: NavController,
private registry: NavRegistry
) {
if (!_nav) {
@ -74,7 +74,7 @@ export class NavPush {
}
destination = this.navPush[0];
params = this.navPush[1] || this.navParams;
} else {
destination = this.navPush;
params = this.navParams;
@ -103,7 +103,7 @@ export class NavPush {
* This will go back one page in the navigation stack
*
* Similar to {@link /docs/v2/api/components/nav/NavPush/ `NavPush` }
* @demo /docs/v2/demos/nav-push-pop/
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../NavPush NavPush API Docs}
*/

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

@ -98,6 +98,7 @@ import {ViewController} from './view-controller';
* </pre>
* </div>
*
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
*/
@Component({

136
ionic/components/scroll/pull-to-refresh.ts
View File

@ -31,20 +31,20 @@ import {raf, ready, CSS} from '../../util/dom';
* export class MyClass {
* constructor(){}
* doRefresh(refresher) {
* console.log('Refreshing!', refresher);
* console.debug('Refreshing!', refresher);
*
* setTimeout(() => {
* console.log('Pull to refresh complete!', refresher);
* console.debug('Pull to refresh complete!', refresher);
* refresher.complete();
* })
* }
*
* doStarting() {
* console.log('Pull started!');
* console.debug('Pull started!');
* }
*
* doPulling(amt) {
* console.log('You have pulled', amt);
* console.debug('You have pulled', amt);
* }
* }
* ```
@ -81,54 +81,154 @@ import {raf, ready, CSS} from '../../util/dom';
directives: [NgIf, NgClass, Icon]
})
export class Refresher {
private ele: HTMLElement;
private _ele: HTMLElement;
private _touchMoveListener;
private _touchEndListener;
private _handleScrollListener;
/**
* @private
*/
isActive: boolean;
/**
* @private
*/
isDragging: boolean = false;
/**
* @private
*/
isOverscrolling: boolean = false;
/**
* @private
*/
dragOffset: number = 0;
/**
* @private
*/
lastOverscroll: number = 0;
/**
* @private
*/
ptrThreshold: number = 0;
/**
* @private
*/
activated: boolean = false;
/**
* @private
*/
scrollTime: number = 500;
/**
* @private
*/
canOverscroll: boolean = true;
/**
* @private
*/
startY;
/**
* @private
*/
deltaY;
/**
* @private
*/
scrollHost;
/**
* @private
*/
scrollChild;
/**
* @private
*/
showIcon: boolean;
/**
* @private
*/
showSpinner: boolean;
/**
* @private
*/
isRefreshing: boolean;
/**
* @private
*/
isRefreshingTail: boolean;
/**
* @private
*/
@Input() pullingIcon: string;
/**
* @private
*/
@Input() pullingText: string;
/**
* @private
*/
@Input() refreshingIcon: string;
/**
* @private
*/
@Input() refreshingText: string;
/**
* @private
*/
@Input() spinner: string;
/**
* @private
*/
@Output() pulling: EventEmitter<any> = new EventEmitter();
/**
* @private
*/
@Output() refresh: EventEmitter<any> = new EventEmitter();
/**
* @private
*/
@Output() starting: EventEmitter<any> = new EventEmitter();
constructor(
@Host() private content: Content,
element: ElementRef
@Host() private _content: Content,
_element: ElementRef
) {
this.ele = element.nativeElement;
this.ele.classList.add('content');
this._ele = _element.nativeElement;
this._ele.classList.add('content');
}
/**
* @private
*/
ngOnInit() {
let sp = this.content.getNativeElement();
let sc = this.content.scrollElement;
let sp = this._content.getNativeElement();
let sc = this._content.scrollElement;
this.startY = null;
this.deltaY = null;
@ -156,7 +256,7 @@ export class Refresher {
* @private
*/
ngOnDestroy() {
let sc = this.content.scrollElement;
let sc = this._content.scrollElement;
sc.removeEventListener('touchmove', this._touchMoveListener);
sc.removeEventListener('touchend', this._touchEndListener);
sc.removeEventListener('scroll', this._handleScrollListener);
@ -245,7 +345,7 @@ export class Refresher {
*/
show() {
// showCallback
this.ele.classList.remove('invisible');
this._ele.classList.remove('invisible');
}
/**
@ -253,7 +353,7 @@ export class Refresher {
*/
hide() {
// showCallback
this.ele.classList.add('invisible');
this._ele.classList.add('invisible');
}
/**
@ -261,7 +361,7 @@ export class Refresher {
*/
tail() {
// tailCallback
this.ele.classList.add('refreshing-tail');
this._ele.classList.add('refreshing-tail');
}
/**
@ -341,7 +441,7 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleTouchMove(e) {
//console.log('TOUCHMOVE', e);
//console.debug('TOUCHMOVE', e);
// if multitouch or regular scroll event, get out immediately
if (!this.canOverscroll || e.touches.length > 1) {
@ -413,7 +513,7 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleTouchEnd(e) {
console.log('TOUCHEND', e);
console.debug('TOUCHEND', e);
// if this wasn't an overscroll, get out immediately
if (!this.canOverscroll && !this.isDragging) {
return;
@ -448,6 +548,6 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleScroll(e) {
console.log('SCROLL', e.target.scrollTop);
console.debug('SCROLL', e.target.scrollTop);
}
}

9
ionic/components/scroll/scroll.ts
View File

@ -45,8 +45,17 @@ import * as util from '../../util';
'</scroll-content>'
})
export class Scroll extends Ion {
/**
* @private
*/
private maxScale: number = 3;
/**
* @private
*/
private zoomDuration: number = 250;
/**
* @private
*/
private scrollElement: HTMLElement;
constructor(elementRef: ElementRef) {

30
ionic/components/searchbar/searchbar.ts
View File

@ -72,6 +72,9 @@ export class SearchbarInput {
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
})
export class Searchbar extends Ion {
/**
* @private
*/
@ViewChild(SearchbarInput) searchbarInput;
/**
@ -112,13 +115,40 @@ export class Searchbar extends Ion {
*/
@Output() clear: EventEmitter<Searchbar> = new EventEmitter();
/**
* @private
*/
value: string = '';
/**
* @private
*/
blurInput: boolean = true;
/**
* @private
*/
inputElement: any;
/**
* @private
*/
searchIconElement: any;
/**
* @private
*/
mode: string;
/**
* @private
*/
@HostBinding('class.searchbar-focused') isFocused;
/**
* @private
*/
@HostBinding('class.searchbar-left-aligned') shouldLeftAlign;
constructor(

23
ionic/components/segment/segment.ts
View File

@ -8,7 +8,6 @@ import {isDefined} from '../../util/util';
* @name SegmentButton
* @description
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
* @property {string} [value] - the value of the segment-button. Required.
* @usage
* ```html
* <ion-segment [(ngModel)]="relationship" primary>
@ -39,7 +38,9 @@ import {isDefined} from '../../util/util';
* </form>
* ```
*
* @property {string} [value] - the value of the segment-button. Required.
* @property {Any} [click] - expression to evaluate when a segment button has been clicked
* @property {Any} (select) - expression to evaluate when a segment selection has been changed
*
* @demo /docs/v2/demos/segment/
* @see {@link /docs/v2/components#segment Segment Component Docs}
@ -54,7 +55,15 @@ import {isDefined} from '../../util/util';
}
})
export class SegmentButton {
/**
* @private
*/
@Input() value: string;
/**
* @private
*/
@Output() select: EventEmitter<SegmentButton> = new EventEmitter();
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
@ -137,10 +146,22 @@ export class SegmentButton {
selector: 'ion-segment'
})
export class Segment {
/**
* @private
*/
value: string;
/**
* @private
*/
@Output() change: EventEmitter<SegmentButton> = new EventEmitter();
/**
* @private
*/
@ContentChildren(SegmentButton) _buttons: QueryList<SegmentButton>;
constructor(@Optional() ngControl: NgControl) {

52
ionic/components/select/select.ts
View File

@ -92,7 +92,13 @@ import {Option} from '../option/option';
* subTitle: 'Select your toppings'
* };
* ```
*
* @property [cancelText] - The text of the cancel button. Defatuls to 'cancel'
* @property [okText] - The text of the ok button. Defatuls to 'OK'
* @property [alertOptions] - Any addition options that an alert can take. Title, Subtitle, etc.
* @property [multiple] - Whether or not the select component can accept multipl selections
* @property [disabled] - Whether or not the select component is disabled or not
* @property (change) - Any expression you want to evaluate when the selection has changed
*/
@Component({
selector: 'ion-select',
@ -125,11 +131,29 @@ export class Select {
*/
id: string;
/**
* @private
*/
@Input() cancelText: string = 'Cancel';
/**
* @private
*/
@Input() okText: string = 'OK';
/**
* @private
*/
@Input() alertOptions: any = {};
/**
* @private
*/
@Input() checked: any = false;
/**
* @private
*/
@Output() change: EventEmitter<any> = new EventEmitter();
constructor(
@ -215,6 +239,10 @@ export class Select {
this._nav.present(alert, alertOptions);
}
/**
* @private
*/
@Input()
get multiple() {
return this._multi;
@ -224,6 +252,10 @@ export class Select {
this._multi = isTrueProperty(val);
}
/**
* @private
*/
@Input()
get value(): any {
return (this._multi ? this._values : this._values.join());
@ -235,10 +267,17 @@ export class Select {
this.updateOptions();
}
/**
* @private
*/
get text() {
return (this._multi ? this._texts : this._texts.join());
}
/**
* @private
*/
@ContentChildren(Option)
private set options(val: QueryList<Option>) {
this._options = val;
@ -252,6 +291,9 @@ export class Select {
this.updateOptions();
}
/**
* @private
*/
private updateOptions() {
this._texts = [];
@ -268,6 +310,10 @@ export class Select {
this._text = this._texts.join(', ');
}
/**
* @private
*/
ngAfterContentInit() {
// using a setTimeout here to prevent
// "has changed after it was checked" error
@ -277,6 +323,10 @@ export class Select {
});
}
/**
* @private
*/
@Input()
get disabled() {
return this._disabled;

166
ionic/components/slides/slides.ts
View File

@ -18,17 +18,6 @@ import {Scroll} from '../scroll/scroll';
* @description
* Slides is a slide box implementation based on Swiper.js
*
* Swiper.js:
* The most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* @usage
* ```ts
* @Page({
@ -61,12 +50,27 @@ import {Scroll} from '../scroll/scroll';
*```
* @property {Boolean} [autoplay] - whether or not the slides should automatically change
* @property {Boolean} [loop] - whether the slides should loop from the last slide back to the first
* @property {Boolean} [bounce] - whether the slides should bounce
* @property {Number} [index] - The slide index to start on
* @property [pager] - add this property to enable the slide pager
* @property {Any} [change] - expression to evaluate when a slide has been changed
* @property {Boolean} [bounce] - whether the slides should bounce
* @property {Boolean} [pager] - Whether the slide should show the page or not
* @property {Any} [options] - Any additional slider options you want to pass
* @property {Number} [zoom] - Whether or not the slider can zoom in or out
* @property {Number} [zoomDuration] - how long it should take to zoom a slide
* @property {Number} [zoomMax] - the max scale an slide can be zoomed
* @property {Any} (change) - expression to evaluate when a slide has been changed
* @demo /docs/v2/demos/slides/
* @see {@link /docs/v2/components#slides Slides Component Docs}
*
* Swiper.js:
* The most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*/
@Component({
selector: 'ion-slides',
@ -81,18 +85,69 @@ import {Scroll} from '../scroll/scroll';
})
export class Slides extends Ion {
/**
* @private
*/
public rapidUpdate: Function;
/**
* @private
*/
private showPager: boolean;
/**
* @private
*/
private slider: Swiper;
/**
* @private
*/
private maxScale: number;
/**
* @private
*/
private zoomElement: HTMLElement;
/**
* @private
*/
private zoomGesture: Gesture;
/**
* @private
*/
private scale: number;
/**
* @private
*/
private zoomLastPosX: number;
/**
* @private
*/
private zoomLastPosY: number;
/**
* @private
*/
private viewportWidth: number;
/**
* @private
*/
private viewportHeight: number;
/**
* @private
*/
private enableZoom: boolean;
/**
* @private
*/
private touch: {
x: number,
y: number,
@ -108,16 +163,55 @@ export class Slides extends Ion {
zoomableHeight: number
}
/**
* @private
*/
@Input() autoplay: any;
/**
* @private
*/
@Input() loop: any;
/**
* @private
*/
@Input() index: any;
/**
* @private
*/
@Input() bounce: any;
/**
* @private
*/
@Input() pager: any;
/**
* @private
*/
@Input() options: any;
/**
* @private
*/
@Input() zoom: any;
/**
* @private
*/
@Input() zoomDuration: any;
/**
* @private
*/
@Input() zoomMax: any;
/**
* @private
*/
@Output() change: EventEmitter<any> = new EventEmitter();
/**
@ -284,12 +378,12 @@ export class Slides extends Ion {
this.zoomGesture.on('pinchstart', (e) => {
last_scale = this.scale;
console.log('Last scale', e.scale);
console.debug('Last scale', e.scale);
});
this.zoomGesture.on('pinch', (e) => {
this.scale = Math.max(1, Math.min(last_scale * e.scale, 10));
console.log('Scaling', this.scale);
console.debug('Scaling', this.scale);
this.zoomElement.style[CSS.transform] = 'scale(' + this.scale + ')'
zoomRect = this.zoomElement.getBoundingClientRect();
@ -330,10 +424,10 @@ export class Slides extends Ion {
* @private
*/
toggleZoom(swiper, e) {
console.log('Try toggle zoom');
console.debug('Try toggle zoom');
if (!this.enableZoom) { return; }
console.log('Toggling zoom', e);
console.debug('Toggling zoom', e);
/*
let x = e.pointers[0].clientX;
@ -357,7 +451,7 @@ export class Slides extends Ion {
ty = y-my;
}
console.log(y);
console.debug(y);
*/
let zi = new Animation(this.touch.target.children[0])
@ -418,7 +512,7 @@ export class Slides extends Ion {
* @private
*/
onTouchStart(e) {
console.log('Touch start', e);
console.debug('Touch start', e);
//TODO: Support mice as well
@ -438,7 +532,7 @@ export class Slides extends Ion {
zoomableWidth: target.offsetWidth,
zoomableHeight: target.offsetHeight
}
console.log('Target', this.touch.target);
console.debug('Target', this.touch.target);
//TODO: android prevent default
@ -461,25 +555,23 @@ export class Slides extends Ion {
let y1 = Math.min((this.viewportHeight / 2) - zoomableScaledHeight/2, 0)
let y2 = -y1;
console.log('BOUNDS', x1, x2, y1, y2);
console.debug('BOUNDS', x1, x2, y1, y2);
if (this.scale <= 1) {
return;
}
console.log('PAN', e);
console.debug('PAN', e);
// Move image
this.touch.x = this.touch.deltaX + this.touch.lastX;
this.touch.y = this.touch.deltaY + this.touch.lastY;
console.log(this.touch.x, this.touch.y);
if (this.touch.x < x1) {
console.log('OUT ON LEFT');
console.debug('OUT ON LEFT');
}
if (this.touch.x > x2 ){
console.log('OUT ON RIGHT');
console.debug('OUT ON RIGHT');
}
if (this.touch.x > this.viewportWidth) {
@ -487,7 +579,7 @@ export class Slides extends Ion {
} else if (-this.touch.x > this.viewportWidth) {
// Too far on the right side, let the event bubble up (to enable slider on edges, for example)
} else {
console.log('TRANSFORM', this.touch.x, this.touch.y, this.touch.target);
console.debug('TRANSFORM', this.touch.x, this.touch.y, this.touch.target);
//this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
e.preventDefault();
@ -501,14 +593,14 @@ export class Slides extends Ion {
* @private
*/
onTouchEnd(e) {
console.log('PANEND', e);
console.debug('PANEND', e);
if (this.scale > 1) {
if (Math.abs(this.touch.x) > this.viewportWidth) {
// TODO what is posX?
var posX = posX > 0 ? this.viewportWidth - 1 : -(this.viewportWidth - 1);
console.log('Setting on posx', this.touch.x);
console.debug('Setting on posx', this.touch.x);
}
/*
@ -595,15 +687,27 @@ export class Slides extends Ion {
}
/**
* @private
* @name Slide
* @description
* `ion-slide` is a child component of `ion-slides` and is where all your individule slide content will be rendered too.
*
* @see {@link /docs/v2/api/components/slides/Slides/ Slides API Docs}
*/
@Component({
selector: 'ion-slide',
template: '<div class="slide-zoom"><ng-content></ng-content></div>'
})
export class Slide {
/**
* @private
*/
private ele: HTMLElement;
/**
* @private
*/
@Input() zoom;
constructor(

68
ionic/components/tabs/tab.ts
View File

@ -12,14 +12,6 @@ import {TabButton} from './tab-button';
/**
* @name Tab
* @usage
* ```html
* <ion-tabs>
* <ion-tab tabTitle="Home" tabIcon="home" [root]="tabOneRoot"></ion-tab>
* <ion-tab tabTitle="Login" tabIcon="star" [root]="tabTwoRoot"></ion-tab>
* </ion-tabs>
* ```
*
* @description
* _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
* of the Component docs._
@ -34,11 +26,12 @@ import {TabButton} from './tab-button';
* See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
* and the TabBar.
*
* @usage
* For most cases, you can give tab a `[root]` property along with the component you want to load.
*
* ```html
* <ion-tabs>
* <ion-tab [root]="chatRoot"><ion-tab>
* <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>
* </ion-tabs>
* ```
*
@ -76,12 +69,12 @@ import {TabButton} from './tab-button';
* ```
*
*
* @property {any} [root] - set the root page for this tab
* @property {any} [tabTitle] - set the title of this tab
* @property {any} [tabIcon] - set the icon for this tab
* @property {any} [tabBadge] - set the badge for this tab
* @property {any} [tabBadgeStyle] - set the badge color for this tab
* @property {any} [select] - method to call when the current tab is selected
* @property {Page} [root] - set the root page for this tab
* @property {String} [tabTitle] - set the title of this tab
* @property {String} [tabIcon] - set the icon for this tab
* @property {Any} [tabBadge] - set the badge for this tab
* @property {String} [tabBadgeStyle] - set the badge color for this tab
* @property {Any} (select) - method to call when the current tab is selected
*
*/
@Component({
@ -95,6 +88,10 @@ import {TabButton} from './tab-button';
template: '<div #contents></div>'
})
export class Tab extends NavController {
/**
* @private
*/
public isSelected: boolean;
private _isInitial: boolean;
private _panelId: string;
@ -107,11 +104,35 @@ export class Tab extends NavController {
*/
btn: TabButton;
/**
* @private
*/
@Input() root: Type;
/**
* @private
*/
@Input() tabTitle: string;
/**
* @private
*/
@Input() tabIcon: string;
/**
* @private
*/
@Input() tabBadge: string;
/**
* @private
*/
@Input() tabBadgeStyle: string;
/**
* @private
*/
@Output() select: EventEmitter<any> = new EventEmitter();
constructor(
@ -156,6 +177,10 @@ export class Tab extends NavController {
}
}
/**
* @private
*/
preload(wait) {
this._loadTimer = setTimeout(() => {
if (!this._loaded) {
@ -212,18 +237,7 @@ export class Tab extends NavController {
}
/**
*
* ```ts
* export class MyClass{
* constructor(tab: Tab){
* this.tab = tab;
* console.log(this.tab.index);
* }
* }
* ```
*
* @returns {number} Returns the index of this page within its NavController.
*
* @private
*/
get index() {
return this.parent.getIndex(this);

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

@ -21,6 +21,7 @@ import {isUndefined} from '../../util/util';
* @property {any} [tabbarPlacement] - set position of the tabbar, top or bottom
* @property {any} [tabbarIcons] - set the position of the tabbar's icons: top, bottom, left, right, hide
* @property {any} [preloadTabs] - sets whether to preload all the tabs, true or false
* @property {any} (change) - expression you want to evaluate when the tabs chage
* @usage
* ```html
* <ion-tabs>
@ -81,15 +82,40 @@ export class Tabs extends Ion {
* @private
*/
navbarContainerRef: ViewContainerRef;
/**
* @private
*/
subPages: boolean;
/**
* @private
*/
@Input() selectedIndex: any;
/**
* @private
*/
@Input() preloadTabs: any;
/**
* @private
*/
@Input() tabbarIcons: string;
/**
* @private
*/
@Input() tabbarPlacement: string;
/**
* @private
*/
@Output() change: EventEmitter<Tab> = new EventEmitter();
/**
* @private
*/
@ViewChild(TabHighlight) private _highlight: TabHighlight;
/**
* @private
*/
@ViewChildren(TabButton) private _btns;
constructor(

12
ionic/components/toggle/toggle.ts
View File

@ -79,8 +79,14 @@ export class Toggle {
private _startX;
private _touched: number = 0;
/**
* @private
*/
id: string;
/**
* @private
*/
@Input() value: string = '';
constructor(
@ -119,6 +125,9 @@ export class Toggle {
this.checked = !this.checked;
}
/**
* @private
*/
@Input()
get checked() {
return this._checked;
@ -132,6 +141,9 @@ export class Toggle {
}
}
/**
* @private
*/
@Input()
get disabled() {
return this._disabled;

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

@ -92,7 +92,7 @@ export class ToolbarBase extends Ion {
*
* ```
*
* @property {any} [placement] - set position of the toolbar, top or bottom
* @property {any} [placement] - set position of the toolbar, top or bottom. If not set, defautls to top.
* @demo /docs/v2/demos/toolbar/
* @see {@link ../../navbar/Navbar/ Navbar API Docs}
*/

11
ionic/config/config.ts
View File

@ -29,6 +29,17 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* })
* ```
*
* Or change the whole mode
*
* ```ts
* @App({
* template: `<ion-nav [root]="root"></ion-nav>`
* config: {
* mode: md
* }
* })
* ```
*
* Config can be overwritting at multiple levels, allowing deeper configuration. Taking the example from earlier, we can override any setting we want based on a platform.
* ```ts
* @App({

3
ionic/decorators/page.ts
View File

@ -6,7 +6,6 @@ const _reflect: any=Reflect;
/**
* @name Page
* @description
*For more information on how pages are created, see the [NavController API reference](../../components/nav/NavController/#creating_pages)
*
* The Page decorator indicates that the decorated class is an Ionic
* navigation component, meaning it can be navigated to using a NavController.
@ -69,6 +68,8 @@ const _reflect: any=Reflect;
* Pages have their content automatically wrapped in `<ion-view>`, so although
* you may see these tags if you inspect your markup, you don't need to include
* them in your templates.
*
* For more information on how pages are created, see the [NavController API reference](../../components/nav/NavController/#creating_pages)
*/
export function Page(config: any={}) {
return function(cls) {