Skip to content

Commit

Permalink
feat(ui-grid-custom-scroller): Initial commit of custom scroller code.
Browse files Browse the repository at this point in the history
  • Loading branch information
Portugal, Marcelo authored and Portugal, Marcelo committed Dec 9, 2016
1 parent 96ca49f commit db4cad4
Show file tree
Hide file tree
Showing 9 changed files with 747 additions and 1 deletion.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.idea/
tmp/
dist/
node_modules/
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# ui-grid-custom-scroller
The custom scrolling feature takes over the default scrolling logic in order to ensure that grid scrolling works without a lag on devices. To enable, you must include the 'ui.grid.customScrolling' module and you must include the ui-grid-custom-scrolling directive on your grid element.
A custom scroller for UI-Grid that takes over default scrolling logic in order to ensure that grid scrolling works without a lag on devices.
46 changes: 46 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"name": "ui-grid-custom-scroller",
"version": "1.0.0",
"description": "A custom scroller for UI-Grid that takes over default scrolling logic on touch events.",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/mportuga/ui-grid-custom-scroller.git"
},
"keywords": [
"angular",
"scroller",
"ui-grid"
],
"author": "Marcelo S. Portugal <marcelo.quarion@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/mportuga/ui-grid-custom-scroller/issues"
},
"homepage": "https://github.com/mportuga/ui-grid-custom-scroller#readme",
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
},
"ghooks": {
"commit-msg": "validate-commit-msg",
"post-merge": "npm install",
"post-rewrite": "npm install"
}
},
"dependencies": {
"angular": "^1.5.0",
"angular-ui-grid": "^4.0.0"
},
"devDependencies": {
"angular-mocks": "^1.5.0",
"cz-conventional-changelog": "^1.2.0",
"validate-commit-msg": "^2.8.2"
}
}
42 changes: 42 additions & 0 deletions src/ui-grid-custom-scroller.constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
(function() {
'use strict';

/**
* @ngdoc object
* @name ui.grid.customScroller.constant:uiGridScrollerConstants
*
* @description Constants for use with the uiGridScroller
*/
angular
.module('ui.grid.customScroller')
.constant('uiGridScrollerConstants', {
/**
* @ngdoc object
* @name deceleration
* @propertyOf ui.grid.customScroller.constant:uiGridScrollerConstants
* @description Used in {@link ui.grid.customScroller.service:uiGridScroller#momentum uiGridScroller.momentum}
* to calculates current momentum of the scrolling.
*/
deceleration: 0.0007,

/**
* @ngdoc object
* @name scrollType
* @propertyOf ui.grid.customScroller.constant:uiGridScrollerConstants
* @description Used in {@link ui.grid.customScroller.service:uiGridScroller uiGridScroller},
* to the type of scroll event currently in progress
*
* Available options are:
* - `uiGridScrollerConstants.scrollEvent.NONE` - set when no scroll events are being triggered
* - `uiGridScrollerConstants.scrollEvent.TOUCHABLE` - set when touchstart, touchmove or touchend are triggered
* - `uiGridScrollerConstants.scrollEvent.MOUSE` - set when mousedown, mousemove or mouseup are triggered
* - `uiGridScrollerConstants.scrollEvent.POINTER` - set when pointerdown, pointermove or pointerup are triggered
*/
scrollType: {
NONE: 0,
TOUCHABLE: 1,
MOUSE: 2,
POINTER: 3
}
});
})();
68 changes: 68 additions & 0 deletions src/ui-grid-custom-scroller.directive.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
(function() {
'use strict';

/**
* @ngdoc directive
* @name ui.grid.customScrolling.directive:uiGridCustomScrolling
* @element div
* @restrict EA
*
* @description Updates the grid to use the gridScroller instead of the jquery scroll event
*
* @example
<example module="app">
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.customScrolling']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name:'id', width:50, enablePinning:false },
{ name:'name', width:100, pinnedLeft:true },
{ name:'age', width:100, pinnedRight:true },
{ name:'address.street', width:150 },
{ name:'address.city', width:150 },
{ name:'address.state', width:50 },
{ name:'address.zip', width:50 },
{ name:'company', width:100 },
{ name:'email', width:100 },
{ name:'phone', width:200 },
{ name:'about', width:300 },
{ name:'friends[0].name', displayName:'1st friend', width:150 },
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
{ name:'friends[2].name', displayName:'3rd friend', width:150 },
];
$http.get('/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid" ui-grid-pinning ui-grid-custom-scrolling></div>
</div>
</file>
</example>
*/
angular
.module('ui.grid.customScroller')
.directive('uiGridCustomScroller', ['uiGridScroller',
function(uiGridScroller) {
return {
restrict: 'A',
require: 'uiGrid',
scope: false,
compile: function() {
return {
pre: function($scope, $elm, $attrs, uiGridCtrl) {
// initializes custom scroller to be the gridScroller when options exist
if (uiGridCtrl.grid && uiGridCtrl.grid.options) {
uiGridCtrl.grid.options.customScroller = uiGridScroller;
}
},
post: angular.noop
};
}
};
}]);
})();
Loading

0 comments on commit db4cad4

Please sign in to comment.