fix(rtl-demo): fix rtl/lrt demo in docs (#663)

* fix(rtl-demo): fix rtl/lrt demo in docs there were issues when navigation between views or when using the td-layout.. state was lost and sidenavs were not working as intended. * fix(): responsive titles in docs, style-guide and components * fix(): set template route before the chunks so they arent loaded when not needed this still will happen when trying to access any other chunk though.. for some reason they load anything before them. * fix(): issue when refreshing docs in rtl
Teradata · Jun 8, 2017 · 7874b5b · 7874b5b
1 parent e9427aa
commit 7874b5b
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 23 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,5 @@
 <td-layout #layout
+            [dir]="dir"
             [mode]="(media.registerQuery('gt-md') | async) ? 'side' : 'over'"
             [sidenavWidth]="(media.registerQuery('gt-md') | async) ? '257px' : '320px'">
   <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/" flex color="primary">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,10 +1,11 @@
 import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MdIconRegistry } from '@angular/material';
+import { MdIconRegistry, Dir } from '@angular/material';
 import { TdMediaService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { getSelectedLanguage } from './utilities/translate';
+import { getDirection } from './utilities/direction';
 
 @Component({
   selector: 'docs-covalent',
@@ -36,6 +37,8 @@ export class DocsAppComponent implements AfterViewInit {
     },
   ];
 
+  dir: string;
+
   constructor(private _iconRegistry: MdIconRegistry,
               private _domSanitizer: DomSanitizer,
               private _changeDetectorRef: ChangeDetectorRef,
@@ -74,10 +77,14 @@ export class DocsAppComponent implements AfterViewInit {
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/listener.svg'));
     this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
+
+    // set direction
+    this.dir = getDirection();
   }
 
   ngAfterViewInit(): void {
     this.media.broadcast();
     this._changeDetectorRef.detectChanges();
   }
+
 }
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -6,6 +6,9 @@ import { TemplatesComponent } from './components/templates/templates.component';
 const routes: Routes = [{
     component: HomeComponent,
     path: '',
+  }, {
+    component: TemplatesComponent,
+    path: 'templates',
   }, {
     path: '', loadChildren: './components/docs/docs.module#DocsModule',
   }, {
@@ -15,8 +18,7 @@ const routes: Routes = [{
   }, {
     path: '', loadChildren: './components/components/components.module#ComponentsModule',
   }, {
-    component: TemplatesComponent,
-    path: 'templates',
+    path: '**', redirectTo: '/',
   },
 ];
 

diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -1,5 +1,4 @@
 <td-layout-nav-list #navList
-                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     navigationRoute="/"
@@ -57,8 +56,8 @@ <h3 md-line> {{item.title}} </h3>
     </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="start center" flex>
-    <span hide-xs hide-gt-md flex>Components &amp; Addons</span>
-    <td-toolbar (changeDir)="root.dir = $event" hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
+    <span hide-gt-md flex>Components &amp; Addons</span>
+    <td-toolbar hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
   </div>
   <div class="theme-alt">
     <router-outlet></router-outlet>

diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
@@ -1,5 +1,4 @@
 <td-layout-nav-list #navList
-                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     navigationRoute="/"
@@ -21,8 +20,8 @@ <h3 md-line> {{item.title}} </h3>
       </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="start center" flex>
-    <span hide-xs hide-lg flex>Documentation</span>
-    <td-toolbar (changeDir)="root.dir = $event" hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
+    <span hide-gt-md flex>Documentation</span>
+    <td-toolbar hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
   </div>
   <div class="theme-alt">
     <router-outlet></router-outlet>

diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -1,5 +1,5 @@
-<td-layout-nav #root="$implicit" dir="ltr" logo="assets:teradata" toolbarTitle="Covalent" navigationRoute="/">
-  <td-toolbar (changeDir)="root.dir = $event"  td-toolbar-content  hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent" navigationRoute="/">
+  <td-toolbar td-toolbar-content  hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
   <td-layout-manage-list #manageList
                         [opened]="media.registerQuery('gt-sm') | async"
                         [mode]="(media.registerQuery('gt-sm') | async) ? 'side' :  'over'"

diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,5 +1,4 @@
 <td-layout-nav-list #navList
-                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     navigationRoute="/"
@@ -21,7 +20,7 @@ <h3 md-line> Item Name </h3>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="start center" flex>
     <span hide-xs hide-lg flex>Nav List</span>
-    <td-toolbar (changeDir)="root.dir = $event" hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
+    <td-toolbar hide-xs hide-sm hide-md flex layout="row"></td-toolbar>
   </div>
   <md-card>
     <md-card-title>Nav List Layout</md-card-title>

diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
@@ -1,5 +1,4 @@
 <td-layout-nav-list #navList
-                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     navigationRoute="/"
@@ -35,8 +34,8 @@ <h3 md-line> {{item.title}} </h3>
     </ng-template>
   </md-nav-list>
   <div td-toolbar-content layout="row" layout-align="center center" flex>
-    <span>Style Guide</span>
-    <td-toolbar (changeDir)="root.dir = $event" hide-xs hide-sm flex layout="row"></td-toolbar>
+    <span hide-gt-md>Style Guide</span>
+    <td-toolbar hide-xs hide-sm flex layout="row"></td-toolbar>
   </div>
   <div class="theme-alt">
     <router-outlet></router-outlet>

diff --git a/src/app/components/templates/templates.component.html b/src/app/components/templates/templates.component.html
@@ -1,5 +1,5 @@
-<td-layout-nav #root="$implicit" dir="ltr" logo="assets:teradata" toolbarTitle="Covalent" navigationRoute="/">
-    <td-toolbar (changeDir)="root.dir = $event" td-toolbar-content flex layout="row"></td-toolbar>
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent" navigationRoute="/">
+    <td-toolbar td-toolbar-content flex layout="row"></td-toolbar>
     <section class="bgc-blue-grey-600 md-whiteframe-z1">
         <div layout-gt-xs="row" layout-align="center center">
             <div flex-gt-xs="80" class="pad" tdMediaToggle="gt-xs" [mediaClasses]="['pad-lg']">

diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
@@ -6,6 +6,10 @@
 import { Component, ElementRef, Inject, Renderer2, Output, EventEmitter } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 
+import { Dir } from '@angular/material';
+
+import { getDirection, setDirection } from '../../utilities/direction';
+
 @Component({
   selector: 'td-toolbar',
   templateUrl: '././toolbar.component.html',
@@ -69,12 +73,18 @@ export class ToolbarComponent {
       title: 'Layouts feature',
     },
   ];
-  dir: string = 'ltr';
-  @Output('changeDir') onChangeDir: EventEmitter<string> = new EventEmitter<string>();
+
+  dir: 'ltr' | 'rtl' = getDirection();
+
   constructor(private _renderer: Renderer2,
-              @Inject(DOCUMENT) private _document: any) {}
-  changeDir(dir: string): void {
+              private _dir: Dir,
+              @Inject(DOCUMENT) private _document: any) {
+    this._dir.dir = this.dir;
+  }
+
+  changeDir(dir: 'ltr' | 'rtl'): void {
     this._renderer.setAttribute(this._document.querySelector('html'), 'dir', dir);
-    this.onChangeDir.emit(this.dir);
+    this._dir.dir = dir;
+    setDirection(dir);
   }
 }
diff --git a/src/app/utilities/direction.ts b/src/app/utilities/direction.ts
@@ -0,0 +1,20 @@
+export const DIRECTION_STORAGE_KEY: string = 'app-direction';
+
+/**
+ * Utility method to get selected direction from sessionStorage
+ */
+export function getDirection(): 'ltr' | 'rtl' {
+  let storedDirection: 'ltr' | 'rtl' = <any>sessionStorage.getItem(DIRECTION_STORAGE_KEY);
+  // Check if the direction was stored
+  if (storedDirection) {
+    return storedDirection;
+  }
+  return 'ltr';
+}
+
+/**
+ * Utility method to set selected direction to sessionStorage
+ */
+export function setDirection(direction: 'ltr' | 'rtl'): void {
+  sessionStorage.setItem(DIRECTION_STORAGE_KEY, direction);
+}