Commit 34f64f5b authored by Zéfling's avatar Zéfling 🎨

Add route navigation

parent 81d282d3
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
</li> </li>
<li class="file" <li class="file"
*ngFor="let line of files" *ngFor="let line of files"
(click)="action(line.fileName)"> [routerLink]="path + '/' + line.fileName"
[class.active]="isActivePage(path + '/' + line.fileName)">
{{line.name}} {{line.name}}
</li> </li>
</ul> </ul>
\ No newline at end of file
...@@ -11,4 +11,8 @@ ul { ...@@ -11,4 +11,8 @@ ul {
.file:hover { .file:hover {
background-color: antiquewhite; background-color: antiquewhite;
cursor: pointer; cursor: pointer;
}
.active {
color :red;
} }
\ No newline at end of file
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { DataValue, AppService } from './app.service'; import { DataValue, AppService } from './app.service';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-nav', selector: 'app-nav',
...@@ -39,10 +40,9 @@ export class AppNavComponent { ...@@ -39,10 +40,9 @@ export class AppNavComponent {
return list; return list;
} }
constructor(private appService: AppService) { } constructor(private router: Router) { }
action(path: string) { isActivePage(page: any): boolean {
this.appService.show(this.path + '/' + path); return page === this.router.url;
} }
} }
<h1 *ngIf="page">
<span>{{page.fileName}}</span>
</h1>
<div *ngIf="page">
<div class="arine">
<span *ngFor="let nom of page.path">{{nom}}</span>
</div>
<div>
<browser-line></browser-line>
<element-line *ngIf="page.data.__compat"
[element]="page.data.__compat"
[name]="page.fileName"></element-line>
<ng-container *ngFor="let data of (page.data | ngForObject)">
<element-line *ngIf="data.key !== '__compat'"
[element]="data.value.__compat"
[name]="data.key"></element-line>
</ng-container>
</div>
</div>
\ No newline at end of file
h1 {
grid-area: title;
margin: 0;
padding: 10px 0;
}
div {
grid-area: page;
}
.arine span:not(:last-child)::after {
content: " » ";
}
import { Component, Input } from '@angular/core';
import { DataValue, AppService, ChangePage } from './app.service';
import { ActivatedRoute, UrlSegment } from '@angular/router';
@Component({
selector: 'app-page',
templateUrl: './app-page.component.html',
styleUrls: ['./app-page.component.scss']
})
export class AppPageComponent {
page: ChangePage;
get data(): { [key: string]: DataValue } {
return this.appService.data;
}
isInit = false;
constructor(
private appService: AppService,
private route: ActivatedRoute
) {
appService.onData.subscribe(() => {
this.isInit = true;
});
appService.onChangePage.subscribe((page: ChangePage) => {
this.page = page;
});
this.route.url.subscribe((segment: UrlSegment[]) => {
this.appService.show(segment.join('/'));
});
}
}
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { AppPageComponent } from './app-page.component';
const routes: Routes = []; const routes: Routes = [
{
path: '**',
component: AppPageComponent
}
];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] exports: [RouterModule]
......
<ng-container *ngIf="isInit"> <ng-container *ngIf="isInit">
<nav> <nav>
<app-nav [data]="data"> <app-nav [data]="data"></app-nav>
</app-nav>
</nav> </nav>
<h1 *ngIf="page"> <router-outlet></router-outlet>
<span>{{page.fileName}}</span>
</h1>
<div *ngIf="page">
<div class="arine">
<span *ngFor="let nom of page.path">{{nom}}</span>
</div>
<div>
<browser-line></browser-line>
<element-line *ngIf="page.data.__compat"
[element]="page.data.__compat"
[name]="page.fileName"></element-line>
<ng-container *ngFor="let data of (page.data | ngForObject)">
<element-line *ngIf="data.key !== '__compat'"
[element]="data.value.__compat"
[name]="data.key"></element-line>
</ng-container>
</div>
</div>
</ng-container> </ng-container>
\ No newline at end of file
...@@ -17,17 +17,3 @@ nav { ...@@ -17,17 +17,3 @@ nav {
grid-area: nav; grid-area: nav;
overflow: auto; overflow: auto;
} }
h1 {
grid-area: title;
margin: 0;
padding: 10px 0;
}
div {
grid-area: page;
}
.arine span:not(:last-child)::after {
content: " » ";
}
import { Component, ViewEncapsulation } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { AppService, DataValue, ChangePage } from './app.service'; import { ActivatedRoute, UrlSegment } from '@angular/router';
import { AppService, DataValue } from './app.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
...@@ -11,21 +12,17 @@ export class AppComponent { ...@@ -11,21 +12,17 @@ export class AppComponent {
version = '0.1.0'; version = '0.1.0';
title = 'web-table'; title = 'web-table';
page: ChangePage;
get data(): { [key: string]: DataValue } { get data(): { [key: string]: DataValue } {
return this.appService.data; return this.appService.data;
} }
isInit = false; isInit = false;
constructor(private appService: AppService) { constructor(
private appService: AppService
) {
appService.onData.subscribe(() => { appService.onData.subscribe(() => {
this.isInit = true; this.isInit = true;
}); });
appService.onChangePage.subscribe((page: ChangePage) => {
this.page = page;
console.log(page);
});
} }
} }
...@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; ...@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppNavComponent } from './app-nav.component'; import { AppNavComponent } from './app-nav.component';
import { AppPageComponent } from './app-page.component';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { BrowserLineComponent } from './browser-line.component'; import { BrowserLineComponent } from './browser-line.component';
import { ElementLineComponent } from './element-line.component'; import { ElementLineComponent } from './element-line.component';
...@@ -15,6 +16,7 @@ import { NgForObjectPipe } from './ngfor-object'; ...@@ -15,6 +16,7 @@ import { NgForObjectPipe } from './ngfor-object';
AppNavComponent, AppNavComponent,
ElementLineComponent, ElementLineComponent,
BrowserLineComponent, BrowserLineComponent,
AppPageComponent,
NgForObjectPipe NgForObjectPipe
], ],
imports: [ imports: [
......
...@@ -49,8 +49,6 @@ export class AppService { ...@@ -49,8 +49,6 @@ export class AppService {
parselist(data: string) { parselist(data: string) {
const list = data.split('\n'); const list = data.split('\n');
// list.sort();
// browser infos // browser infos
for (const line of list) { for (const line of list) {
if (line) { if (line) {
...@@ -98,7 +96,6 @@ export class AppService { ...@@ -98,7 +96,6 @@ export class AppService {
browsers[b.id] = b; browsers[b.id] = b;
}); });
this.browsers = browsers; this.browsers = browsers;
console.log(browsers);
} }
); );
} }
...@@ -108,11 +105,10 @@ export class AppService { ...@@ -108,11 +105,10 @@ export class AppService {
this.onChangePage.next(this.pages[path]); this.onChangePage.next(this.pages[path]);
} else { } else {
this.http this.http
.get('./assets/browser-compat-data' + path, { responseType: 'json' }) .get('./assets/browser-compat-data/' + path, { responseType: 'json' })
.subscribe( .subscribe(
(data: BcdData) => { (data: BcdData) => {
const frag = path.split('/'); const frag = path.split('/');
frag.shift();
const fileName = frag.pop().replace(/\.json/g, ''); const fileName = frag.pop().replace(/\.json/g, '');
let part: any = data; let part: any = data;
for (let i = 0; i < frag.length; i++) { for (let i = 0; i < frag.length; i++) {
......
...@@ -9,17 +9,10 @@ import { BcdSupportDesc } from './browser-compat-data'; ...@@ -9,17 +9,10 @@ import { BcdSupportDesc } from './browser-compat-data';
}) })
export class BrowserLineComponent { export class BrowserLineComponent {
get browsers() { get browsers() {
console.log("browsers >", this.appService.browsers);
return this.appService.browsers; return this.appService.browsers;
} }
constructor(private appService: AppService) { } constructor(private appService: AppService) { }
} }
...@@ -9,6 +9,12 @@ ...@@ -9,6 +9,12 @@
border: 1px solid #DDD; border: 1px solid #DDD;
border-right: 0; border-right: 0;
padding: 5px 0; padding: 5px 0;
& /deep/ code {
background-color: #ececec;
border-radius: 3px;
padding: 2px 4px;
}
} }
.status span { .status span {
...@@ -23,10 +29,6 @@ ...@@ -23,10 +29,6 @@
display: inline-block; display: inline-block;
cursor: default; cursor: default;
&.deprecated {
}
&.experimental { &.experimental {
background-color: #cfa631; background-color: #cfa631;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment