javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-03 11:24:47 -05:00
parent a62d7d2c64
commit 33c69d5870
13 changed files with 307 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/checkbox/checkbox.scss
View File

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

60
ionic/components/checkbox/checkbox.ts
View File

@ -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;
}
onAllChangesDone() {
this.input.checked = this.checked;
this.input.disabled = this.disabled;
this.input.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) {
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.input.checked = modelValue;
}
// Used by the view to update the model (Control)

20
ionic/components/checkbox/test/basic/index.ts
View File

@ -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();
}
}

53
ionic/components/checkbox/test/basic/main.html
View File

@ -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>