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

Add route navigation

parent 81d282d3
......@@ -9,7 +9,8 @@
</li>
<li class="file"
*ngFor="let line of files"
(click)="action(line.fileName)">
[routerLink]="path + '/' + line.fileName"
[class.active]="isActivePage(path + '/' + line.fileName)">
{{line.name}}
</li>
</ul>
\ No newline at end of file
......@@ -11,4 +11,8 @@ ul {
.file:hover {
background-color: antiquewhite;
cursor: pointer;
}
.active {
color :red;
}
\ No newline at end of file
import { Component, Input } from '@angular/core';
import { DataValue, AppService } from './app.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-nav',
......@@ -39,10 +40,9 @@ export class AppNavComponent {
return list;
}
constructor(private appService: AppService) { }
constructor(private router: Router) { }
action(path: string) {
this.appService.show(this.path + '/' + path);
isActivePage(page: any): boolean {
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 { Routes, RouterModule } from '@angular/router';
import { AppPageComponent } from './app-page.component';
const routes: Routes = [];
const routes: Routes = [
{
path: '**',
component: AppPageComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
......
<ng-container *ngIf="isInit">
<nav>
<app-nav [data]="data">
</app-nav>
<app-nav [data]="data"></app-nav>
</nav>
<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>
<router-outlet></router-outlet>
</ng-container>
\ No newline at end of file
......@@ -17,17 +17,3 @@ nav {
grid-area: nav;
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 { AppService, DataValue, ChangePage } from './app.service';
import { ActivatedRoute, UrlSegment } from '@angular/router';
import { AppService, DataValue } from './app.service';
@Component({
selector: 'app-root',
......@@ -11,21 +12,17 @@ export class AppComponent {
version = '0.1.0';
title = 'web-table';
page: ChangePage;
get data(): { [key: string]: DataValue } {
return this.appService.data;
}
isInit = false;
constructor(private appService: AppService) {
constructor(
private appService: AppService
) {
appService.onData.subscribe(() => {
this.isInit = true;
});
appService.onChangePage.subscribe((page: ChangePage) => {
this.page = page;
console.log(page);
});
}
}
......@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppNavComponent } from './app-nav.component';
import { AppPageComponent } from './app-page.component';
import { AppComponent } from './app.component';
import { BrowserLineComponent } from './browser-line.component';
import { ElementLineComponent } from './element-line.component';
......@@ -15,6 +16,7 @@ import { NgForObjectPipe } from './ngfor-object';
AppNavComponent,
ElementLineComponent,
BrowserLineComponent,
AppPageComponent,
NgForObjectPipe
],
imports: [
......
......@@ -49,8 +49,6 @@ export class AppService {
parselist(data: string) {
const list = data.split('\n');
// list.sort();
// browser infos
for (const line of list) {
if (line) {
......@@ -98,7 +96,6 @@ export class AppService {
browsers[b.id] = b;
});
this.browsers = browsers;
console.log(browsers);
}
);
}
......@@ -108,11 +105,10 @@ export class AppService {
this.onChangePage.next(this.pages[path]);
} else {
this.http
.get('./assets/browser-compat-data' + path, { responseType: 'json' })
.get('./assets/browser-compat-data/' + path, { responseType: 'json' })
.subscribe(
(data: BcdData) => {
const frag = path.split('/');
frag.shift();
const fileName = frag.pop().replace(/\.json/g, '');
let part: any = data;
for (let i = 0; i < frag.length; i++) {
......
......@@ -9,17 +9,10 @@ import { BcdSupportDesc } from './browser-compat-data';
})
export class BrowserLineComponent {
get browsers() {
console.log("browsers >", this.appService.browsers);
return this.appService.browsers;
}
constructor(private appService: AppService) { }
}
......@@ -9,6 +9,12 @@
border: 1px solid #DDD;
border-right: 0;
padding: 5px 0;
& /deep/ code {
background-color: #ececec;
border-radius: 3px;
padding: 2px 4px;
}
}
.status span {
......@@ -23,10 +29,6 @@
display: inline-block;
cursor: default;
&.deprecated {
}
&.experimental {
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