Skip to content

Commit 466f296

Browse files
zdrawkuzdrawku
authored
Merge pull request #8813 from IgniteUI/ddincheva/shiftWheel
ShiftKey + mouse wheel for horizontal scroll -- 11.1.x
2 parents 0921a1b + 15932bb commit 466f296

File tree

4 files changed

+129
-4
lines changed

4 files changed

+129
-4
lines changed

‎projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,55 @@ describe('Scroll Inertia Directive - Scrolling', () => {
129129
expect (() => scrollInertiaDir.onWheel(evt)).not.toThrow();
130130
});
131131

132+
133+
it('should change scroll left when shift + wheel is triggered' , () => {
134+
scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
135+
const evt = {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}};
136+
scrollInertiaDir.onWheel(evt);
137+
138+
expect(scrollContainerMock.scrollTop).toEqual(0);
139+
expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep);
140+
});
141+
142+
it('should be able to scroll to left/right when shift + wheel is triggered' , () => {
143+
scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
144+
let evt = {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}};
145+
scrollInertiaDir.onWheel(evt);
146+
147+
expect(scrollContainerMock.scrollTop).toEqual(0);
148+
expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep);
149+
150+
evt = {shiftKey: true, wheelDeltaY: 120, preventDefault: () => {}};
151+
scrollInertiaDir.onWheel(evt);
152+
153+
expect(scrollContainerMock.scrollTop).toEqual(0);
154+
expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
155+
});
156+
157+
it('should change scroll left when shift + wheel is called with with deltaY' , () => {
158+
scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
159+
const evt = {shiftKey: true, deltaY: 1, preventDefault: () => {}};
160+
scrollInertiaDir.onWheel(evt);
161+
162+
expect(scrollContainerMock.scrollTop).toEqual(0);
163+
expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
164+
});
165+
166+
it('should be able to scroll to left/right when shift + wheel is called with with deltaY' , () => {
167+
scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
168+
let evt = {shiftKey: true, deltaY: 1, preventDefault: () => {}};
169+
scrollInertiaDir.onWheel(evt);
170+
171+
expect(scrollContainerMock.scrollTop).toEqual(0);
172+
expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
173+
174+
evt = {shiftKey: true, deltaY: -1, preventDefault: () => {}};
175+
scrollInertiaDir.onWheel(evt);
176+
177+
expect(scrollContainerMock.scrollTop).toEqual(0);
178+
expect(scrollContainerMock.scrollLeft).toEqual(0);
179+
});
180+
132181
// Unit tests for touch events with inertia - Chrome, FireFox, Safari.
133182
it('should change scroll top for related scrollbar on touch start/move/end', fakeAsync(() => {
134183
let evt = {

‎projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Directive, Input, ElementRef, NgZone, OnInit, NgModule, OnDestroy } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3+
import { isIE } from '../../core/utils';
34

45
/**
56
* @hidden
@@ -104,6 +105,9 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
104105
if (evt.ctrlKey) {
105106
return;
106107
}
108+
if (evt.shiftKey && isIE()) {
109+
evt.preventDefault();
110+
}
107111
let scrollDeltaX;
108112
let scrollDeltaY;
109113
const scrollStep = this.wheelStep;
@@ -150,7 +154,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
150154
// Prevent navigating through pages when scrolling on Mac
151155
evt.preventDefault();
152156
}
153-
} else if (scrollDeltaY && this.IgxScrollInertiaDirection === 'vertical') {
157+
} else if (evt.shiftKey && scrollDeltaY && this.IgxScrollInertiaDirection === 'horizontal') {
158+
const step = this._startX + scrollDeltaY * scrollStep;
159+
this._scrollToX(step);
160+
} else if (!evt.shiftKey && scrollDeltaY && this.IgxScrollInertiaDirection === 'vertical') {
154161
this._scrollToY(
155162
this._startY + scrollDeltaY * scrollStep
156163
);

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { DataType } from '../../data-operations/data-util';
1616
import { GridTemplateStrings } from '../../test-utils/template-strings.spec';
1717
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
1818
import { BasicGridComponent } from '../../test-utils/grid-base-components.spec';
19-
import { wait } from '../../test-utils/ui-interactions.spec';
19+
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
2020
import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
2121
import { SortingDirection, ISortingExpression } from '../../data-operations/sorting-expression.interface';
2222
import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -657,6 +657,75 @@ describe('IgxGrid Component Tests #grid', () => {
657657
expect(row.cells.length).toEqual(4);
658658
}
659659
});
660+
661+
it('Should scroll horizontally when press shift + mouse wheel over grid headers', (async () => {
662+
const fix = TestBed.createComponent(IgxGridTestComponent);
663+
for (let i = 2; i < 100; i++) {
664+
fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
665+
}
666+
fix.componentInstance.columns[0].width = '400px';
667+
fix.componentInstance.columns[1].width = '400px';
668+
fix.componentInstance.columns.push(
669+
{ field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
670+
{ field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
671+
);
672+
fix.detectChanges();
673+
const grid = fix.componentInstance.grid;
674+
const initialScroll = grid.verticalScrollContainer.getScroll().scrollTop;
675+
const initialHorScroll = grid.headerContainer.getScroll().scrollLeft;
676+
677+
const displayContainer = grid.headerContainer.dc.instance._viewContainer.element.nativeElement;
678+
await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
679+
fix.detectChanges();
680+
await wait(16);
681+
682+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
683+
expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(initialHorScroll + 50);
684+
685+
await UIInteractions.simulateWheelEvent(displayContainer, 0, 240, true);
686+
fix.detectChanges();
687+
await wait(16);
688+
689+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
690+
expect(grid.headerContainer.getScroll().scrollLeft).toEqual(initialHorScroll);
691+
}));
692+
693+
694+
it('Should scroll horizontally when press shift + mouse wheel over grid data row', (async () => {
695+
const fix = TestBed.createComponent(IgxGridTestComponent);
696+
for (let i = 2; i < 100; i++) {
697+
fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
698+
}
699+
fix.componentInstance.columns[0].width = '400px';
700+
fix.componentInstance.columns[1].width = '400px';
701+
fix.componentInstance.columns.push(
702+
{ field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
703+
{ field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
704+
);
705+
fix.detectChanges();
706+
const grid = fix.componentInstance.grid;
707+
const initialScroll = grid.verticalScrollContainer.getScroll().scrollTop;
708+
const initialHorScroll = grid.rowList.first.virtDirRow.getScroll().scrollLeft;
709+
710+
const cell = grid.getCellByColumn(3, 'value');
711+
UIInteractions.simulateClickAndSelectEvent(cell);
712+
fix.detectChanges();
713+
714+
const displayContainer = grid.rowList.first.virtDirRow.dc.instance._viewContainer.element.nativeElement;
715+
await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
716+
fix.detectChanges();
717+
await wait(16);
718+
719+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
720+
expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(initialHorScroll + 50);
721+
722+
await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
723+
fix.detectChanges();
724+
await wait(16);
725+
726+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
727+
expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThanOrEqual(2 * (initialHorScroll + 50));
728+
}));
660729
});
661730

662731
describe('IgxGrid - default rendering for rows and columns', () => {

‎projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,8 +332,8 @@ export class UIInteractions {
332332
nativeElement.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer }));
333333
}
334334

335-
public static simulateWheelEvent(element, deltaX, deltaY) {
336-
const event = new WheelEvent('wheel', { deltaX: deltaX, deltaY: deltaY });
335+
public static simulateWheelEvent(element, deltaX, deltaY, shiftKey = false) {
336+
const event = new WheelEvent('wheel', { deltaX: deltaX, deltaY: deltaY, shiftKey: shiftKey });
337337
Object.defineProperty(event, 'wheelDeltaX', { value: deltaX });
338338
Object.defineProperty(event, 'wheelDeltaY', { value: deltaY });
339339

0 commit comments

Comments
 (0)