popup and radio docs wip

This commit is contained in:
Tim Lancina
2015-08-31 08:58:33 -05:00
parent c0c4782fd2
commit ecfdac9eed
3 changed files with 88 additions and 8 deletions

View File

@ -120,7 +120,7 @@ export class Checkbox extends Ion {
/** /**
* @private * @private
* Angular2 Forms API method called by the the view (NgControl) to register * Angular2 Forms API method called by the the view (NgControl) to register
* the onTouched event handler that marks model as touched. * the onTouched event handler that marks model (Control) as touched.
* @param {Function} fn onTouched event handler. * @param {Function} fn onTouched event handler.
*/ */
registerOnTouched(fn) { this.onTouched = fn; } registerOnTouched(fn) { this.onTouched = fn; }

View File

@ -6,10 +6,19 @@ import {Animation} from '../../animations/animation';
import * as util from 'ionic/util'; import * as util from 'ionic/util';
/**
* TODO
*/
@Injectable() @Injectable()
export class Popup extends Overlay { export class Popup extends Overlay {
popup(context, opts={}) { /**
* TODO
* @param {TODO} context TODO
* @param {TODO} [opts={}] TODO
* @returns {TODO} TODO
*/
popup(context, opts={}) {
return new Promise((resolve, reject)=> { return new Promise((resolve, reject)=> {
let defaults = { let defaults = {
enterAnimation: 'popup-pop-in', enterAnimation: 'popup-pop-in',
@ -23,6 +32,12 @@ export class Popup extends Overlay {
}); });
} }
/**
* TODO
* @param {TODO} context TODO
* @param {TODO} [opts={}] TODO
* @returns {TODO} TODO
*/
alert(context={}, opts={}) { alert(context={}, opts={}) {
if (typeof context === 'string') { if (typeof context === 'string') {
context = { context = {
@ -48,6 +63,12 @@ export class Popup extends Overlay {
return this.popup(context, opts); return this.popup(context, opts);
} }
/**
* TODO
* @param {TODO} context TODO
* @param {TODO} [opts={}] TODO
* @returns {TODO} TODO
*/
confirm(context={}, opts={}) { confirm(context={}, opts={}) {
if (typeof context === 'string') { if (typeof context === 'string') {
context = { context = {
@ -77,6 +98,12 @@ export class Popup extends Overlay {
return this.popup(context, opts); return this.popup(context, opts);
} }
/**
* TODO
* @param {TODO} [context={}] TODO
* @param {TODO} [opts={}] TODO
* @returns {TODO} TODO
*/
prompt(context={}, opts={}) { prompt(context={}, opts={}) {
if (typeof context === 'string') { if (typeof context === 'string') {
context = { context = {
@ -112,6 +139,12 @@ export class Popup extends Overlay {
return this.popup(context, opts); return this.popup(context, opts);
} }
/**
* TODO
* @param {TODO} context TODO
* @param {TODO} [opts={}] TODO
* @returns {TODO} TODO
*/
get(handle) { get(handle) {
if (handle) { if (handle) {
return this.getByHandle(handle, OVERLAY_TYPE); return this.getByHandle(handle, OVERLAY_TYPE);

View File

@ -6,7 +6,9 @@ import {Ion} from '../ion';
import {TapClick} from '../button/button'; import {TapClick} from '../button/button';
import {ListHeader} from '../list/list'; import {ListHeader} from '../list/list';
/**
* A radio group component.
*/
@IonicDirective({ @IonicDirective({
selector: 'ion-radio-group', selector: 'ion-radio-group',
host: { host: {
@ -19,10 +21,17 @@ import {ListHeader} from '../list/list';
export class RadioGroup extends Ion { export class RadioGroup extends Ion {
radios: Array<RadioButton> = []; radios: Array<RadioButton> = [];
/**
* TODO
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
* @param {NgControl=} ngControl TODO
* @param {QueryList<ListHeader>} headerQuery TODO
*/
constructor( constructor(
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig, config: IonicConfig,
@Optional() cd: NgControl, @Optional() ngControl: NgControl,
@Query(ListHeader) private headerQuery: QueryList<ListHeader> @Query(ListHeader) private headerQuery: QueryList<ListHeader>
) { ) {
super(elementRef, config); super(elementRef, config);
@ -31,7 +40,7 @@ export class RadioGroup extends Ion {
this.onChange = (_) => {}; this.onChange = (_) => {};
this.onTouched = (_) => {}; this.onTouched = (_) => {};
if (cd) cd.valueAccessor = this; if (ngControl) ngControl.valueAccessor = this;
} }
onInit() { onInit() {
@ -44,6 +53,10 @@ export class RadioGroup extends Ion {
} }
} }
/**
* Register the specified radio button with the radio group.
* @param {RadioButton} radio The radio button to register.
*/
registerRadio(radio) { registerRadio(radio) {
radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds)); radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
this.radios.push(radio); this.radios.push(radio);
@ -54,6 +67,10 @@ export class RadioGroup extends Ion {
} }
} }
/**
* Update which radio button in the group is checked, unchecking all others.
* @param {RadioButton} checkedRadio The radio button to check.
*/
update(checkedRadio) { update(checkedRadio) {
this.value = checkedRadio.value; this.value = checkedRadio.value;
this.activeId = checkedRadio.id; this.activeId = checkedRadio.id;
@ -65,6 +82,12 @@ export class RadioGroup extends Ion {
this.onChange(this.value); 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) { writeValue(value) {
this.value = value; this.value = value;
for (let radio of this.radios) { for (let radio of this.radios) {
@ -72,14 +95,27 @@ export class RadioGroup extends Ion {
} }
} }
// Used by the view to update the model (Control) /**
// Up to us to call it in update() * @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; } 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; } registerOnTouched(fn) { this.onTouched = fn; }
} }
/**
* A radio button component.
*/
@IonicComponent({ @IonicComponent({
selector: 'ion-radio', selector: 'ion-radio',
properties: [ properties: [
@ -109,6 +145,13 @@ export class RadioGroup extends Ion {
'</div>' '</div>'
}) })
export class RadioButton extends Ion { 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
* @param {TapClick} tapClick TODO
*/
constructor( constructor(
@Host() @Optional() group: RadioGroup, @Host() @Optional() group: RadioGroup,
elementRef: ElementRef, elementRef: ElementRef,
@ -135,6 +178,10 @@ export class RadioButton extends Ion {
} }
} }
/**
* Update the checked state of this radio button.
* TODO: Call this toggle? Since unchecks as well
*/
check() { check() {
this.checked = !this.checked; this.checked = !this.checked;
this.group.update(this); this.group.update(this);