Add directive to determine how elements were focused.

Author: mmalerba

src/demo-app/demo-app-module.ts

@@ -4,8 +4,7 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule, OverlayContainer,
-  FullscreenOverlayContainer} from '@angular/material';
+import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo';
@@ -39,6 +38,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d
 import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputContainerDemo} from './input/input-container-demo';
+import {StyleDemo} from './style/style-demo';
 
 @NgModule({
   imports: [
@@ -87,6 +87,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     SliderDemo,
     SlideToggleDemo,
     SpagettiPanel,
+    StyleDemo,
     ToolbarDemo,
     TooltipDemo,
     TabsDemo,

src/demo-app/demo-app/demo-app.ts

@@ -50,7 +50,8 @@ export class DemoApp {
     {name: 'Tabs', route: 'tabs'},
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
-    {name: 'Platform', route: 'platform'}
+    {name: 'Platform', route: 'platform'},
+    {name: 'Style', route: 'style'}
   ];
 
   constructor(private _element: ElementRef) {

src/demo-app/demo-app/routes.ts

@@ -33,6 +33,7 @@ import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputContainerDemo} from '../input/input-container-demo';
+import {StyleDemo} from '../style/style-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -67,5 +68,6 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'dialog', component: DialogDemo},
   {path: 'tooltip', component: TooltipDemo},
   {path: 'snack-bar', component: SnackBarDemo},
-  {path: 'platform', component: PlatformDemo}
+  {path: 'platform', component: PlatformDemo},
+  {path: 'style', component: StyleDemo},
 ];

src/demo-app/style/style-demo.html

@@ -0,0 +1,3 @@
+<button #b class="demo-button" cdkAddFocusClasses>focus me!</button>
+<button (click)="b.focus()">focus programmatically</button>
+<div>Active classes: {{b.classList}}</div>

src/demo-app/style/style-demo.scss

@@ -0,0 +1,15 @@
+.demo-button.cdk-focused {
+  border: 2px solid red;
+}
+
+.demo-button.cdk-mouse-focused {
+  background: green;
+}
+
+.demo-button.cdk-keyboard-focused {
+  background: yellow;
+}
+
+.demo-button.cdk-programmatically-focused {
+  background: blue;
+}

src/demo-app/style/style-demo.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'style-demo',
+  templateUrl: 'style-demo.html',
+  styleUrls: ['style-demo.css'],
+})
+export class StyleDemo {}

src/lib/core/core.ts

@@ -94,7 +94,7 @@ export {
 export {MdLineModule, MdLine, MdLineSetter} from './line/line';
 
 // Style
-export {applyCssTransform} from './style/apply-transform';
+export * from './style/index';
 
 // Error
 export {MdError} from './errors/error';

src/lib/core/style/add-focus-classes.spec.ts

@@ -0,0 +1,112 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {StyleModule} from './index';
+import {By} from '@angular/platform-browser';
+
+
+describe('MdSlider', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [StyleModule],
+      declarations: [
+        ButtonWithFocusClasses,
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('cdkAddFocusClasses', () => {
+    let fixture: ComponentFixture<ButtonWithFocusClasses>;
+    let buttonElement: HTMLElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ButtonWithFocusClasses);
+      fixture.detectChanges();
+
+      buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
+    });
+
+    it('should initially not be focused', () => {
+      expect(buttonElement.classList.length).toBe(0, 'button should not have focus classes');
+    });
+
+    it('should detect focus via keyboard', async(() => {
+      // Simulate focus via keyboard.
+      dispatchKeydownEvent(document, 9 /* tab */);
+      buttonElement.focus();
+      fixture.detectChanges();
+
+      setTimeout(() => {
+        fixture.detectChanges();
+
+        expect(buttonElement.classList.length)
+            .toBe(2, 'button should have exactly 2 focus classes');
+        expect(buttonElement.classList.contains('cdk-focused'))
+            .toBe(true, 'button should have cdk-focused class');
+        expect(buttonElement.classList.contains('cdk-keyboard-focused'))
+            .toBe(true, 'button should have cdk-keyboard-focused class');
+      }, 0);
+    }));
+
+    it('should detect focus via mouse', async(() => {
+      // Simulate focus via mouse.
+      dispatchMousedownEvent(document);
+      buttonElement.focus();
+      fixture.detectChanges();
+
+      setTimeout(() => {
+        fixture.detectChanges();
+
+        expect(buttonElement.classList.length)
+            .toBe(2, 'button should have exactly 2 focus classes');
+        expect(buttonElement.classList.contains('cdk-focused'))
+            .toBe(true, 'button should have cdk-focused class');
+        expect(buttonElement.classList.contains('cdk-mouse-focused'))
+            .toBe(true, 'button should have cdk-mouse-focused class');
+      }, 0);
+    }));
+
+    it('should detect programmatic focus', async(() => {
+      // Programmatically focus.
+      buttonElement.focus();
+      fixture.detectChanges();
+
+      setTimeout(() => {
+        fixture.detectChanges();
+
+        expect(buttonElement.classList.length)
+            .toBe(2, 'button should have exactly 2 focus classes');
+        expect(buttonElement.classList.contains('cdk-focused'))
+            .toBe(true, 'button should have cdk-focused class');
+        expect(buttonElement.classList.contains('cdk-programmatically-focused'))
+            .toBe(true, 'button should have cdk-programmatically-focused class');
+      }, 0);
+    }));
+  });
+});
+
+
+@Component({template: `<button cdkAddFocusClasses>focus me!</button>`})
+class ButtonWithFocusClasses {}
+
+
+/** Dispatches a mousedown event on the specified element. */
+function dispatchMousedownEvent(element: Node) {
+  let event = document.createEvent('MouseEvent');
+  event.initMouseEvent(
+      'mousedown', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  element.dispatchEvent(event);
+}
+
+
+/** Dispatches a keydown event on the specified element. */
+function dispatchKeydownEvent(element: Node, keyCode: number) {
+  let event: any = document.createEvent('KeyboardEvent');
+  (event.initKeyEvent || event.initKeyboardEvent).bind(event)(
+      'keydown', true, true, window, 0, 0, 0, 0, 0, keyCode);
+  Object.defineProperty(event, 'keyCode', {
+    get: function() { return keyCode; }
+  });
+  element.dispatchEvent(event);
+}

src/lib/core/style/add-focus-classes.ts

@@ -0,0 +1,80 @@
+import {Directive, Injectable, Optional, SkipSelf} from '@angular/core';
+
+
+/** Singleton that allows all instances of CdkAddFocusClasses to share document event listeners. */
+@Injectable()
+export class CdkFocusCauseDetector {
+  /** Whether a keydown event has just occurred. */
+  get keydownOccurred() { return this._keydownOccurred; }
+  private _keydownOccurred = false;
+
+  get mousedownOccurred() { return this._mousedownOccurred; }
+  private _mousedownOccurred = false;
+
+  constructor() {
+    document.addEventListener('keydown', () => {
+      this._keydownOccurred = true;
+      setTimeout(() => this._keydownOccurred = false, 0);
+    }, true);
+
+    document.addEventListener('mousedown', () => {
+      this._mousedownOccurred = true;
+      setTimeout(() => this._mousedownOccurred = false, 0);
+    }, true);
+  }
+}
+
+
+/**
+ * Directive that determines how a particular element was focused (via keyboard, mouse, or
+ * programmatically) and adds corresponding classes to the element.
+ */
+@Directive({
+  selector: '[cdkAddFocusClasses]',
+  host: {
+    '[class.cdk-focused]': 'keyboardFocused || mouseFocused || programmaticallyFocused',
+    '[class.cdk-keyboard-focused]': 'keyboardFocused',
+    '[class.cdk-mouse-focused]': 'mouseFocused',
+    '[class.cdk-programmatically-focused]': 'programmaticallyFocused',
+    '(focus)': '_onFocus()',
+    '(blur)': '_onBlur()',
+  }
+})
+export class CdkAddFocusClasses {
+  /** Whether the elmenet is focused due to a keyboard event. */
+  keyboardFocused = false;
+
+  /** Whether the element is focused due to a mouse event. */
+  mouseFocused = false;
+
+  /** Whether the has been programmatically focused. */
+  programmaticallyFocused = false;
+
+  constructor(private _focusCauseDetector: CdkFocusCauseDetector) {}
+
+  /** Handles focus event on the element. */
+  _onFocus() {
+    this.keyboardFocused = this._focusCauseDetector.keydownOccurred;
+    this.mouseFocused = this._focusCauseDetector.mousedownOccurred;
+    this.programmaticallyFocused = !this.keyboardFocused && !this.mouseFocused;
+  }
+
+  /** Handles blur event on the element. */
+  _onBlur() {
+    this.keyboardFocused = this.mouseFocused = this.programmaticallyFocused = false;
+  }
+}
+
+
+export function FOCUS_CAUSE_DETECTOR_PROVIDER_FACTORY(
+    parentDispatcher: CdkFocusCauseDetector) {
+  return parentDispatcher || new CdkFocusCauseDetector();
+}
+
+
+export const FOCUS_CAUSE_DETECTOR_PROVIDER = {
+  // If there is already a CdkFocusCauseDetector available, use that. Otherwise, provide a new one.
+  provide: CdkFocusCauseDetector,
+  deps: [[new Optional(), new SkipSelf(), CdkFocusCauseDetector]],
+  useFactory: FOCUS_CAUSE_DETECTOR_PROVIDER_FACTORY
+};

src/lib/core/style/index.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CdkAddFocusClasses, FOCUS_CAUSE_DETECTOR_PROVIDER} from './add-focus-classes';
+import {DefaultStyleCompatibilityModeModule} from '../compatibility/default-mode';
+
+export * from './add-focus-classes';
+export * from './apply-transform';
+
+
+@NgModule({
+  imports: [DefaultStyleCompatibilityModeModule],
+  declarations: [CdkAddFocusClasses],
+  exports: [CdkAddFocusClasses, DefaultStyleCompatibilityModeModule],
+  providers: [FOCUS_CAUSE_DETECTOR_PROVIDER],
+})
+export class StyleModule {}

src/lib/module.ts

@@ -35,6 +35,7 @@ import {MdMenuModule} from './menu/index';
 import {MdDialogModule} from './dialog/index';
 import {PlatformModule} from './core/platform/index';
 import {MdAutocompleteModule} from './autocomplete/index';
+import {StyleModule} from './core/style/index';
 
 const MATERIAL_MODULES = [
   MdAutocompleteModule,
@@ -64,6 +65,7 @@ const MATERIAL_MODULES = [
   OverlayModule,
   PortalModule,
   RtlModule,
+  StyleModule,
   A11yModule,
   PlatformModule,
   ProjectionModule,