feat(interaction): added service to detect last interaction

Sidenav want's to restore focus after the pane gets closed, this should only happen for keyboard interactions.
The service got created to use that feature for other components too

Fixes #5563 References #5583

feat(interaction): add test for interaction which fakes a keyboard input and validates it

test(interaction): add interaction spec for mousedown event + formats 4 spaces to 2

style(interaction): fix styling of the previous commits

Author: devversion

src/components/sidenav/sidenav.js

@@ -208,7 +208,7 @@ function SidenavFocusDirective() {
  *   - `<md-sidenav md-is-locked-open="$mdMedia('min-width: 1000px')"></md-sidenav>`
  *   - `<md-sidenav md-is-locked-open="$mdMedia('sm')"></md-sidenav>` (locks open on small screens)
  */
-function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate, $compile, $parse, $log, $q, $document) {
+function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInteraction, $animate, $compile, $parse, $log, $q, $document) {
   return {
     restrict: 'E',
     scope: {
@@ -227,6 +227,7 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
    */
   function postLink(scope, element, attr, sidenavCtrl) {
     var lastParentOverFlow;
+    var triggeringInteractionType;
     var triggeringElement = null;
     var promise = $q.when(true);
 
@@ -289,6 +290,7 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
       if ( isOpen ) {
         // Capture upon opening..
         triggeringElement = $document[0].activeElement;
+        triggeringInteractionType = $mdInteraction.getLastInteractionType();
       }
 
       disableParentScroll(isOpen);
@@ -344,9 +346,9 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
             // When the current `updateIsOpen()` animation finishes
             promise.then(function(result) {
 
-              if ( !scope.isOpen ) {
+              if ( !scope.isOpen && triggeringElement && triggeringInteractionType && triggeringInteractionType === 'keyboard') {
                 // reset focus to originating element (if available) upon close
-                triggeringElement && triggeringElement.focus();
+                triggeringElement.focus();
                 triggeringElement = null;
               }
 

src/core/core.js

@@ -7,6 +7,7 @@ angular
     'ngAnimate',
     'material.core.animate',
     'material.core.layout',
+    'material.core.interaction',
     'material.core.gestures',
     'material.core.theming'
   ])

src/core/services/interaction/interaction.js

@@ -0,0 +1,58 @@
+angular
+  .module('material.core.interaction', [])
+  .service('$mdInteraction', MdInteractionService);
+
+function MdInteractionService($timeout) {
+  var body = angular.element(document.body);
+  var _mouseEvent = window.MSPointerEvent ? 'MSPointerDown' : window.PointerEvent ? 'pointerdown' : 'mousedown';
+  var buffer = false;
+  var timer;
+  var lastInteractionType;
+  var inputMap = {
+    'keydown': 'keyboard',
+    'mousedown': 'mouse',
+    'mouseenter': 'mouse',
+    'touchstart': 'touch',
+    'pointerdown': 'pointer',
+    'MSPointerDown': 'pointer'
+  };
+  var pointerMap = {
+    2: 'touch',
+    3: 'touch',
+    4: 'mouse'
+  };
+
+  function onInput(event) {
+    if (buffer) return;
+    var type = inputMap[event.type];
+    if (type === 'pointer') {
+      type = (typeof event.pointerType === 'number') ? pointerMap[event.pointerType] : event.pointerType;
+    }
+    lastInteractionType = type;
+  }
+
+  function onBufferInput(event) {
+    $timeout.cancel(timer);
+
+    onInput(event);
+    buffer = true;
+
+    timer = $timeout(function() {
+      buffer = false;
+    }, 1000);
+  }
+
+  body.on('keydown', onInput);
+  body.on(_mouseEvent, onInput);
+  body.on('mouseenter', onInput);
+  if ('ontouchstart' in document.documentElement) body.on('touchstart', onBufferInput);
+
+  /**
+   * Gets the last interaction type triggered by body.
+   * Possible values for return are `mouse`, `keyboard` and `touch`
+   * @returns {string}
+   */
+  this.getLastInteractionType = function() {
+    return lastInteractionType;
+  }
+}

src/core/services/interaction/interaction.spec.js

@@ -0,0 +1,26 @@
+describe("$mdInteraction", function() {
+  beforeEach(module('material.core'));
+
+  describe("last interaction type", function() {
+
+    it("imitates a basic keyboard interaction and checks it", inject(function($mdInteraction) {
+
+      var event = document.createEvent('Event');
+      event.keyCode = 37;
+      event.initEvent('keydown', false, true);
+      document.body.dispatchEvent(event);
+
+      expect($mdInteraction.getLastInteractionType()).toBe('keyboard');
+    }));
+
+    it("dispatches a mousedown event on the document body and checks it", inject(function($mdInteraction) {
+
+      var event = document.createEvent("MouseEvent");
+      event.initMouseEvent("mousedown", true, true, window, null, 0, 0, 0, 0, false, false, false, false, 0, null);
+      document.body.dispatchEvent(event);
+
+      expect($mdInteraction.getLastInteractionType()).toBe("mouse");
+    }));
+
+  });
+});