2019-12-23 13:52:26 +01:00
|
|
|
import {Injectable} from "@angular/core";
|
2020-11-13 17:34:39 +01:00
|
|
|
import {BehaviorSubject, Observable, Subscriber} from "rxjs";
|
2019-12-23 13:52:26 +01:00
|
|
|
import {ActivationStart, Router} from "@angular/router";
|
|
|
|
|
|
|
|
@Injectable({
|
|
|
|
providedIn: 'root'
|
|
|
|
})
|
|
|
|
export class LayoutService {
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2022-07-02 20:32:10 +02:00
|
|
|
public static HEADER_HEIGHT = '65px';
|
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
/**
|
|
|
|
* Set this to true when sidebar items are ready.
|
|
|
|
*/
|
|
|
|
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
/**
|
|
|
|
* Add hasSidebar: false on data of route config, if sidebar is not needed.
|
|
|
|
*/
|
|
|
|
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
/**
|
|
|
|
* Add hasHeader: false on data of route config, if header is not needed.
|
|
|
|
*/
|
|
|
|
private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2019-12-24 10:37:00 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
/**
|
2019-12-24 10:37:00 +01:00
|
|
|
* Add hasAdminMenu: true on data of route config, if global sidebar should be used.
|
2019-12-23 13:52:26 +01:00
|
|
|
*/
|
2020-12-11 19:33:54 +01:00
|
|
|
private hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2022-11-04 15:35:10 +01:00
|
|
|
/**
|
|
|
|
* Add hasInternalSidebar: true on data of route config, if internal sidebar should be used.
|
|
|
|
*/
|
|
|
|
private hasInternalSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2020-07-03 16:20:51 +02:00
|
|
|
/**
|
|
|
|
* Add isFrontPage: true on data of route config, if current route is for front page.
|
|
|
|
*/
|
2020-12-11 19:33:54 +01:00
|
|
|
private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
|
|
|
/**
|
|
|
|
* Add isSmallScreen: true on data of route config, if screen is small.
|
|
|
|
*/
|
|
|
|
private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
2022-10-12 14:30:39 +02:00
|
|
|
/**
|
|
|
|
* Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
|
|
|
|
*/
|
|
|
|
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
2022-03-28 10:40:21 +02:00
|
|
|
/**
|
|
|
|
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
|
|
|
|
*/
|
2022-10-12 14:30:39 +02:00
|
|
|
|
2022-03-28 10:40:21 +02:00
|
|
|
private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
|
2022-08-04 14:29:08 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Change to true will replace your Nav Header with the replaceHeader of your object.
|
|
|
|
* Be sure that replaceHeader exists.
|
|
|
|
*/
|
|
|
|
private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
|
|
|
private observer: IntersectionObserver;
|
2020-12-11 19:33:54 +01:00
|
|
|
sub: any;
|
|
|
|
|
2020-11-13 17:34:39 +01:00
|
|
|
ngOnDestroy() {
|
|
|
|
this.clearSubscriptions();
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
|
|
|
clearSubscriptions() {
|
2020-11-13 17:34:39 +01:00
|
|
|
if (this.sub instanceof Subscriber) {
|
|
|
|
this.sub.unsubscribe();
|
|
|
|
}
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
constructor(private router: Router) {
|
2020-11-13 17:34:39 +01:00
|
|
|
this.sub = this.router.events.subscribe(event => {
|
2019-12-23 13:52:26 +01:00
|
|
|
if (event instanceof ActivationStart) {
|
2022-08-04 14:29:08 +02:00
|
|
|
this.setReplaceHeader(false);
|
2019-12-23 13:52:26 +01:00
|
|
|
let data = event.snapshot.data;
|
2019-12-24 10:37:00 +01:00
|
|
|
if (data['hasSidebar'] !== undefined &&
|
2019-12-23 13:52:26 +01:00
|
|
|
data['hasSidebar'] === false) {
|
|
|
|
this.setHasSidebar(false);
|
2019-12-24 10:37:00 +01:00
|
|
|
} else {
|
2019-12-23 13:52:26 +01:00
|
|
|
this.setHasSidebar(true);
|
|
|
|
}
|
2019-12-24 10:37:00 +01:00
|
|
|
if (data['hasHeader'] !== undefined &&
|
2019-12-23 13:52:26 +01:00
|
|
|
data['hasHeader'] === false) {
|
|
|
|
this.setHasHeader(false);
|
2022-08-02 22:13:12 +02:00
|
|
|
if(typeof document !== "undefined") {
|
|
|
|
document.documentElement.style.setProperty('--header-height', '0');
|
|
|
|
}
|
2019-12-24 10:37:00 +01:00
|
|
|
} else {
|
2019-12-23 13:52:26 +01:00
|
|
|
this.setHasHeader(true);
|
2022-08-02 22:13:12 +02:00
|
|
|
if(typeof document !== "undefined") {
|
|
|
|
document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT);
|
|
|
|
}
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
2019-12-24 10:37:00 +01:00
|
|
|
if (data['hasAdminMenu'] !== undefined &&
|
|
|
|
data['hasAdminMenu'] === true) {
|
2019-12-23 13:52:26 +01:00
|
|
|
this.setHasAdminMenu(true);
|
2019-12-24 10:37:00 +01:00
|
|
|
} else {
|
|
|
|
this.setHasAdminMenu(false);
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
2022-11-04 15:35:10 +01:00
|
|
|
if (data['hasInternalSidebar'] !== undefined &&
|
|
|
|
data['hasInternalSidebar'] === true) {
|
|
|
|
this.setHasInternalSidebar(true);
|
|
|
|
} else {
|
|
|
|
this.setHasInternalSidebar(false);
|
|
|
|
}
|
2020-06-04 13:21:32 +02:00
|
|
|
if (data['isFrontPage'] !== undefined &&
|
|
|
|
data['isFrontPage'] === true) {
|
|
|
|
this.setFrontPage(true);
|
|
|
|
} else {
|
|
|
|
this.setFrontPage(false);
|
|
|
|
}
|
2020-10-12 14:39:42 +02:00
|
|
|
if (data['isSmallScreen'] !== undefined &&
|
|
|
|
data['isSmallScreen'] === true) {
|
|
|
|
this.setSmallScreen(true);
|
|
|
|
} else {
|
|
|
|
this.setSmallScreen(false);
|
2022-10-12 14:30:39 +02:00
|
|
|
}
|
|
|
|
if (data['hasQuickContact'] !== undefined &&
|
|
|
|
data['hasQuickContact'] === false) {
|
|
|
|
this.setHasQuickContact(false);
|
|
|
|
} else {
|
|
|
|
this.setHasQuickContact(true);
|
2020-10-12 14:39:42 +02:00
|
|
|
}
|
2022-03-28 10:40:21 +02:00
|
|
|
if (data['activeMenuItem'] !== undefined &&
|
|
|
|
data['activeMenuItem'] !== null) {
|
|
|
|
this.setActiveMenuItem(data['activeMenuItem']);
|
|
|
|
} else {
|
|
|
|
this.setActiveMenuItem('');
|
|
|
|
}
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
get open(): boolean {
|
|
|
|
return this.openSubject.getValue();
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
setOpen(value: boolean) {
|
|
|
|
this.openSubject.next(value);
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
get hasSidebar(): Observable<boolean> {
|
|
|
|
return this.hasSidebarSubject.asObservable();
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
setHasSidebar(value: boolean) {
|
|
|
|
this.hasSidebarSubject.next(value);
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
get hasHeader(): Observable<boolean> {
|
|
|
|
return this.hasHeaderSubject.asObservable();
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
setHasHeader(value: boolean) {
|
|
|
|
this.hasHeaderSubject.next(value);
|
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2020-02-14 16:08:54 +01:00
|
|
|
get hasAdminMenu(): Observable<boolean> {
|
2020-12-11 19:33:54 +01:00
|
|
|
return this.hasAdminMenuSubject.asObservable();
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
setHasAdminMenu(value: boolean) {
|
2020-12-11 19:33:54 +01:00
|
|
|
this.hasAdminMenuSubject.next(value);
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2022-11-04 15:35:10 +01:00
|
|
|
get hasInternalSidebar(): Observable<boolean> {
|
|
|
|
return this.hasInternalSidebarSubject.asObservable();
|
|
|
|
}
|
|
|
|
|
|
|
|
setHasInternalSidebar(value: boolean) {
|
|
|
|
this.hasInternalSidebarSubject.next(value);
|
|
|
|
}
|
|
|
|
|
2020-06-04 13:21:32 +02:00
|
|
|
get isFrontPage(): Observable<boolean> {
|
2020-12-11 19:33:54 +01:00
|
|
|
return this.isFrontPageSubject.asObservable();
|
2020-06-04 13:21:32 +02:00
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2020-06-04 13:21:32 +02:00
|
|
|
setFrontPage(value: boolean) {
|
2020-12-11 19:33:54 +01:00
|
|
|
this.isFrontPageSubject.next(value);
|
2020-06-04 13:21:32 +02:00
|
|
|
}
|
2020-12-11 19:33:54 +01:00
|
|
|
|
2022-08-04 14:29:08 +02:00
|
|
|
get replaceHeader(): Observable<boolean> {
|
|
|
|
return this.replaceHeaderSubject.asObservable();
|
|
|
|
}
|
|
|
|
|
|
|
|
setReplaceHeader(value: boolean) {
|
|
|
|
this.replaceHeaderSubject.next(value);
|
|
|
|
}
|
|
|
|
|
2020-12-11 19:33:54 +01:00
|
|
|
get isSmallScreen(): boolean {
|
|
|
|
return this.isSmallScreenSubject.getValue();
|
|
|
|
}
|
|
|
|
|
2020-10-12 14:39:42 +02:00
|
|
|
setSmallScreen(value: boolean) {
|
2020-12-11 19:33:54 +01:00
|
|
|
this.isSmallScreenSubject.next(value);
|
2020-10-12 14:39:42 +02:00
|
|
|
}
|
2022-03-28 10:40:21 +02:00
|
|
|
|
2022-10-12 14:30:39 +02:00
|
|
|
get hasQuickContact(): Observable<boolean> {
|
|
|
|
return this.hasQuickContactSubject.asObservable();
|
|
|
|
}
|
|
|
|
|
|
|
|
setHasQuickContact(value: boolean) {
|
|
|
|
this.hasQuickContactSubject.next(value);
|
|
|
|
}
|
|
|
|
|
2022-03-28 10:40:21 +02:00
|
|
|
get activeMenuItem(): string {
|
|
|
|
return this.activeMenuItemSubject.getValue();
|
|
|
|
}
|
|
|
|
|
|
|
|
setActiveMenuItem(value: string) {
|
|
|
|
this.activeMenuItemSubject.next(value);
|
|
|
|
}
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|