Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 72ac60b

Browse files
trimoxtrimox
authored
feat(ripple): Add optional event parameter to activate/deactivate (#321)
1 parent 3497503 commit 72ac60b

File tree

8 files changed

+70
-48
lines changed

8 files changed

+70
-48
lines changed

‎src/demo-app/components/buttons/button-demo/button-demo.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,7 @@ <h1 mdc-typography-display1>Buttons</h1>
8989
Icon
9090
<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
9191
</pre>
92-
<button mdc-button [raised]="true" [mdc-theme-dark]="true">Dark theme</button>
93-
<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
94-
[<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
95-
[<span style="color:#e0c589">mdc-theme-dark</span>]=<span style="color:#65b042">"true"</span>></span>Dark theme<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
96-
</pre> <button mdc-button [primary]="true" [raised]="true" [disableRipple]="true">Ink ripple - Disabled</button>
92+
<button mdc-button [primary]="true" [raised]="true" [disableRipple]="true">Ink ripple - Disabled</button>
9793
<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
9894
[<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
9995
[<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>

‎src/lib/button/button.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,15 @@ export class MdcButton implements AfterViewInit {
8989
constructor(
9090
public renderer: Renderer2,
9191
public elementRef: ElementRef,
92-
public ripple: MdcRipple) {
93-
this.ripple.init();
94-
}
92+
public ripple: MdcRipple) { }
9593

9694
ngAfterViewInit() {
9795
if (this.buttonIcon) {
9896
this.renderer.addClass(this.buttonIcon.elementRef.nativeElement, 'mdc-button__icon');
9997
}
98+
if (!this.disableRipple) {
99+
this.ripple.init();
100+
}
100101
}
101102

102103
private handleClick_(event: Event) {

‎src/lib/core/ripple/ripple-adapter.d.ts renamed to ‎src/lib/core/ripple/adapter.d.ts

File renamed without changes.

‎src/lib/core/ripple/ripple.directive.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ import { MdcRipple } from './ripple.service';
1212
})
1313
export class MdcSurfaceDirective {
1414
@Input('mdc-surface')
15-
get mdcSurface() { return this.ripple_.active; }
15+
get mdcSurface() { return this.ripple.active; }
1616
set mdcSurface(value: boolean) {
17-
this.ripple_.active = toBoolean(value);
17+
this.ripple.active = toBoolean(value);
1818
}
1919
@HostBinding('style.cursor') cursor:string = 'pointer';
2020
@HostBinding('class.mdc-ripple-surface') get classSurface(): string {
2121
return this.mdcSurface ? 'mdc-ripple-surface' : '';
2222
}
2323

24-
constructor(private ripple_: MdcRipple) { }
24+
constructor(public ripple: MdcRipple) { }
2525
}
2626

2727
@Directive({
@@ -30,15 +30,15 @@ export class MdcSurfaceDirective {
3030
})
3131
export class MdcRippleDirective {
3232
@Input('mdc-ripple')
33-
get mdcRipple() { return this.ripple_.active; }
33+
get mdcRipple() { return this.ripple.active; }
3434
set mdcRipple(value: boolean) {
35-
this.ripple_.active = value;
35+
this.ripple.active = value;
3636
}
3737
@HostBinding('class.mdc-ripple-surface') get classSurface(): string {
3838
return this.mdcRipple ? 'mdc-ripple-surface' : '';
3939
}
4040

41-
constructor(private ripple_: MdcRipple) {
42-
this.ripple_.init();
41+
constructor(public ripple: MdcRipple) {
42+
this.ripple.init();
4343
}
4444
}

‎src/lib/core/ripple/ripple.service.ts

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@ import {
66
} from '@angular/core';
77
import { toBoolean, isBrowser } from '../../common';
88

9-
import { MDCRippleAdapter } from './ripple-adapter';
9+
import { MDCRippleAdapter } from './adapter';
1010
import { supportsCssVariables } from '@material/ripple/util';
1111
import { MDCRippleFoundation } from '@material/ripple';
1212

1313
@Injectable()
1414
export class MdcRipple implements OnDestroy {
15-
interactionListenerFn: () => void;
16-
resizeListenerFn: () => void;
17-
private disabled_: boolean;
15+
private _interactionListenerFn: () => void;
16+
private _resizeListenerFn: () => void;
17+
private _disabled: boolean = false;
1818

1919
unbounded: boolean;
2020
active: boolean;
21-
get disabled() { return this.disabled_; }
21+
get disabled() { return this._disabled; }
2222
set disabled(value) {
23-
this.disabled_ = toBoolean(value);
24-
if (this.disabled_) {
25-
this._foundation.deactivate();
23+
this._disabled = toBoolean(value);
24+
if (this._disabled) {
25+
this._foundation.destroy();
2626
} else {
27-
this._foundation.activate();
27+
this._foundation.init();
2828
}
2929
}
3030

@@ -33,39 +33,37 @@ export class MdcRipple implements OnDestroy {
3333
isUnbounded: () => this.unbounded,
3434
isSurfaceActive: () => this.active,
3535
isSurfaceDisabled: () => {
36-
return (this._root.nativeElement.attributes.getNamedItem('disabled') || this.disabled) ? true : false;
36+
return (this.elementRef.nativeElement.attributes.getNamedItem('disabled') || this.disabled) ? true : false;
3737
},
3838
addClass: (className: string) => {
39-
this._renderer.addClass(this._root.nativeElement, className);
39+
this._renderer.addClass(this.elementRef.nativeElement, className);
4040
},
4141
removeClass: (className: string) => {
42-
this._renderer.removeClass(this._root.nativeElement, className);
42+
this._renderer.removeClass(this.elementRef.nativeElement, className);
4343
},
4444
registerInteractionHandler: (evtType: string, handler: EventListener) => {
45-
this.resizeListenerFn = this._renderer.listen(this._root.nativeElement, evtType, handler);
45+
this._resizeListenerFn = this._renderer.listen(this.elementRef.nativeElement, evtType, handler);
4646
},
4747
deregisterInteractionHandler: (evtType: string, handler: EventListener) => {
48-
if (this.interactionListenerFn) {
49-
this.interactionListenerFn();
48+
if (this._interactionListenerFn) {
49+
this._interactionListenerFn();
5050
}
5151
},
5252
registerResizeHandler: (handler: EventListener) => {
5353
if (isBrowser()) {
54-
this.resizeListenerFn = this._renderer.listen(window, 'resize', handler);
54+
this._resizeListenerFn = this._renderer.listen(window, 'resize', handler);
5555
}
5656
},
5757
deregisterResizeHandler: (handler: EventListener) => {
58-
if (isBrowser() && this.resizeListenerFn) {
59-
this.resizeListenerFn();
58+
if (isBrowser() && this._resizeListenerFn) {
59+
this._resizeListenerFn();
6060
}
6161
},
6262
updateCssVariable: (varName: string, value: string) => {
63-
if (this._root) {
64-
this._root.nativeElement.style.setProperty(varName, value);
65-
}
63+
this.elementRef.nativeElement.style.setProperty(varName, value);
6664
},
6765
computeBoundingRect: () => {
68-
const { left, top, height, width } = this._root.nativeElement.getBoundingClientRect();
66+
const { left, top, height, width } = this.elementRef.nativeElement.getBoundingClientRect();
6967
return {
7068
top,
7169
left,
@@ -93,7 +91,7 @@ export class MdcRipple implements OnDestroy {
9391

9492
constructor(
9593
private _renderer: Renderer2,
96-
private _root: ElementRef) {
94+
public elementRef: ElementRef) {
9795
}
9896

9997
ngOnDestroy() {
@@ -105,15 +103,23 @@ export class MdcRipple implements OnDestroy {
105103
this.unbounded = unbounded;
106104
}
107105

108-
activate(): void {
109-
this._foundation.activate();
106+
activate(event?: Event): void {
107+
this._foundation.activate(event);
110108
}
111109

112-
deactivate(): void {
113-
this._foundation.deactivate();
110+
deactivate(event?: Event): void {
111+
this._foundation.deactivate(event);
114112
}
115113

116114
layout(): void {
117115
this._foundation.layout();
118116
}
117+
118+
isSurfaceDisabled(): boolean {
119+
return this._mdcAdapter.isSurfaceDisabled();
120+
}
121+
122+
isSurfaceActive(): boolean {
123+
return this._mdcAdapter.isSurfaceActive();
124+
}
119125
}

‎src/lib/drawer/temporary/drawer-temporary.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy {
199199
this._foundation.init();
200200
this._registry.listen_(this._renderer, "click", (evt) => {
201201
if (this.closeOnClick) {
202-
this._foundation.close()
202+
this._foundation.close();
203203
}
204204
}, this.drawerElement);
205205
}

‎test/unit/button/button.test.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,29 @@ describe('MdcButton', () => {
101101
fixture.detectChanges();
102102
expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be disabled');
103103
});
104+
105+
it('#ripple should be deactivated', () => {
106+
buttonInstance.ripple.deactivate();
107+
fixture.detectChanges();
108+
expect(buttonDebugElement.nativeElement.classList.contains('mdc-ripple-surface')).toBe(false);
109+
});
110+
111+
it('#ripple surface should be removed', () => {
112+
buttonInstance.ripple.active = false;
113+
fixture.detectChanges();
114+
expect(buttonInstance.ripple.isSurfaceActive()).toBe(false);
115+
});
116+
117+
it('#ripple should be disabled', () => {
118+
buttonInstance.ripple.disabled = true;
119+
fixture.detectChanges();
120+
expect(buttonInstance.ripple.isSurfaceDisabled()).toBe(true);
121+
});
122+
123+
it('#ripple should be updated', () => {
124+
buttonInstance.ripple.layout();
125+
fixture.detectChanges();
126+
});
104127
});
105128

106129
// Anchor button tests

‎test/unit/ripple/ripple.test.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,13 @@ describe('MdcRippleDirective', () => {
1818
],
1919
declarations: [
2020
SimpleRipple,
21-
]
21+
],
2222
});
2323
TestBed.compileComponents();
2424
}));
2525

2626
describe('basic behaviors', () => {
2727
let testDebugElement: DebugElement;
28-
let testNativeElement: HTMLElement;
2928
let testInstance: MdcRippleDirective;
3029
let testComponent: SimpleRipple;
3130

@@ -34,7 +33,6 @@ describe('MdcRippleDirective', () => {
3433
fixture.detectChanges();
3534

3635
testDebugElement = fixture.debugElement.query(By.directive(MdcRippleDirective));
37-
testNativeElement = testDebugElement.nativeElement;
3836
testInstance = testDebugElement.componentInstance;
3937
testComponent = fixture.debugElement.componentInstance;
4038
});
@@ -69,7 +67,6 @@ describe('MdcSurfaceDirective', () => {
6967

7068
describe('basic behaviors', () => {
7169
let testDebugElement: DebugElement;
72-
let testNativeElement: HTMLElement;
7370
let testInstance: MdcSurfaceDirective;
7471
let testComponent: SimpleSurface;
7572

@@ -78,7 +75,6 @@ describe('MdcSurfaceDirective', () => {
7875
fixture.detectChanges();
7976

8077
testDebugElement = fixture.debugElement.query(By.directive(MdcSurfaceDirective));
81-
testNativeElement = testDebugElement.nativeElement;
8278
testInstance = testDebugElement.componentInstance;
8379
testComponent = fixture.debugElement.componentInstance;
8480
});

0 commit comments

Comments
 (0)