webapp/src/app/@theme/layouts/xds/xds.layout.ts

   1 import { Component, OnDestroy, EventEmitter } from '@angular/core';
   2 import {
   3   NbMediaBreakpoint,
   4   NbMediaBreakpointsService,
   5   NbMenuItem,
   6   NbMenuService,
   7   NbSidebarService,
   8   NbThemeService,
   9 } from '@nebular/theme';
  10
  11 import { StateService } from '../../../@core/data/state.service';
  12
  13 import { Subscription } from 'rxjs/Subscription';
  14 import { Observable } from 'rxjs/Observable';
  15 import 'rxjs/add/operator/withLatestFrom';
  16 import 'rxjs/add/operator/delay';
  17 import 'rxjs/add/observable/of';
  18 import 'rxjs/add/operator/takeUntil';
  19
  20 // TODO: move layouts into the framework
  21 @Component({
  22   selector: 'ngx-xds-layout',
  23   styleUrls: ['./xds.layout.scss'],
  24   templateUrl: './xds.layout.html',
  25 })
  26
  27 export class XdsLayoutComponent implements OnDestroy {
  28
  29   subMenu: NbMenuItem[] = [];
  30   layout: any = {};
  31   sidebar: any = {};
  32   sidebarPinned = false;
  33   sidebarCompact = true;
  34
  35   protected layoutState$: Subscription;
  36   protected sidebarState$: Subscription;
  37   protected menuClick$: Subscription;
  38
  39   private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
  40   private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
  41
  42   constructor(protected stateService: StateService,
  43     protected menuService: NbMenuService,
  44     protected themeService: NbThemeService,
  45     protected bpService: NbMediaBreakpointsService,
  46     protected sidebarService: NbSidebarService) {
  47
  48     this.layoutState$ = this.stateService.onLayoutState()
  49       .subscribe((layout: string) => this.layout = layout);
  50
  51     this.sidebarState$ = this.stateService.onSidebarState()
  52       .subscribe((sidebar: string) => {
  53         this.sidebar = sidebar;
  54       });
  55
  56     const isBp = this.bpService.getByName('is');
  57
  58     this.menuClick$ = this.menuService.onItemSelect()
  59       .withLatestFrom(this.themeService.onMediaQueryChange())
  60       .delay(20)
  61       .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
  62         /*
  63         this.sidebarCompact = false;
  64         */
  65         // automatically collapse sidebar for narrow screen / mobile
  66         if (bpTo.width <= isBp.width) {
  67           this.sidebarService.collapse('menu-sidebar');
  68         }
  69       });
  70
  71     // Set sidebarCompact according to sidebar state changes
  72     this.sidebarService.onToggle().subscribe(s => {
  73       if (s.tag === 'menu-sidebar') {
  74         this.sidebarPinned = false;
  75         this.sidebarCompact = !this.sidebarCompact;
  76       }
  77     });
  78
  79     this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
  80     this.sidebarService.onExpand().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = false));
  81     this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
  82
  83     // FIXME: bug flicking menu - disable it for now
  84     /*
  85     // Automatically expand sidebar on mouse over
  86     this._mouseEnterStream.flatMap(e => {
  87       return Observable
  88         .of(e)
  89         .delay(100)
  90         .takeUntil(this._mouseLeaveStream);
  91       }).subscribe(e => {
  92         if (this.sidebarPinned || !this.sidebarCompact) {
  93           return;
  94         }
  95         // this._mouseLeaveStream.emit(null);
  96         this.sidebarService.toggle(false, 'menu-sidebar');
  97       });
  98
  99     // Automatically collapse sidebar on mouse leave
 100     this._mouseLeaveStream.flatMap(e => {
 101       return Observable
 102         .of(e)
 103         .delay(100)
 104         .takeUntil(this._mouseEnterStream);
 105       }).subscribe(e => {
 106         if (this.sidebarPinned || this.sidebarCompact) {
 107           return;
 108         }
 109         // this._mouseEnterStream.emit(null);
 110         this.sidebarService.toggle(true, 'menu-sidebar');
 111       });
 112       */
 113   }
 114
 115   ngOnDestroy() {
 116     this.layoutState$.unsubscribe();
 117     this.sidebarState$.unsubscribe();
 118     this.menuClick$.unsubscribe();
 119   }
 120
 121   onMouseEnter($event) {
 122     // FIXME: bug flicking menu - disable it for now
 123     // this._mouseEnterStream.emit($event);
 124   }
 125
 126   onMouseLeave($event) {
 127     // FIXME: bug flicking menu - disable it for now
 128     // this._mouseLeaveStream.emit($event);
 129   }
 130
 131   pinSidebar() {
 132     this.sidebarPinned = !this.sidebarPinned;
 133   }
 134
 135   closeSidebar() {
 136     this.sidebarService.toggle(true, 'menu-sidebar');
 137   }
 138 }