checkbox updates

ionic/components.ts

@@ -14,6 +14,7 @@ export * from 'ionic/components/form/text-input'
 export * from 'ionic/components/form/tap-input'
 export * from 'ionic/components/form/label'
 export * from 'ionic/components/list/list'
+export * from 'ionic/components/show-hide-when/show-hide-when'
 
 // Material components/effects
 export * from 'ionic/components/material/button'

ionic/components/app/app.ts

@@ -135,7 +135,7 @@ function initApp(window, document, config) {
   Platform.load(config);
 
   // on resize be sure to clear out existing window dimensions
-  window.addEventListener('resize', Platform.resetDimensions);
+  window.addEventListener('resize', Platform.winResize);
 
   return app;
 }

ionic/components/app/normalize.scss

@@ -31,9 +31,9 @@ audio:not([controls]) {
 
 // Address `[hidden]` styling not present in IE 8/9/10.
 // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
-[hidden][hidden],
+[hidden],
 template {
-  display: none;
+  display: none !important;
 }
 
 

ionic/components/checkbox/checkbox.scss

@@ -18,6 +18,7 @@
 }
 
 .checkbox[aria-disabled=true] {
+  pointer-events: none;
   opacity: 0.5;
   color: gray;
 }

ionic/components/checkbox/checkbox.ts

@@ -15,6 +15,11 @@ import {TapClick} from '../button/button';
 
 @IonicComponent({
   selector: 'ion-checkbox',
+  properties: [
+    'value',
+    'checked',
+    'disabled'
+  ],
   host: {
     'class': 'item',
     'role': 'checkbox',
@@ -22,7 +27,8 @@ import {TapClick} from '../button/button';
     '[attr.aria-disabled]': 'input.disabled',
     '[attr.aria-labelledby]': 'labelId',
     '(^click)': 'click($event)'
-  }
+  },
+  exportAs: 'checkbox'
 })
 @IonicView({
   template:
@@ -42,49 +48,43 @@ export class Checkbox extends IonInputItem {
     tapClick: TapClick
   ) {
     super(elementRef, config);
+    this.tapClick = tapClick;
+
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
-    this.tapClick = tapClick;
+
     this.cd = cd;
 
     if (cd) cd.valueAccessor = this;
   }
 
-  click(ev) {
-    if (this.tapClick.allowClick(ev)) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.input.checked = !this.input.checked;
-    }
-  }
-
   onInit() {
     super.onInit();
     this.labelId = 'label-' + this.id;
   }
 
-  // Called by the model (Control) to update the view
-  writeValue(modelValue) {
-    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();
+  onAllChangesDone() {
+    this.input.checked = this.checked;
+    this.input.disabled = this.disabled;
+    this.input.value = this.value;
   }
 
-    //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);
+  toggle() {
+    this.input.checked = this.checked = !this.input.checked;
+    this.onChange(this.checked);
+  }
 
+  click(ev) {
+    if (this.tapClick.allowClick(ev)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.toggle();
+    }
+  }
+
+  // Called by the model (Control) to update the view
+  writeValue(modelValue) {
+    this.input.checked = modelValue;
   }
 
   // Used by the view to update the model (Control)

ionic/components/checkbox/test/basic/index.ts

@@ -18,15 +18,27 @@ import {
 class IonicApp {
   constructor() {
     this.fruitsForm = new ControlGroup({
-      "appleCtrl": new Control({"checked": false, "value": "apple"}),
+      "appleCtrl": new Control(),
       "bananaCtrl": new Control(true),
-      "cherryCtrl": new Control({"checked": false, "value": 12}),
-      "grapeCtrl": new Control("grape")
+      "cherryCtrl": new Control(false),
+      "grapeCtrl": new Control(true)
     });
+
+    this.grapeDisabled = true;
+    this.grapeChecked = true;
+  }
+
+  toggleGrapeChecked() {
+    this.grapeChecked = !this.grapeChecked;
+  }
+
+  toggleGrapeDisabled() {
+    this.grapeDisabled = !this.grapeDisabled;
   }
 
   doSubmit(ev) {
     console.log('Submitting form', this.fruitsForm.value);
-    event.preventDefault();
+    this.formResults = JSON.stringify(this.fruitsForm.value);
+    ev.preventDefault();
   }
 }

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

@@ -8,42 +8,43 @@
 
     <ion-list>
 
-      <ion-checkbox ng-control="appleCtrl">
-        Apple
+      <ion-checkbox value="apple" checked="true" ng-control="appleCtrl">
+        Apple, value=apple, init checked
       </ion-checkbox>
-<!--
+
       <ion-checkbox ng-control="bananaCtrl">
-        <label>Banana</label>
-        <input value="test" type="checkbox">
+        Banana, init no checked/value attributes
       </ion-checkbox>
 
-      <ion-checkbox ng-control="cherryCtrl">
-        <label>Cherry</label>
-        <input type="checkbox">
+      <ion-checkbox value="cherry" disabled="true" ng-control="cherryCtrl">
+        Cherry, value=cherry, init disabled
       </ion-checkbox>
 
-      <ion-checkbox ng-control="grapeCtrl">
-        <label>Grape</label>
-        <input value="test" checked="checked" type="checkbox">
-      </ion-checkbox> -->
+      <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
+        Grape, value=grape, init checked, disabled
+      </ion-checkbox>
 
-    <ion-list>
+    </ion-list>
 
   </form>
 
-  <p aria-hidden="true">
-    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
-    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}</code><br>
-    <code>appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}</code><br>
-    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
-    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}</code><br>
-    <code>bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}</code><br>
-    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
-    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}</code><br>
-    <code>cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}</code><br>
-    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
-    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}</code><br>
-    <code>grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}</code><br>
+  <p aria-hidden="true" class="align-center">
+    <button (click)="toggleGrapeChecked()" outline primary small>Grape Checked</button>
+    <button (click)="toggleGrapeDisabled()" outline primary small>Grape Disabled</button>
+    <button (click)="doSubmit($event)" outline primary small>Submit</button>
   </p>
 
+  <p aria-hidden="true" class="padding">
+    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
+    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
+    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
+    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
+    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
+    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
+    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
+    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
+  </p>
+
+  <pre aria-hidden="true" class="padding">{{formResults}}</pre>
+
 </ion-content>

ionic/components/show-hide-when/show-hide-when.ts

@@ -0,0 +1,98 @@
+import {Directive, Attribute, NgZone} from 'angular2/angular2'
+
+import {Platform} from '../../platform/platform';
+
+
+class DisplayWhen {
+
+  constructor(conditions, ngZone) {
+    this.isMatch = false;
+
+    if (!conditions) return;
+
+    this.conditions = conditions.split(',');
+
+    // check if its one of the matching platforms first
+    // a platform does not change during the life of an app
+    for (let i = 0; i < this.conditions.length; i++) {
+      if (this.conditions[i] && Platform.is(this.conditions[i])) {
+        this.isMatch = true;
+        return;
+      }
+    }
+
+    if ( this.orientation() ) {
+      // add window resize listener
+      Platform.onResize(() => {
+        ngZone.run(() => {
+          this.orientation();
+        });
+      });
+      return;
+    }
+
+  }
+
+  orientation() {
+    for (let i = 0; i < this.conditions.length; i++) {
+      var condition = this.conditions[i];
+
+      if (condition == 'portrait') {
+        this.isMatch = Platform.isPortrait();
+        return true;
+      }
+
+      if (condition == 'landscape') {
+        this.isMatch = Platform.isLandscape();
+        return true;
+      }
+
+    }
+  }
+
+}
+
+
+@Directive({
+  selector: '[show-when]',
+  host: {
+    '[hidden]': 'hidden'
+  }
+})
+export class ShowWhen extends DisplayWhen {
+
+  constructor(
+    @Attribute('show-when') showWhen: string,
+    ngZone: NgZone
+  ) {
+    super(showWhen, ngZone);
+  }
+
+  get hidden() {
+    return !this.isMatch;
+  }
+
+}
+
+
+@Directive({
+  selector: '[hide-when]',
+  host: {
+    '[hidden]': 'hidden'
+  }
+})
+export class HideWhen extends DisplayWhen {
+
+  constructor(
+    @Attribute('hide-when') hideWhen: string,
+    ngZone: NgZone
+  ) {
+    super(hideWhen, ngZone);
+  }
+
+  get hidden() {
+    return this.isMatch;
+  }
+
+}
+

ionic/components/show-hide-when/test/basic/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should toggle checkbox state with label click', function() {
+  element(by.css('#appleLabel')).click();
+});

ionic/components/show-hide-when/test/basic/index.ts

@@ -0,0 +1,44 @@
+import {App} from 'ionic/ionic';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  formDirectives,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from 'angular2/forms';
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control(),
+      "bananaCtrl": new Control(true),
+      "cherryCtrl": new Control(false),
+      "grapeCtrl": new Control(true)
+    });
+
+    this.grapeDisabled = true;
+    this.grapeChecked = true;
+  }
+
+  toggleGrapeChecked() {
+    this.grapeChecked = !this.grapeChecked;
+  }
+
+  toggleGrapeDisabled() {
+    this.grapeDisabled = !this.grapeDisabled;
+  }
+
+  doSubmit(ev) {
+    console.log('Submitting form', this.fruitsForm.value);
+    this.formResults = JSON.stringify(this.fruitsForm.value);
+    ev.preventDefault();
+  }
+}

ionic/components/show-hide-when/test/basic/main.html

@@ -0,0 +1,59 @@
+
+<ion-toolbar><ion-title>Show/Hide When</ion-title></ion-toolbar>
+
+
+<ion-content class="padding">
+
+  <p show-when="ios" style="background:blue; color:white">
+    show-when="ios"
+  </p>
+
+  <p show-when="android" style="background:green; color:white">
+    show-when="android"
+  </p>
+
+  <p show-when="android,ios" style="background:yellow;">
+    show-when="android,ios"
+  </p>
+
+  <p show-when="core" style="background:#ddd;">
+    show-when="core"
+  </p>
+
+  <p show-when="mobile" style="background:orange;">
+    show-when="mobile"
+  </p>
+
+  <p show-when="phablet" style="background:red;">
+    show-when="phablet"
+  </p>
+
+  <p show-when="tablet" style="background:black;color:white">
+    show-when="tablet"
+  </p>
+
+  <p show-when="iphone" style="background:purple; color:white;">
+    show-when="iphone"
+  </p>
+
+  <p show-when="landscape" style="background:pink;">
+    show-when="landscape"
+  </p>
+
+  <p show-when="portrait" style="background:maroon; color:white;">
+    show-when="portrait"
+  </p>
+
+  <p hide-when="ios" style="background:blue; color:white">
+    hide-when="ios"
+  </p>
+
+  <p hide-when="android" style="background:green; color:white">
+    hide-when="android"
+  </p>
+
+  <p hide-when="android,ios" style="background:yellow;">
+    hide-when="android,ios"
+  </p>
+
+</ion-content>

ionic/config/annotations.ts

@@ -19,6 +19,7 @@ import {
   Nav, NavbarTemplate, Navbar, NavPush, NavPop,
   TapClick, TapDisabled,
   Register,
+  ShowWhen, HideWhen,
 
   MaterialButton
 } from '../ionic';
@@ -82,6 +83,9 @@ export const IonicDirectives = [
   forwardRef(() => NavPop),
   forwardRef(() => Register),
 
+  forwardRef(() => ShowWhen),
+  forwardRef(() => HideWhen),
+
   // Gestures
   forwardRef(() => TapClick),
   forwardRef(() => TapDisabled),

ionic/platform/platform.ts

@@ -10,6 +10,7 @@ export class PlatformCtrl {
     this._versions = {};
     this._registry = {};
     this._default = null;
+    this._onResizes = [];
 
     this._readyPromise = new Promise(res => { this._readyResolve = res; } );
   }
@@ -137,8 +138,25 @@ export class PlatformCtrl {
     return !this.isPortrait();
   }
 
-  resetDimensions() {
-    this._w = this._h = 0;
+  winResize() {
+    Platform._w = Platform._h = 0;
+
+    clearTimeout(Platform._resizeTimer);
+
+    Platform._resizeTimer = setTimeout(() => {
+      for (let i = 0; i < Platform._onResizes.length; i++) {
+        try {
+          Platform._onResizes[i]();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }, 500);
+  }
+
+  onResize(cb) {
+    // TODO: Make more good
+    this._onResizes.push(cb);
   }