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

   1 import { Component, OnDestroy } 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 'rxjs/add/operator/withLatestFrom';
  15 import 'rxjs/add/operator/delay';
  16
  17 // TODO: move layouts into the framework
  18 @Component({
  19   selector: 'ngx-xds-layout',
  20   styleUrls: ['./xds.layout.scss'],
  21   templateUrl: './xds.layout.html',
  22 })
  23
  24 export class XdsLayoutComponent implements OnDestroy {
  25
  26   subMenu: NbMenuItem[] = [];
  27   layout: any = {};
  28   sidebar: any = {};
  29   sidebarCompact = true;
  30
  31   protected layoutState$: Subscription;
  32   protected sidebarState$: Subscription;
  33   protected menuClick$: Subscription;
  34
  35   constructor(protected stateService: StateService,
  36     protected menuService: NbMenuService,
  37     protected themeService: NbThemeService,
  38     protected bpService: NbMediaBreakpointsService,
  39     protected sidebarService: NbSidebarService) {
  40     this.layoutState$ = this.stateService.onLayoutState()
  41       .subscribe((layout: string) => this.layout = layout);
  42
  43     this.sidebarState$ = this.stateService.onSidebarState()
  44       .subscribe((sidebar: string) => {
  45         this.sidebar = sidebar;
  46       });
  47
  48     const isBp = this.bpService.getByName('is');
  49     this.menuClick$ = this.menuService.onItemSelect()
  50       .withLatestFrom(this.themeService.onMediaQueryChange())
  51       .delay(20)
  52       .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
  53
  54         this.sidebarCompact = false;
  55         if (bpTo.width <= isBp.width) {
  56           this.sidebarService.collapse('menu-sidebar');
  57         }
  58       });
  59
  60     // Set sidebarCompact according to sidebar state changes
  61     this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact));
  62     this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
  63     this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false);
  64     this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
  65   }
  66
  67   toogleSidebar() {
  68     this.sidebarService.toggle(true, 'menu-sidebar');
  69   }
  70
  71   ngOnDestroy() {
  72     this.layoutState$.unsubscribe();
  73     this.sidebarState$.unsubscribe();
  74     this.menuClick$.unsubscribe();
  75   }
  76 }