323 lines
13 KiB
TypeScript
323 lines
13 KiB
TypeScript
import { Component, OnInit, Renderer2, HostListener, Inject } from '@angular/core';
|
|
import { ThemeSettingsService } from '../settings/theme-settings.service';
|
|
import { takeUntil } from 'rxjs/operators';
|
|
import { Subject } from 'rxjs';
|
|
import { DeviceDetectorService } from '../../_services/device-detector.service';
|
|
import { AppConstants } from '../../_helpers/app.constants';
|
|
import { Router, NavigationStart, NavigationEnd, Event, NavigationError } from '@angular/router';
|
|
import { DOCUMENT } from '@angular/common';
|
|
import { NavbarService } from 'src/app/_services/navbar.service';
|
|
|
|
@Component({
|
|
selector: 'app-private-layout',
|
|
templateUrl: './private-layout.component.html',
|
|
styleUrls: ['./private-layout.component.css']
|
|
})
|
|
export class PrivateLayoutComponent implements OnInit {
|
|
|
|
private _unsubscribeAll: Subject<any>;
|
|
private _themeSettingsConfig: any;
|
|
public layout: any;
|
|
public customizer: any;
|
|
public buybutton: any;
|
|
deviceInfo = null;
|
|
|
|
constructor(private renderer: Renderer2,
|
|
@Inject(DOCUMENT) private document: Document,
|
|
private router: Router,
|
|
private navbarService: NavbarService,
|
|
private _themeSettingsService: ThemeSettingsService,
|
|
private deviceService: DeviceDetectorService) {
|
|
this._unsubscribeAll = new Subject();
|
|
|
|
this.router.events.subscribe((event: Event) => {
|
|
if (event instanceof NavigationStart) {
|
|
// Show loading indicator
|
|
}
|
|
if (event instanceof NavigationEnd) {
|
|
// Hide loading indicator
|
|
if (this.router.url === '/chats' || this.router.url === '/chats/static-chat') {
|
|
this.renderer.addClass(document.body, 'chat-application');
|
|
} else {
|
|
this.renderer.removeClass(document.body, 'chat-application');
|
|
}
|
|
|
|
if (this.router.url === '/email') {
|
|
this.renderer.addClass(document.body, 'email-application');
|
|
} else {
|
|
this.renderer.removeClass(document.body, 'email-application');
|
|
}
|
|
|
|
if (this.router.url === '/contacts') {
|
|
this.renderer.addClass(document.body, 'app-contacts');
|
|
} else {
|
|
this.renderer.removeClass(document.body, 'app-contacts');
|
|
}
|
|
|
|
if (this.router.url === '/todos') {
|
|
this.renderer.addClass(document.body, 'todo');
|
|
} else {
|
|
this.renderer.removeClass(document.body, 'todo');
|
|
}
|
|
if (this.router.url === '/todo-app') {
|
|
this.renderer.addClass(document.body, 'todo-application');
|
|
} else {
|
|
this.renderer.removeClass(document.body, 'todo-application');
|
|
}
|
|
}
|
|
|
|
if (event instanceof NavigationError) {
|
|
// Hide loading indicator
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
|
|
this.renderer.removeClass(document.body, 'bg-full-screen-image');
|
|
|
|
// Subscribe to config changes
|
|
this._themeSettingsService.config
|
|
.pipe(takeUntil(this._unsubscribeAll))
|
|
.subscribe((config) => {
|
|
this._themeSettingsConfig = config;
|
|
if (localStorage.getItem('currentLayoutStyle')) {
|
|
this._themeSettingsConfig.layout.style = localStorage.getItem('currentLayoutStyle');
|
|
}
|
|
});
|
|
|
|
this.deviceInfo = this.deviceService.getDeviceInfo();
|
|
const isMobile = this.deviceService.isMobile();
|
|
this.handleBody(isMobile);
|
|
this.handleCollapsibleMenu();
|
|
}
|
|
|
|
handleBody(isMobile: boolean) {
|
|
const _self = this;
|
|
|
|
if (this._themeSettingsConfig.layout.style === 'vertical') {
|
|
_self.renderer.setAttribute(document.body, 'data-menu', 'vertical-menu-modern');
|
|
} else {
|
|
_self.renderer.setAttribute(document.body, 'data-menu', 'horizontal-menu-modern');
|
|
}
|
|
|
|
let currentBodyClassList = [];
|
|
this.layout = this._themeSettingsConfig.layout.style;
|
|
this.customizer = this._themeSettingsConfig.customizer;
|
|
this.buybutton = this._themeSettingsConfig.buybutton;
|
|
// Vertical resposive view
|
|
if (this._themeSettingsConfig.layout.style === 'vertical' &&
|
|
window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH) {
|
|
const previosBodyClassList = [].slice.call(document.body.classList);
|
|
previosBodyClassList.forEach(function (c) {
|
|
_self.renderer.removeClass(document.body, c);
|
|
});
|
|
if (this._themeSettingsConfig.layout.style === 'vertical') {
|
|
currentBodyClassList = ['vertical-layout', 'vertical-overlay-menu', '2-columns', 'pace-done', 'menu-close', 'fixed-navbar'];
|
|
if (this._themeSettingsConfig.layout.pattern === 'fixed') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
} else {
|
|
currentBodyClassList = ['vertical-layout', '2-columns', 'vertical-overlay-menu', 'pace-done', 'menu-hide'];
|
|
}
|
|
if (this._themeSettingsConfig.layout.pattern === 'fixed') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === '') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'boxed') {
|
|
this.renderer.addClass(document.body, 'boxed-layout');
|
|
this.renderer.addClass(document.body, 'container');
|
|
this.renderer.addClass(document.body, 'fixed-navbar');
|
|
}
|
|
// Horizontal resposive view
|
|
} else if (this._themeSettingsConfig.layout.style === 'horizontal' &&
|
|
window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH_HORIZONTAL) {
|
|
const previosBodyClassList = [].slice.call(document.body.classList);
|
|
previosBodyClassList.forEach(function (c) {
|
|
_self.renderer.removeClass(document.body, c);
|
|
});
|
|
currentBodyClassList = ['horizontal-layout', 'horizontal-menu', '2-columns', 'pace-done',
|
|
'fixed-navbar', 'menu-hide'];
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'fixed') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === '') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'boxed') {
|
|
this.renderer.addClass(document.body, 'boxed-layout');
|
|
this.renderer.addClass(document.body, 'container');
|
|
this.renderer.addClass(document.body, 'fixed-navbar');
|
|
}
|
|
// Normal view
|
|
} else {
|
|
const previosBodyClassList = [].slice.call(document.body.classList);
|
|
let callapseOrExpanded = '';
|
|
previosBodyClassList.forEach(function (c) {
|
|
if (c === 'menu-collapsed') {
|
|
callapseOrExpanded = 'menu-collapsed';
|
|
} else if (c === 'menu-expanded') {
|
|
callapseOrExpanded = 'menu-expanded';
|
|
}
|
|
_self.renderer.removeClass(document.body, c);
|
|
});
|
|
if (this._themeSettingsConfig.layout.style === 'vertical') {
|
|
if (callapseOrExpanded === '') {
|
|
const toggleIcon = document.getElementsByClassName('toggle-icon');
|
|
if (toggleIcon.item && toggleIcon.item(0) &&
|
|
toggleIcon.item(0).classList.contains('ft-toggle-right')) {
|
|
callapseOrExpanded = 'menu-expanded';
|
|
} else {
|
|
callapseOrExpanded = 'menu-collapsed';
|
|
}
|
|
}
|
|
|
|
// callapseOrExpanded = callapseOrExpanded !== '' ? callapseOrExpanded : 'menu-collapsed';
|
|
currentBodyClassList = ['vertical-layout', 'vertical-menu-modern', '2-columns', 'pace-done', 'menu-close', callapseOrExpanded];
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'fixed') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === '') {
|
|
currentBodyClassList.push('fixed-navbar');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'boxed') {
|
|
this.renderer.addClass(document.body, 'boxed-layout');
|
|
this.renderer.addClass(document.body, 'container');
|
|
this.renderer.addClass(document.body, 'fixed-navbar');
|
|
}
|
|
|
|
} else {
|
|
currentBodyClassList = ['horizontal-layout', '2-columns', 'horizontal-menu'];
|
|
if (window.innerWidth >= AppConstants.MOBILE_RESPONSIVE_WIDTH) {
|
|
currentBodyClassList.push('menu-expanded');
|
|
} else {
|
|
currentBodyClassList.push('menu-collapsed');
|
|
}
|
|
|
|
if (this._themeSettingsConfig.layout.pattern === 'boxed') {
|
|
this.renderer.addClass(document.body, 'boxed-layout');
|
|
this.renderer.addClass(document.body, 'container');
|
|
}
|
|
}
|
|
}
|
|
const footer = document.getElementById('footer');
|
|
// if (this.router.url == '/chats') {
|
|
// const footer = document.getElementById('footer');
|
|
if (this.router.url === '/chats' || this.router.url === '/chats/static-chat') {
|
|
currentBodyClassList.push('chat-application');
|
|
// footer.classList.add('fixed-bottom');
|
|
} else if (currentBodyClassList.includes('fixed-bottom')) {
|
|
currentBodyClassList.push('chat-application');
|
|
currentBodyClassList = currentBodyClassList.filter(item => item !== 'fixed-bottom');
|
|
footer.classList.remove('fixed-bottom');
|
|
}
|
|
|
|
if (this.router.url === '/email') {
|
|
currentBodyClassList.push('email-application');
|
|
// footer.classList.add('fixed-bottom');
|
|
} else if (currentBodyClassList.includes('fixed-bottom')) {
|
|
currentBodyClassList.push('email-application');
|
|
currentBodyClassList = currentBodyClassList.filter(item => item !== 'fixed-bottom');
|
|
footer.classList.remove('fixed-bottom');
|
|
}
|
|
|
|
if (this.router.url === '/contacts') {
|
|
currentBodyClassList.push('app-contacts');
|
|
}
|
|
if (this.router.url === '/todos') {
|
|
currentBodyClassList.push('todo');
|
|
}
|
|
if (this.router.url === '/todo-app') {
|
|
currentBodyClassList.push('todo-application');
|
|
}
|
|
|
|
currentBodyClassList.forEach(function (c) {
|
|
_self.renderer.addClass(document.body, c);
|
|
});
|
|
this.handleFullScreen();
|
|
}
|
|
|
|
handleFullScreen() {
|
|
const toggleIcon = document.getElementsByClassName('ficon');
|
|
if (window.innerWidth === screen.width && window.innerHeight === screen.height && toggleIcon.item(0)) {
|
|
this.renderer.removeClass(toggleIcon.item(0), 'ft-maximize');
|
|
this.renderer.addClass(toggleIcon.item(0), 'ft-minimize');
|
|
} else if (toggleIcon.item(0)) {
|
|
this.renderer.addClass(toggleIcon.item(0), 'ft-maximize');
|
|
this.renderer.removeClass(toggleIcon.item(0), 'ft-minimize');
|
|
}
|
|
}
|
|
|
|
handleCollapsibleMenu() {
|
|
if (this._themeSettingsConfig.menu === 'collapse') {
|
|
// show the left aside menu
|
|
this.navbarService.setFixedMenu(false);
|
|
this.document.body.classList.remove('menu-expanded');
|
|
this.document.body.classList.add('menu-collapsed');
|
|
} else {
|
|
this.navbarService.setFixedMenu(true);
|
|
this.document.body.classList.remove('menu-collapsed');
|
|
this.document.body.classList.add('menu-expanded');
|
|
}
|
|
}
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
onResize(event) {
|
|
const menuClose = document.body.getElementsByClassName('menu-close');
|
|
const toggle = document.getElementsByClassName('content-overlay');
|
|
const sidenavOverlay = document.getElementsByClassName('sidenav-overlay');
|
|
const emailMenu = document.getElementsByClassName('email-app-menu');
|
|
const toggleIcon = document.getElementById('sidebar-left');
|
|
|
|
if (event.target.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH) {
|
|
this.handleBody(true);
|
|
if (menuClose) {
|
|
this.renderer.removeClass(sidenavOverlay.item(0), 'd-block');
|
|
this.renderer.addClass(sidenavOverlay.item(0), 'd-none');
|
|
}
|
|
} else {
|
|
this.handleBody(false);
|
|
}
|
|
if (toggle && (this.router.url === '/chats' || this.router.url === '/static-chat' ||
|
|
this.router.url === '/todos' || this.router.url === '/contacts') &&
|
|
event.target.innerWidth > AppConstants.MOBILE_RESPONSIVE_WIDTH) {
|
|
this.renderer.removeClass(toggle.item(0), 'show');
|
|
this.renderer.removeClass(sidenavOverlay.item(0), 'd-block');
|
|
this.renderer.addClass(sidenavOverlay.item(0), 'd-none');
|
|
this.renderer.removeClass(toggleIcon, 'show');
|
|
}
|
|
if ((toggle || sidenavOverlay) && this.router.url === '/email' && event.target.innerWidth > 767) {
|
|
this.renderer.removeClass(toggle.item(0), 'show');
|
|
this.renderer.removeClass(emailMenu.item(0), 'show');
|
|
this.renderer.removeClass(sidenavOverlay.item(0), 'd-block');
|
|
this.renderer.addClass(sidenavOverlay.item(0), 'd-none');
|
|
}
|
|
}
|
|
|
|
rightbar(event) {
|
|
const toggle = document.getElementById('sidenav-overlay');
|
|
if (event.currentTarget.className === 'sidenav-overlay d-block') {
|
|
this.renderer.removeClass(toggle, 'd-block');
|
|
this.document.body.classList.remove('menu-open');
|
|
this.document.body.classList.add('menu-close');
|
|
this.renderer.addClass(toggle, 'd-none');
|
|
} else if (event.currentTarget.className === 'sidenav-overlay d-none') {
|
|
this.renderer.removeClass(toggle, 'd-none');
|
|
this.document.body.classList.remove('menu-close');
|
|
this.document.body.classList.add('menu-open');
|
|
this.renderer.addClass(toggle, 'd-block');
|
|
}
|
|
}
|
|
|
|
}
|