From 7e9db1d0dec3f8abdb716f082bcbe441304b95d6 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Sun, 17 Apr 2022 15:25:01 +0300 Subject: [PATCH] CHange keydown listeners to specific key listener to optimize perfomance --- .../advanced-search-input.component.ts | 25 ++-- sharedComponents/input/input.component.ts | 107 +++++++++++------- .../search-input/search-input.component.ts | 10 +- utils/click/click-outside-or-esc.directive.ts | 16 ++- 4 files changed, 88 insertions(+), 70 deletions(-) diff --git a/sharedComponents/advanced-search-input/advanced-search-input.component.ts b/sharedComponents/advanced-search-input/advanced-search-input.component.ts index 7592717f..7a0da370 100644 --- a/sharedComponents/advanced-search-input/advanced-search-input.component.ts +++ b/sharedComponents/advanced-search-input/advanced-search-input.component.ts @@ -14,7 +14,8 @@ import {EntitiesSelectionComponent} from "../../searchPages/searchUtils/entities @Component({ selector: 'advanced-search-input', template: ` -
+
@@ -39,22 +40,20 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy @Input() smallVertical: boolean = false; @Output() searchEmitter: EventEmitter = new EventEmitter(); - @HostListener('window:keydown', ['$event']) - keyEvent(event: KeyboardEvent) { + @HostListener('window:keydown.enter', ['$event']) + enter(event: KeyboardEvent) { let input: InputComponent | EntitiesSelectionComponent = this.inputs.toArray().find(input => input.focused); - if(!input) { + if (!input) { input = this.entities.toArray().find(input => input.input.focused); } - if(input) { - if(event.code === 'Enter') { - if(input instanceof EntitiesSelectionComponent) { - input.input.focus(false, event); - } else { - input.focus(false, event); - } - event.preventDefault(); - this.searchEmitter.emit(); + if (input) { + if (input instanceof EntitiesSelectionComponent) { + input.input.focus(false, event); + } else { + input.focus(false, event); } + event.preventDefault(); + this.searchEmitter.emit(); } } diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 97493c2e..3b885ac9 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -19,7 +19,15 @@ import {EnvProperties} from "../../utils/properties/env-properties"; import {properties} from "../../../../environments/environment"; import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive"; -export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips'; +export type InputType = + 'text' + | 'URL' + | 'logoURL' + | 'autocomplete' + | 'autocomplete_soft' + | 'textarea' + | 'select' + | 'chips'; export interface Option { icon?: string, @@ -62,7 +70,7 @@ declare var UIkit; + [rows]="rows" [formControl]="formAsControl"> @@ -70,7 +78,8 @@ declare var UIkit;
No value selected
-
{{getLabel(formControl.value)}}
+
{{getLabel(formControl.value)}}
 @@ -84,31 +93,36 @@ declare var UIkit;
-
+
{{getLabel(chip.value)}}
-
+
-
+
+ {{(formAsArray.length - 1)}} more
-
+
-
@@ -121,7 +135,8 @@ declare var UIkit;
    -
  • {{option.label}}
    • @@ -232,7 +247,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() set options(options: (Option | string) []) { this.optionsArray = options.map(option => { - if(typeof option === 'string') { + if (typeof option === 'string') { return { label: option, value: option @@ -249,27 +264,35 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } - @HostListener('window:keydown', ['$event']) - keyEvent(event: KeyboardEvent) { - if(this.opened) { - if(event.code === 'ArrowUp') { - event.preventDefault(); - if(this.selectedIndex > 0) { - this.selectedIndex--; - this.optionBox.nativeElement.scrollBy(0, -34); - } - } else if(event.code === 'ArrowDown') { - event.preventDefault(); - if(this.selectedIndex < (this.filteredOptions.length - 1)) { - this.selectedIndex++; - this.optionBox.nativeElement.scrollBy(0, 34); - } - } else if(event.code === 'Enter') { - event.preventDefault(); - if(this.filteredOptions[this.selectedIndex]) { - this.selectOption(this.filteredOptions[this.selectedIndex], event); - this.open(false); - } + @HostListener('window:keydown.arrowUp', ['$event']) + arrowUp(event: KeyboardEvent) { + if (this.opened) { + event.preventDefault(); + if (this.selectedIndex > 0) { + this.selectedIndex--; + this.optionBox.nativeElement.scrollBy(0, -34); + } + } + } + + @HostListener('window:keydown.arrowDown', ['$event']) + arrowDown(event: KeyboardEvent) { + if (this.opened) { + event.preventDefault(); + if (this.selectedIndex < (this.filteredOptions.length - 1)) { + this.selectedIndex++; + this.optionBox.nativeElement.scrollBy(0, 34); + } + } + } + + @HostListener('window:keydown.enter', ['$event']) + enter(event: KeyboardEvent) { + if (this.opened) { + event.preventDefault(); + if (this.filteredOptions[this.selectedIndex]) { + this.selectOption(this.filteredOptions[this.selectedIndex], event); + this.open(false); } } } @@ -302,15 +325,15 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } ngOnChanges(changes: SimpleChanges) { - if(this.formControl) { + if (this.formControl) { if (changes.value) { this.formControl.setValue(this.value); } if (changes.formControl || changes.validators || changes.options) { this.reset(); } - if(changes.disabled) { - if(this.disabled) { + if (changes.disabled) { + if (this.disabled) { this.formControl.disable(); } else { this.formControl.enable(); @@ -371,7 +394,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.required = (validator && validator.required); } this.subscriptions.push(this.formControl.valueChanges.subscribe(value => { - if(this.formControl.enabled) { + if (this.formControl.enabled) { value = (value === '') ? null : value; if (this.type === 'logoURL') { this.secure = (!value || value.includes('https://')); @@ -388,7 +411,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.open(true); } } - if((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) { + if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) { this.valueChange.emit(this.formControl.value); } } @@ -405,9 +428,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } }); } - + remove(index: number, event) { - if(this.focused) { + if (this.focused) { this.formAsArray.removeAt(index); this.formAsArray.markAsDirty(); this.focus(true); @@ -428,7 +451,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang const filterValue = value.toString().toLowerCase(); options = options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); this.selectedIndex = options.findIndex(option => option.value === this.formControl.value); - if(this.selectedIndex === -1) { + if (this.selectedIndex === -1) { this.selectedIndex = 0; } return options; @@ -491,7 +514,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang if (this.optionBox) { if (this.opened) { this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value); - if(this.selectedIndex === -1) { + if (this.selectedIndex === -1) { this.selectedIndex = 0; } UIkit.dropdown(this.optionBox.nativeElement).show(); diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts index f1b3dfaa..627d5604 100644 --- a/sharedComponents/search-input/search-input.component.ts +++ b/sharedComponents/search-input/search-input.component.ts @@ -58,13 +58,11 @@ export class SearchInputComponent implements OnInit { constructor(private cdr: ChangeDetectorRef) { } - @HostListener('window:keydown', ['$event']) - keyEvent(event: KeyboardEvent) { + @HostListener('window:keydown.enter', ['$event']) + enter(event: KeyboardEvent) { if(this.input.focused) { - if(event.code === 'Enter') { - event.preventDefault(); - this.search(event); - } + event.preventDefault(); + this.search(event); } } diff --git a/utils/click/click-outside-or-esc.directive.ts b/utils/click/click-outside-or-esc.directive.ts index 48b906d1..4644d46b 100644 --- a/utils/click/click-outside-or-esc.directive.ts +++ b/utils/click/click-outside-or-esc.directive.ts @@ -13,7 +13,7 @@ export class ClickOutsideOrEsc { constructor(private elementRef: ElementRef) {} - @HostListener('document:click', ['$event']) + @HostListener('click', ['$event']) click(event) { if(event.isTrusted) { this.clickOutside.emit({ @@ -23,13 +23,11 @@ export class ClickOutsideOrEsc { } } - @HostListener('window:keydown', ['$event']) - keyEvent(event: KeyboardEvent) { - if(event.code === 'Escape') { - this.clickOutside.emit({ - event: event, - clicked: true - }); - } + @HostListener('window:keydown.escape', ['$event']) + esc(event: KeyboardEvent) { + this.clickOutside.emit({ + event: event, + clicked: true + }); } }