client/src/app/core/menu/menu.service.ts

   1 import { fromEvent } from 'rxjs'
   2 import { debounceTime } from 'rxjs/operators'
   3 import { Injectable } from '@angular/core'
   4 import { ScreenService } from '../wrappers'
   5
   6 @Injectable()
   7 export class MenuService {
   8   isMenuDisplayed = true
   9   isMenuChangedByUser = false
  10   menuWidth = 240  // should be kept equal to $menu-width
  11
  12   constructor (
  13     private screenService: ScreenService
  14   ) {
  15     // Do not display menu on small or touch screens
  16     if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
  17       this.setMenuDisplay(false)
  18     }
  19
  20     this.handleWindowResize()
  21   }
  22
  23   toggleMenu () {
  24     this.setMenuDisplay(!this.isMenuDisplayed)
  25     this.isMenuChangedByUser = true
  26   }
  27
  28   isDisplayed () {
  29     return this.isMenuDisplayed
  30   }
  31
  32   setMenuDisplay (display: boolean) {
  33     this.isMenuDisplayed = display
  34
  35     if (!this.screenService.isInTouchScreen()) return
  36
  37     // On touch screens, lock body scroll and display content overlay when memu is opened
  38     if (this.isMenuDisplayed) {
  39       document.body.classList.add('menu-open')
  40       this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
  41       return
  42     }
  43
  44     document.body.classList.remove('menu-open')
  45   }
  46
  47   onResize () {
  48     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
  49   }
  50
  51   private handleWindowResize () {
  52     // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
  53     if (this.screenService.isInTouchScreen()) return
  54
  55     fromEvent(window, 'resize')
  56       .pipe(debounceTime(200))
  57       .subscribe(() => this.onResize())
  58   }
  59 }