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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
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 = {};
sidebarPinned = false;
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;
*/
// automatically collapse sidebar for narrow screen / mobile
if (bpTo.width <= isBp.width) {
this.sidebarService.collapse('menu-sidebar');
}
});
// Set sidebarCompact according to sidebar state changes
this.sidebarService.onToggle().subscribe(s => {
if (s.tag === 'menu-sidebar') {
this.sidebarPinned = false;
this.sidebarCompact = !this.sidebarCompact;
}
});
this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
this.sidebarService.onExpand().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = false));
this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
// FIXME: bug flicking menu - disable it for now
/*
// Automatically expand sidebar on mouse over
this._mouseEnterStream.flatMap(e => {
return Observable
.of(e)
.delay(100)
.takeUntil(this._mouseLeaveStream);
}).subscribe(e => {
if (this.sidebarPinned || !this.sidebarCompact) {
return;
}
// this._mouseLeaveStream.emit(null);
this.sidebarService.toggle(false, 'menu-sidebar');
});
// Automatically collapse sidebar on mouse leave
this._mouseLeaveStream.flatMap(e => {
return Observable
.of(e)
.delay(100)
.takeUntil(this._mouseEnterStream);
}).subscribe(e => {
if (this.sidebarPinned || this.sidebarCompact) {
return;
}
// this._mouseEnterStream.emit(null);
this.sidebarService.toggle(true, 'menu-sidebar');
});
*/
}
ngOnDestroy() {
this.layoutState$.unsubscribe();
this.sidebarState$.unsubscribe();
this.menuClick$.unsubscribe();
}
onMouseEnter($event) {
// FIXME: bug flicking menu - disable it for now
// this._mouseEnterStream.emit($event);
}
onMouseLeave($event) {
// FIXME: bug flicking menu - disable it for now
// this._mouseLeaveStream.emit($event);
}
pinSidebar() {
this.sidebarPinned = !this.sidebarPinned;
}
closeSidebar() {
this.sidebarService.toggle(true, 'menu-sidebar');
}
}
|
