client/src/app/shared/misc/screen.service.ts

   1 import { Injectable } from '@angular/core'
   2
   3 @Injectable()
   4 export class ScreenService {
   5   private windowInnerWidth: number
   6   private lastFunctionCallTime: number
   7   private cacheForMs = 500
   8
   9   constructor () {
  10     this.refreshWindowInnerWidth()
  11   }
  12
  13   isInSmallView () {
  14     return this.getWindowInnerWidth() < 800
  15   }
  16
  17   isInMobileView () {
  18     return this.getWindowInnerWidth() < 500
  19   }
  20
  21   isInTouchScreen () {
  22     return 'ontouchstart' in window || navigator.msMaxTouchPoints
  23   }
  24
  25   // Cache window inner width, because it's an expensive call
  26   private getWindowInnerWidth () {
  27     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
  28
  29     return this.windowInnerWidth
  30   }
  31
  32   private refreshWindowInnerWidth () {
  33     this.lastFunctionCallTime = new Date().getTime()
  34
  35     this.windowInnerWidth = window.innerWidth
  36   }
  37
  38   private cacheWindowInnerWidthExpired () {
  39     if (!this.lastFunctionCallTime) return true
  40
  41     return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
  42   }
  43 }