aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-20 15:12:51 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-02-13 16:32:21 +0100
commitf409f0c3b91d85c66b4841d72ea65b5fbe1483d8 (patch)
tree72c2ab403f6b0708921b64bafae5ef971dfbde3e /client/src/app/shared
parent36f2981f7d586cea206e4c143c18cf866a4e3acd (diff)
downloadPeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.tar.gz
PeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.tar.zst
PeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.zip
Search typeahead initial design
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/angular/highlight.pipe.ts52
-rw-r--r--client/src/app/shared/shared.module.ts3
2 files changed, 55 insertions, 0 deletions
diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts
new file mode 100644
index 000000000..4199d833e
--- /dev/null
+++ b/client/src/app/shared/angular/highlight.pipe.ts
@@ -0,0 +1,52 @@
1import { PipeTransform, Pipe } from '@angular/core'
2import { SafeHtml } from '@angular/platform-browser'
3
4// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
5@Pipe({ name: 'highlight' })
6export class HighlightPipe implements PipeTransform {
7 /* use this for single match search */
8 static SINGLE_MATCH: string = "Single-Match"
9 /* use this for single match search with a restriction that target should start with search string */
10 static SINGLE_AND_STARTS_WITH_MATCH: string = "Single-And-StartsWith-Match"
11 /* use this for global search */
12 static MULTI_MATCH: string = "Multi-Match"
13
14 constructor() {}
15 transform(
16 contentString: string = null,
17 stringToHighlight: string = null,
18 option: string = "Single-And-StartsWith-Match",
19 caseSensitive: boolean = false,
20 highlightStyleName: string = "search-highlight"
21 ): SafeHtml {
22 if (stringToHighlight && contentString && option) {
23 let regex: any = ""
24 let caseFlag: string = !caseSensitive ? "i" : ""
25 switch (option) {
26 case "Single-Match": {
27 regex = new RegExp(stringToHighlight, caseFlag)
28 break
29 }
30 case "Single-And-StartsWith-Match": {
31 regex = new RegExp("^" + stringToHighlight, caseFlag)
32 break
33 }
34 case "Multi-Match": {
35 regex = new RegExp(stringToHighlight, "g" + caseFlag)
36 break
37 }
38 default: {
39 // default will be a global case-insensitive match
40 regex = new RegExp(stringToHighlight, "gi")
41 }
42 }
43 const replaced = contentString.replace(
44 regex,
45 (match) => `<span class="${highlightStyleName}">${match}</span>`
46 )
47 return replaced
48 } else {
49 return contentString
50 }
51 }
52}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 98211c727..090a5b7f9 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -89,6 +89,7 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
89import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe' 89import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
90import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe' 90import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
91import { FromNowPipe } from '@app/shared/angular/from-now.pipe' 91import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
92import { HighlightPipe }from '@app/shared/angular/highlight.pipe'
92import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive' 93import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
93import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component' 94import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
94import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component' 95import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
@@ -149,6 +150,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard'
149 NumberFormatterPipe, 150 NumberFormatterPipe,
150 ObjectLengthPipe, 151 ObjectLengthPipe,
151 FromNowPipe, 152 FromNowPipe,
153 HighlightPipe,
152 PeerTubeTemplateDirective, 154 PeerTubeTemplateDirective,
153 VideoDurationPipe, 155 VideoDurationPipe,
154 156
@@ -254,6 +256,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard'
254 NumberFormatterPipe, 256 NumberFormatterPipe,
255 ObjectLengthPipe, 257 ObjectLengthPipe,
256 FromNowPipe, 258 FromNowPipe,
259 HighlightPipe,
257 PeerTubeTemplateDirective, 260 PeerTubeTemplateDirective,
258 VideoDurationPipe 261 VideoDurationPipe
259 ], 262 ],