From 34f64f5bd74fc641f7be62c7f32662624386051b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Z=C3=A9fling=20=28C=C3=A9lian=29?= Date: Sat, 27 Apr 2019 02:49:18 +0200 Subject: [PATCH] Add route navigation --- src/app/app-nav.component.html | 3 ++- src/app/app-nav.component.scss | 4 ++++ src/app/app-nav.component.ts | 8 +++---- src/app/app-page.component.html | 19 ++++++++++++++++ src/app/app-page.component.scss | 14 ++++++++++++ src/app/app-page.component.ts | 34 +++++++++++++++++++++++++++++ src/app/app-routing.module.ts | 9 ++++++-- src/app/app.component.html | 23 ++----------------- src/app/app.component.scss | 14 ------------ src/app/app.component.ts | 13 +++++------ src/app/app.module.ts | 2 ++ src/app/app.service.ts | 6 +---- src/app/browser-line.component.ts | 7 ------ src/app/element-line.component.scss | 10 +++++---- 14 files changed, 100 insertions(+), 66 deletions(-) create mode 100644 src/app/app-page.component.html create mode 100644 src/app/app-page.component.scss create mode 100644 src/app/app-page.component.ts diff --git a/src/app/app-nav.component.html b/src/app/app-nav.component.html index 273bf21..2c9af03 100644 --- a/src/app/app-nav.component.html +++ b/src/app/app-nav.component.html @@ -9,7 +9,8 @@
  • + [routerLink]="path + '/' + line.fileName" + [class.active]="isActivePage(path + '/' + line.fileName)"> {{line.name}}
    • \ No newline at end of file diff --git a/src/app/app-nav.component.scss b/src/app/app-nav.component.scss index da96726..dba9cc0 100644 --- a/src/app/app-nav.component.scss +++ b/src/app/app-nav.component.scss @@ -11,4 +11,8 @@ ul { .file:hover { background-color: antiquewhite; cursor: pointer; +} + +.active { + color :red; } \ No newline at end of file diff --git a/src/app/app-nav.component.ts b/src/app/app-nav.component.ts index db2c859..cd88f13 100644 --- a/src/app/app-nav.component.ts +++ b/src/app/app-nav.component.ts @@ -1,5 +1,6 @@ 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; } - } diff --git a/src/app/app-page.component.html b/src/app/app-page.component.html new file mode 100644 index 0000000..9341b49 --- /dev/null +++ b/src/app/app-page.component.html @@ -0,0 +1,19 @@ +

    + {{page.fileName}} +

    +
    +
    + {{nom}} +
    +
    + + + + + +
    +
    \ No newline at end of file diff --git a/src/app/app-page.component.scss b/src/app/app-page.component.scss new file mode 100644 index 0000000..c0d9022 --- /dev/null +++ b/src/app/app-page.component.scss @@ -0,0 +1,14 @@ + +h1 { + grid-area: title; + margin: 0; + padding: 10px 0; +} + +div { + grid-area: page; +} + +.arine span:not(:last-child)::after { + content: " » "; +} diff --git a/src/app/app-page.component.ts b/src/app/app-page.component.ts new file mode 100644 index 0000000..9faaa30 --- /dev/null +++ b/src/app/app-page.component.ts @@ -0,0 +1,34 @@ +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('/')); + }); + } +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d425c6f..c7c31f7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,13 @@ 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] diff --git a/src/app/app.component.html b/src/app/app.component.html index 36231a0..72912bc 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,25 +1,6 @@ -

    - {{page.fileName}} -

    -
    -
    - {{nom}} -
    -
    - - - - - -
    -
    +     \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 63dbc32..7c28ad0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -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: " » "; -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6fc534c..3cef194 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ 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); - }); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9613793..a779c8e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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: [ diff --git a/src/app/app.service.ts b/src/app/app.service.ts index 3b59b0c..60383a3 100644 --- a/src/app/app.service.ts +++ b/src/app/app.service.ts @@ -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++) { diff --git a/src/app/browser-line.component.ts b/src/app/browser-line.component.ts index 2d15cb0..6bb761e 100644 --- a/src/app/browser-line.component.ts +++ b/src/app/browser-line.component.ts @@ -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) { } - - } diff --git a/src/app/element-line.component.scss b/src/app/element-line.component.scss index 6117b0a..0954287 100644 --- a/src/app/element-line.component.scss +++ b/src/app/element-line.component.scss @@ -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; } -- GitLab