Skip to content

Commit

Permalink
fix(Grid): Fix a few mobile-browser issues
Browse files Browse the repository at this point in the history 
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).
  • Loading branch information
@c0bra
c0bra committed Oct 8, 2014
1 parent 3bc3f27 commit 4bb2d69
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 21 deletions.
6 changes: 3 additions & 3 deletions src/js/core/directives/ui-grid-column-menu.js
View file
Expand Up @@ -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;

Expand All @@ -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 });
}

};
Expand Down
8 changes: 3 additions & 5 deletions src/js/core/directives/ui-grid-header-cell.js
View file
Expand Up @@ -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));
Expand Down Expand Up @@ -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);
}
});
});
Expand Down Expand Up @@ -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);
Expand Down
28 changes: 17 additions & 11 deletions src/js/core/directives/ui-grid-menu.js
View file
Expand Up @@ -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 ){

/*
Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand All @@ -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);
});


Expand All @@ -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);
});


Expand Down
6 changes: 5 additions & 1 deletion src/js/core/directives/ui-grid-native-scrollbar.js
View file
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/js/core/directives/ui-grid-render-container.js
View file
Expand Up @@ -302,7 +302,7 @@
}, decelerateInterval);
}

// decelerate();
decelerate();
}

if (GridUtil.isTouchEnabled()) {
Expand Down

0 comments on commit 4bb2d69

Please sign in to comment.