Skip to content

Commit 9bac3bc

Browse files
dkamburovdkamburov
authored
Merge branch 'master' into pivot-grid-master
2 parents b61024d + afeb811 commit 9bac3bc

File tree

6 files changed

+71
-29
lines changed

6 files changed

+71
-29
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ All notable changes for each version of this project will be documented in this
3333
<igx-column field="Age"></igx-column>
3434
</igx-grid>
3535
```
36+
- Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
3637

3738
## 13.0.5
3839

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
138138
scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
139139
}
140140

141+
if (evt.composedPath && this.didChildScroll(evt, scrollDeltaX, scrollDeltaY)) {
142+
return;
143+
}
144+
141145
if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
142146
const nextLeft = this._startX + scrollDeltaX * scrollStep;
143147
if (!smoothing) {
@@ -186,6 +190,36 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
186190
}
187191
}
188192

193+
/**
194+
* @hidden
195+
* Checks if the wheel event would have scrolled an element under the display container
196+
* in DOM tree so that it can correctly be ignored until that element can no longer be scrolled.
197+
*/
198+
protected didChildScroll(evt, scrollDeltaX, scrollDeltaY): boolean {
199+
const path = evt.composedPath();
200+
let i = 0;
201+
while (i < path.length && path[i].localName !== 'igx-display-container') {
202+
const e = path[i++];
203+
if (e.scrollHeight > e.clientHeight) {
204+
if (scrollDeltaY > 0 && e.scrollHeight - Math.abs(Math.round(e.scrollTop)) !== e.clientHeight) {
205+
return true;
206+
}
207+
if (scrollDeltaY < 0 && e.scrollTop !== 0) {
208+
return true;
209+
}
210+
}
211+
if (e.scrollWidth > e.clientWidth) {
212+
if (scrollDeltaX > 0 && e.scrollWidth - Math.abs(Math.round(e.scrollLeft)) !== e.clientWidth) {
213+
return true;
214+
}
215+
if (scrollDeltaX < 0 && e.scrollLeft !== 0) {
216+
return true;
217+
}
218+
}
219+
}
220+
return false;
221+
}
222+
189223
/**
190224
* @hidden
191225
* Function that is called the first moment we start interacting with the content on a touch device

‎projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1212,17 +1212,18 @@ describe('igxOverlay', () => {
12121212
spyOn(scrollStrat, 'attach').and.callThrough();
12131213
spyOn(scrollStrat, 'detach').and.callThrough();
12141214
const scrollSpy = spyOn<any>(scrollStrat, 'onScroll').and.callThrough();
1215-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1215+
const overlayId = overlay.attach(SimpleDynamicComponent, overlaySettings);
1216+
overlay.show(overlayId);
12161217
tick();
12171218

12181219
expect(scrollStrat.attach).toHaveBeenCalledTimes(1);
12191220
expect(scrollStrat.initialize).toHaveBeenCalledTimes(1);
12201221
expect(scrollStrat.detach).toHaveBeenCalledTimes(0);
1221-
document.dispatchEvent(new Event('scroll'));
1222+
document.documentElement.dispatchEvent(new Event('scroll'));
12221223
expect(scrollSpy).toHaveBeenCalledTimes(1);
12231224

1224-
overlay.hide('0');
1225-
overlay.detach('0');
1225+
overlay.hide(overlayId);
1226+
overlay.detach(overlayId);
12261227
tick();
12271228
expect(scrollStrat.detach).toHaveBeenCalledTimes(1);
12281229
}));
@@ -1258,7 +1259,7 @@ describe('igxOverlay', () => {
12581259
expect(scrollStrat.attach).toHaveBeenCalledTimes(1);
12591260
expect(scrollStrat.initialize).toHaveBeenCalledTimes(1);
12601261
expect(scrollStrat.detach).toHaveBeenCalledTimes(0);
1261-
document.dispatchEvent(new Event('scroll'));
1262+
document.documentElement.dispatchEvent(new Event('scroll'));
12621263
expect(scrollSpy).toHaveBeenCalledTimes(1);
12631264
overlay.hide('0');
12641265
overlay.detach('0');
@@ -1299,7 +1300,7 @@ describe('igxOverlay', () => {
12991300
expect(scrollSpy).toHaveBeenCalledTimes(1);
13001301
expect(overlay.reposition).not.toHaveBeenCalled();
13011302

1302-
document.dispatchEvent(new Event('scroll'));
1303+
document.documentElement.dispatchEvent(new Event('scroll'));
13031304
expect(scrollSpy).toHaveBeenCalledTimes(2);
13041305
expect(overlay.reposition).toHaveBeenCalledTimes(1);
13051306
expect(overlay.reposition).toHaveBeenCalledWith(id);
@@ -1795,12 +1796,12 @@ describe('igxOverlay', () => {
17951796
expect(overlayChildPosition.y).toEqual(0);
17961797
expect(buttonElement.getBoundingClientRect().y).toEqual(0);
17971798

1798-
document.dispatchEvent(new Event('scroll'));
1799+
document.documentElement.dispatchEvent(new Event('scroll'));
17991800
tick();
18001801
expect(document.documentElement.scrollTop).toEqual(0);
18011802

18021803
document.documentElement.scrollTop += 25;
1803-
document.dispatchEvent(new Event('scroll'));
1804+
document.documentElement.dispatchEvent(new Event('scroll'));
18041805
tick();
18051806
expect(document.documentElement.scrollTop).toEqual(25);
18061807
contentElement = (fixture.nativeElement as HTMLElement)
@@ -1810,7 +1811,7 @@ describe('igxOverlay', () => {
18101811
expect(buttonElement.getBoundingClientRect().y).toEqual(-25);
18111812

18121813
document.documentElement.scrollTop += 500;
1813-
document.dispatchEvent(new Event('scroll'));
1814+
document.documentElement.dispatchEvent(new Event('scroll'));
18141815
tick();
18151816
contentElement = (fixture.nativeElement as HTMLElement)
18161817
.parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
@@ -2374,18 +2375,21 @@ describe('igxOverlay', () => {
23742375

23752376
const scrollSpy = spyOn<any>(scrollStrategy, 'onScroll').and.callThrough();
23762377

2377-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
2378+
const overlayId = overlay.attach(SimpleDynamicComponent, overlaySettings);
2379+
overlay.show(overlayId);
23782380
tick();
23792381
expect(scrollStrategy.initialize).toHaveBeenCalledTimes(1);
23802382
expect(scrollStrategy.attach).toHaveBeenCalledTimes(1);
23812383
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
23822384
expect(overlay.hide).toHaveBeenCalledTimes(0);
23832385
document.documentElement.scrollTop += scrollTolerance;
2384-
document.dispatchEvent(new Event('scroll'));
2386+
document.documentElement.dispatchEvent(new Event('scroll'));
23852387
tick();
23862388
expect(scrollSpy).toHaveBeenCalledTimes(1);
23872389
expect(overlay.hide).toHaveBeenCalledTimes(0);
23882390
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
2391+
2392+
overlay.detach(overlayId);
23892393
}));
23902394

23912395
it('Should persist the component open state when scrolling and absolute scroll strategy is used.', fakeAsync(() => {
@@ -2414,7 +2418,7 @@ describe('igxOverlay', () => {
24142418
expect(scrollStrategy.attach).toHaveBeenCalledTimes(1);
24152419

24162420
document.documentElement.scrollTop += scrollTolerance;
2417-
document.dispatchEvent(new Event('scroll'));
2421+
document.documentElement.dispatchEvent(new Event('scroll'));
24182422
tick();
24192423
expect(scrollSpy).toHaveBeenCalledTimes(1);
24202424
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
@@ -2858,18 +2862,21 @@ describe('igxOverlay', () => {
28582862

28592863
const scrollSpy = spyOn<any>(scrollStrategy, 'onScroll').and.callThrough();
28602864

2861-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
2865+
const overlayId = overlay.attach(SimpleDynamicComponent, overlaySettings);
2866+
overlay.show(overlayId);
28622867
tick();
28632868
expect(scrollStrategy.initialize).toHaveBeenCalledTimes(1);
28642869
expect(scrollStrategy.attach).toHaveBeenCalledTimes(1);
28652870
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
28662871
expect(overlay.hide).toHaveBeenCalledTimes(0);
28672872
document.documentElement.scrollTop += scrollTolerance;
2868-
document.dispatchEvent(new Event('scroll'));
2873+
document.documentElement.dispatchEvent(new Event('scroll'));
28692874
tick();
28702875
expect(scrollSpy).toHaveBeenCalledTimes(1);
28712876
expect(overlay.hide).toHaveBeenCalledTimes(0);
28722877
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
2878+
2879+
overlay.detach(overlayId);
28732880
}));
28742881

28752882
it('Should persist the component open state when scrolling and absolute scroll strategy is used.', fakeAsync(() => {
@@ -2898,7 +2905,7 @@ describe('igxOverlay', () => {
28982905
expect(scrollStrategy.attach).toHaveBeenCalledTimes(1);
28992906

29002907
document.documentElement.scrollTop += scrollTolerance;
2901-
document.dispatchEvent(new Event('scroll'));
2908+
document.documentElement.dispatchEvent(new Event('scroll'));
29022909
tick();
29032910
expect(scrollSpy).toHaveBeenCalledTimes(1);
29042911
expect(scrollStrategy.detach).toHaveBeenCalledTimes(0);
@@ -3273,7 +3280,7 @@ describe('igxOverlay', () => {
32733280

32743281
document.documentElement.scrollTop = 100;
32753282
document.documentElement.scrollLeft = 50;
3276-
document.dispatchEvent(new Event('scroll'));
3283+
document.documentElement.dispatchEvent(new Event('scroll'));
32773284
tick();
32783285

32793286
expect(componentRect).toEqual(componentElement.getBoundingClientRect());
@@ -3285,7 +3292,7 @@ describe('igxOverlay', () => {
32853292
it('Should retain the component state when scrolling and block scroll strategy is used.', fakeAsync(async () => {
32863293
TestBed.overrideComponent(EmptyPageComponent, {
32873294
set: {
3288-
styles: [`button { position: absolute, bottom: -2000px; } `]
3295+
styles: [`button { position: absolute; bottom: -2000px; } `]
32893296
}
32903297
});
32913298
await TestBed.compileComponents();
@@ -3305,17 +3312,17 @@ describe('igxOverlay', () => {
33053312
overlay.show(overlayId);
33063313
tick();
33073314
expect(document.documentElement.scrollTop).toEqual(0);
3308-
document.dispatchEvent(new Event('scroll'));
3315+
document.documentElement.dispatchEvent(new Event('scroll'));
33093316
tick();
33103317
expect(document.documentElement.scrollTop).toEqual(0);
33113318

33123319
document.documentElement.scrollTop += 25;
3313-
document.dispatchEvent(new Event('scroll'));
3320+
document.documentElement.dispatchEvent(new Event('scroll'));
33143321
tick();
33153322
expect(document.documentElement.scrollTop).toEqual(0);
33163323

33173324
document.documentElement.scrollTop += 1000;
3318-
document.dispatchEvent(new Event('scroll'));
3325+
document.documentElement.dispatchEvent(new Event('scroll'));
33193326
tick();
33203327

33213328
const wrapperElement = (fixture.nativeElement as HTMLElement)
@@ -3695,7 +3702,7 @@ describe('igxOverlay', () => {
36953702

36963703
document.documentElement.scrollTop = 100;
36973704
document.documentElement.scrollLeft = 50;
3698-
document.dispatchEvent(new Event('scroll'));
3705+
document.documentElement.dispatchEvent(new Event('scroll'));
36993706
tick();
37003707

37013708
expect(componentRect).toEqual(componentElement.getBoundingClientRect());
@@ -3733,7 +3740,7 @@ describe('igxOverlay', () => {
37333740

37343741
document.documentElement.scrollTop = 40;
37353742
document.documentElement.scrollLeft = 30;
3736-
document.dispatchEvent(new Event('scroll'));
3743+
document.documentElement.dispatchEvent(new Event('scroll'));
37373744
tick();
37383745

37393746
expect(componentRect).toEqual(componentElement.getBoundingClientRect());
@@ -3818,7 +3825,7 @@ describe('igxOverlay', () => {
38183825
expect(document.documentElement.scrollTop).toEqual(0);
38193826

38203827
document.documentElement.scrollTop += scrollTolerance;
3821-
document.dispatchEvent(new Event('scroll'));
3828+
document.documentElement.dispatchEvent(new Event('scroll'));
38223829
tick();
38233830
expect(document.documentElement.scrollTop).toEqual(scrollTolerance);
38243831
const wrapperElement = (fixture.nativeElement as HTMLElement)
@@ -3905,7 +3912,7 @@ describe('igxOverlay', () => {
39053912
const componentRect = componentElement.getBoundingClientRect();
39063913

39073914
document.documentElement.scrollTop += scrollTolerance;
3908-
document.dispatchEvent(new Event('scroll'));
3915+
document.documentElement.dispatchEvent(new Event('scroll'));
39093916
tick();
39103917
expect(document.documentElement.scrollTop).toEqual(scrollTolerance);
39113918
expect(document.getElementsByClassName(CLASS_OVERLAY_WRAPPER).length).toEqual(1);
@@ -3946,7 +3953,7 @@ describe('igxOverlay', () => {
39463953
const componentRect = componentElement.getBoundingClientRect();
39473954

39483955
document.documentElement.scrollTop += scrollTolerance;
3949-
document.dispatchEvent(new Event('scroll'));
3956+
document.documentElement.dispatchEvent(new Event('scroll'));
39503957
tick();
39513958
const newElementRect = componentElement.getBoundingClientRect();
39523959
expect(document.documentElement.scrollTop).toEqual(scrollTolerance);

‎src/app/list-panning/list-panning.sample.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h4 class="sample-title">Swipe left or right to perform action</h4>
1515
<igx-avatar igxListThumbnail [src]="item.avatar" [roundShape]="true"></igx-avatar>
1616
<p igxListLineTitle>{{item.text}}</p>
1717
<span igxListLineSubTitle>{{item.phone}}</span>
18-
<igx-icon igxListAction [color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
18+
<igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
1919
</igx-list-item>
2020
</igx-list>
2121
<igx-toast #toast></igx-toast>
@@ -37,7 +37,7 @@ <h4 class="sample-title">Swipe left or right to perform action</h4>
3737
<igx-avatar igxListThumbnail [src]="item.avatar" [roundShape]="true"></igx-avatar>
3838
<p igxListLineTitle>{{item.text}}</p>
3939
<span igxListLineSubTitle>{{item.phone}}</span>
40-
<igx-icon igxListAction [color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
40+
<igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
4141
</igx-list-item>
4242
</igx-list>
4343
<igx-toast #toast></igx-toast>

‎src/app/list-performance/list-performance.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h4 class="sample-title">Performance sample</h4>
1818
<igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *igxFor="let item of data | igxFilter: fo1; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '56px'">
1919
<igx-avatar igxListThumbnail [src]="item.avatar" [roundShape]="true"></igx-avatar>
2020
<span igxListLine igxListLineTitle>{{item.text}}</span>
21-
<igx-icon igxListAction [color]="item.favorite ? 'orange' : 'lightgray'">star</igx-icon>
21+
<igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'">star</igx-icon>
2222
</igx-list-item>
2323
</div>
2424
</igx-list>

‎src/app/list/list.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ <h4 class="sample-title">Data source filtered list</h4>
227227
<igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" *ngFor="let item of navItems | igxFilter: fo1">
228228
<!-- <igx-avatar igxListThumbnail [src]="item.avatar" [roundShape]="true"></igx-avatar>-->
229229
<span igxListLine>{{item.text}}</span>
230-
<igx-icon igxListAction [color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
230+
<igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
231231
</igx-list-item>
232232
</igx-list>
233233
</igx-card>

0 commit comments

Comments
 (0)