mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix merge conflicts
This commit is contained in:
@ -18,7 +18,9 @@ function getBabelOptions(moduleName, moduleType) {
|
||||
modules: moduleType || "system",
|
||||
moduleIds: true,
|
||||
getModuleId: function(name) {
|
||||
if (moduleName === "index") return moduleName;
|
||||
if (moduleName == "e2e"){
|
||||
return name.replace(/\S*\/test\/[^\/]*\//, '');
|
||||
}
|
||||
|
||||
return moduleName + '/' + name.split('/test').join('');
|
||||
}
|
||||
@ -204,7 +206,7 @@ gulp.task('e2e', function() {
|
||||
var buildTest = lazypipe()
|
||||
//.pipe(traceur, traceurOptions)
|
||||
.pipe(tsc, tscOptions, null, tscReporter)
|
||||
.pipe(babel, getBabelOptions('index'))
|
||||
.pipe(babel, getBabelOptions('e2e'))
|
||||
|
||||
var buildE2ETest = lazypipe()
|
||||
//.pipe(traceur, traceurOptions)
|
||||
|
@ -16,12 +16,12 @@ import * as util from 'ionic/util';
|
||||
|
||||
/**
|
||||
* @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.
|
||||
*
|
||||
* 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
|
||||
* openMenu() {
|
||||
*
|
||||
|
@ -13,7 +13,24 @@ import {Popup} from '../popup/popup';
|
||||
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 {
|
||||
|
||||
|
@ -3,56 +3,31 @@ import {Control, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {App, Http} from 'ionic/ionic';
|
||||
|
||||
import {Camera, Geolocation, Vibration, Battery} from 'ionic/ionic';
|
||||
|
||||
let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
|
||||
let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
|
||||
import {Camera, Geolocation, Vibration, Battery, Device} from 'ionic/ionic';
|
||||
|
||||
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({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
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;
|
||||
});
|
||||
this.firstPage = CameraPage;
|
||||
console.log('First page', CameraPage);
|
||||
this.plugins = [
|
||||
{title: 'Camera', page: CameraPage},
|
||||
{title: 'Device', page: DevicePage},
|
||||
{title: 'Device Motion', page: DeviceMotionPage},
|
||||
{title: 'Geolocation', page: GeolocationPage},
|
||||
{title: 'Contacts', page: ContactsPage},
|
||||
{title: 'Battery', page: BatteryPage},
|
||||
{title: 'Vibration', page: VibrationPage},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -1,32 +1,12 @@
|
||||
<ion-view>
|
||||
<ion-content padding>
|
||||
<h2>Camera</h2>
|
||||
<button primary outline (click)="getPicture()">Get Picture</button>
|
||||
<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>
|
||||
<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-aside #aside [content]="content" id="mainMenu">
|
||||
<ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item *ng-for="#p of plugins" (^click)="openPage(aside, p)">
|
||||
<span>{{p.title}}</span>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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
31
ionic/components/app/test/native/pages/battery.ts
Normal 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
32
ionic/components/app/test/native/pages/camera.ts
Normal 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
22
ionic/components/app/test/native/pages/contacts.ts
Normal 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
18
ionic/components/app/test/native/pages/device-motion.ts
Normal 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
26
ionic/components/app/test/native/pages/device.ts
Normal 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
52
ionic/components/app/test/native/pages/geolocation.ts
Normal 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
23
ionic/components/app/test/native/pages/vibration.ts
Normal 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);
|
||||
}
|
||||
}
|
@ -13,12 +13,12 @@ import {IonicComponent, IonicView} from '../../config/annotations';
|
||||
|
||||
/**
|
||||
* @name ionCheckbox
|
||||
* @classdesc
|
||||
* @description
|
||||
* 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.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-checkbox checked="true" value="isChecked" ng-control="htmlCtrl">
|
||||
* HTML5
|
||||
|
@ -8,8 +8,19 @@ import {hasFocusedTextInput} from '../../util/dom';
|
||||
|
||||
/**
|
||||
* @name ionContent
|
||||
* @classdesc
|
||||
* TODO
|
||||
* @description
|
||||
* 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({
|
||||
@ -23,9 +34,8 @@ import {hasFocusedTextInput} from '../../util/dom';
|
||||
})
|
||||
export class Content extends Ion {
|
||||
/**
|
||||
* TODO
|
||||
* @param {ElementRef} elementRef TODO
|
||||
* @param {IonicConfig} config TODO
|
||||
* @param {ElementRef} elementRef A reference to the component's DOM element.
|
||||
* @param {IonicConfig} config The config object to change content's default settings.
|
||||
*/
|
||||
constructor(elementRef: ElementRef, config: IonicConfig) {
|
||||
super(elementRef, config);
|
||||
@ -34,6 +44,7 @@ export class Content extends Ion {
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
@ -78,8 +89,8 @@ export class Content extends Ion {
|
||||
|
||||
/**
|
||||
* Scroll to the specified position.
|
||||
* @param {TODO} x TODO
|
||||
* @param {TODO} y TODO
|
||||
* @param {TODO} x The x-value to scroll to.
|
||||
* @param {TODO} y The y-value to scroll to.
|
||||
* @param {Number} duration Duration of the scroll animation.
|
||||
* @param {TODO} tolerance TODO
|
||||
* @returns {TODO} TODO
|
||||
|
@ -11,11 +11,22 @@ let activeInput = 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 {
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} input TODO
|
||||
*/
|
||||
static registerInput(input) {
|
||||
@ -31,22 +42,21 @@ export class IonInput extends Ion {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* Focuses the previous input element, if it exists.
|
||||
*/
|
||||
static focusPrevious() {
|
||||
this.focusMove(-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* Focuses the next input element, if it exists.
|
||||
*/
|
||||
static focusNext() {
|
||||
this.focusMove(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} inc TODO
|
||||
* @param {Number} inc TODO
|
||||
*/
|
||||
static focusMove(inc) {
|
||||
let input = activeInput || lastInput;
|
||||
@ -61,8 +71,7 @@ export class IonInput extends Ion {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
* @returns {Number} The ID of the next input element.
|
||||
*/
|
||||
static nextId() {
|
||||
return ++inputItemIds;
|
||||
|
@ -5,10 +5,10 @@ import {SlideGesture} from 'ionic/gestures/slide-gesture';
|
||||
|
||||
/**
|
||||
* @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)`.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* TODO
|
||||
*/
|
||||
@Directive({
|
||||
|
@ -6,11 +6,11 @@ import {dom} from 'ionic/util';
|
||||
|
||||
/**
|
||||
* @name ionItem
|
||||
* @classdesc
|
||||
* @description
|
||||
* Creates a list-item that can easily be swiped,
|
||||
* deleted, reordered, edited, and more.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list>
|
||||
* <ion-item *ng-for="#item of items" (^click)="itemTapped($event, item)">
|
||||
|
@ -8,7 +8,7 @@ import * as util from 'ionic/util';
|
||||
|
||||
/**
|
||||
* @name ionList
|
||||
* @classdesc
|
||||
* @description
|
||||
* 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.
|
||||
*
|
||||
|
@ -6,10 +6,10 @@ import * as util from 'ionic/util';
|
||||
|
||||
/**
|
||||
* @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.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```ts
|
||||
* class MyApp {
|
||||
*
|
||||
|
@ -8,12 +8,12 @@ import * as util from 'ionic/util';
|
||||
|
||||
/**
|
||||
* @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 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
|
||||
* class myApp {
|
||||
*
|
||||
|
@ -8,7 +8,7 @@ import {ListHeader} from '../list/list';
|
||||
|
||||
/**
|
||||
* @name ionRadioGroup
|
||||
* @classdesc
|
||||
* @description
|
||||
* A radio group is a group of radio components.
|
||||
*
|
||||
* Selecting a radio button in the group unselects all others in the group.
|
||||
@ -16,8 +16,8 @@ import {ListHeader} from '../list/list';
|
||||
* 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.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-radio-group ng-control="clientside">
|
||||
*
|
||||
@ -151,12 +151,12 @@ export class RadioGroup extends Ion {
|
||||
|
||||
/**
|
||||
* @name ionRadio
|
||||
* @classdesc
|
||||
* A single radio component.
|
||||
* @description
|
||||
* A single radio component.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-radio value="isChecked" checked="true">
|
||||
* Radio Label
|
||||
|
246
ionic/components/radio/radio.ts.orig
Normal file
246
ionic/components/radio/radio.ts.orig
Normal 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;
|
@ -7,20 +7,18 @@ import {raf, ready, CSS} from 'ionic/util/dom';
|
||||
|
||||
/**
|
||||
* @name ionRefresher
|
||||
* @classdesc
|
||||
* @description
|
||||
* Allows you to add pull-to-refresh to an ionContent component.
|
||||
*
|
||||
* Place it as the first child of your ionContent or ionScroll element.
|
||||
*
|
||||
* When refreshing is complete, call `refresher.complete()` from your controller.
|
||||
*
|
||||
* @example
|
||||
* ```html
|
||||
* <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```ts
|
||||
* <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
|
||||
*
|
||||
*
|
||||
* doRefresh(refresher) {
|
||||
* console.log('Refreshing!', refresher);
|
||||
*
|
||||
|
@ -49,23 +49,21 @@ class MediaSwitch {
|
||||
|
||||
/**
|
||||
* @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.
|
||||
*
|
||||
* 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.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* // Create a single switch
|
||||
* <ion-switch checked="true">
|
||||
* Pineapple
|
||||
* </ion-switch>
|
||||
* ````
|
||||
*
|
||||
* @example
|
||||
* Create a list of switch components:
|
||||
* ```html
|
||||
* // Create a list of switches:
|
||||
* <ion-list>
|
||||
*
|
||||
* <ion-switch checked="true">
|
||||
|
@ -8,10 +8,10 @@ import {Tabs} from './tabs';
|
||||
/**
|
||||
* @name ionTab
|
||||
* @requires ionTabs
|
||||
* @classdesc
|
||||
* @description
|
||||
* Contains a tab's content. The content only exists while the given tab is selected.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
|
||||
* ```
|
||||
|
@ -7,7 +7,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
|
||||
|
||||
/**
|
||||
* @name ionTabs
|
||||
* @classdesc
|
||||
* @description
|
||||
* 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.
|
||||
@ -16,7 +16,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
|
||||
*
|
||||
* See the ionTab component's documentation for more details on individual tabs.
|
||||
*
|
||||
* @example
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
|
||||
|
@ -20,9 +20,11 @@ export class Battery {
|
||||
|
||||
} else {
|
||||
|
||||
window.addEventListener('batterystatus', (battery) => {
|
||||
resolve(Battery._format(battery));
|
||||
});
|
||||
var fnCb = function fnCb(battery) {
|
||||
resolve(battery);
|
||||
window.removeEventListener('batterystatus', fnCb);
|
||||
}
|
||||
window.addEventListener('batterystatus', fnCb);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
79
ionic/native/device-motion/device-motion.ts
Normal file
79
ionic/native/device-motion/device-motion.ts
Normal 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
117
ionic/native/device/device.ts
Normal 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';
|
||||
});
|
||||
}
|
||||
}
|
@ -3,13 +3,28 @@ export class NativePluginDecorator {
|
||||
this.cls = cls;
|
||||
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 = () => {
|
||||
let platformString = [];
|
||||
for(var k in this.config.platforms) {
|
||||
platformString.push('\t' + k + ': '+ this.config.platforms[k]);
|
||||
}
|
||||
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'));
|
||||
}
|
||||
}
|
||||
|
@ -2,5 +2,7 @@ export * from './plugin'
|
||||
export * from './battery/battery'
|
||||
export * from './camera/camera'
|
||||
export * from './contacts/contacts'
|
||||
export * from './device/device'
|
||||
export * from './device-motion/device-motion'
|
||||
export * from './geolocation/geolocation'
|
||||
export * from './vibration/vibration'
|
||||
|
Reference in New Issue
Block a user