| import { Injectable } from '@angular/core'; | = | import { Injectable } from '@angular/core'; |
| import { Title } from '@angular/platform-browser'; | import { Title } from '@angular/platform-browser'; | |
| @Injectable() | @Injectable() | |
| export class AppService { | export class AppService { | |
| constructor(private titleService: Title) {} | constructor(private titleService: Title) {} | |
| // Set page title | // Set page title | |
| set pageTitle(value: string) { | set pageTitle(value: string) { | |
| this.titleService.setTitle(`${value} - Angular Starter`); | this.titleService.setTitle(`${value} - Angular Starter`); | |
| } | } | |
| // Check for RTL layout | // Check for RTL layout | |
| get isRTL() { | get isRTL() { | |
| return document.documentElement.getAttribute('dir') === 'rtl' || | return document.documentElement.getAttribute('dir') === 'rtl' || | |
| document.body.getAttribute('dir') === 'rtl'; | document.body.getAttribute('dir') === 'rtl'; | |
| } | } | |
| // Check if IE10 | // Check if IE10 | |
| get isIE10() { | get isIE10() { | |
| return typeof document['documentMode'] === 'number' && document['documentMode'] === 10; | return typeof document['documentMode'] === 'number' && document['documentMode'] === 10; | |
| } | } | |
| // Layout navbar color | // Layout navbar color | |
| get layoutNavbarBg() { | get layoutNavbarBg() { | |
| return 'navbar-theme'; | return 'navbar-theme'; | |
| } | } | |
| // Layout sidenav color | // Layout sidenav color | |
| get layoutSidenavBg() { | get layoutSidenavBg() { | |
| return 'sidenav-theme'; | return 'sidenav-theme'; | |
| } | } | |
| // Layout footer color | // Layout footer color | |
| get layoutFooterBg() { | get layoutFooterBg() { | |
| return 'footer-theme'; | return 'footer-theme'; | |
| } | } | |
| // Animate scrollTop | // Animate scrollTop | |
| scrollTop(to: number, duration: number, element = document.scrollingElement || document.documentElement) { | scrollTop(to: number, duration: number, element = document.scrollingElement || document.documentElement) { | |
| if (element.scrollTop === to) { return; } | if (element.scrollTop === to) { return; } | |
| const start = element.scrollTop; | const start = element.scrollTop; | |
| const change = to - start; | const change = to - start; | |
| const startDate = +new Date(); | const startDate = +new Date(); | |
| // t = current time; b = start value; c = change in value; d = duration | // t = current time; b = start value; c = change in value; d = duration | |
| const easeInOutQuad = (t, b, c, d) => { | const easeInOutQuad = (t, b, c, d) => { | |
| t /= d / 2; | t /= d / 2; | |
| if (t < 1) { return c / 2 * t * t + b; } | if (t < 1) { return c / 2 * t * t + b; } | |
| t--; | t--; | |
| return -c / 2 * (t * (t - 2) - 1) + b; | return -c / 2 * (t * (t - 2) - 1) + b; | |
| }; | }; | |
| const animateScroll = function() { | <> | const animateScroll = () => { |
| const currentDate = +new Date(); | = | const currentDate = +new Date(); |
| const currentTime = currentDate - startDate; | const currentTime = currentDate - startDate; | |
| element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration), 10); | element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration), 10); | |
| if (currentTime < duration) { | if (currentTime < duration) { | |
| requestAnimationFrame(animateScroll); | requestAnimationFrame(animateScroll); | |
| } else { | } else { | |
| element.scrollTop = to; | element.scrollTop = to; | |
| } | } | |
| }; | }; | |
| animateScroll(); | animateScroll(); | |
| } | } | |
| } | } |