fix(Grid): Fix a few mobile-browser issues

1. Allow 0-sized scrollbars, which pertains to Android and iOS in my testing. The scrollbar simply doesn't get displayed. This prevents their weird horizontal offset issue. The downside is that there's no scrollbar but so far I can't find a way around it. 2. Fix header cell touch events. Sorting by touch should work, as well as showing the menu by long-clicking on the header cell. What still remains is all the other touch events (row selection, header cell menu button, etc).
angular-ui · Oct 8, 2014 · 4bb2d69 · 4bb2d69
1 parent 3bc3f27
commit 4bb2d69
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/src/js/core/directives/ui-grid-column-menu.js b/src/js/core/directives/ui-grid-column-menu.js
@@ -355,7 +355,7 @@ function ($log, $timeout, gridUtil, uiGridConstants, uiGridColumnMenuService) {
        * @param {GridCol} column the column we want to position below
        * @param {element} $columnElement the column element we want to position below
        */
-      $scope.showMenu = function(column, $columnElement) {
+      $scope.showMenu = function(column, $columnElement, event) {
         // Swap to this column
         $scope.col = column;
 
@@ -369,14 +369,14 @@ function ($log, $timeout, gridUtil, uiGridConstants, uiGridColumnMenuService) {
           $scope.colElementPosition = colElementPosition;
           $scope.hideThenShow = true;
 
-          $scope.$broadcast('hide-menu');
+          $scope.$broadcast('hide-menu', { originalEvent: event });
         } else {
           self.shown = $scope.menuShown = true;
           uiGridColumnMenuService.repositionMenu( $scope, column, colElementPosition, $elm, $columnElement );
 
           $scope.colElement = $columnElement;
           $scope.colElementPosition = colElementPosition;
-          $scope.$broadcast('show-menu');
+          $scope.$broadcast('show-menu', { originalEvent: event });
         } 
 
       };

diff --git a/src/js/core/directives/ui-grid-header-cell.js b/src/js/core/directives/ui-grid-header-cell.js
@@ -28,8 +28,6 @@
 
             $scope.grid = uiGridCtrl.grid;
 
-            $log.debug('id', renderContainerCtrl.containerId);
-
             $scope.renderContainer = uiGridCtrl.grid.renderContainers[renderContainerCtrl.containerId];
 
             $elm.addClass($scope.col.getColClass(false));
@@ -94,8 +92,8 @@
               cancelMousedownTimeout = $timeout(function() { }, mousedownTimeout);
 
               cancelMousedownTimeout.then(function () {
-                if ( $scope.col.colDef && !$scope.col.colDef.disableColumnMenu ){
-                  uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm);
+                if ($scope.col.colDef && !$scope.col.colDef.disableColumnMenu) {
+                  uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm, event);
                 }
               });
             });
@@ -141,7 +139,7 @@
 
             // If this column is sortable, add a click event handler
             if ($scope.sortable) {
-              $contentsElm.on('click', function(evt) {
+              $contentsElm.on('click touchend', function(evt) {
                 evt.stopPropagation();
 
                 $timeout.cancel(cancelMousedownTimeout);

diff --git a/src/js/core/directives/ui-grid-menu.js b/src/js/core/directives/ui-grid-menu.js
@@ -48,7 +48,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
       var $animate;
 
     // *** Show/Hide functions ******
-      self.showMenu = $scope.showMenu = function() {
+      self.showMenu = $scope.showMenu = function(event, args) {
         if ( !$scope.shown ){
 
           /*
@@ -78,7 +78,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
               $scope.$emit('menu-shown');
             }
           });
-        } else if ( !$scope.shownMid ){
+        } else if ( !$scope.shownMid ) {
           // we're probably doing a hide then show, so we don't need to wait for ng-if
           menuMid = $elm[0].querySelectorAll( '.ui-grid-menu-mid' );
           $animate = gridUtil.enableAnimations(menuMid);
@@ -93,17 +93,22 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
           }
         }
 
+        var docEventType = 'click';
+        if (args && args.originalEvent && args.originalEvent.type && args.originalEvent.type === 'touchstart') {
+          docEventType = args.originalEvent.type;
+        }
+
         // Turn off an existing document click handler
-        angular.element(document).off('click', applyHideMenu);
+        angular.element(document).off('click touchstart', applyHideMenu);
 
         // Turn on the document click handler, but in a timeout so it doesn't apply to THIS click if there is one
         $timeout(function() {
-          angular.element(document).on('click', applyHideMenu);
+          angular.element(document).on(docEventType, applyHideMenu);
         });
       };
 
 
-      self.hideMenu = $scope.hideMenu = function() {
+      self.hideMenu = $scope.hideMenu = function(event, args) {
         if ( $scope.shown ){
           /*
            * In order to animate cleanly we animate the addition of ng-hide, then use a $timeout to
@@ -129,15 +134,16 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
             $scope.shown = false;
           }
         }
-        angular.element(document).off('click', applyHideMenu);
+
+        angular.element(document).off('click touchstart', applyHideMenu);
       };
 
-      $scope.$on('hide-menu', function () {
-        $scope.hideMenu();
+      $scope.$on('hide-menu', function (event, args) {
+        $scope.hideMenu(event, args);
       });
 
-      $scope.$on('show-menu', function () {
-        $scope.showMenu();
+      $scope.$on('show-menu', function (event, args) {
+        $scope.showMenu(event, args);
       });
 
 
@@ -157,7 +163,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
       }
 
       $scope.$on('$destroy', function () {
-        angular.element(document).off('click', applyHideMenu);
+        angular.element(document).off('click touchstart', applyHideMenu);
       });
 
 

diff --git a/src/js/core/directives/ui-grid-native-scrollbar.js b/src/js/core/directives/ui-grid-native-scrollbar.js
@@ -4,7 +4,11 @@
   angular.module('ui.grid').directive('uiGridNativeScrollbar', ['$log', '$timeout', '$document', 'uiGridConstants', 'gridUtil',
     function ($log, $timeout, $document, uiGridConstants, gridUtil) {
     var scrollBarWidth = gridUtil.getScrollbarWidth();
-    scrollBarWidth = scrollBarWidth > 0 ? scrollBarWidth : 17;
+
+    // scrollBarWidth = scrollBarWidth > 0 ? scrollBarWidth : 17;
+    if (!angular.isNumber(scrollBarWidth)) {
+      scrollBarWidth = 0;
+    }
 
     // If the browser is IE, add 1px to the scrollbar container, otherwise scroll events won't work right (in IE11 at least)
     var browser = gridUtil.detectBrowser();

diff --git a/src/js/core/directives/ui-grid-render-container.js b/src/js/core/directives/ui-grid-render-container.js
@@ -302,7 +302,7 @@
                 }, decelerateInterval);
               }
 
-              // decelerate();
+              decelerate();
             }
 
             if (GridUtil.isTouchEnabled()) {