Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 7ffa889

Browse files
riavalonriavalon
committed
feat(navbar): Add basic searchbar component to site.
1 parent f5478ed commit 7ffa889

File tree

10 files changed

+292
-14
lines changed

10 files changed

+292
-14
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"highlight.js": "^9.9.0",
4141
"jasmine-core": "2.4.1",
4242
"jasmine-spec-reporter": "2.5.0",
43-
"karma": "1.2.0",
43+
"karma": "1.6.0",
4444
"karma-browserstack-launcher": "^1.2.0",
4545
"karma-chrome-launcher": "^2.0.0",
4646
"karma-jasmine": "^1.1.0",

‎src/app/shared/navbar/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './navbar';
2+
export * from './searchbar';

‎src/app/shared/navbar/navbar.html

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<a md-button class="docs-button" routerLink="components">Components</a>
1010
<a md-button class="docs-button" routerLink="guides">Guides</a>
1111
<div class="flex-spacer"></div>
12+
<search-bar-component></search-bar-component>
1213
<theme-chooser></theme-chooser>
1314
<a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
1415
<img class="docs-github-logo"

‎src/app/shared/navbar/navbar.scss

-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
.docs-navbar {
22
display: flex;
33
flex-wrap: wrap;
4-
align-items: center;
54
padding: 8px 16px;
6-
7-
> .mat-button {
8-
&:last-child {
9-
margin-left: auto;
10-
}
11-
}
12-
}
13-
14-
.flex-spacer {
15-
flex-grow: 1;
165
}
176

187
.docs-angular-logo {

‎src/app/shared/navbar/searchbar/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './searchbar';

‎src/app/shared/navbar/searchbar/searchbar.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="docs-search-input-container">
2+
<input
3+
placeholder="Search"
4+
type="text"
5+
class="docs-search-input"
6+
(focus)="toggleIsExpanded()"
7+
(blur)="toggleIsExpanded()"
8+
(keyup.enter)="handlePlainSearch($event.target.value.toLowerCase())"
9+
[mdAutocomplete]="auto"
10+
[formControl]="searchControl">
11+
<md-icon class="docs-search-icon">search</md-icon>
12+
</div>
13+
14+
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
15+
<md-option *ngFor="let item of filteredSuggestions | async" [value]="item">
16+
{{item.name}}
17+
</md-option>
18+
</md-autocomplete>

‎src/app/shared/navbar/searchbar/searchbar.scss

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@mixin color-placeholder() {
2+
-webkit-font-smoothing: antialiased;
3+
color: white;
4+
}
5+
6+
:host {
7+
position: relative;
8+
flex: 2;
9+
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
&.docs-expanded .docs-search-input-container {
15+
width: 100%;
16+
}
17+
18+
.docs-search-input-container {
19+
display: block;
20+
position: relative;
21+
margin-left: auto;
22+
height: 100%;
23+
width: 200px;
24+
transition: width .2s ease;
25+
26+
.docs-search-icon {
27+
position: absolute;
28+
left: 15px; top: 50%;
29+
transform: translateY(-50%);
30+
height: 28px;
31+
width: 28px;
32+
}
33+
}
34+
35+
.docs-search-input {
36+
background: rgba(255, 255, 255, 0.4);
37+
border: none;
38+
border-radius: 2px;
39+
color: white;
40+
font-size: 18px;
41+
height: 95%;
42+
line-height: 95%;
43+
padding-left: 50px;
44+
position: relative;
45+
transition: width .2s ease;
46+
width: 100%;
47+
48+
/* Set placeholder text to be white */
49+
&::-webkit-input-placeholder { @include color-placeholder(); } /* Chrome/Opera/Safari */
50+
&::-moz-placeholder { @include color-placeholder(); } /* Firefox 19+ */
51+
&:-moz-placeholder { @include color-placeholder(); } /* Firefox 18- */
52+
&:ms-input-placeholder { @include color-placeholder(); } /* IE 10+ */
53+
54+
&:focus {
55+
outline: none;
56+
}
57+
}
58+
59+
}

‎src/app/shared/navbar/searchbar/searchbar.spec.ts

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import {Injectable} from '@angular/core';
2+
import {TestBed, inject, async, ComponentFixture} from '@angular/core/testing';
3+
import {Router, RouterModule} from '@angular/router';
4+
import {MaterialModule} from '@angular/material';
5+
import {ReactiveFormsModule, FormControl} from '@angular/forms';
6+
7+
import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items';
8+
import {SearchBar} from './searchbar';
9+
10+
const mockRouter = {
11+
navigate: jasmine.createSpy('navigate'),
12+
navigateByUrl: jasmine.createSpy('navigateByUrl')
13+
};
14+
15+
const testDocItem = {
16+
id: 'test-doc-item',
17+
name: 'TestingExample',
18+
examples: ['test-examples']
19+
};
20+
21+
22+
describe('SearchBar', () => {
23+
let fixture: ComponentFixture<SearchBar>;
24+
let component: SearchBar;
25+
26+
beforeEach(async(() => {
27+
TestBed.configureTestingModule({
28+
imports: [RouterModule, ReactiveFormsModule, MaterialModule],
29+
declarations: [SearchBar],
30+
providers: [
31+
{provide: DocumentationItems, useClass: MockDocumentationItems},
32+
{provide: Router, useValue: mockRouter},
33+
],
34+
});
35+
36+
TestBed.compileComponents();
37+
fixture = TestBed.createComponent(SearchBar);
38+
component = fixture.componentInstance;
39+
component.searchControl = new FormControl('');
40+
fixture.detectChanges();
41+
}));
42+
43+
afterEach(() => {
44+
(<any>component._router.navigateByUrl).calls.reset();
45+
});
46+
47+
it('should toggle isExpanded', () => {
48+
expect(component._isExpanded).toBe(false);
49+
component.toggleIsExpanded();
50+
expect(component._isExpanded).toBe(true);
51+
});
52+
53+
describe('Filter Search Suggestions', () => {
54+
it('should return all items matching search query', () => {
55+
const query = 'testing';
56+
const result = component.filterSearchSuggestions(query);
57+
expect(result).toEqual([testDocItem]);
58+
});
59+
60+
it('should return empty list if no items match', () => {
61+
const query = 'does not exist';
62+
const result = component.filterSearchSuggestions(query);
63+
expect(result).toEqual([]);
64+
});
65+
});
66+
67+
describe('Navigate', () => {
68+
69+
it('should take an id and navigate to the given route', () => {
70+
component._navigate('button-toggle');
71+
expect(component._router.navigateByUrl).toHaveBeenCalled();
72+
});
73+
74+
it('should not navigate if no id is given', () => {
75+
component._navigate('');
76+
expect(component._router.navigateByUrl).not.toHaveBeenCalled();
77+
});
78+
});
79+
80+
it('should show a snackbar error', () => {
81+
spyOn(component._snackBar, 'open');
82+
component._showError();
83+
expect(component._snackBar.open).toHaveBeenCalled();
84+
expect(component._snackBar.open).toHaveBeenCalledWith(
85+
'No search results found.',
86+
null, {duration: 3000});
87+
});
88+
89+
it('should return the proper display value for form control', () => {
90+
const result = component.displayFn(testDocItem);
91+
expect(result).toEqual(testDocItem.name);
92+
});
93+
});
94+
95+
96+
class MockDocumentationItems extends DocumentationItems {
97+
getAllItems(): DocItem[] { return [testDocItem]; }
98+
}
99+

‎src/app/shared/navbar/searchbar/searchbar.ts

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import {Component, ViewChild} from '@angular/core';
2+
import {MdAutocompleteTrigger, MdSnackBar} from '@angular/material';
3+
import {Router} from '@angular/router';
4+
import {FormControl} from '@angular/forms';
5+
6+
import {Observable} from 'rxjs/Observable';
7+
import {Subscription} from 'rxjs/Subscription';
8+
import 'rxjs/add/operator/mergeMap';
9+
10+
import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items';
11+
12+
13+
@Component({
14+
selector: 'search-bar-component',
15+
templateUrl: './searchbar.html',
16+
styleUrls: ['./searchbar.scss'],
17+
host: {
18+
'[class.docs-expanded]': '_isExpanded'
19+
}
20+
})
21+
22+
export class SearchBar {
23+
24+
@ViewChild(MdAutocompleteTrigger)
25+
private _autocompleteTrigger: MdAutocompleteTrigger;
26+
27+
allDocItems: DocItem[];
28+
filteredSuggestions: Observable<DocItem[]>;
29+
searchControl: FormControl = new FormControl('');
30+
subscription: Subscription;
31+
32+
_isExpanded: boolean = false;
33+
34+
constructor(
35+
public _docItems: DocumentationItems,
36+
public _router: Router,
37+
public _snackBar: MdSnackBar
38+
) {
39+
this.allDocItems = _docItems.getAllItems();
40+
this.filteredSuggestions = this.searchControl.valueChanges
41+
.startWith(null)
42+
.map(item => item ? this.filterSearchSuggestions(item) : this.allDocItems.slice());
43+
}
44+
45+
// This handles the user interacting with the autocomplete panel clicks or keyboard.
46+
ngAfterViewInit() {
47+
// We listen to the changes on `filteredSuggestions in order to
48+
// listen to the latest _autocompleteTrigger.optionSelections
49+
this.subscription = this.filteredSuggestions
50+
.flatMap(_ => this._autocompleteTrigger.optionSelections)
51+
.subscribe(evt => this._navigate(evt.source.value.id));
52+
}
53+
54+
ngOnDestroy() {
55+
if (this.subscription) { this.subscription.unsubscribe(); }
56+
}
57+
58+
toggleIsExpanded() {
59+
if (this._autocompleteTrigger) {
60+
this._delayDropdown(this._isExpanded);
61+
}
62+
this._isExpanded = !this._isExpanded;
63+
}
64+
65+
displayFn(item: DocItem) {
66+
return item.name;
67+
}
68+
69+
filterSearchSuggestions(searchTerm): DocItem[] {
70+
return this.allDocItems.filter(item => new RegExp(`^${searchTerm}`, 'gi').test(item.name));
71+
}
72+
73+
handlePlainSearch(searchTerm) {
74+
const item = this.allDocItems.find(item => item.name.toLowerCase() === searchTerm);
75+
return item ?
76+
this._navigate(item.id) :
77+
this.navigateToClosestMatch(searchTerm);
78+
}
79+
80+
navigateToClosestMatch(term) {
81+
this._resetSearch();
82+
this._navigate(this.filterSearchSuggestions(term)[0].id);
83+
}
84+
85+
_navigate(id) {
86+
this._resetSearch();
87+
return id ? this._router.navigateByUrl(`/components/component/${id}`) : null;
88+
}
89+
90+
_resetSearch() {
91+
this.searchControl.reset();
92+
this.searchControl.setValue('');
93+
}
94+
95+
_showError() {
96+
this._snackBar.open('No search results found.', null, {duration: 3000});
97+
}
98+
99+
_delayDropdown(isExpanded: boolean) {
100+
if (isExpanded) {
101+
this._autocompleteTrigger.closePanel();
102+
} else {
103+
this._autocompleteTrigger.closePanel();
104+
setTimeout(() => this._autocompleteTrigger.openPanel(), 210);
105+
}
106+
}
107+
}

‎src/app/shared/shared-module.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import {NgModule} from '@angular/core';
22
import {HttpModule} from '@angular/http';
3+
import {ReactiveFormsModule} from '@angular/forms';
34
import {MaterialModule} from '@angular/material';
45
import {BrowserModule} from '@angular/platform-browser';
56
import {RouterModule} from '@angular/router';
67

7-
import {ExampleViewer} from './example-viewer/example-viewer';
88
import {DocViewer} from './doc-viewer/doc-viewer';
99
import {DocumentationItems} from './documentation-items/documentation-items';
10+
import {SearchBar} from './navbar/searchbar/searchbar';
11+
import {ExampleViewer} from './example-viewer/example-viewer';
1012
import {PlunkerButton} from './plunker';
1113
import {GuideItems} from './guide-items/guide-items';
1214
import {ThemeStorage} from './theme-chooser/theme-storage/theme-storage';
@@ -21,9 +23,10 @@ import {SvgViewer} from './svg-viewer/svg-viewer';
2123
HttpModule,
2224
RouterModule,
2325
BrowserModule,
26+
ReactiveFormsModule,
2427
MaterialModule,
2528
],
26-
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
29+
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, SearchBar, ThemeChooser, SvgViewer],
2730
exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
2831
providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
2932
entryComponents: [

0 commit comments

Comments
 (0)