feat: Injectable MdcRipple + EventRegistry provider (#181)

Remove `MdcRippleModule` and refactor `MdcRipple` into an `@Injectable` class. Developers no longer need to include a ripple import with each component that required it. BREAKING CHANGE: `MdcRippleModule` was removed, please update your code accordingly. Closes #164
trimox · Sep 15, 2017 · 99923e7 · 99923e7
1 parent 74a626c
commit 99923e7
Show file tree

Hide file tree

Showing 25 changed files with 216 additions and 54 deletions.
diff --git a/src/lib/button/index.ts b/src/lib/button/index.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { MdcButtonComponent } from './button.component';
 

diff --git a/src/lib/checkbox/checkbox.component.ts b/src/lib/checkbox/checkbox.component.ts
@@ -63,10 +63,10 @@ export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: Provider = {
   encapsulation: ViewEncapsulation.None,
   providers: [
     MD_CHECKBOX_CONTROL_VALUE_ACCESSOR,
-    MdcRipple
+    MdcRipple,
+    EventRegistry,
   ]
 })
-
 export class MdcCheckboxComponent implements AfterViewInit, OnDestroy {
   private _uniqueId: string = `mdc-checkbox-${++nextUniqueId}`;
 

diff --git a/src/lib/dialog/dialog.component.ts b/src/lib/dialog/dialog.component.ts
@@ -124,7 +124,8 @@ export class MdcDialogButtonDirective extends MdcButtonComponent {
   </mdc-dialog-surface>
   <mdc-dialog-backdrop></mdc-dialog-backdrop>
   `,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry],
 })
 export class MdcDialogComponent implements AfterViewInit, OnDestroy {
   private focusTrap_: {

diff --git a/src/lib/drawer/persistent/drawer-persistent.component.ts b/src/lib/drawer/persistent/drawer-persistent.component.ts
@@ -81,7 +81,8 @@ export class MdcPersistentDrawerSelectedDirective {
     <ng-content></ng-content>
   </mdc-persistent-drawer-nav>
   `,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry],
 })
 export class MdcPersistentDrawerComponent implements AfterViewInit, OnDestroy {
   @Output() opened: EventEmitter<void> = new EventEmitter<void>();

diff --git a/src/lib/drawer/temporary/drawer-temporary.component.ts b/src/lib/drawer/temporary/drawer-temporary.component.ts
@@ -81,7 +81,8 @@ export class MdcTemporaryDrawerSelectedDirective {
     <ng-content></ng-content>
   </mdc-temporary-drawer-nav>
   `,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry],
 })
 export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy {
   @Output() opened: EventEmitter<void> = new EventEmitter<void>();

diff --git a/src/lib/form-field/form-field.directive.ts b/src/lib/form-field/form-field.directive.ts
@@ -18,7 +18,8 @@ import { MDCFormFieldAdapter } from './form-field-adapter';
 import { MDCFormFieldFoundation } from '@material/form-field';
 
 @Directive({
-  selector: 'mdc-form-field'
+  selector: 'mdc-form-field',
+  providers: [EventRegistry],
 })
 export class MdcFormFieldDirective implements AfterContentInit, OnDestroy {
   @Input() alignEnd: boolean = false;

diff --git a/src/lib/icon-toggle/icon-toggle.component.ts b/src/lib/icon-toggle/icon-toggle.component.ts
@@ -35,7 +35,8 @@ export const MD_ICON_TOGGLE_CONTROL_VALUE_ACCESSOR: Provider = {
   encapsulation: ViewEncapsulation.None,
   providers: [
     MD_ICON_TOGGLE_CONTROL_VALUE_ACCESSOR,
-    MdcRipple
+    MdcRipple,
+    EventRegistry,
   ],
 })
 export class MdcIconToggleComponent implements AfterViewInit, OnChanges, OnDestroy {

diff --git a/src/lib/menu/menu.component.ts b/src/lib/menu/menu.component.ts
@@ -53,7 +53,8 @@ export class MdcMenuDividerComponent { }
    <ng-content select="mdc-menu-item, mdc-menu-divider"></ng-content>
   </ul>
   `,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry],
 })
 export class MdcMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
   private previousFocus_: any;

diff --git a/src/lib/module.ts b/src/lib/module.ts
@@ -14,7 +14,6 @@ import { MdcListModule } from './list/index';
 import { MdcMaterialIconModule } from './material-icon/index';
 import { MdcMenuModule } from './menu/index';
 import { MdcRadioModule } from './radio/index';
-import { MdcRippleModule } from './ripple/index';
 import { MdcSnackbarModule } from './snackbar/index';
 import { MdcSwitchModule } from './switch/index';
 import { MdcTabModule } from './tabs/index';
@@ -38,7 +37,6 @@ const MATERIAL_MODULES = [
   MdcMaterialIconModule,
   MdcMenuModule,
   MdcRadioModule,
-  MdcRippleModule,
   MdcSnackbarModule,
   MdcSwitchModule,
   MdcTabModule,

diff --git a/src/lib/radio/radio.component.ts b/src/lib/radio/radio.component.ts
@@ -52,10 +52,9 @@ export const MD_RADIO_CONTROL_VALUE_ACCESSOR: Provider = {
   encapsulation: ViewEncapsulation.None,
   providers: [
     MD_RADIO_CONTROL_VALUE_ACCESSOR,
-    MdcRipple
+    MdcRipple,
   ]
 })
-
 export class MdcRadioComponent implements AfterViewInit, OnDestroy {
   @Input() id: string = `mdc-radio-${++nextElId_}`;
   get inputId(): string {

diff --git a/src/lib/ripple/index.ts b/src/lib/ripple/index.ts
@@ -1,13 +1 @@
-import { NgModule } from '@angular/core';
-
-import { MdcRipple } from './ripple.directive';
-import { EventRegistry } from '../common/event-registry';
-
-@NgModule({
-  exports: [MdcRipple],
-  declarations: [MdcRipple],
-  providers: [EventRegistry]
-})
-export class MdcRippleModule { }
-
 export * from './ripple.directive';
diff --git a/src/lib/ripple/ripple.directive.ts b/src/lib/ripple/ripple.directive.ts
@@ -1,21 +1,19 @@
 import {
-  Directive,
   ElementRef,
+  Injectable,
   OnDestroy,
   Renderer2,
 } from '@angular/core';
-import { EventRegistry } from '../common/event-registry';
-import { toBoolean } from '../common';
+import { toBoolean, isBrowser } from '../common';
 
 import { MDCRippleAdapter } from './ripple-adapter';
 import { supportsCssVariables } from '@material/ripple/util';
 import { MDCRippleFoundation } from '@material/ripple';
 
-@Directive({
-  selector: '[mdc-ripple]',
-  providers: [EventRegistry]
-})
+@Injectable()
 export class MdcRipple implements OnDestroy {
+  interactionListenerFn: () => void;
+  resizeListenerFn: () => void;
   private disabled_: boolean;
 
   unbounded: boolean;
@@ -44,20 +42,22 @@ export class MdcRipple implements OnDestroy {
       this._renderer.removeClass(this._root.nativeElement, className);
     },
     registerInteractionHandler: (evtType: string, handler: EventListener) => {
-      if (this._root) {
-        this._registry.listen_(this._renderer, evtType, handler, this._root);
-      }
+      this.resizeListenerFn = this._renderer.listen(this._root.nativeElement, evtType, handler);
     },
     deregisterInteractionHandler: (evtType: string, handler: EventListener) => {
-      this._registry.unlisten_(evtType, handler);
+      if (this.interactionListenerFn) {
+        this.interactionListenerFn();
+      }
     },
     registerResizeHandler: (handler: EventListener) => {
-      if (this._root) {
-        this._registry.listen_(this._renderer, 'resize', handler, this._root);
+      if (isBrowser()) {
+        this.resizeListenerFn = this._renderer.listen(window, 'resize', handler);
       }
     },
     deregisterResizeHandler: (handler: EventListener) => {
-      this._registry.unlisten_('resize', handler);
+      if (isBrowser() && this.resizeListenerFn) {
+        this.resizeListenerFn();
+      }
     },
     updateCssVariable: (varName: string, value: string) => {
       if (this._root) {
@@ -93,8 +93,8 @@ export class MdcRipple implements OnDestroy {
 
   constructor(
     private _renderer: Renderer2,
-    private _root: ElementRef,
-    private _registry: EventRegistry) { }
+    private _root: ElementRef) {
+  }
 
   ngOnDestroy() {
     this._foundation.destroy();

diff --git a/src/lib/snackbar/snackbar.component.ts b/src/lib/snackbar/snackbar.component.ts
@@ -30,7 +30,8 @@ import { getCorrectEventName } from '@material/animation';
     <button mdc-snackbar-action-button></button>
   </mdc-snackbar-action-wrapper>
   `,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry]
 })
 export class MdcSnackbarComponent implements AfterViewInit, OnDestroy {
   @Input() alignStart: boolean;

diff --git a/src/lib/switch/switch.component.ts b/src/lib/switch/switch.component.ts
@@ -46,7 +46,7 @@ let nextElId_ = 0;
   encapsulation: ViewEncapsulation.None,
   providers: [
     MD_SWITCH_CONTROL_VALUE_ACCESSOR,
-    MdcRipple
+    MdcRipple,
   ]
 })
 export class MdcSwitchComponent implements OnChanges {

diff --git a/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.component.ts b/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.component.ts
@@ -78,7 +78,8 @@ export class MdcTabBarScrollFrameDirective implements AfterContentInit {
 }
 
 @Directive({
-  selector: '[mdc-tab-bar-scroller], mdc-tab-bar-scroller'
+  selector: '[mdc-tab-bar-scroller], mdc-tab-bar-scroller',
+  providers: [EventRegistry],
 })
 export class MdcTabBarScrollerDirective implements AfterViewInit, OnDestroy {
   @Input() direction: 'ltr' | 'rtl' = 'ltr';

diff --git a/src/lib/tabs/tab-bar/tab-bar.directive.ts b/src/lib/tabs/tab-bar/tab-bar.directive.ts
@@ -19,7 +19,8 @@ import { MDCTabBarAdapter } from './tab-bar-adapter';
 import { MDCTabBarFoundation } from '@material/tabs';
 
 @Directive({
-  selector: '[mdc-tab-bar], mdc-tab-bar'
+  selector: '[mdc-tab-bar], mdc-tab-bar',
+  providers: [EventRegistry],
 })
 export class MdcTabBarDirective {
   private tabBarIndicator: HTMLElement;

diff --git a/src/lib/tabs/tab/tab.component.ts b/src/lib/tabs/tab/tab.component.ts
@@ -40,7 +40,10 @@ export class MdcTabIconTextDirective {
 @Component({
   selector: '[mdc-tab], mdc-tab',
   template: '<ng-content></ng-content>',
-  providers: [MdcRipple],
+  providers: [
+    MdcRipple,
+    EventRegistry
+  ],
   encapsulation: ViewEncapsulation.None
 })
 export class MdcTabComponent implements AfterViewInit, OnDestroy {

diff --git a/src/lib/textfield/textarea.component.ts b/src/lib/textfield/textarea.component.ts
@@ -37,7 +37,10 @@ export const MD_TEXTAREA_CONTROL_VALUE_ACCESSOR: Provider = {
     (focus)="onFocus()"></textarea>
     <mdc-textfield-label [attr.for]="id" *ngIf="label">{{label}}</mdc-textfield-label>
   `,
-  providers: [MD_TEXTAREA_CONTROL_VALUE_ACCESSOR]
+  providers: [
+    MD_TEXTAREA_CONTROL_VALUE_ACCESSOR,
+    EventRegistry
+  ],
 })
 export class MdcTextareaComponent extends MdcTextfieldComponent {
   @Input() multiline: boolean;

diff --git a/src/lib/textfield/textfield-box.component.ts b/src/lib/textfield/textfield-box.component.ts
@@ -48,6 +48,7 @@ export class MdcTextfieldBottomLineDirective {
   providers: [
     MD_TEXTFIELD_BOX_CONTROL_VALUE_ACCESSOR,
     MdcRipple,
+    EventRegistry,
   ]
 })
 export class MdcTextfieldBoxComponent extends MdcTextfieldComponent {

diff --git a/src/lib/textfield/textfield.component.ts b/src/lib/textfield/textfield.component.ts
@@ -89,7 +89,10 @@ export class MdcTextfieldLabelDirective {
     <mdc-textfield-label [attr.for]="id">{{label}}</mdc-textfield-label>
   `,
   encapsulation: ViewEncapsulation.None,
-  providers: [MD_TEXTFIELD_CONTROL_VALUE_ACCESSOR],
+  providers: [
+    MD_TEXTFIELD_CONTROL_VALUE_ACCESSOR,
+    EventRegistry,
+  ],
 })
 export class MdcTextfieldComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
   private type_ = 'text';

diff --git a/src/lib/toolbar/toolbar.component.ts b/src/lib/toolbar/toolbar.component.ts
@@ -23,7 +23,8 @@ import { MDCToolbarFoundation } from '@material/toolbar';
 @Component({
   selector: 'mdc-toolbar',
   template: '<ng-content></ng-content>',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [EventRegistry],
 })
 export class MdcToolbarComponent implements AfterViewInit, OnDestroy {
   @Input() flexible: boolean;

diff --git a/test/unit/button/button.test.ts b/test/unit/button/button.test.ts
@@ -2,14 +2,14 @@ import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { MdcButtonComponent, MdcButtonModule, MdcRippleModule } from '../../../src/lib/public_api';
+import { MdcButtonComponent, MdcButtonModule } from '../../../src/lib/public_api';
 
 describe('MdcButtonComponent', () => {
   let fixture: ComponentFixture<any>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdcButtonModule, MdcRippleModule],
+      imports: [MdcButtonModule],
       declarations: [
         SimpleButton,
         HrefButton,
@@ -151,7 +151,6 @@ describe('MdcButtonComponent', () => {
       [unelevated]="isUnelevated"
       [stroked]="isStroked">
     </button>
-    <a href="http://www.google.com" mdc-button [disabled]="isDisabled">Link</a>
   `,
 })
 class SimpleButton {

diff --git a/test/unit/checkbox/checkbox.test.ts b/test/unit/checkbox/checkbox.test.ts
@@ -3,14 +3,14 @@ import { async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed } from '@a
 import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
-import { MdcCheckboxComponent, MdcCheckboxModule, MdcRippleModule } from '../../../src/lib/public_api';
+import { MdcCheckboxComponent, MdcCheckboxModule } from '../../../src/lib/public_api';
 
 describe('MdcCheckboxComponent', () => {
   let fixture: ComponentFixture<any>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdcCheckboxModule, MdcRippleModule, FormsModule, ReactiveFormsModule],
+      imports: [MdcCheckboxModule, FormsModule, ReactiveFormsModule],
       declarations: [
         SingleCheckbox,
         CheckboxWithAriaLabelledby,