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 wip

Browse Source
This commit is contained in:
Tim Lancina
2015-07-27 15:22:40 -05:00
parent 436ac4af8a
commit 0770abfc44
8 changed files with 130 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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',
// '(^click)': 'onClick($event)'
'[attr.aria-checked]': 'input.checked'
},
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) {
// debugger
// // toggling with spacebar fires mouse event
// 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;
onInit() {
super.onInit();
console.log("checkbox onInit")
}
focus() {
let mouseClick = new MouseEvent("click", {
bubbles: true,
cancelable: true,
});
this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick);
onAllChangesDone() {
console.log("checkbox onAllChangesDone")
if (this._checked !== void 0 && this.input.checked != this._checked) {
if (this.input.checked !== void 0) {
console.warn("Checkbox checked is set in view template and Control declaration.\n" +
"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);
// }
// }

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

@ -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),
"bananaCtrl": new Control("", isChecked),
// "bananaCtrl": new Control("BANANA", isChecked),
// "grapeCtrl": new Control("GRAPE", isChecked),
// "cherryCtrl": new Control("CHERRY", isChecked)
"appleCtrl": new Control({"checked": false, "value": "apple"}),
"bananaCtrl": new Control(true),
"cherryCtrl": new Control({"checked": false, "value": 12}),
"grapeCtrl": new Control("grape")
});
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();
}

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

@ -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><label>Banana</label><input #banana type="checkbox" ng-control="bananaCtrl"></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 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>
<!-- <ion-checkbox ng-control="appleCtrl">
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> -->
<button type="submit">Submit</button>
<br>
</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>
appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}<br>
appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.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}}
bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}<br>
bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}<br>
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>