Skip to content

Commit 382f0ae

Browse files
c0brac0bra
committed
fix(Grid): Alter mousewheel event handling
Used code from jquery-mousewheel to normalize wheel events. Also removed touch event handling since it should not be needed any more. Seems like scrolling on the Mac trackpad is much much nicer! These changes need to be refactored as gridUtil is kind of mess currently.
1 parent 933124a commit 382f0ae

File tree

2 files changed

+217
-151
lines changed

2 files changed

+217
-151
lines changed

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

+10-151
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,10 @@
120120
}
121121

122122
// Scroll the render container viewport when the mousewheel is used
123-
$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
124-
// use wheelDeltaY
125-
126-
var newEvent = gridUtil.normalizeWheelEvent(evt);
127-
123+
gridUtil.on.mousewheel($elm, function (event) {
128124
var scrollEvent = new ScrollEvent(grid, rowContainer, colContainer, ScrollEvent.Sources.RenderContainerMouseWheel);
129-
if (newEvent.deltaY !== 0) {
130-
var scrollYAmount = newEvent.deltaY * -120;
125+
if (event.deltaY !== 0) {
126+
var scrollYAmount = event.deltaY * -1 * event.deltaFactor;
131127

132128
// Get the scroll percentage
133129
var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / rowContainer.getVerticalScrollLength();
@@ -138,8 +134,8 @@
138134

139135
scrollEvent.y = { percentage: scrollYPercentage, pixels: scrollYAmount };
140136
}
141-
if (newEvent.deltaX !== 0) {
142-
var scrollXAmount = newEvent.deltaX * -120;
137+
if (event.deltaX !== 0) {
138+
var scrollXAmount = event.deltaX * -1 * event.deltaFactor;
143139

144140
// Get the scroll percentage
145141
var scrollLeft = gridUtil.normalizeScrollLeft(containerCtrl.viewport);
@@ -154,150 +150,13 @@
154150

155151
// todo: this isn't working when scrolling down. it works fine for up. tested on Chrome
156152
// Let the parent container scroll if the grid is already at the top/bottom
157-
if ((scrollEvent.y && scrollEvent.y.percentage !== 0 && scrollEvent.y.percentage !== 1 && containerCtrl.viewport[0].scrollTop !== 0 ) ||
158-
(scrollEvent.x && scrollEvent.x.percentage !== 0 && scrollEvent.x.percentage !== 1)) {
159-
evt.preventDefault();
160-
scrollEvent.fireThrottledScrollingEvent();
161-
}
162-
163-
});
164-
165-
var startY = 0,
166-
startX = 0,
167-
scrollTopStart = 0,
168-
scrollLeftStart = 0,
169-
directionY = 1,
170-
directionX = 1,
171-
moveStart;
172-
173-
function touchmove(event) {
174-
if (event.originalEvent) {
175-
event = event.originalEvent;
176-
}
177-
178-
var deltaX, deltaY, newX, newY;
179-
newX = event.targetTouches[0].screenX;
180-
newY = event.targetTouches[0].screenY;
181-
deltaX = -(newX - startX);
182-
deltaY = -(newY - startY);
183-
184-
directionY = (deltaY < 1) ? -1 : 1;
185-
directionX = (deltaX < 1) ? -1 : 1;
186-
187-
deltaY *= 2;
188-
deltaX *= 2;
189-
190-
var scrollEvent = new ScrollEvent(grid, rowContainer, colContainer, ScrollEvent.Sources.RenderContainerTouchMove);
191-
192-
if (deltaY !== 0) {
193-
var scrollYPercentage = (scrollTopStart + deltaY) / rowContainer.getVerticalScrollLength();
194-
195-
if (scrollYPercentage > 1) { scrollYPercentage = 1; }
196-
else if (scrollYPercentage < 0) { scrollYPercentage = 0; }
197-
198-
scrollEvent.y = { percentage: scrollYPercentage, pixels: deltaY };
199-
}
200-
if (deltaX !== 0) {
201-
var scrollXPercentage = (scrollLeftStart + deltaX) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
202-
203-
if (scrollXPercentage > 1) { scrollXPercentage = 1; }
204-
else if (scrollXPercentage < 0) { scrollXPercentage = 0; }
205-
206-
scrollEvent.x = { percentage: scrollXPercentage, pixels: deltaX };
207-
}
208-
209-
// Let the parent container scroll if the grid is already at the top/bottom
210-
if ((scrollEvent.y && scrollEvent.y.percentage !== 0 && scrollEvent.y.percentage !== 1) ||
211-
(scrollEvent.x && scrollEvent.x.percentage !== 0 && scrollEvent.x.percentage !== 1)) {
212-
event.preventDefault();
213-
}
214-
scrollEvent.fireScrollingEvent();
215-
}
216-
217-
function touchend(event) {
218-
if (event.originalEvent) {
219-
event = event.originalEvent;
153+
if ((scrollEvent.y && scrollEvent.y.percentage !== 0 && scrollEvent.y.percentage !== 1 && containerCtrl.viewport[0].scrollTop !== 0 ) ||
154+
(scrollEvent.x && scrollEvent.x.percentage !== 0 && scrollEvent.x.percentage !== 1)) {
155+
event.preventDefault();
220156
}
221157

222-
$document.unbind('touchmove', touchmove);
223-
$document.unbind('touchend', touchend);
224-
$document.unbind('touchcancel', touchend);
225-
226-
// Get the distance we moved on the Y axis
227-
var scrollTopEnd = containerCtrl.viewport[0].scrollTop;
228-
var scrollLeftEnd = containerCtrl.viewport[0].scrollTop;
229-
var deltaY = Math.abs(scrollTopEnd - scrollTopStart);
230-
var deltaX = Math.abs(scrollLeftEnd - scrollLeftStart);
231-
232-
// Get the duration it took to move this far
233-
var moveDuration = (new Date()) - moveStart;
234-
235-
// Scale the amount moved by the time it took to move it (i.e. quicker, longer moves == more scrolling after the move is over)
236-
var moveYScale = deltaY / moveDuration;
237-
var moveXScale = deltaX / moveDuration;
238-
239-
var decelerateInterval = 63; // 1/16th second
240-
var decelerateCount = 8; // == 1/2 second
241-
var scrollYLength = 120 * directionY * moveYScale;
242-
var scrollXLength = 120 * directionX * moveXScale;
243-
244-
//function decelerate() {
245-
// $timeout(function() {
246-
// var args = new ScrollEvent(grid, rowContainer, colContainer, ScrollEvent.Sources.RenderContainerTouchMove);
247-
//
248-
// if (scrollYLength !== 0) {
249-
// var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYLength) / rowContainer.getVerticalScrollLength();
250-
//
251-
// args.y = { percentage: scrollYPercentage, pixels: scrollYLength };
252-
// }
253-
//
254-
// if (scrollXLength !== 0) {
255-
// var scrollXPercentage = (containerCtrl.viewport[0].scrollLeft + scrollXLength) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
256-
// args.x = { percentage: scrollXPercentage, pixels: scrollXLength };
257-
// }
258-
//
259-
// uiGridCtrl.fireScrollingEvent(args);
260-
//
261-
// decelerateCount = decelerateCount -1;
262-
// scrollYLength = scrollYLength / 2;
263-
// scrollXLength = scrollXLength / 2;
264-
//
265-
// if (decelerateCount > 0) {
266-
// decelerate();
267-
// }
268-
// else {
269-
// uiGridCtrl.scrollbars.forEach(function (sbar) {
270-
// sbar.removeClass('ui-grid-scrollbar-visible');
271-
// sbar.removeClass('ui-grid-scrolling');
272-
// });
273-
// }
274-
// }, decelerateInterval);
275-
//}
276-
277-
// decelerate();
278-
}
279-
280-
if (gridUtil.isTouchEnabled()) {
281-
$elm.bind('touchstart', function (event) {
282-
if (event.originalEvent) {
283-
event = event.originalEvent;
284-
}
285-
286-
//uiGridCtrl.scrollbars.forEach(function (sbar) {
287-
// sbar.addClass('ui-grid-scrollbar-visible');
288-
// sbar.addClass('ui-grid-scrolling');
289-
//});
290-
291-
moveStart = new Date();
292-
startY = event.targetTouches[0].screenY;
293-
startX = event.targetTouches[0].screenX;
294-
scrollTopStart = containerCtrl.viewport[0].scrollTop;
295-
scrollLeftStart = containerCtrl.viewport[0].scrollLeft;
296-
297-
$document.on('touchmove', touchmove);
298-
$document.on('touchend touchcancel', touchend);
299-
});
300-
}
158+
scrollEvent.fireThrottledScrollingEvent();
159+
});
301160

302161
$elm.bind('$destroy', function() {
303162
$elm.unbind('keydown');

0 commit comments

Comments
 (0)