Skip to content

Commit 4bb2d69

Browse files
committed
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).
1 parent 3bc3f27 commit 4bb2d69

File tree

5 files changed

+29
-21
lines changed

5 files changed

+29
-21
lines changed

src/js/core/directives/ui-grid-column-menu.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ function ($log, $timeout, gridUtil, uiGridConstants, uiGridColumnMenuService) {
355355
* @param {GridCol} column the column we want to position below
356356
* @param {element} $columnElement the column element we want to position below
357357
*/
358-
$scope.showMenu = function(column, $columnElement) {
358+
$scope.showMenu = function(column, $columnElement, event) {
359359
// Swap to this column
360360
$scope.col = column;
361361

@@ -369,14 +369,14 @@ function ($log, $timeout, gridUtil, uiGridConstants, uiGridColumnMenuService) {
369369
$scope.colElementPosition = colElementPosition;
370370
$scope.hideThenShow = true;
371371

372-
$scope.$broadcast('hide-menu');
372+
$scope.$broadcast('hide-menu', { originalEvent: event });
373373
} else {
374374
self.shown = $scope.menuShown = true;
375375
uiGridColumnMenuService.repositionMenu( $scope, column, colElementPosition, $elm, $columnElement );
376376

377377
$scope.colElement = $columnElement;
378378
$scope.colElementPosition = colElementPosition;
379-
$scope.$broadcast('show-menu');
379+
$scope.$broadcast('show-menu', { originalEvent: event });
380380
}
381381

382382
};

src/js/core/directives/ui-grid-header-cell.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828

2929
$scope.grid = uiGridCtrl.grid;
3030

31-
$log.debug('id', renderContainerCtrl.containerId);
32-
3331
$scope.renderContainer = uiGridCtrl.grid.renderContainers[renderContainerCtrl.containerId];
3432

3533
$elm.addClass($scope.col.getColClass(false));
@@ -94,8 +92,8 @@
9492
cancelMousedownTimeout = $timeout(function() { }, mousedownTimeout);
9593

9694
cancelMousedownTimeout.then(function () {
97-
if ( $scope.col.colDef && !$scope.col.colDef.disableColumnMenu ){
98-
uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm);
95+
if ($scope.col.colDef && !$scope.col.colDef.disableColumnMenu) {
96+
uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm, event);
9997
}
10098
});
10199
});
@@ -141,7 +139,7 @@
141139

142140
// If this column is sortable, add a click event handler
143141
if ($scope.sortable) {
144-
$contentsElm.on('click', function(evt) {
142+
$contentsElm.on('click touchend', function(evt) {
145143
evt.stopPropagation();
146144

147145
$timeout.cancel(cancelMousedownTimeout);

src/js/core/directives/ui-grid-menu.js

+17-11
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
4848
var $animate;
4949

5050
// *** Show/Hide functions ******
51-
self.showMenu = $scope.showMenu = function() {
51+
self.showMenu = $scope.showMenu = function(event, args) {
5252
if ( !$scope.shown ){
5353

5454
/*
@@ -78,7 +78,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
7878
$scope.$emit('menu-shown');
7979
}
8080
});
81-
} else if ( !$scope.shownMid ){
81+
} else if ( !$scope.shownMid ) {
8282
// we're probably doing a hide then show, so we don't need to wait for ng-if
8383
menuMid = $elm[0].querySelectorAll( '.ui-grid-menu-mid' );
8484
$animate = gridUtil.enableAnimations(menuMid);
@@ -93,17 +93,22 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
9393
}
9494
}
9595

96+
var docEventType = 'click';
97+
if (args && args.originalEvent && args.originalEvent.type && args.originalEvent.type === 'touchstart') {
98+
docEventType = args.originalEvent.type;
99+
}
100+
96101
// Turn off an existing document click handler
97-
angular.element(document).off('click', applyHideMenu);
102+
angular.element(document).off('click touchstart', applyHideMenu);
98103

99104
// Turn on the document click handler, but in a timeout so it doesn't apply to THIS click if there is one
100105
$timeout(function() {
101-
angular.element(document).on('click', applyHideMenu);
106+
angular.element(document).on(docEventType, applyHideMenu);
102107
});
103108
};
104109

105110

106-
self.hideMenu = $scope.hideMenu = function() {
111+
self.hideMenu = $scope.hideMenu = function(event, args) {
107112
if ( $scope.shown ){
108113
/*
109114
* 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
129134
$scope.shown = false;
130135
}
131136
}
132-
angular.element(document).off('click', applyHideMenu);
137+
138+
angular.element(document).off('click touchstart', applyHideMenu);
133139
};
134140

135-
$scope.$on('hide-menu', function () {
136-
$scope.hideMenu();
141+
$scope.$on('hide-menu', function (event, args) {
142+
$scope.hideMenu(event, args);
137143
});
138144

139-
$scope.$on('show-menu', function () {
140-
$scope.showMenu();
145+
$scope.$on('show-menu', function (event, args) {
146+
$scope.showMenu(event, args);
141147
});
142148

143149

@@ -157,7 +163,7 @@ function ($log, $compile, $timeout, $window, $document, gridUtil, uiGridConstant
157163
}
158164

159165
$scope.$on('$destroy', function () {
160-
angular.element(document).off('click', applyHideMenu);
166+
angular.element(document).off('click touchstart', applyHideMenu);
161167
});
162168

163169

src/js/core/directives/ui-grid-native-scrollbar.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@
44
angular.module('ui.grid').directive('uiGridNativeScrollbar', ['$log', '$timeout', '$document', 'uiGridConstants', 'gridUtil',
55
function ($log, $timeout, $document, uiGridConstants, gridUtil) {
66
var scrollBarWidth = gridUtil.getScrollbarWidth();
7-
scrollBarWidth = scrollBarWidth > 0 ? scrollBarWidth : 17;
7+
8+
// scrollBarWidth = scrollBarWidth > 0 ? scrollBarWidth : 17;
9+
if (!angular.isNumber(scrollBarWidth)) {
10+
scrollBarWidth = 0;
11+
}
812

913
// If the browser is IE, add 1px to the scrollbar container, otherwise scroll events won't work right (in IE11 at least)
1014
var browser = gridUtil.detectBrowser();

src/js/core/directives/ui-grid-render-container.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@
302302
}, decelerateInterval);
303303
}
304304

305-
// decelerate();
305+
decelerate();
306306
}
307307

308308
if (GridUtil.isTouchEnabled()) {

0 commit comments

Comments
 (0)