| 1 | import { Component } from '@angular/core'; | = | 1 | import { Component } from '@angular/core'; |
| 2 | import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router'; | 2 | import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router'; | |
| 3 | import { AppService } from './app.service'; | 3 | import { AppService } from './app.service'; | |
| 4 | import { LayoutService } from './layout/layout.service'; | 4 | import { LayoutService } from './layout/layout.service'; | |
| 5 | 5 | |||
| 6 | @Component({ | 6 | @Component({ | |
| 7 | selector: 'app-root', | 7 | selector: 'app-root', | |
| 8 | templateUrl: './app.component.html', | 8 | templateUrl: './app.component.html', | |
| 9 | styles: [':host { display: block; }'] | 9 | styles: [':host { display: block; }'] | |
| 10 | }) | 10 | }) | |
| 11 | export class AppComponent { | 11 | export class AppComponent { | |
| 12 | constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | 12 | constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | |
| 13 | // Subscribe to router events to handle page transition | 13 | // Subscribe to router events to handle page transition | |
| 14 | this.router.events.subscribe(this.navigationInterceptor.bind(this)); | 14 | this.router.events.subscribe(this.navigationInterceptor.bind(this)); | |
| 15 | 15 | |||
| 16 | // Disable animations and transitions in IE10 to increase performance | 16 | // Disable animations and transitions in IE10 to increase performance | |
| 17 | if (typeof document['documentMode'] === 'number' && document['documentMode'] < 11) { | <> | 17 | if (typeof (document as any).documentMode === 'number' && (document as any).documentMode < 11) { |
| 18 | const style = document.createElement('style'); | = | 18 | const style = document.createElement('style'); |
| 19 | style.textContent = ` | 19 | style.textContent = ` | |
| 20 | * { | 20 | * { | |
| 21 | -ms-animation: none !important; | 21 | -ms-animation: none !important; | |
| 22 | animation: none !important; | 22 | animation: none !important; | |
| 23 | -ms-transition: none !important; | 23 | -ms-transition: none !important; | |
| 24 | transition: none !important; | 24 | transition: none !important; | |
| 25 | }`; | 25 | }`; | |
| 26 | document.head.appendChild(style); | 26 | document.head.appendChild(style); | |
| 27 | } | 27 | } | |
| 28 | } | 28 | } | |
| 29 | 29 | |||
| 30 | private navigationInterceptor(e: RouterEvent) { | 30 | private navigationInterceptor(e: RouterEvent) { | |
| 31 | if (e instanceof NavigationStart) { | 31 | if (e instanceof NavigationStart) { | |
| 32 | // Set loading state | 32 | // Set loading state | |
| 33 | document.body.classList.add('app-loading'); | 33 | document.body.classList.add('app-loading'); | |
| 34 | } | 34 | } | |
| 35 | 35 | |||
| 36 | if (e instanceof NavigationEnd) { | 36 | if (e instanceof NavigationEnd) { | |
| 37 | // Scroll to top of the page | 37 | // Scroll to top of the page | |
| 38 | this.appService.scrollTop(0, 0); | 38 | this.appService.scrollTop(0, 0); | |
| 39 | } | 39 | } | |
| 40 | 40 | |||
| 41 | if (e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError) { | 41 | if (e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError) { | |
| 42 | // On small screens collapse sidenav | 42 | // On small screens collapse sidenav | |
| 43 | if (this.layoutService.isSmallScreen() && !this.layoutService.isCollapsed()) { | 43 | if (this.layoutService.isSmallScreen() && !this.layoutService.isCollapsed()) { | |
| 44 | setTimeout(() => this.layoutService.setCollapsed(true, true), 10); | 44 | setTimeout(() => this.layoutService.setCollapsed(true, true), 10); | |
| 45 | } | 45 | } | |
| 46 | 46 | |||
| 47 | // Remove loading state | 47 | // Remove loading state | |
| 48 | document.body.classList.remove('app-loading'); | 48 | document.body.classList.remove('app-loading'); | |
| 49 | } | 49 | } | |
| 50 | } | 50 | } | |
| 51 | } | 51 | } |