aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/header
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-12 16:20:49 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-02-13 16:48:46 +0100
commit8a979d73c3343ecf07b4e6411fa2a6783cd0a3b0 (patch)
treef3325f8a55cab793ccacc361d47fbf28c5acc4c6 /client/src/app/header
parent9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110 (diff)
downloadPeerTube-8a979d73c3343ecf07b4e6411fa2a6783cd0a3b0.tar.gz
PeerTube-8a979d73c3343ecf07b4e6411fa2a6783cd0a3b0.tar.zst
PeerTube-8a979d73c3343ecf07b4e6411fa2a6783cd0a3b0.zip
Simplify code for search-typeahead
Diffstat (limited to 'client/src/app/header')
-rw-r--r--client/src/app/header/search-typeahead.component.html10
-rw-r--r--client/src/app/header/search-typeahead.component.ts40
-rw-r--r--client/src/app/header/suggestion.component.html2
3 files changed, 27 insertions, 25 deletions
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 @@
24 </div> 24 </div>
25 25
26 <!-- search instructions, when search input is empty --> 26 <!-- search instructions, when search input is empty -->
27 <div *ngIf="showInstructions" id="typeahead-instructions" class="overflow-hidden"> 27 <div *ngIf="areInstructionsDisplayed" id="typeahead-instructions" class="overflow-hidden">
28 <div class="d-flex justify-content-between"> 28 <div class="d-flex justify-content-between">
29 <label class="small-title" i18n>Advanced search</label> 29 <label class="small-title" i18n>Advanced search</label>
30 <div class="advanced-search-status c-help"> 30 <div class="advanced-search-status c-help">
31 <span [ngClass]="anyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> 31 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
32 <span *ngIf="anyURI" class="mr-1" i18n>any instance</span> 32 <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span>
33 <span *ngIf="!anyURI" class="mr-1" i18n>only followed instances</span> 33 <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span>
34 <i [ngClass]="anyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> 34 <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
35 </span> 35 </span>
36 </div> 36 </div>
37 </div> 37 </div>
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 @@
1import { 1import {
2 Component, 2 Component,
3 AfterViewInit,
4 OnInit, 3 OnInit,
5 OnDestroy, 4 OnDestroy,
6 QueryList, 5 QueryList,
@@ -14,7 +13,6 @@ import { ListKeyManager } from '@angular/cdk/a11y'
14import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes' 13import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
15import { SuggestionComponent, Result } from './suggestion.component' 14import { SuggestionComponent, Result } from './suggestion.component'
16import { of } from 'rxjs' 15import { of } from 'rxjs'
17import { getParameterByName } from '@app/shared/misc/utils'
18import { ServerConfig } from '@shared/models' 16import { ServerConfig } from '@shared/models'
19 17
20@Component({ 18@Component({
@@ -22,7 +20,7 @@ import { ServerConfig } from '@shared/models'
22 templateUrl: './search-typeahead.component.html', 20 templateUrl: './search-typeahead.component.html',
23 styleUrls: [ './search-typeahead.component.scss' ] 21 styleUrls: [ './search-typeahead.component.scss' ]
24}) 22})
25export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit { 23export class SearchTypeaheadComponent implements OnInit, OnDestroy {
26 @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement> 24 @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
27 25
28 hasChannel = false 26 hasChannel = false
@@ -35,7 +33,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
35 inThisChannelText: string 33 inThisChannelText: string
36 34
37 keyboardEventsManager: ListKeyManager<SuggestionComponent> 35 keyboardEventsManager: ListKeyManager<SuggestionComponent>
38 results: any[] = [] 36 results: Result[] = []
39 37
40 constructor ( 38 constructor (
41 private authService: AuthService, 39 private authService: AuthService,
@@ -45,6 +43,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
45 ) {} 43 ) {}
46 44
47 ngOnInit () { 45 ngOnInit () {
46 const query = this.route.snapshot.queryParams
47 if (query['search']) this.search = query['search']
48
48 this.serverService.getConfig() 49 this.serverService.getConfig()
49 .subscribe(config => this.serverConfig = config) 50 .subscribe(config => this.serverConfig = config)
50 } 51 }
@@ -53,23 +54,19 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
53 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() 54 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
54 } 55 }
55 56
56 ngAfterViewInit () {
57 this.search = getParameterByName('search', window.location.href) || ''
58 }
59
60 get activeResult () { 57 get activeResult () {
61 return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result 58 return this.keyboardEventsManager?.activeItem?.result
62 } 59 }
63 60
64 get showInstructions () { 61 get areInstructionsDisplayed () {
65 return !this.search 62 return !this.search
66 } 63 }
67 64
68 get showHelp () { 65 get showHelp () {
69 return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false 66 return this.search && this.newSearch && this.activeResult?.type === 'search-global'
70 } 67 }
71 68
72 get anyURI () { 69 get canSearchAnyURI () {
73 if (!this.serverConfig) return false 70 if (!this.serverConfig) return false
74 return this.authService.isLoggedIn() 71 return this.authService.isLoggedIn()
75 ? this.serverConfig.search.remoteUri.users 72 ? this.serverConfig.search.remoteUri.users
@@ -131,28 +128,33 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
131 128
132 initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) { 129 initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) {
133 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() 130 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
131
134 this.keyboardEventsManager = new ListKeyManager(event.items) 132 this.keyboardEventsManager = new ListKeyManager(event.items)
133
135 if (event.index !== undefined) { 134 if (event.index !== undefined) {
136 this.keyboardEventsManager.setActiveItem(event.index) 135 this.keyboardEventsManager.setActiveItem(event.index)
137 } else { 136 } else {
138 this.keyboardEventsManager.setFirstItemActive() 137 this.keyboardEventsManager.setFirstItemActive()
139 } 138 }
139
140 this.keyboardEventsManager.change.subscribe( 140 this.keyboardEventsManager.change.subscribe(
141 _ => this.setEventItems(event) 141 _ => this.setEventItems(event)
142 ) 142 )
143 } 143 }
144 144
145 handleKeyUp (event: KeyboardEvent, indexSelected?: number) { 145 handleKeyUp (event: KeyboardEvent) {
146 event.stopImmediatePropagation() 146 event.stopImmediatePropagation()
147 if (this.keyboardEventsManager) { 147 if (!this.keyboardEventsManager) return
148 if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) { 148
149 switch (event.key) {
150 case "ArrowDown":
151 case "ArrowUp":
149 this.keyboardEventsManager.onKeydown(event) 152 this.keyboardEventsManager.onKeydown(event)
150 return false 153 break
151 } else if (event.keyCode === ENTER) { 154 case "Enter":
152 this.newSearch = false 155 this.newSearch = false
153 this.doSearch() 156 this.doSearch()
154 return false 157 break
155 }
156 } 158 }
157 } 159 }
158 160
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 @@
1<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active" [routerLink]="result.routerLink"> 1<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
2 <div class="flex-shrink-0 mr-2 text-center"> 2 <div class="flex-shrink-0 mr-2 text-center">
3 <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon> 3 <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon>
4 <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon> 4 <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon>