checkbox wip

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] {

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: `
-  <div class="item-media media-checkbox">
-    <icon [name]="iconOff" class="checkbox-off"></icon>
-    <icon [name]="iconOn" class="checkbox-on"></icon>
-  </div>
-  <div class="item-content">
-    <div class="item-label">
-      <content></content>
-    </div>
-  </div>`,
-  directives: [Icon]
+@IonicView({
+  template:
+  '<div class="item-media media-checkbox" (click)="onClick($event)">' +
+    '<icon [name]="iconOff" class="checkbox-off"></icon>' +
+    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
+    '<content select="input"></content>' +
+  '</div>' +
+  '<div class="item-content">' +
+    '<div class="item-label">' +
+      '<content></content>' +
+    '</div>' +
+  '</div>'
 })
 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 <input type="checkbox"> found inside of <ion-checkbox>';
+    }
   }
 
-  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);
+  registerCheckbox(checkboxDir) {
+    if (this._checkbox != null) {
+      throw 'Only one <input type="checkbox"> is allowed per <ion-checkbox>'
     }
-  get checked() {
-    return this._checked
-  }
-  onClick() {
-    this.checked = !this.checked;
+    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);
+  }
 }

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: `<ion-checkbox [ng-form-control]="ctrl">
-//     {{ctrlname}}
-//   </ion-checkbox>`,
-//   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) {

ionic/components/checkbox/test/basic/main.html

@@ -1,20 +1,28 @@
 <ion-content>
   <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+      <ion-checkbox icon-on="ion-android-checkmark-circle"><input #apple type="checkbox" ng-control="appleCtrl"></ion-checkbox>
 
-    <ion-list>
-      <div class="list-header">Some Switches</div>
-      <ion-checkbox [ng-control]="appleCtrl">
+      <ion-checkbox><input #banana type="checkbox" ng-control="bananaCtrl"><span>Test</span></ion-checkbox>
+
+      <!-- <ion-checkbox ng-control="appleCtrl">
         Apples
       </ion-checkbox>
-      <ion-checkbox [ng-control]="bananaCtrl">
+      <ion-checkbox ng-control="bananaCtrl">
         Bananas
       </ion-checkbox>
-      <ion-checkbox [ng-control]="grapeCtrl">
+      <ion-checkbox ng-control="grapeCtrl">
         Grapes
       </ion-checkbox>
-      <ion-checkbox [ng-control]="cherryCtrl">
+      <ion-checkbox ng-control="cherryCtrl">
         Cherries
-      </ion-checkbox>
-    </ion-list>
+      </ion-checkbox> -->
   </form>
+  appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}<br>
+  appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}<br>
+  apple.value: {{apple.value}}<br>
+  apple.checked: {{apple.checked}} <br>
+  bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}<br>
+  bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}<br>
+  banana.value: {{banana.value}}<br>
+  banana.checked: {{banana.checked}}
 </ion-content>

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,