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