From 8a979d73c3343ecf07b4e6411fa2a6783cd0a3b0 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 12 Feb 2020 16:20:49 +0100 Subject: Simplify code for search-typeahead --- .../src/app/header/search-typeahead.component.html | 10 +++--- .../src/app/header/search-typeahead.component.ts | 40 ++++++++++++---------- client/src/app/header/suggestion.component.html | 2 +- client/src/app/shared/angular/highlight.pipe.ts | 2 +- client/src/app/shared/shared.module.ts | 2 +- 5 files changed, 29 insertions(+), 27 deletions(-) (limited to 'client') diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html index 428246585..0c9df618e 100644 --- a/client/src/app/header/search-typeahead.component.html +++ b/client/src/app/header/search-typeahead.component.html @@ -24,14 +24,14 @@ -
+
- - any instance - only followed instances - + + any instance + only followed instances +
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts index c265f2c83..210a1474c 100644 --- a/client/src/app/header/search-typeahead.component.ts +++ b/client/src/app/header/search-typeahead.component.ts @@ -1,6 +1,5 @@ import { Component, - AfterViewInit, OnInit, OnDestroy, QueryList, @@ -14,7 +13,6 @@ import { ListKeyManager } from '@angular/cdk/a11y' import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes' import { SuggestionComponent, Result } from './suggestion.component' import { of } from 'rxjs' -import { getParameterByName } from '@app/shared/misc/utils' import { ServerConfig } from '@shared/models' @Component({ @@ -22,7 +20,7 @@ import { ServerConfig } from '@shared/models' templateUrl: './search-typeahead.component.html', styleUrls: [ './search-typeahead.component.scss' ] }) -export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit { +export class SearchTypeaheadComponent implements OnInit, OnDestroy { @ViewChild('searchVideo', { static: true }) searchInput: ElementRef hasChannel = false @@ -35,7 +33,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni inThisChannelText: string keyboardEventsManager: ListKeyManager - results: any[] = [] + results: Result[] = [] constructor ( private authService: AuthService, @@ -45,6 +43,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni ) {} ngOnInit () { + const query = this.route.snapshot.queryParams + if (query['search']) this.search = query['search'] + this.serverService.getConfig() .subscribe(config => this.serverConfig = config) } @@ -53,23 +54,19 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() } - ngAfterViewInit () { - this.search = getParameterByName('search', window.location.href) || '' - } - get activeResult () { - return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result + return this.keyboardEventsManager?.activeItem?.result } - get showInstructions () { + get areInstructionsDisplayed () { return !this.search } get showHelp () { - return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false + return this.search && this.newSearch && this.activeResult?.type === 'search-global' } - get anyURI () { + get canSearchAnyURI () { if (!this.serverConfig) return false return this.authService.isLoggedIn() ? this.serverConfig.search.remoteUri.users @@ -131,28 +128,33 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni initKeyboardEventsManager (event: { items: QueryList, index?: number }) { if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() + this.keyboardEventsManager = new ListKeyManager(event.items) + if (event.index !== undefined) { this.keyboardEventsManager.setActiveItem(event.index) } else { this.keyboardEventsManager.setFirstItemActive() } + this.keyboardEventsManager.change.subscribe( _ => this.setEventItems(event) ) } - handleKeyUp (event: KeyboardEvent, indexSelected?: number) { + handleKeyUp (event: KeyboardEvent) { event.stopImmediatePropagation() - if (this.keyboardEventsManager) { - if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) { + if (!this.keyboardEventsManager) return + + switch (event.key) { + case "ArrowDown": + case "ArrowUp": this.keyboardEventsManager.onKeydown(event) - return false - } else if (event.keyCode === ENTER) { + break + case "Enter": this.newSearch = false this.doSearch() - return false - } + break } } diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html index edde2023a..d7ae3450a 100644 --- a/client/src/app/header/suggestion.component.html +++ b/client/src/app/header/suggestion.component.html @@ -1,4 +1,4 @@ - +
diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts index e219b3823..fb6042280 100644 --- a/client/src/app/shared/angular/highlight.pipe.ts +++ b/client/src/app/shared/angular/highlight.pipe.ts @@ -30,7 +30,7 @@ export class HighlightPipe implements PipeTransform { break } case 'Single-And-StartsWith-Match': { - regex = new RegExp("^" + stringToHighlight, caseFlag) + regex = new RegExp('^' + stringToHighlight, caseFlag) break } case 'Multi-Match': { diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 090a5b7f9..30b3ba0c1 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -89,7 +89,7 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe' import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe' import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe' import { FromNowPipe } from '@app/shared/angular/from-now.pipe' -import { HighlightPipe }from '@app/shared/angular/highlight.pipe' +import { HighlightPipe } from '@app/shared/angular/highlight.pipe' import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive' import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component' import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component' -- cgit v1.2.3