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