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

fix merge conflicts

Browse Source
This commit is contained in:
Adam Bradley
2015-09-08 23:06:59 -05:00
parent f0cb0a8de0 92960c891d
commit 72b419030a
31 changed files with 788 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
gulpfile.js
View File

@ -18,7 +18,9 @@ function getBabelOptions(moduleName, moduleType) {
modules: moduleType || "system", modules: moduleType || "system",
moduleIds: true, moduleIds: true,
getModuleId: function(name) { getModuleId: function(name) {
if (moduleName === "index") return moduleName; if (moduleName == "e2e"){
return name.replace(/\S*\/test\/[^\/]*\//, '');
}
return moduleName + '/' + name.split('/test').join(''); return moduleName + '/' + name.split('/test').join('');
} }
@ -204,7 +206,7 @@ gulp.task('e2e', function() {
var buildTest = lazypipe() var buildTest = lazypipe()
//.pipe(traceur, traceurOptions) //.pipe(traceur, traceurOptions)
.pipe(tsc, tscOptions, null, tscReporter) .pipe(tsc, tscOptions, null, tscReporter)
.pipe(babel, getBabelOptions('index')) .pipe(babel, getBabelOptions('e2e'))
var buildE2ETest = lazypipe() var buildE2ETest = lazypipe()
//.pipe(traceur, traceurOptions) //.pipe(traceur, traceurOptions)

4
ionic/components/action-menu/action-menu.ts
View File

@ -16,12 +16,12 @@ import * as util from 'ionic/util';
/** /**
* @name ActionMenu * @name ActionMenu
* @classdesc * @description
* The Action Menu is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious. * The Action Menu is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
* *
* There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing. * There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing.
* *
* @example * @usage
* ```ts * ```ts
* openMenu() { * openMenu() {
* *

19
ionic/components/app/app.ts
View File

@ -13,7 +13,24 @@ import {Popup} from '../popup/popup';
import {FocusHolder} from '../form/focus-holder'; import {FocusHolder} from '../form/focus-holder';
/** /**
* TODO * @name IonicApp
* @description
* The base Ionic class that your app inherits from. By inheriting from this class, you will have access to the Ionic API.
*
* @usage
* ```js
* @App({
* templateUrl: '/app/app.html',
* })
* class MyApp {
*
* constructor(app: IonicApp) {
* this.app = app;
* }
* }
* ```
* Note: Ionic sets `ion-app` as the selector for the app. Setting a custom selector will override this and cause CSS problems.
*
*/ */
export class IonicApp { export class IonicApp {

63
ionic/components/app/test/native/index.ts
View File

@ -3,56 +3,31 @@ import {Control, ControlGroup} from 'angular2/forms';
import {App, Http} from 'ionic/ionic'; import {App, Http} from 'ionic/ionic';
import {Camera, Geolocation, Vibration, Battery} from 'ionic/ionic'; import {Camera, Geolocation, Vibration, Battery, Device} from 'ionic/ionic';
let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
import {CameraPage} from 'pages/camera';
import {BatteryPage} from 'pages/battery';
import {ContactsPage} from 'pages/contacts';
import {DevicePage} from 'pages/device';
import {DeviceMotionPage} from 'pages/device-motion';
import {GeolocationPage} from 'pages/geolocation';
import {VibrationPage} from 'pages/vibration';
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class IonicApp { class IonicApp {
constructor() { constructor() {
} this.firstPage = CameraPage;
doGetLocation() { console.log('First page', CameraPage);
console.log('Getting location'); this.plugins = [
this.gettingLocation = true; {title: 'Camera', page: CameraPage},
Geolocation.getCurrentPosition().then((pos) => { {title: 'Device', page: DevicePage},
this.gettingLocation = false; {title: 'Device Motion', page: DeviceMotionPage},
console.log('Got location', pos); {title: 'Geolocation', page: GeolocationPage},
this.location = pos; {title: 'Contacts', page: ContactsPage},
}, (err) => { {title: 'Battery', page: BatteryPage},
this.gettingLocation = false; {title: 'Vibration', page: VibrationPage},
console.error('Unable to get location', err); ]
});
}
doTrackLocation() {
this.gettingTrackLocation = true;
Geolocation.watchPosition().source.subscribe((pos) => {
this.gettingTrackLocation = false;
console.log('Got location', pos);
this.trackLocation = pos;
}, (err) => {
this.gettingTrackLocation = false;
console.error('Unable to get location', pos);
});
}
getPicture() {
Camera.getPicture({
}).then(data => {
console.log('Data', data);
}, err => {
alert('Unable to take picture')
})
}
doVibrate() {
Vibration.vibrate(1000);
}
doBatteryStatus() {
Battery.getStatus().then((battery) => {
this.battery = battery;
});
} }
} }

42
ionic/components/app/test/native/main.html
View File

@ -1,32 +1,12 @@
<ion-view> <ion-aside #aside [content]="content" id="mainMenu">
<ion-content padding> <ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
<h2>Camera</h2> <ion-content>
<button primary outline (click)="getPicture()">Get Picture</button> <ion-list>
<h2>Geolocation</h2> <ion-item *ng-for="#p of plugins" (^click)="openPage(aside, p)">
<button primary outline (click)="doGetLocation()">Get Location</button> <span>{{p.title}}</span>
<div> </ion-item>
<b *ng-if="gettingLocation">Fetching location...</b> </ion-list>
<b *ng-if="location">{{location.coords.latitude}}, {{location.coords.longitude}}</b>
</div>
<button primary outline (click)="doTrackLocation()">Track Location</button>
<div>
<b *ng-if="gettingTrackLocation">Fetching location...</b>
<b *ng-if="trackLocation">{{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}}</b>
</div>
<h2>Vibration</h2>
<button primary outline (click)="doVibrate()">Vibrate</button>
<h2>Battery</h2>
<button primary outline (click)="doBatteryStatus()">Get Status</button>
<div *ng-if="battery">
Battery charging: <b>{{battery.charging}}</b><br>
Battery level: <b>{{battery.level * 100}}</b>%<br>
Battery charging time: <b>{{battery.chargingTime}}</b>s<br>
Battery discharging time: <b>{{battery.dischargingTime}}</b>s<br>
</div>
<h2>Contacts</h2>
<div>
</div>
</ion-content> </ion-content>
</ion-view> </ion-aside>
<ion-nav #content swipe-back-enabled="false" [root]="firstPage"></ion-nav>

31
ionic/components/app/test/native/pages/battery.ts Normal file
View File

@ -0,0 +1,31 @@
import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Battery</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Battery</h2>
<button primary outline (click)="doBatteryStatus()">Get Status</button>
<div *ng-if="battery">
Battery charging: <b>{{battery.charging}}</b><br>
Battery level: <b>{{battery.level * 100}}</b>%<br>
Battery charging time: <b>{{battery.chargingTime}}</b>s<br>
Battery discharging time: <b>{{battery.dischargingTime}}</b>s<br>
</div>
</ion-content>
`
})
export class BatteryPage {
doBatteryStatus() {
Battery.getStatus().then((battery) => {
this.battery = battery;
});
}
}

32
ionic/components/app/test/native/pages/camera.ts Normal file
View File

@ -0,0 +1,32 @@
import {IonicView} from 'ionic/ionic';
import {Camera} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Camera</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Camera</h2>
<button primary outline (click)="getPicture()">Get Picture</button>
</ion-content>
`
})
export class CameraPage {
constructor() {
}
getPicture() {
Camera.getPicture({
}).then(data => {
console.log('Data', data);
}, err => {
alert('Unable to take picture')
})
}
}

22
ionic/components/app/test/native/pages/contacts.ts Normal file
View File

@ -0,0 +1,22 @@
import {IonicView} from 'ionic/ionic';
import {Contacts} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Contacts</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Contacts</h2>
<div>
</div>
</ion-content>
`
})
export class ContactsPage {
}

18
ionic/components/app/test/native/pages/device-motion.ts Normal file
View File

@ -0,0 +1,18 @@
import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Device Motion</ion-title>
</ion-navbar>
<ion-content class="padding">
</ion-content>
`
})
export class DeviceMotionPage {
}

26
ionic/components/app/test/native/pages/device.ts Normal file
View File

@ -0,0 +1,26 @@
import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Device</h2>
<button primary outline (click)="doDevice()">Get Device</button>
<div>
</div>
</ion-content>
`
})
export class DevicePage {
doDevice() {
let device = Device.getDevice();
console.log('Got device', device);
}
}

52
ionic/components/app/test/native/pages/geolocation.ts Normal file
View File

@ -0,0 +1,52 @@
import {IonicView} from 'ionic/ionic';
import {Geolocation} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Geolocation</h2>
<button primary outline (click)="doGetLocation()">Get Location</button>
<div>
<b *ng-if="gettingLocation">Fetching location...</b>
<b *ng-if="location">{{location.coords.latitude}}, {{location.coords.longitude}}</b>
</div>
<button primary outline (click)="doTrackLocation()">Track Location</button>
<div>
<b *ng-if="gettingTrackLocation">Fetching location...</b>
<b *ng-if="trackLocation">{{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}}</b>
</div>
</ion-content>
`
})
export class GeolocationPage {
doGetLocation() {
console.log('Getting location');
this.gettingLocation = true;
Geolocation.getCurrentPosition().then((pos) => {
this.gettingLocation = false;
console.log('Got location', pos);
this.location = pos;
}, (err) => {
this.gettingLocation = false;
console.error('Unable to get location', err);
});
}
doTrackLocation() {
this.gettingTrackLocation = true;
Geolocation.watchPosition().source.subscribe((pos) => {
this.gettingTrackLocation = false;
console.log('Got location', pos);
this.trackLocation = pos;
}, (err) => {
this.gettingTrackLocation = false;
console.error('Unable to get location', pos);
});
}
}

23
ionic/components/app/test/native/pages/vibration.ts Normal file
View File

@ -0,0 +1,23 @@
import {IonicView} from 'ionic/ionic';
import {Vibration} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Vibration</h2>
<button primary outline (click)="doVibrate()">Vibrate</button>
</ion-content>
`
})
export class VibrationPage {
doVibrate() {
Vibration.vibrate(1000);
}
}

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

@ -13,12 +13,12 @@ import {IonicComponent, IonicView} from '../../config/annotations';
/** /**
* @name ionCheckbox * @name ionCheckbox
* @classdesc * @description
* The checkbox is no different than the HTML checkbox input, except it's styled differently * The checkbox is no different than the HTML checkbox input, except it's styled differently
* *
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
* *
* @example * @usage
* ```html * ```html
* <ion-checkbox checked="true" value="isChecked" ng-control="htmlCtrl"> * <ion-checkbox checked="true" value="isChecked" ng-control="htmlCtrl">
* HTML5 * HTML5

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

@ -8,8 +8,19 @@ import {hasFocusedTextInput} from '../../util/dom';
/** /**
* @name ionContent * @name ionContent
* @classdesc * @description
* TODO * The ionContent component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
*
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
*
* You can implement pull-to-refresh with the ionRefresher component.
*
* @usage
* ```html
* <ion-content>
* Add your content here!
* </ion-content>
* ```
* *
*/ */
@Component({ @Component({
@ -23,9 +34,8 @@ import {hasFocusedTextInput} from '../../util/dom';
}) })
export class Content extends Ion { export class Content extends Ion {
/** /**
* TODO * @param {ElementRef} elementRef A reference to the component's DOM element.
* @param {ElementRef} elementRef TODO * @param {IonicConfig} config The config object to change content's default settings.
* @param {IonicConfig} config TODO
*/ */
constructor(elementRef: ElementRef, config: IonicConfig) { constructor(elementRef: ElementRef, config: IonicConfig) {
super(elementRef, config); super(elementRef, config);
@ -34,6 +44,7 @@ export class Content extends Ion {
/** /**
* TODO * TODO
* @private
*/ */
onInit() { onInit() {
super.onInit(); super.onInit();
@ -78,8 +89,8 @@ export class Content extends Ion {
/** /**
* Scroll to the specified position. * Scroll to the specified position.
* @param {TODO} x TODO * @param {TODO} x The x-value to scroll to.
* @param {TODO} y TODO * @param {TODO} y The y-value to scroll to.
* @param {Number} duration Duration of the scroll animation. * @param {Number} duration Duration of the scroll animation.
* @param {TODO} tolerance TODO * @param {TODO} tolerance TODO
* @returns {TODO} TODO * @returns {TODO} TODO

25
ionic/components/form/input.ts
View File

@ -11,11 +11,22 @@ let activeInput = null;
let lastInput = null; let lastInput = null;
/** /**
* TODO * @name ionInput
* @description
* The ionInput component is used to focus text input elements.
*
* The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices.
*
* @usage
* ```html
* <ion-input>
* <ion-label>Name</ion-label>
* <input value="Name" type="text">
* </ion-input>
* ```
*/ */
export class IonInput extends Ion { export class IonInput extends Ion {
/** /**
* TODO
* @param {TODO} input TODO * @param {TODO} input TODO
*/ */
static registerInput(input) { static registerInput(input) {
@ -31,22 +42,21 @@ export class IonInput extends Ion {
} }
/** /**
* TODO * Focuses the previous input element, if it exists.
*/ */
static focusPrevious() { static focusPrevious() {
this.focusMove(-1); this.focusMove(-1);
} }
/** /**
* TODO * Focuses the next input element, if it exists.
*/ */
static focusNext() { static focusNext() {
this.focusMove(1); this.focusMove(1);
} }
/** /**
* TODO * @param {Number} inc TODO
* @param {TODO} inc TODO
*/ */
static focusMove(inc) { static focusMove(inc) {
let input = activeInput || lastInput; let input = activeInput || lastInput;
@ -61,8 +71,7 @@ export class IonInput extends Ion {
} }
/** /**
* TODO * @returns {Number} The ID of the next input element.
* @returns {TODO} TODO
*/ */
static nextId() { static nextId() {
return ++inputItemIds; return ++inputItemIds;

4
ionic/components/item/item-swipe-buttons.ts
View File

@ -5,10 +5,10 @@ import {SlideGesture} from 'ionic/gestures/slide-gesture';
/** /**
* @name ionPrimarySwipeButtons * @name ionPrimarySwipeButtons
* @classdesc * @description
* Creates a swipeable button inside a list item, that is visible when the item is swiped to the left by the user. Swiped open buttons can be hidden with `setOpen(false)`. * Creates a swipeable button inside a list item, that is visible when the item is swiped to the left by the user. Swiped open buttons can be hidden with `setOpen(false)`.
* *
* @example * @usage
* TODO * TODO
*/ */
@Directive({ @Directive({

4
ionic/components/item/item.ts
View File

@ -6,11 +6,11 @@ import {dom} from 'ionic/util';
/** /**
* @name ionItem * @name ionItem
* @classdesc * @description
* Creates a list-item that can easily be swiped, * Creates a list-item that can easily be swiped,
* deleted, reordered, edited, and more. * deleted, reordered, edited, and more.
* *
* @example * @usage
* ```html * ```html
* <ion-list> * <ion-list>
* <ion-item *ng-for="#item of items" (^click)="itemTapped($event, item)"> * <ion-item *ng-for="#item of items" (^click)="itemTapped($event, item)">

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

@ -8,7 +8,7 @@ import * as util from 'ionic/util';
/** /**
* @name ionList * @name ionList
* @classdesc * @description
* The List is a widely used interface element in almost any mobile app, and can include * The List is a widely used interface element in almost any mobile app, and can include
* content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. * content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
* *

4
ionic/components/modal/modal.ts
View File

@ -6,10 +6,10 @@ import * as util from 'ionic/util';
/** /**
* @name ionModal * @name ionModal
* @classdesc * @description
* The Modal is a content pane that can go over the user's main view temporarily. Usually used for making a choice or editing an item. * The Modal is a content pane that can go over the user's main view temporarily. Usually used for making a choice or editing an item.
* *
* @example * @usage
* ```ts * ```ts
* class MyApp { * class MyApp {
* *

4
ionic/components/popup/popup.ts
View File

@ -8,12 +8,12 @@ import * as util from 'ionic/util';
/** /**
* @name ionPopup * @name ionPopup
* @classdesc * @description
* The Ionic Popup service allows programmatically creating and showing popup windows that require the user to respond in order to continue. * The Ionic Popup service allows programmatically creating and showing popup windows that require the user to respond in order to continue.
* *
* The popup system has support for more flexible versions of the built in `alert()`, `prompt()`, and `confirm()` functions that users are used to, in addition to allowing popups with completely custom content and look. * The popup system has support for more flexible versions of the built in `alert()`, `prompt()`, and `confirm()` functions that users are used to, in addition to allowing popups with completely custom content and look.
* *
* @example * @usage
* ```ts * ```ts
* class myApp { * class myApp {
* *

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

@ -8,7 +8,7 @@ import {ListHeader} from '../list/list';
/** /**
* @name ionRadioGroup * @name ionRadioGroup
* @classdesc * @description
* A radio group is a group of radio components. * A radio group is a group of radio components.
* *
* Selecting a radio button in the group unselects all others in the group. * Selecting a radio button in the group unselects all others in the group.
@ -17,7 +17,7 @@ import {ListHeader} from '../list/list';
* *
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
* *
* @example * @usage
* ```html * ```html
* <ion-radio-group ng-control="clientside"> * <ion-radio-group ng-control="clientside">
* *
@ -151,12 +151,12 @@ export class RadioGroup extends Ion {
/** /**
* @name ionRadio * @name ionRadio
* @classdesc * @description
* A single radio component. * A single radio component.
* *
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
* *
* @example * @usage
* ```html * ```html
* <ion-radio value="isChecked" checked="true"> * <ion-radio value="isChecked" checked="true">
* Radio Label * Radio Label

246
ionic/components/radio/radio.ts.orig Normal file
View File

@ -0,0 +1,246 @@
import {ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations';
import {IonicConfig} from '../../config/config';
import {Ion} from '../ion';
import {ListHeader} from '../list/list';
/**
* @name ionRadioGroup
* @description
* A radio group is a group of radio components.
*
* Selecting a radio button in the group unselects all others in the group.
*
* New radios can be registered dynamically.
*
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
<<<<<<< HEAD
*
* @example
=======
*
* @usage
>>>>>>> origin/master
* ```html
* <ion-radio-group ng-control="clientside">
*
* <ion-header>
* Clientside
* </ion-header>
*
* <ion-radio value="ember">
* Ember
* </ion-radio>
*
* <ion-radio value="angular1">
* Angular 1
* </ion-radio>
*
* <ion-radio value="angular2" checked="true">
* Angular 2
* </ion-radio>
*
* <ion-radio value="react">
* React
* </ion-radio>
*
* </ion-radio-group>
* ```
*/
@IonicDirective({
selector: 'ion-radio-group',
host: {
'class': 'list',
'role': 'radiogroup',
'[attr.aria-activedescendant]': 'activeId',
'[attr.aria-describedby]': 'describedById'
}
})
export class RadioGroup extends Ion {
radios: Array<RadioButton> = [];
/**
* TODO
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
* @param {NgControl=} ngControl TODO
* @param {QueryList<ListHeader>} headerQuery TODO
*/
constructor(
elementRef: ElementRef,
config: IonicConfig,
@Optional() ngControl: NgControl,
@Query(ListHeader) private headerQuery: QueryList<ListHeader>
) {
super(elementRef, config);
this.id = ++radioGroupIds;
this.radioIds = -1;
this.onChange = (_) => {};
this.onTouched = (_) => {};
if (ngControl) ngControl.valueAccessor = this;
}
onInit() {
let header = this.headerQuery.first;
if (header) {
if (!header.id) {
header.id = 'radio-header-' + this.id;
}
this.describedById = header.id;
}
}
/**
* Register the specified radio button with the radio group.
* @param {RadioButton} radio The radio button to register.
*/
registerRadio(radio) {
radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
this.radios.push(radio);
if (radio.checked) {
this.value = radio.value;
this.activeId = radio.id;
}
}
/**
* Update which radio button in the group is checked, unchecking all others.
* @param {RadioButton} checkedRadio The radio button to check.
*/
update(checkedRadio) {
this.value = checkedRadio.value;
this.activeId = checkedRadio.id;
for (let radio of this.radios) {
radio.checked = (radio === checkedRadio);
}
this.onChange(this.value);
}
/**
* @private
* Angular2 Forms API method called by the model (Control) on change to update
* the checked value.
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
*/
writeValue(value) {
this.value = value;
for (let radio of this.radios) {
radio.checked = (radio.value == value);
}
}
/**
* @private
* Angular2 Forms API method called by the view (NgControl) to register the
* onChange event handler that updates the model (Control).
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
* @param {Function} fn the onChange event handler.
*/
registerOnChange(fn) { this.onChange = fn; }
/**
* @private
* Angular2 Forms API method called by the the view (NgControl) to register
* the onTouched event handler that marks the model (Control) as touched.
* @param {Function} fn onTouched event handler.
*/
registerOnTouched(fn) { this.onTouched = fn; }
}
/**
* @name ionRadio
<<<<<<< HEAD
* @classdesc
* A single radio component.
=======
* @description
* A single radio component.
>>>>>>> origin/master
*
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
*
* @usage
* ```html
* <ion-radio value="isChecked" checked="true">
* Radio Label
* </ion-radio>
* ```
*
*/
@IonicComponent({
selector: 'ion-radio',
properties: [
'value',
'checked',
'disabled',
'id'
],
host: {
'class': 'item',
'role': 'radio',
'tappable': 'true',
'[attr.id]': 'id',
'[attr.tab-index]': 'tabIndex',
'[attr.aria-checked]': 'checked',
'[attr.aria-disabled]': 'disabled',
'[attr.aria-labelledby]': 'labelId',
'(^click)': 'click($event)'
}
})
@IonicView({
template:
'<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' +
'</ion-item-content>' +
'<div item-right class="item-media media-radio">' +
'<div class="radio-icon"></div>' +
'</div>'
})
export class RadioButton extends Ion {
/**
* Radio button constructor.
* @param {RadioGroup=} group The parent radio group, if any.
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
*/
constructor(
@Host() @Optional() group: RadioGroup,
elementRef: ElementRef,
config: IonicConfig
) {
super(elementRef, config)
this.group = group;
this.tabIndex = 0;
}
onInit() {
super.onInit();
this.group.registerRadio(this);
this.labelId = 'label-' + this.id;
}
click(ev) {
ev.preventDefault();
ev.stopPropagation();
this.check();
}
/**
* Update the checked state of this radio button.
* TODO: Call this toggle? Since unchecks as well
*/
check() {
this.checked = !this.checked;
this.group.update(this);
}
}
let radioGroupIds = -1;

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

@ -7,20 +7,18 @@ import {raf, ready, CSS} from 'ionic/util/dom';
/** /**
* @name ionRefresher * @name ionRefresher
* @classdesc * @description
* Allows you to add pull-to-refresh to an ionContent component. * Allows you to add pull-to-refresh to an ionContent component.
* *
* Place it as the first child of your ionContent or ionScroll element. * Place it as the first child of your ionContent or ionScroll element.
* *
* When refreshing is complete, call `refresher.complete()` from your controller. * When refreshing is complete, call `refresher.complete()` from your controller.
* *
* @example * @usage
* ```html
* <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
* ```
*
* @example
* ```ts * ```ts
* <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
*
*
* doRefresh(refresher) { * doRefresh(refresher) {
* console.log('Refreshing!', refresher); * console.log('Refreshing!', refresher);
* *

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

@ -49,23 +49,21 @@ class MediaSwitch {
/** /**
* @name ionSwitch * @name ionSwitch
* @classdesc * @description
* A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag. * A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag.
* *
* Toggles can also have colors assigned to them, by adding the `toggle-assertive` attribute to assign the assertive color. * Toggles can also have colors assigned to them, by adding the `toggle-assertive` attribute to assign the assertive color.
* *
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
* *
* @example * @usage
* ```html * ```html
* // Create a single switch
* <ion-switch checked="true"> * <ion-switch checked="true">
* Pineapple * Pineapple
* </ion-switch> * </ion-switch>
* ````
* *
* @example * // Create a list of switches:
* Create a list of switch components:
* ```html
* <ion-list> * <ion-list>
* *
* <ion-switch checked="true"> * <ion-switch checked="true">

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

@ -8,10 +8,10 @@ import {Tabs} from './tabs';
/** /**
* @name ionTab * @name ionTab
* @requires ionTabs * @requires ionTabs
* @classdesc * @description
* Contains a tab's content. The content only exists while the given tab is selected. * Contains a tab's content. The content only exists while the given tab is selected.
* *
* @example * @usage
* ```html * ```html
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab> * <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* ``` * ```

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

@ -7,7 +7,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
/** /**
* @name ionTabs * @name ionTabs
* @classdesc * @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through. * Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through.
* *
* Assign any tabs attribute to the element to define its look and feel. * Assign any tabs attribute to the element to define its look and feel.
@ -16,7 +16,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
* *
* See the ionTab component's documentation for more details on individual tabs. * See the ionTab component's documentation for more details on individual tabs.
* *
* @example * @usage
* ```html * ```html
* <ion-tabs> * <ion-tabs>
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab> * <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>

8
ionic/native/battery/battery.ts
View File

@ -20,9 +20,11 @@ export class Battery {
} else { } else {
window.addEventListener('batterystatus', (battery) => { var fnCb = function fnCb(battery) {
resolve(Battery._format(battery)); resolve(battery);
}); window.removeEventListener('batterystatus', fnCb);
}
window.addEventListener('batterystatus', fnCb);
} }
}); });
} }

79
ionic/native/device-motion/device-motion.ts Normal file
View File

@ -0,0 +1,79 @@
import * as Rx from 'rx';
import * as util from 'ionic/util';
import {NativePlugin} from '../plugin';
import {Platform} from '../../platform/platform';
@NativePlugin({
name: 'Device Motion',
platforms: {
cordova: 'cordova-plugin-device-motion'
}
})
export class DeviceMotion {
getCurrentAcceleration() {
return new Promise((resolve, reject) => {
if(navigator.accelerometer) {
navigator.accelerometer.getCurrentAcceleration(function (result) {
resolve(result);
}, function (err) {
reject(err);
});
} else if(window.DeviceMotionEvent || ('listenForDeviceMovement' in window)) {
var fnCb = function fnCb(eventData) {
resolve(eventData);
window.removeEventListener('devicemotion', fnCb);
}
window.addEventListener('devicemotion', fnCb);
} else {
this.pluginWarn();
reject('The Device does not support device motion events.');
return;
}
});
}
watchAcceleration(options) {
if(navigator.accelerometer) {
let watchID;
let source = Rx.Observable.create((observer) => {
watchID = navigator.accelerometer.watchAcceleration(function (result) {
observer.onNext(result);
}, function (err) {
observer.onError(err, observer);
}, options);
});
return {
source: source,
watchID: watchID,
clear: () => {
navigator.accelerometer.clearWatch(watchID);
}
}
} else {
let watchID;
let source = Rx.Observable.create((observer) => {
var fnCb = function fnCb(eventData) {
observer.onNext(eventData);
};
window.addEventListener('devicemotion', cbFn);
});
return {
source: source,
watchID: watchID,
clear: () => {
window.removeEventListener('devicemotion', cbFn);
}
}
}
}
}

117
ionic/native/device/device.ts Normal file
View File

@ -0,0 +1,117 @@
import * as Rx from 'rx';
import * as util from 'ionic/util';
import {NativePlugin} from '../plugin';
import {Platform} from '../../platform/platform';
@NativePlugin({
name: 'Device',
platforms: {
cordova: 'cordova-plugin-device'
}
})
export class Device {
/**
* Returns the whole device object.
* @see https://github.com/apache/cordova-plugin-device
* @returns {Object} The device object.
*/
static getDevice() {
return this.ifPlugin(window.device, () => {
return device;
}, () => {
return {
name: Platform.platforms().join(',')
}
});
}
/**
* Returns the Cordova version.
* @see https://github.com/apache/cordova-plugin-device#devicecordova
* @returns {String} The Cordova version.
*/
static getCordova() {
this.ifPlugin(window.device, () => {
return device.cordova;
});
}
/**
* Returns the name of the device's model or product.
* @see https://github.com/apache/cordova-plugin-device#devicemodel
* @returns {String} The name of the device's model or product.
*/
static getModel() {
this.ifPlugin(window.device, () => {
return device.model;
}, () => {
return 'unknown'
});
}
/**
* @deprecated device.name is deprecated as of version 2.3.0. Use device.model instead.
* @returns {String}
*/
static getName() {
this.ifPlugin(window.device, () => {
return device.name;
}, () => {
return 'unknown'
});
}
/**
* Returns the device's operating system name.
* @see https://github.com/apache/cordova-plugin-device#deviceplatform
* @returns {String} The device's operating system name.
*/
static getPlatform() {
this.ifPlugin(window.device, () => {
return device.name;
}, () => {
return {
name: Platform.name()
}
});
}
/**
* Returns the device's Universally Unique Identifier.
* @see https://github.com/apache/cordova-plugin-device#deviceuuid
* @returns {String} The device's Universally Unique Identifier
*/
static getUUID() {
this.ifPlugin(window.device, () => {
return device.uuid;
}, () => {
return 'unknown';
});
}
/**
* Returns the operating system version.
* @see https://github.com/apache/cordova-plugin-device#deviceversion
* @returns {String}
*/
static getVersion() {
this.ifPlugin(window.device, () => {
return device.version;
}, () => {
return 'unknown';
});
}
/**
* Returns the device manufacturer.
* @returns {String}
*/
static getManufacturer() {
this.ifPlugin(window.device, () => {
return device.manufacturer;
}, () => {
return 'unknown';
});
}
}

17
ionic/native/plugin.ts
View File

@ -3,13 +3,28 @@ export class NativePluginDecorator {
this.cls = cls; this.cls = cls;
this.config = config; this.config = config;
cls.ifPlugin = (check, cb, returnType=null) => {
// Convert to boolean the plugin param
var exists = !!check;
if(typeof check === 'function') {
exists = check();
}
if(exists) {
return cb();
}
cls.pluginWarn();
return (typeof returnType === 'function') ? returnType() : returnType;
};
cls.pluginWarn = () => { cls.pluginWarn = () => {
let platformString = []; let platformString = [];
for(var k in this.config.platforms) { for(var k in this.config.platforms) {
platformString.push('\t' + k + ': '+ this.config.platforms[k]); platformString.push('\t' + k + ': '+ this.config.platforms[k]);
} }
console.warn('Plugin for ' + this.config.name + console.warn('Plugin for ' + this.config.name +
' not installed. For native functionality, please instead the correct plugin for your platform:\n' + ' not installed. For native functionality, please install the correct plugin for your platform:\n' +
platformString.join('\n')); platformString.join('\n'));
} }
} }

2
ionic/native/plugins.ts
View File

@ -2,5 +2,7 @@ export * from './plugin'
export * from './battery/battery' export * from './battery/battery'
export * from './camera/camera' export * from './camera/camera'
export * from './contacts/contacts' export * from './contacts/contacts'
export * from './device/device'
export * from './device-motion/device-motion'
export * from './geolocation/geolocation' export * from './geolocation/geolocation'
export * from './vibration/vibration' export * from './vibration/vibration'