checkbox wip

ionic/components/checkbox/checkbox.ts

@@ -2,6 +2,7 @@ import {
   View,
   Directive,
   ElementRef,
+  Renderer,
   Optional,
   Parent,
   NgControl
@@ -18,8 +19,7 @@ import {Icon} from '../icon/icon';
   selector: 'ion-checkbox',
   host: {
     '[class.item]': 'item',
-    '[attr.aria-checked]': 'input.checked',
+    '[attr.aria-checked]': 'input.checked'
-    // '(^click)': 'onClick($event)'
   },
   defaultProperties: {
     'iconOff': 'ion-ios-circle-outline',
@@ -29,7 +29,8 @@ import {Icon} from '../icon/icon';
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
-    '<div class="media-checkbox-outline"></div>' +
+  '<icon [name]="iconOff" class="checkbox-off"></icon>' +
+    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
   '</div>' +
   '<div class="item-content">' +
     '<content></content>' +
@@ -37,50 +38,95 @@ import {Icon} from '../icon/icon';
 })
 export class Checkbox extends IonInputItem {
   constructor(
+    cd: NgControl,
+    renderer: Renderer,
     elementRef: ElementRef,
     config: IonicConfig
   ) {
     super(elementRef, config);
+    this.onChange = (_) => {};
+    this.onTouched = (_) => {};
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+    this.cd = cd;
+
+    cd.valueAccessor = this;
+
     this.item = true;
   }
 
-  // onClick(ev) {
+  onInit() {
-  //   debugger
+    super.onInit();
-  //   // toggling with spacebar fires mouse event
+    console.log("checkbox onInit")
-  //   if (ev.target.tagName === "INPUT") return;
-  //
-  //   this.input.checked = !this.input.checked;
-  //
-  //   //TODO trigger change/mouse event on the actual input to trigger
-  //   // form updates
-  //
-  //   // this._checkbox.dispatchEvent(e);
-  //   //this._checkboxDir.control.valueAccessor.writeValue(val);
-  // }
-
-  onChangeEvent(input) {
-    //TODO can we just assume this will always be true?
-    this.input.checked = this.input.elementRef.nativeElement.checked;
   }
 
-  focus() {
+  onAllChangesDone() {
-    let mouseClick = new MouseEvent("click", {
+    console.log("checkbox onAllChangesDone")
-      bubbles: true,
+    if (this._checked !== void 0 && this.input.checked != this._checked) {
-      cancelable: true,
+      if (this.input.checked !== void 0) {
-    });
+        console.warn("Checkbox checked is set in view template and Control declaration.\n" +
-    this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick);
+                      "Value: " + !!this._checked + " from Control takes precedence");
+      }
+      this.input.checked = !!this._checked;
+    }
+    if (this._value !== void 0 && this.input.value != this._value) {
+      if (this.input.value !== void 0) {
+        console.warn("Checkbox value is set in view template and Control declaration.\n" +
+                      "Value: " + this._value + " from Control takes precedence");
+      }
+      this.input.value = this._value;
+    }
+    if (this.input.value === void 0) {
+      this.input.value = "on";
+    }
+    if (this.input.checked === void 0) {
+      this.input.checked = false;
+    }
+    //TODO check validity
+    this.cd.control._value = {"checked": !!this.input.checked, "value": this.input.value};
+
+    //TODO only want to call this once, we want to set input.checked directly on subsequent
+    // writeValue's
+    this.onAllChangesDone = () => {};
+    // this.onChange({"checked": this.input.checked, "value": this.input.value});
   }
+
+  //from clicking the label or selecting with keyboard
+  //view -> model (Control)
+  toggle() {
+    this.input.checked = this._checked = !this.input.checked;
+    this.onChange({"checked": this.input.checked, "value": this.input.value});
+  }
+
+  // Called by the model (Control) to update the view
+  writeValue(modelValue) {
+    debugger;
+    let type = typeof modelValue;
+    switch (type) {
+      case "boolean":
+        // don't set input.value here, do it in onAllChangesDone
+        // because they might have set it in the view
+        this._checked = modelValue; break;
+      case "object":
+        if (modelValue.checked !== void 0) this._checked = !!modelValue.checked;
+        if (modelValue.value !== void 0) this._value = modelValue.value.toString();
+        break;
+      default:
+        // don't set input.checked here, do it in onAllChangesDone
+        // because they might have set it in the view
+        this._value = modelValue.toString();
+    }
+
+    //TODO we want to set input.checked directly after the first time
+    console.log("writeValue, " + this.input.id + " checked: " + this._checked);
+    console.log("writeValue " + this.input.id + " value: " + this._value);
+
+    // this.cd.control._value = {"checked": this.input.checked, "value": this.input.value};
+  }
+
+  // Used by the view to update the model (Control)
+  // Up to us to call it in update()
+  registerOnChange(fn) { this.onChange = fn; }
+
+  registerOnTouched(fn) { this.onTouched = fn; }
 }
-
-
-// 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,37 +17,15 @@ import {
 })
 class IonicApp {
   constructor() {
-
-    //  var fb = new FormBuilder();
-    //  this.controls = {
-    //    appleCtrl : ['', Validators.required],
-    //    bananaCtrl: ['', Validators.required],
-    //    grapeCtrl: ['', Validators.required],
-    //    cherryCtrl: ['', Validators.required]
-    //  };
-    //
-    //  this.fruitsForm = fb.group(this.controls);
-
     this.fruitsForm = new ControlGroup({
-      "appleCtrl": new Control("", isChecked),
+      "appleCtrl": new Control({"checked": false, "value": "apple"}),
-      "bananaCtrl": new Control("", isChecked),
+      "bananaCtrl": new Control(true),
-      // "bananaCtrl": new Control("BANANA", isChecked),
+      "cherryCtrl": new Control({"checked": false, "value": 12}),
-      // "grapeCtrl": new Control("GRAPE", isChecked),
+      "grapeCtrl": new Control("grape")
-      // "cherryCtrl":  new Control("CHERRY", isChecked)
     });
-
-    function isChecked(ctrl) {
-      if (ctrl.checked) {
-        return null;
-      } else {
-        return {
-          'notChecked': true
-        }
-      }
-    }
   }
 
-  doSubmit(event) {
+  doSubmit(ev) {
     console.log('Submitting form', this.fruitsForm.value);
     event.preventDefault();
   }

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

@@ -1,30 +1,29 @@
 <ion-content>
   <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
     <ion-list>
-      <ion-checkbox icon-on="ion-android-checkmark-circle"><label>Apple</label><input #apple type="checkbox" ng-control="appleCtrl"></ion-checkbox>
+      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label>Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
-
+      <ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
-      <ion-checkbox><label>Banana</label><input #banana type="checkbox" ng-control="bananaCtrl"></ion-checkbox>
+      <ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
+      <ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>
     <ion-list>
-
+      <button type="submit">Submit</button>
-      <!-- <ion-checkbox ng-control="appleCtrl">
+      <br>
-        Apples
-      </ion-checkbox>
-      <ion-checkbox ng-control="bananaCtrl">
-        Bananas
-      </ion-checkbox>
-      <ion-checkbox ng-control="grapeCtrl">
-        Grapes
-      </ion-checkbox>
-      <ion-checkbox ng-control="cherryCtrl">
-        Cherries
-      </ion-checkbox> -->
   </form>
   appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}<br>
-  appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}<br>
+  appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}<br>
-  apple.value: {{apple.value}}<br>
+  appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}<br>
-  apple.checked: {{apple.checked}} <br>
   bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}<br>
-  bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}<br>
+  bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}<br>
-  banana.value: {{banana.value}}<br>
+  bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}<br>
-  banana.checked: {{banana.checked}}
+  cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}<br>
+  cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}<br>
+  cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}<br>
+  grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}<br>
+  grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}<br>
+  grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}<br>
+  <!-- <input type="checkbox" value="test" ng-control="appleCtrl">
+  <input type="checkbox" value="hello" ng-control="bananaCtrl">
+  <button type="submit">Submit</button>
+</form> -->
+
 </ion-content>

ionic/components/form/input.ts

@@ -108,7 +108,8 @@ export class IonInputItem extends Ion {
     itemRegistry.push(this);
   }
 
-  onIonInit() {
+  onInit() {
+    super.onInit();
     if (this.input && this.label) {
       this.input.id = (this.input.id || 'input-' + this.id);
       this.label.labelFor = this.input.id;
@@ -122,9 +123,4 @@ export class IonInputItem extends Ion {
   registerLabel(label) {
     this.label = label;
   }
-
-  focus() {
-    this.input && this.input.focus();
-  }
-
 }

ionic/components/form/label.ts

@@ -33,7 +33,6 @@ export class Label {
     }
 
     this.scrollAssist = config.setting('keyboardScrollAssist');
-    this.scrollAssist = true; //TODO get rid of this
   }
 
   pointerStart(ev) {
@@ -44,7 +43,7 @@ export class Label {
   }
 
   pointerEnd(ev) {
-    if (this.scrollAssist && this.container) {
+    if (this.container) {
 
       // get where the touchend/mouseup ended
       let endCoord = dom.pointerCoord(ev);
@@ -54,7 +53,7 @@ export class Label {
         ev.preventDefault();
         ev.stopPropagation();
 
-        this.container.focus();
+        this.container instanceof Input ? this.container.focus() : this.container.toggle();
       }
 
       this.startCoord = null;

ionic/components/form/tap-input.ts

@@ -15,7 +15,7 @@ import {RadioButton} from '../radio/radio';
     '[checked]': 'checked',
     '[value]': 'value',
     '[attr.name]': 'name',
-    '(change)': 'onChangeEvent($event)',
+    '(change)': 'toggle()',
     'class': 'tap-input input'
   }
 })
@@ -43,10 +43,15 @@ export class TapInput extends IonInput {
     this.tabIndex = this.tabIndex || '';
   }
 
+  onInit() {
+    console.log("tapinput oninit, " + this.id + " checked: " + this.checked);
+    console.log("tapinput oninit, " + this.id + " value: " + this.value);
+  }
+
   //to detect switching/selecting inputs with the keyboard
   //view -> model (Control)
-  onChangeEvent(ev) {
+  toggle() {
-    this.container && this.container.onChangeEvent(this);
+    this.container && this.container.toggle(this);
   }
 
 }

ionic/components/form/text-input.ts

@@ -26,6 +26,9 @@ export class Input extends IonInputItem {
     super(elementRef, ionicConfig);
   }
 
+  focus() {
+    this.input && this.input.focus();
+  }
 }
 
 

ionic/components/radio/radio.ts

@@ -44,6 +44,8 @@ export class RadioGroup extends Ion {
     }
   }
 
+  //from clicking the label or switching inputs with keyboard
+  //view -> model (Control)
   update(input) {
     for (let button of this.buttons) {
       button.input.checked = false;
@@ -105,15 +107,9 @@ export class RadioButton extends IonInputItem {
     this.group.registerButton(this);
   }
 
-  //from clicking the label
+  //from clicking the label or switching inputs with keyboard
   //view -> model (Control)
-  focus() {
+  toggle() {
-    this.group.update(this.input);
-  }
-
-  //from switching inputs with the keyboard
-  //view -> model (Control)
-  onChangeEvent() {
     this.group.update(this.input);
   }
 }