cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): add id to doc-viewer container based on current url

Browse Source 
This enables page specific styling via CSS.
This commit is contained in:
Peter Bacon Darwin 2017-04-01 09:58:19 +01:00 committed by Pete Bacon Darwin
parent 97deb01b1f
commit 759af8b56b
3 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/app.component.html
View File

@ -16,7 +16,7 @@
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu> <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
</md-sidenav> </md-sidenav>
<section class="sidenav-content"> <section class="sidenav-content" [id]="pageId">
<aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered($event)"></aio-doc-viewer> <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
</section> </section>

27
aio/src/app/app.component.spec.ts
View File

@ -104,6 +104,33 @@ describe('AppComponent', () => {
}); });
}); });
describe('pageId', () => {
let locationService: MockLocationService;
beforeEach(() => {
locationService = fixture.debugElement.injector.get(LocationService) as any;
});
it('should set the id of the doc viewer container based on the current url', () => {
const container = fixture.debugElement.query(By.css('section.sidenav-content'));
locationService.urlSubject.next('guide/pipes');
fixture.detectChanges();
expect(component.pageId).toEqual('guide-pipes');
expect(container.properties['id']).toEqual('guide-pipes');
locationService.urlSubject.next('news');
fixture.detectChanges();
expect(component.pageId).toEqual('news');
expect(container.properties['id']).toEqual('news');
locationService.urlSubject.next('');
fixture.detectChanges();
expect(component.pageId).toEqual('home');
expect(container.properties['id']).toEqual('home');
});
});
describe('currentDocument', () => { describe('currentDocument', () => {
console.log('PENDING: AppComponent currentDocument'); console.log('PENDING: AppComponent currentDocument');
}); });

3
aio/src/app/app.component.ts
View File

@ -21,6 +21,7 @@ const sideNavView = 'SideNav';
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
currentNode: CurrentNode; currentNode: CurrentNode;
pageId: string;
currentDocument: DocumentContents; currentDocument: DocumentContents;
footerNodes: NavigationNode[]; footerNodes: NavigationNode[];
isSideBySide = false; isSideBySide = false;
@ -70,6 +71,7 @@ export class AppComponent implements OnInit {
this.navigationService.currentNode.subscribe(currentNode => { this.navigationService.currentNode.subscribe(currentNode => {
this.currentNode = currentNode; this.currentNode = currentNode;
this.pageId = this.currentNode.url.replace('/', '-') || 'home';
// Toggle the sidenav if the kind of view changed // Toggle the sidenav if the kind of view changed
if (this.previousNavView === currentNode.view) { return; } if (this.previousNavView === currentNode.view) { return; }
@ -131,4 +133,5 @@ export class AppComponent implements OnInit {
sideNavToggle(value?: boolean) { sideNavToggle(value?: boolean) {
this.sidenav.toggle(value); this.sidenav.toggle(value);
} }
} }