Created
June 23, 2018 10:43
-
-
Save thiswallz/443961db4cf8d0e70f8b457b7d7e2ef5 to your computer and use it in GitHub Desktop.
Angular 6 Directive to handle wheel events in an input element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //importing directive | |
| import { InputMagicWheelDirective } from 'app/whateverItIs/input-magic-wheel.directive'; | |
| //... | |
| //declaring | |
| @NgModule({ | |
| declarations: [..., InputMagicWheelDirective], | |
| //... | |
| }) | |
| export class AppModule { } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input value="0" type="number" wheelOn="integer" step="any" wheelDownNumber="1" wheelUpNumber="1" > |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| Directive, | |
| EventEmitter, | |
| ElementRef, | |
| HostListener, | |
| Input, | |
| Output | |
| } from "@angular/core"; | |
| enum WheelType { | |
| INTEGER = "integer", | |
| DECIMAL = "decimal" | |
| } | |
| enum WheelOperator { | |
| INCREASE, | |
| DECREASE | |
| } | |
| @Directive({ | |
| selector: "[wheelOn]" | |
| }) | |
| export class InputMagicWheelDirective { | |
| @Input() wheelOn: string = WheelType.INTEGER; | |
| @Input() wheelDecimalPlaces: number = 2; | |
| @Input() wheelUpNumber: number = 1; | |
| @Input() wheelDownNumber: number = 1; | |
| @Output() ngModelChange: EventEmitter<any> = new EventEmitter(); | |
| private operators: any = { | |
| [WheelOperator.INCREASE]: (a: number, b: number): number => | |
| this.handleParse(a) + this.handleParse(b), | |
| [WheelOperator.DECREASE]: (a: number, b: number): number => | |
| this.handleParse(a) - this.handleParse(b) | |
| }; | |
| @HostListener("mousewheel", ["$event"]) | |
| onMouseWheel(event) { | |
| const nativeValue: number = this.handleParse(this.el.nativeElement.value); | |
| if (event.wheelDelta > 0) { | |
| this.el.nativeElement.value = this.handleOperation( | |
| nativeValue, | |
| WheelOperator.INCREASE | |
| ); | |
| } else { | |
| this.el.nativeElement.value = this.handleOperation( | |
| nativeValue, | |
| WheelOperator.DECREASE | |
| ); | |
| } | |
| //propagate ngModel changes | |
| this.ngModelChange.emit(this.el.nativeElement.value); | |
| return false; | |
| } | |
| handleOperation(value: number, operator: WheelOperator): number { | |
| return this.handleParse( | |
| this.operators[operator](value, this.getRangeNumber(operator)) | |
| ); | |
| } | |
| getRangeNumber(operator: WheelOperator): number { | |
| if (operator === WheelOperator.INCREASE) { | |
| return this.wheelUpNumber; | |
| } else if (operator === WheelOperator.DECREASE) { | |
| return this.wheelDownNumber; | |
| } | |
| } | |
| handleParse(value: any): number { | |
| if (this.wheelOn === WheelType.INTEGER) { | |
| return parseInt(value, 10); | |
| } else if (this.wheelOn === WheelType.DECIMAL) { | |
| return +parseFloat(value).toFixed(this.wheelDecimalPlaces); | |
| } | |
| } | |
| constructor(private el: ElementRef) { | |
| //el.nativeElement.value = this.handleParse(el.nativeElement.value); | |
| el.nativeElement.step = this.wheelUpNumber; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment