fix(gestures): fix the swipe and scrolling issues on touch devices (#10455)

Fixes #10187, #10145

Author: mohammadrafigh

src/components/swipe/swipe.js

@@ -82,11 +82,8 @@ function getDirective(name) {
 
   /* @ngInject */
   function DirectiveFactory($parse) {
-      return {restrict: 'A', link: postLink};
-
-    function postLink(scope, element, attr) {
-        element.css('touch-action', attr['mdSwipeTouchAction'] || 'none');
-
+      return { restrict: 'A', link: postLink };
+      function postLink(scope, element, attr) {
         var fn = $parse(attr[directiveName]);
         element.on(eventName, function(ev) {
           scope.$applyAsync(function() { fn(scope, { $event: ev }); });

src/components/swipe/swipe.scss

@@ -0,0 +1,7 @@
+[md-swipe-left], [md-swipe-right] {
+    touch-action : pan-y;
+}
+
+[md-swipe-up], [md-swipe-down] {
+    touch-action : pan-x;
+}

src/components/swipe/swipe.spec.js

@@ -159,7 +159,7 @@ function MdTabs ($$mdSvgRegistry) {
                       '\'md-disabled\':  tab.scope.disabled ' +
                   '}" ' +
                   'ng-disabled="tab.scope.disabled" ' +
-                  'md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-touch-action="pan-y" ' +
+                  'md-swipe-left="$mdTabsCtrl.nextPage()" ' +
                   'md-swipe-right="$mdTabsCtrl.previousPage()" ' +
                   'md-tabs-template="::tab.label" ' +
                   'md-scope="::tab.parent"></md-tab-item> ' +
@@ -183,7 +183,6 @@ function MdTabs ($$mdSvgRegistry) {
               'aria-labelledby="tab-item-{{::tab.id}}" ' +
               'md-swipe-left="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(1)" ' +
               'md-swipe-right="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(-1)" ' +
-              'md-swipe-touch-action="pan-y" ' +
               'ng-if="tab.hasContent" ' +
               'ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ' +
               'ng-class="{ ' +

src/components/tabs/js/tabsDirective.js

@@ -652,7 +652,9 @@ function attachToDocument( $mdGesture, $$MdGestureHandler ) {
     updatePointerState(ev, pointer);
     pointer.endTime = +Date.now();
 
-    runHandlers('end', ev);
+    if (ev.type !== 'pointercancel') {
+      runHandlers('end', ev);
+    }
 
     lastPointer = pointer;
     pointer = null;

src/core/services/gesture/gesture.js

@@ -83,7 +83,7 @@ describe('$mdGesture', function() {
       expect(endSpy1).toHaveBeenCalled();
     }));
 
-    it('gesture{down,move,up,cancel}', inject(function($document) {
+    it('gesture{down,move,up}', inject(function($document) {
       $document.triggerHandler({
         type: 'pointerdown',
         target: childEl[0]
@@ -106,7 +106,7 @@ describe('$mdGesture', function() {
       $document.triggerHandler('pointermove');
       expect(moveSpy1).toHaveBeenCalled();
       $document.triggerHandler('pointercancel');
-      expect(endSpy1).toHaveBeenCalled();
+      expect(endSpy1).not.toHaveBeenCalled();
     }));
 
     it('mouse{down,move,up,leave}', inject(function($document) {