From c2b0971e183e40e2c482a15c6e34a055125dea75 Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Thu, 26 Jan 2017 11:28:59 -0800 Subject: [PATCH 1/4] More checkbox animation to user interaction trigger --- src/lib/checkbox/checkbox.spec.ts | 4 ++-- src/lib/checkbox/checkbox.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 47d7a1efbc37..c278585214fe 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -384,11 +384,11 @@ describe('MdCheckbox', () => { describe('state transition css classes', () => { it('should transition unchecked -> checked -> unchecked', () => { - testComponent.isChecked = true; + inputElement.click(); fixture.detectChanges(); expect(checkboxNativeElement.classList).toContain('mat-checkbox-anim-unchecked-checked'); - testComponent.isChecked = false; + inputElement.click(); fixture.detectChanges(); expect(checkboxNativeElement.classList) .not.toContain('mat-checkbox-anim-unchecked-checked'); diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 14e7d642be5e..301160aa50be 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -195,8 +195,6 @@ export class MdCheckbox implements ControlValueAccessor { this.indeterminateChange.emit(this._indeterminate); } this._checked = checked; - this._transitionCheckState( - this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); this._changeDetectorRef.markForCheck(); } } @@ -348,6 +346,8 @@ export class MdCheckbox implements ControlValueAccessor { if (!this.disabled) { this.toggle(); + this._transitionCheckState( + this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); // Emit our custom change event if the native input emitted one. // It is important to only emit it, if the native input triggered one, because From 7ffbc4f3d05d1fb568f8acce07b8e418bc1d6196 Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Thu, 26 Jan 2017 15:05:30 -0800 Subject: [PATCH 2/4] Make sure animation for indeterminate change only if indeterminate value changes --- src/lib/checkbox/checkbox.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 301160aa50be..a6196e0e3fdf 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -215,13 +215,14 @@ export class MdCheckbox implements ControlValueAccessor { set indeterminate(indeterminate: boolean) { let changed = indeterminate != this._indeterminate; this._indeterminate = indeterminate; - if (this._indeterminate) { - this._transitionCheckState(TransitionCheckState.Indeterminate); - } else { - this._transitionCheckState( - this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); - } + if (changed) { + if (this._indeterminate) { + this._transitionCheckState(TransitionCheckState.Indeterminate); + } else { + this._transitionCheckState( + this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + } this.indeterminateChange.emit(this._indeterminate); } } @@ -379,6 +380,8 @@ export class MdCheckbox implements ControlValueAccessor { // [checked] bound to it. if (newState === TransitionCheckState.Checked) { animSuffix = 'unchecked-checked'; + } else if (newState == TransitionCheckState.Indeterminate) { + animSuffix = 'unchecked-indeterminate'; } else { return ''; } From 9c13e996f036770165e155ee0e70b0263cc454ce Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Thu, 16 Feb 2017 13:49:35 -0800 Subject: [PATCH 3/4] . --- src/lib/checkbox/checkbox.spec.ts | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index c278585214fe..39696a3257dc 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -11,6 +11,32 @@ import {dispatchFakeEvent} from '../core/testing/dispatch-events'; describe('MdCheckbox', () => { let fixture: ComponentFixture; + /** Creates a DOM mouse event. */ + const createMouseEvent = (eventType: string, dict: any = {}) => { + // Ideally this would just be "return new MouseEvent(eventType, dict)". But IE11 doesn't support + // the MouseEvent constructor, and Edge inexplicably divides clientX and clientY by 100 to get + // pageX and pageY. (Really. After "e = new MouseEvent('click', {clientX: 200, clientY: 300})", + // e.clientX is 200, e.pageX is 2, e.clientY is 300, and e.pageY is 3.) + // So instead we use the deprecated createEvent/initMouseEvent API, which works everywhere. + const event = document.createEvent('MouseEvents'); + event.initMouseEvent(eventType, + false, /* canBubble */ + false, /* cancelable */ + window, /* view */ + 0, /* detail */ + dict.screenX || 0, + dict.screenY || 0, + dict.clientX || 0, + dict.clientY || 0, + false, /* ctrlKey */ + false, /* altKey */ + false, /* shiftKey */ + false, /* metaKey */ + 0, /* button */ + null /* relatedTarget */); + return event; + }; + beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MdCheckboxModule.forRoot(), FormsModule, ReactiveFormsModule], @@ -416,7 +442,7 @@ describe('MdCheckbox', () => { testComponent.isIndeterminate = true; fixture.detectChanges(); - inputElement.click(); + inputElement.dispatchEvent(createMouseEvent('click')); fixture.detectChanges(); expect(checkboxNativeElement.classList).not.toContain( From 28599a49403c4dfbcf36fe5e8cac3137ee09e23c Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Thu, 2 Mar 2017 14:23:54 -0800 Subject: [PATCH 4/4] fix test --- src/lib/checkbox/checkbox.spec.ts | 28 +--------------------------- 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 39696a3257dc..c278585214fe 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -11,32 +11,6 @@ import {dispatchFakeEvent} from '../core/testing/dispatch-events'; describe('MdCheckbox', () => { let fixture: ComponentFixture; - /** Creates a DOM mouse event. */ - const createMouseEvent = (eventType: string, dict: any = {}) => { - // Ideally this would just be "return new MouseEvent(eventType, dict)". But IE11 doesn't support - // the MouseEvent constructor, and Edge inexplicably divides clientX and clientY by 100 to get - // pageX and pageY. (Really. After "e = new MouseEvent('click', {clientX: 200, clientY: 300})", - // e.clientX is 200, e.pageX is 2, e.clientY is 300, and e.pageY is 3.) - // So instead we use the deprecated createEvent/initMouseEvent API, which works everywhere. - const event = document.createEvent('MouseEvents'); - event.initMouseEvent(eventType, - false, /* canBubble */ - false, /* cancelable */ - window, /* view */ - 0, /* detail */ - dict.screenX || 0, - dict.screenY || 0, - dict.clientX || 0, - dict.clientY || 0, - false, /* ctrlKey */ - false, /* altKey */ - false, /* shiftKey */ - false, /* metaKey */ - 0, /* button */ - null /* relatedTarget */); - return event; - }; - beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MdCheckboxModule.forRoot(), FormsModule, ReactiveFormsModule], @@ -442,7 +416,7 @@ describe('MdCheckbox', () => { testComponent.isIndeterminate = true; fixture.detectChanges(); - inputElement.dispatchEvent(createMouseEvent('click')); + inputElement.click(); fixture.detectChanges(); expect(checkboxNativeElement.classList).not.toContain(