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);
// }
// }