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   setMenuDisplay (display: boolean) {
  29     this.isMenuDisplayed = display
  30
  31     // On touch screens, lock body scroll and display content overlay when memu is opened
  32     if (this.screenService.isInTouchScreen()) {
  33       if (this.isMenuDisplayed) {
  34         document.body.classList.add('menu-open')
  35         this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
  36       } else {
  37         document.body.classList.remove('menu-open')
  38       }
  39     }
  40   }
  41
  42   onResize () {
  43     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
  44   }
  45
  46   private handleWindowResize () {
  47     // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
  48     if (this.screenService.isInTouchScreen()) {
  49       return
  50     }
  51
  52     fromEvent(window, 'resize')
  53       .pipe(debounceTime(200))
  54       .subscribe(() => this.onResize())
  55   }
  56 }