From 4bb2d6996aad6463155bcd01b1521441cab45270 Mon Sep 17 00:00:00 2001 From: c0bra Date: Wed, 8 Oct 2014 11:25:44 -0500 Subject: [PATCH] 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). --- src/js/core/directives/ui-grid-column-menu.js | 6 ++-- src/js/core/directives/ui-grid-header-cell.js | 8 ++---- src/js/core/directives/ui-grid-menu.js | 28 +++++++++++-------- .../directives/ui-grid-native-scrollbar.js | 6 +++- .../directives/ui-grid-render-container.js | 2 +- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/src/js/core/directives/ui-grid-column-menu.js b/src/js/core/directives/ui-grid-column-menu.js index e100cf9546..5c038e39cd 100644 --- 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 index c6018a1efc..6fd0bf046f 100644 --- 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 index 8e9f6c3ebb..ab042343cb 100644 --- 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 index 7fd137f4a4..fc672485e7 100644 --- 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 index 0628fcd573..632fb5d748 100644 --- 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()) {