diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 29ecf0e560..9d9dc89485 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -34,7 +34,7 @@ export class TapDisabled {} @Directive({ - selector: 'button,[button],[tappable],ion-checkbox', + selector: 'button,[button],[tappable],ion-checkbox,ion-radio', host: { '(^touchstart)': 'touchStart($event)', '(^touchend)': 'touchEnd($event)', diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index c3a21e1dbd..e70a5ed867 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -18,7 +18,8 @@ import {TapClick} from '../button/button'; properties: [ 'value', 'checked', - 'disabled' + 'disabled', + 'id' ], host: { 'class': 'item', @@ -28,8 +29,7 @@ import {TapClick} from '../button/button'; '[attr.aria-disabled]': 'disabled', '[attr.aria-labelledby]': 'labelId', '(^click)': 'click($event)' - }, - exportAs: 'checkbox' + } }) @IonicView({ template: @@ -42,9 +42,9 @@ import {TapClick} from '../button/button'; }) export class Checkbox extends IonInputItem { constructor( - @Optional() cd: NgControl, elementRef: ElementRef, config: IonicConfig, + @Optional() cd: NgControl, tapClick: TapClick ) { super(elementRef, config); @@ -77,8 +77,8 @@ export class Checkbox extends IonInputItem { } } - writeValue(modelValue) { - this.checked = modelValue; + writeValue(value) { + this.checked = value; } // Used by the view to update the model (Control) diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 8fb64af362..940f06860d 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -1,63 +1,62 @@ -import {ElementRef, Ancestor, NgControl, Renderer} from 'angular2/angular2'; +import {ElementRef, Ancestor, Optional, NgControl} from 'angular2/angular2'; import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'; import {IonicConfig} from '../../config/config'; import {Ion} from '../ion'; import {IonInputItem} from '../form/form'; +import {TapClick} from '../button/button'; -let groupName = -1; @IonicDirective({ selector: 'ion-radio-group', host: { - 'class': 'list' + 'class': 'list', + 'role': 'radiogroup', + '[attr.aria-activedescendant]': 'activeId' } }) export class RadioGroup extends Ion { - - _name: number = ++groupName; - buttons: Array = []; + radios: Array = []; constructor( - cd: NgControl, - renderer: Renderer, elementRef: ElementRef, - ionicConfig: IonicConfig + config: IonicConfig, + @Optional() cd: NgControl ) { - super(elementRef, ionicConfig); + super(elementRef, config); + this.id = ++radioGroupIds; + this.radioIds = -1; this.onChange = (_) => {}; this.onTouched = (_) => {}; - this.renderer = renderer; - this.elementRef = elementRef; - cd.valueAccessor = this; - - this.value = ""; + if (cd) cd.valueAccessor = this; } - registerButton(radioButton) { - this.buttons.push(radioButton); - let inputEl = radioButton.input.elementRef.nativeElement; - if (!inputEl.hasAttribute('name')) { - radioButton.input.name = this._name; + 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; } } - //from clicking the label or switching inputs with keyboard - //view -> model (Control) - update(input) { - for (let button of this.buttons) { - button.input.checked = false; + update(checkedRadio) { + this.value = checkedRadio.value; + this.activeId = checkedRadio.id; + + for (let radio of this.radios) { + radio.checked = (radio === checkedRadio); } - input.checked = true; - this.onChange(input.value); + + this.onChange(this.value); } - // Called by the model (Control) to update the view writeValue(value) { this.value = value; - for (let button of this.buttons) { - button.input.checked = button.input.value == value; + for (let radio of this.radios) { + radio.checked = (radio.value == value); } } @@ -68,16 +67,28 @@ export class RadioGroup extends Ion { registerOnTouched(fn) { this.onTouched = fn; } } + @IonicComponent({ selector: 'ion-radio', + properties: [ + 'value', + 'checked', + 'disabled', + 'id' + ], host: { 'class': 'item', - '[attr.aria-checked]': 'input.checked', + 'role': 'radio', + '[attr.tab-index]': 'tabIndex', + '[attr.aria-checked]': 'checked', + '[attr.aria-disabled]': 'disabled', + '[attr.aria-labelledby]': 'labelId', + '(^click)': 'click($event)' } }) @IonicView({ template: - '
' + + '
' + '' + '
' + '
' + @@ -86,22 +97,36 @@ export class RadioGroup extends Ion { }) export class RadioButton extends IonInputItem { constructor( - @Ancestor() group: RadioGroup, + @Ancestor() @Optional() group: RadioGroup, elementRef: ElementRef, - config: IonicConfig + config: IonicConfig, + tapClick: TapClick ) { super(elementRef, config); + this.tapClick = tapClick; this.group = group; + this.tabIndex = 0; } - registerInput(input) { - this.input = input; - this.group.registerButton(this); + onInit() { + super.onInit(); + this.group.registerRadio(this); + this.labelId = 'label-' + this.id; } - //from clicking the label or switching inputs with keyboard - //view -> model (Control) - toggle() { - this.group.update(this.input); + click(ev) { + if (this.tapClick.allowClick(ev)) { + ev.preventDefault(); + ev.stopPropagation(); + this.check(); + } } + + check() { + this.checked = !this.checked; + this.group.update(this); + } + } + +let radioGroupIds = -1; diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index d818bc0215..d9e0204b72 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -12,19 +12,16 @@ Fruits
- - - + + Apple - - - + + Banana - - - + + Cherry