From 5e699106842badc586640180a1ed0d9027598757 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Fri, 6 Aug 2021 10:02:23 +0300 Subject: [PATCH 1/7] fix(time-picker): fix time picker pan event #9717 --- .../lib/time-picker/time-picker.component.ts | 21 +++++---- .../lib/time-picker/time-picker.directives.ts | 43 +++---------------- 2 files changed, 17 insertions(+), 47 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 07ac4175ff0..4a5d78d97b0 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -29,7 +29,7 @@ import { Validator, NG_VALIDATORS } from '@angular/forms'; -import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser'; +import { HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule } from '@angular/platform-browser'; import { IgxIconModule } from '../icon/public_api'; import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component'; import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive'; @@ -65,12 +65,12 @@ import { IgxPickerClearComponent, IgxPickersCommonModule } from '../date-common/ import { TimeFormatPipe, TimeItemPipe } from './time-picker.pipes'; let NEXT_ID = 0; -const ITEMS_COUNT = 7; @Injectable() export class TimePickerHammerConfig extends HammerGestureConfig { - public overrides = { - pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 1 } + public overrides = { + pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 10} + // pan: { enable: false } }; } @@ -86,10 +86,6 @@ export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { useExisting: IgxTimePickerComponent, multi: true }, - { - provide: HAMMER_GESTURE_CONFIG, - useClass: TimePickerHammerConfig - }, { provide: IGX_TIME_PICKER_COMPONENT, useExisting: IgxTimePickerComponent @@ -968,6 +964,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective this._selectedDate = this.validateDropdownValue(this._selectedDate); this._selectedDate = new Date(this._selectedDate); this.updateEditorValue(); + console.log(this._selectedDate); } /** @hidden @internal */ @@ -1306,6 +1303,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective ], imports: [ CommonModule, + HammerModule, IgxDateTimeEditorModule, IgxInputGroupModule, IgxIconModule, @@ -1314,6 +1312,11 @@ export class IgxTimePickerComponent extends PickerBaseDirective IgxToggleModule, IgxTextSelectionModule ], - providers: [] + providers: [ + { + provide: HAMMER_GESTURE_CONFIG, + useClass: TimePickerHammerConfig + } + ] }) export class IgxTimePickerModule { } diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 3b24f74276e..6a08b308407 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -166,24 +166,7 @@ export class IgxItemListDirective { const delta = event.deltaY; if (delta !== 0) { - switch (this.type) { - case 'hourList': { - this.timePicker.nextHour(delta); - break; - } - case 'minuteList': { - this.timePicker.nextMinute(delta); - break; - } - case 'secondsList': { - this.timePicker.nextSeconds(delta); - break; - } - case 'ampmList': { - this.timePicker.nextAmPm(delta); - break; - } - } + this.nextItem(delta); } } @@ -192,26 +175,10 @@ export class IgxItemListDirective { */ @HostListener('panmove', ['$event']) public onPanMove(event) { - const delta = event.deltaY < 0 ? 1 : event.deltaY > 0 ? -1 : 0; - if (delta !== 0) { - switch (this.type) { - case 'hourList': { - this.timePicker.nextHour(delta); - break; - } - case 'minuteList': { - this.timePicker.nextMinute(delta); - break; - } - case 'secondsList': { - this.timePicker.nextSeconds(delta); - break; - } - case 'ampmList': { - this.timePicker.nextAmPm(delta); - break; - } - } + console.log(event.deltaY); + const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0; + if (delta !== 0 ) { + this.nextItem(delta); } } From 40ea473b60537a1cf54c464bffde0ab41ce63a08 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Wed, 11 Aug 2021 13:37:15 +0300 Subject: [PATCH 2/7] fix(time-picker): update pan event to use HammerGesturesManager#9717 --- .../lib/time-picker/time-picker.component.ts | 20 +----------- .../lib/time-picker/time-picker.directives.ts | 32 +++++++++++-------- 2 files changed, 20 insertions(+), 32 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 4a5d78d97b0..3debef84ed3 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -14,7 +14,6 @@ import { ViewChild, ContentChild, Inject, - Injectable, AfterViewInit, Injector, PipeTransform, @@ -29,7 +28,6 @@ import { Validator, NG_VALIDATORS } from '@angular/forms'; -import { HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule } from '@angular/platform-browser'; import { IgxIconModule } from '../icon/public_api'; import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component'; import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive'; @@ -65,15 +63,6 @@ import { IgxPickerClearComponent, IgxPickersCommonModule } from '../date-common/ import { TimeFormatPipe, TimeItemPipe } from './time-picker.pipes'; let NEXT_ID = 0; - -@Injectable() -export class TimePickerHammerConfig extends HammerGestureConfig { - public overrides = { - pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 10} - // pan: { enable: false } - }; -} - export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { previousValue: Date | string; currentValue: Date | string; @@ -964,7 +953,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective this._selectedDate = this.validateDropdownValue(this._selectedDate); this._selectedDate = new Date(this._selectedDate); this.updateEditorValue(); - console.log(this._selectedDate); } /** @hidden @internal */ @@ -1303,7 +1291,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective ], imports: [ CommonModule, - HammerModule, IgxDateTimeEditorModule, IgxInputGroupModule, IgxIconModule, @@ -1312,11 +1299,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective IgxToggleModule, IgxTextSelectionModule ], - providers: [ - { - provide: HAMMER_GESTURE_CONFIG, - useClass: TimePickerHammerConfig - } - ] + providers: [] }) export class IgxTimePickerModule { } diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 6a08b308407..53b9cbcdd26 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -11,16 +11,19 @@ import { HostListener, Inject, Input, + OnInit, TemplateRef } from '@angular/core'; +import { HammerGesturesManager } from '../core/touch'; import { DateTimeUtil } from '../date-common/util/date-time.util'; import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.common'; /** @hidden */ @Directive({ - selector: '[igxItemList]' + selector: '[igxItemList]', + providers: [HammerGesturesManager] }) -export class IgxItemListDirective { +export class IgxItemListDirective implements OnInit { @HostBinding('attr.tabindex') public tabindex = 0; @@ -31,9 +34,19 @@ export class IgxItemListDirective { constructor( @Inject(IGX_TIME_PICKER_COMPONENT) public timePicker: IgxTimePickerBase, - private elementRef: ElementRef + private elementRef: ElementRef, + private touchManager: HammerGesturesManager ) { } + /** + * @hidden + * @internal + */ + public ngOnInit() { + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; + this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); + } + @HostBinding('class.igx-time-picker__column') public get defaultCSS(): boolean { return true; @@ -170,16 +183,9 @@ export class IgxItemListDirective { } } - /** - * @hidden - */ - @HostListener('panmove', ['$event']) - public onPanMove(event) { - console.log(event.deltaY); - const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0; - if (delta !== 0 ) { - this.nextItem(delta); - } + private onPanMove = (event: HammerInput) => { + const delta = event.deltaY < 0 ? -1 : 1; + this.nextItem(delta); } private nextItem(delta: number): void { From d8da7925b6de7ee01d5e7134e9aa5ecb4e6c7372 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Wed, 11 Aug 2021 14:15:47 +0300 Subject: [PATCH 3/7] chore(time-picker): fix lint errors#9717 --- .../lib/time-picker/time-picker.directives.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 53b9cbcdd26..9dce15bac37 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -38,15 +38,6 @@ export class IgxItemListDirective implements OnInit { private touchManager: HammerGesturesManager ) { } - /** - * @hidden - * @internal - */ - public ngOnInit() { - const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; - this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); - } - @HostBinding('class.igx-time-picker__column') public get defaultCSS(): boolean { return true; @@ -183,10 +174,18 @@ export class IgxItemListDirective implements OnInit { } } + /** + * @hidden @internal + */ + public ngOnInit() { + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; + this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); + } + private onPanMove = (event: HammerInput) => { const delta = event.deltaY < 0 ? -1 : 1; this.nextItem(delta); - } + }; private nextItem(delta: number): void { switch (this.type) { From 0321b4fe11a3a6eef606dc46b34df8e7552ab8ad Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Fri, 13 Aug 2021 13:19:04 +0300 Subject: [PATCH 4/7] test(time-picker): add pan event test#9717 --- .../time-picker/time-picker.component.spec.ts | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 453b772e914..03cc40ac3fa 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -15,9 +15,10 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { PlatformUtil } from '../core/utils'; import { DatePart, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api'; import { DateTimeUtil } from '../date-common/util/date-time.util'; -import { IgxTimeItemDirective } from './time-picker.directives'; +import { IgxItemListDirective, IgxTimeItemDirective } from './time-picker.directives'; import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/public_api'; import { Subscription } from 'rxjs'; +import { HammerGesturesManager } from '../core/touch'; const CSS_CLASS_TIMEPICKER = 'igx-time-picker'; const CSS_CLASS_INPUTGROUP = 'igx-input-group'; @@ -435,6 +436,26 @@ describe('IgxTimePicker', () => { date.setHours(20); expect(timePicker.validate(mockFormControl)).toEqual({ maxValue: true }); }); + + it('should handle panmove event correctly', () => { + const touchManager = new HammerGesturesManager(null, null, new PlatformUtil(1)); + const itemListDirective = new IgxItemListDirective(timePicker, elementRef, touchManager); + spyOn(touchManager, 'addEventListener'); + + itemListDirective.ngOnInit(); + expect(touchManager.addEventListener).toHaveBeenCalledTimes(1); + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; + expect(touchManager.addEventListener).toHaveBeenCalledWith( + elementRef.nativeElement, + 'pan', + (itemListDirective as any).onPanMove, + hammerOptions); + + spyOn(itemListDirective, 'onPanMove').and.callThrough(); + const event = { type: 'pan' }; + (itemListDirective as any).onPanMove(event); + expect(itemListDirective['onPanMove']).toHaveBeenCalled(); + }); }); describe('Interaction tests', () => { From 80791db8d1ca4578841900037b2afe5bd91a2fb3 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Tue, 17 Aug 2021 15:35:23 +0300 Subject: [PATCH 5/7] fix(time-picker): increase pan event delta#9717 --- .../src/lib/time-picker/time-picker.directives.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 9dce15bac37..729be9dc23e 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -178,13 +178,15 @@ export class IgxItemListDirective implements OnInit { * @hidden @internal */ public ngOnInit() { - const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 20 }]] }; this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); } private onPanMove = (event: HammerInput) => { - const delta = event.deltaY < 0 ? -1 : 1; - this.nextItem(delta); + const delta = event.deltaY < -20 ? -1 : event.deltaY > 20 ? 1 : 0; + if (event.deltaY % 20 === 0 && delta !== 0) { + this.nextItem(delta); + } }; private nextItem(delta: number): void { From cd441773fcdc882a70040dd98dd3ece4d45007ab Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Wed, 18 Aug 2021 10:52:34 +0300 Subject: [PATCH 6/7] fix(time-picker): update pan event threshold#9717 --- .../src/lib/time-picker/time-picker.directives.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 729be9dc23e..7cc1aa30b77 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -178,13 +178,13 @@ export class IgxItemListDirective implements OnInit { * @hidden @internal */ public ngOnInit() { - const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 20 }]] }; + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }]] }; this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); } private onPanMove = (event: HammerInput) => { - const delta = event.deltaY < -20 ? -1 : event.deltaY > 20 ? 1 : 0; - if (event.deltaY % 20 === 0 && delta !== 0) { + const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0; + if (delta !== 0) { this.nextItem(delta); } }; From 8a1943fcd9fd8d35418d4a96a85d5620081ab181 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Wed, 18 Aug 2021 11:02:12 +0300 Subject: [PATCH 7/7] fix(time-picker): implement ngOnDestroy#9717 --- .../src/lib/time-picker/time-picker.component.spec.ts | 2 +- .../src/lib/time-picker/time-picker.directives.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 03cc40ac3fa..6e1544fd387 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -444,7 +444,7 @@ describe('IgxTimePicker', () => { itemListDirective.ngOnInit(); expect(touchManager.addEventListener).toHaveBeenCalledTimes(1); - const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 5 }]] }; + const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }]] }; expect(touchManager.addEventListener).toHaveBeenCalledWith( elementRef.nativeElement, 'pan', diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index 7cc1aa30b77..091a69770e2 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -11,6 +11,7 @@ import { HostListener, Inject, Input, + OnDestroy, OnInit, TemplateRef } from '@angular/core'; @@ -23,7 +24,7 @@ import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.comm selector: '[igxItemList]', providers: [HammerGesturesManager] }) -export class IgxItemListDirective implements OnInit { +export class IgxItemListDirective implements OnInit, OnDestroy { @HostBinding('attr.tabindex') public tabindex = 0; @@ -182,6 +183,13 @@ export class IgxItemListDirective implements OnInit { this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions); } + /** + * @hidden @internal + */ + public ngOnDestroy() { + this.touchManager.destroy(); + } + private onPanMove = (event: HammerInput) => { const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0; if (delta !== 0) {