libs/common/frame/src/services/sidebar.service.ts
Collect and maintain a list of templates candidates marked by the directive [pgrSidebar]
somewhere in the application. The templates can be accessed through templateList$
.
The application can set the explicit visibility of the sidebar (setVisibility
/show
/hide
) which gets combined
with external factors like the channel (expert
vs retail
) and the current active layout (stacked
or not).
That combined status is named show
and reflects the actual visibility of the sidebar in the sidebar.
Accessible through the observable show$
.
Methods |
Accessors |
constructor(_talyPageDataService: TalyPageDataService, _frameLayout: TalyFrameLayoutService, _channel: CHANNEL)
|
||||||||||||
Parameters :
|
hide |
hide()
|
Returns :
void
|
init |
init()
|
Returns :
void
|
registerTemplate | ||||||
registerTemplate(template: TemplateRef<>)
|
||||||
Parameters :
Returns :
void
|
setVisibility | ||||||
setVisibility(value: boolean)
|
||||||
Parameters :
Returns :
void
|
show |
show()
|
Returns :
void
|
templateList$ |
gettemplateList$()
|
show$ |
getshow$()
|
combined status of the overall visibility defined by the channel, active layout and the explicitly defined visibility |
import { CHANNEL, CHANNEL_TOKEN, TalyPageDataService } from '@allianz/taly-core';
import { Inject, Injectable, TemplateRef } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
import { TalyFrameLayoutService } from './frame-layout.service';
export type SidebarTemplateSet = Set<TemplateRef<unknown>>;
/**
* Collect and maintain a list of templates candidates marked by the directive `[pgrSidebar]`
* somewhere in the application. The templates can be accessed through `templateList$`.
*
* The application can set the explicit visibility of the sidebar (`setVisibility`/`show`/`hide`) which gets combined
* with external factors like the channel (`expert` vs `retail`) and the current active layout (`stacked` or not).
* That combined status is named `show` and reflects the actual visibility of the sidebar in the sidebar.
* Accessible through the observable `show$`.
*/
@Injectable()
export class TalyFrameSidebarService {
private _registeredTemplates: SidebarTemplateSet = new Set();
private _templatesListSubject = new BehaviorSubject<SidebarTemplateSet>(
this._registeredTemplates
);
private _visibility = false;
private _visibilitySubject = new BehaviorSubject(this._visibility);
private _showObservable$!: Observable<boolean>;
constructor(
private _talyPageDataService: TalyPageDataService,
private _frameLayout: TalyFrameLayoutService,
@Inject(CHANNEL_TOKEN) private _channel: CHANNEL
) {
this.init();
}
init() {
this._talyPageDataService.pageData$
.pipe(
skip(1), // skip the first as we subscribe to a behavior subject
tap(() => this._pageChanged())
)
.subscribe();
const isExpert: boolean = this._channel === CHANNEL.EXPERT;
const isStacked$ = this._frameLayout.isStackedLayoutObservable;
const isTooNarrow$ = this._frameLayout.hideSidebarBreakpoint$;
if (!isExpert) {
this._showObservable$ = new BehaviorSubject(false).asObservable();
return;
}
this._showObservable$ = combineLatest([isStacked$, isTooNarrow$, this._visibilitySubject]).pipe(
map(([isStacked, isTooNarrow, showSidebar]) => {
return showSidebar && !isStacked && !isTooNarrow;
}),
distinctUntilChanged()
);
}
registerTemplate(template: TemplateRef<unknown>) {
this._registeredTemplates.add(template);
this._update();
}
get templateList$() {
return this._templatesListSubject.asObservable();
}
/**
* combined status of the overall visibility defined by the channel,
* active layout and the explicitly defined visibility
*/
get show$() {
return this._showObservable$;
}
setVisibility(value: boolean) {
if (value) {
this.show();
} else {
this.hide();
}
}
hide() {
if (this._visibility === true) {
this._visibility = false;
this._visibilitySubject.next(this._visibility);
}
}
show() {
if (this._visibility === false) {
this._visibility = true;
this._visibilitySubject.next(this._visibility);
}
}
private _pageChanged() {
this._registeredTemplates.clear();
this._update();
}
private _update() {
this._templatesListSubject.next(this._registeredTemplates);
}
}