diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss index c41e4d0029..7131649925 100644 --- a/ionic/components/checkbox/checkbox.scss +++ b/ionic/components/checkbox/checkbox.scss @@ -11,10 +11,12 @@ .checkbox-on { display: none; + pointer-events: none; } .checkbox-off { display: block; + pointer-events: none; } .checkbox[aria-checked=true] { diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 64ec7acaa2..8c6eb12ce6 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -1,117 +1,92 @@ -import {View, ElementRef, Renderer, EventEmitter, onChange, onInit} from 'angular2/angular2'; -import {isPresent} from 'angular2/src/facade/lang'; -import {setProperty} from 'angular2/src/forms/directives/shared' - -//pretty sure this has changed in the latest angular -import {NgControl} from 'angular2/forms'; +import { + View, + Directive, + ElementRef, + Optional, + Parent, + NgControl +} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; -import {IonicComponent} from '../../config/annotations'; +import {IonicComponent, IonicView} from '../../config/annotations'; import {Icon} from '../icon/icon'; @IonicComponent({ selector: 'ion-checkbox', - properties: [ - 'checked', - 'disabled', - 'value' - ], + host: { + 'class': 'item', + '[attr.aria-checked]': 'checked' + }, defaultProperties: { 'iconOff': 'ion-ios-circle-outline', 'iconOn': 'ion-ios-checkmark' - }, - //events: ['change'], - host: { - '(^click)': 'onClick($event)', - //'(change)': 'onChange($event.checked)', - '(blur)': 'onTouched()', - //'[checked]': 'checked', - '[attr.aria-checked]': 'checked', - '[attr.aria-disabled]': 'disabled', - '[attr.value]': 'value', - 'role': 'checkbox', - 'class': 'item', - '[class.ng-untouched]': 'ngClassUntouched', - '[class.ng-touched]': 'ngClassTouched', - '[class.ng-pristine]': 'ngClassPristine', - '[class.ng-dirty]': 'ngClassDirty', - '[class.ng-valid]': 'ngClassValid', - '[class.ng-invalid]': 'ngClassInvalid' - }, - appInjector: [ NgControl ] - //lifecycle: [onChange] + } }) -@View({ - template: ` -
- - -
-
-
- -
-
`, - directives: [Icon] +@IonicView({ + template: + '
' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' }) export class Checkbox extends Ion { + + _checkbox: CheckboxInput; + constructor( - ngControl: NgControl, - renderer: Renderer, elementRef: ElementRef, ionicConfig: IonicConfig ) { super(elementRef, ionicConfig); - - this.ngControl = ngControl; - this.renderer = renderer; - this.elementRef = elementRef; - this.ngControl.valueAccessor = this; - - //this.change = new EventEmitter("change"); } - /** - * Much like ngModel, this is called from our valueAccessor for the attached - * ControlDirective to update the value internally. - */ - writeValue(value) { - // Convert it to a boolean - this.checked = !!value; + onAllChangesDone() { + // Enforce that this directive actually contains a checkbox + if (this._checkbox == null) { + throw 'No found inside of '; + } } - set checked(checked) { - this._checked = checked; - // doesn't trigger change/validation for control? - setProperty(this.renderer, this.elementRef, "checked", checked); - //this.ngControl.control.checked = checked; - //this.change.next(checked); - } - get checked() { - return this._checked - } - onClick() { - this.checked = !this.checked; + registerCheckbox(checkboxDir) { + if (this._checkbox != null) { + throw 'Only one is allowed per ' + } + this._checkbox = checkboxDir.elementRef.nativeElement; + this._checkboxDir = checkboxDir; } - get ngClassUntouched() { - return isPresent(this.ngControl.control) ? this.ngControl.control.untouched : false; - } - get ngClassTouched() { - return isPresent(this.ngControl.control) ? this.ngControl.control.touched : false; - } - get ngClassPristine() { - return isPresent(this.ngControl.control) ? this.ngControl.control.pristine : false; - } - get ngClassDirty() { return isPresent(this.ngControl.control) ? this.ngControl.control.dirty : false; } - get ngClassValid() { return isPresent(this.ngControl.control) ? this.ngControl.control.valid : false; } - get ngClassInvalid() { - return isPresent(this.ngControl.control) ? !this.ngControl.control.valid : false; - } + onClick(e) { + let val = !this._checkbox.checked; + this._checkbox.checked = val; + this.checked = val; - registerOnChange(fn): void { this.onChange = fn; } - registerOnTouched(fn): void { this.onTouched = fn; } + //TODO figure out a way to trigger change on the actual input to trigger + // form updates + // this._checkbox.dispatchEvent(e); + //this._checkboxDir.control.valueAccessor.writeValue(val); + } +} + +@Directive({ + selector: 'input[type=checkbox]' +}) +export class CheckboxInput { + constructor( + elementRef: ElementRef, + @Optional() @Parent() container: Checkbox, + @Optional() control: NgControl + ) { + this.elementRef = elementRef; + this.control = control ? control : null; + container && container.registerCheckbox(this); + } } diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts index 3c784fbcad..cce5ee7155 100644 --- a/ionic/components/checkbox/test/basic/index.ts +++ b/ionic/components/checkbox/test/basic/index.ts @@ -17,40 +17,12 @@ import { import {App, Checkbox, Content, List} from 'ionic/ionic'; //import {IONIC_DIRECTIVES} from 'ionic/ionic' -// @Component({ -// selector: 'checkbox-wrapper', -// properties: [ -// 'ctrl' -// ] -// }) -// @View({ //TODO: Pass in component property as checkbox content? -// template: ` -// {{ctrlname}} -// `, -// directives: [IonicApp, Checkbox, NgFormControl] -// }) -// class CheckboxWrapper{ -// constructor(@Query(Checkbox, {descendants: true}) checkboxes: QueryList){ -// this.checkboxes = checkboxes; -// -// //doesn't work -// this.checkboxes.onChange(this.onCheckboxChange); -// setTimeout(() => console.log(this.ctrlname)); -// -// //setTimeout(() => this.onCheckboxChange(), 3000); -// } -// -// onCheckboxChange(val) { -// debugger; -// } -// } - @App({ - templateUrl: 'main.html', - directives: [Checkbox, List, Content, NgControlName, NgFormModel] + templateUrl: 'main.html' }) class IonicApp { constructor() { + // var fb = new FormBuilder(); // this.controls = { // appleCtrl : ['', Validators.required], @@ -62,15 +34,12 @@ class IonicApp { // this.fruitsForm = fb.group(this.controls); this.fruitsForm = new ControlGroup({ - "appleCtrl": new Control("APPLE", isChecked), - "bananaCtrl": new Control("BANANA", isChecked), - "grapeCtrl": new Control("GRAPE", isChecked), - "cherryCtrl": new Control("CHERRY", isChecked) + "appleCtrl": new Control("", isChecked), + "bananaCtrl": new Control("", isChecked), + // "bananaCtrl": new Control("BANANA", isChecked), + // "grapeCtrl": new Control("GRAPE", isChecked), + // "cherryCtrl": new Control("CHERRY", isChecked) }); - this.appleCtrl = "appleCtrl"; - this.bananaCtrl = "bananaCtrl"; - this.grapeCtrl = "grapeCtrl"; - this.cherryCtrl = "cherryCtrl"; function isChecked(ctrl) { if (ctrl.checked) { diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html index 2915588fca..ae2a54024a 100644 --- a/ionic/components/checkbox/test/basic/main.html +++ b/ionic/components/checkbox/test/basic/main.html @@ -1,20 +1,28 @@
+ - -
Some Switches
- + Test + + + appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}
+ appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}
+ apple.value: {{apple.value}}
+ apple.checked: {{apple.checked}}
+ bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}
+ bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}
+ banana.value: {{banana.value}}
+ banana.checked: {{banana.checked}}
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index fa184c880e..8a9f301660 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -11,7 +11,7 @@ import { List, Item, ItemGroup, ItemGroupTitle, Toolbar, Icon, - Checkbox, Switch, + Checkbox, CheckboxInput, Switch, Input, TextInput, Label, Segment, SegmentButton, SegmentControlValueAccessor, RadioGroup, RadioButton, SearchBar, @@ -55,6 +55,8 @@ export const IonicDirectives = [ forwardRef(() => Segment), forwardRef(() => SegmentButton), forwardRef(() => SegmentControlValueAccessor), + forwardRef(() => Checkbox), + forwardRef(() => CheckboxInput), //Checkbox, Switch //RadioGroup, RadioButton, SearchBar,