123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- import { Component, ViewChild } from '@angular/core';
- import { NavigationEnd, Router } from '@angular/router';
- import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
- import { DetailsService } from 'src/services/details/details.service';
- import { ModalService } from 'src/services/modal/modal.service';
- @Component({
- selector: 'navigation-panel',
- templateUrl: './navigation-panel.component.html',
- styleUrl: './navigation-panel.component.scss',
- })
- export class NavigationPanelComponent {
- @ViewChild('navigationBackdrop') backdrop: any;
- @ViewChild('navigationPanel') panel: any;
- public active: number = 1;
- constructor(
- private navigation: NavigationPanelService,
- private router: Router,
- private detailsAccessor: DetailsService,
- private modalAccessor: ModalService,
- ) {}
- public ngOnInit(): void {
- this.navigation.showNavigationPanel$.subscribe((state) => {
- if (state) {
- this.openPanel();
- } else {
- this.closePanel();
- }
- });
- this.checkForActiveTab();
- this.router.events.subscribe((event) => {
- if (event instanceof NavigationEnd) {
- this.checkForActiveTab();
- }
- });
- }
- public openPanel(): void {
- this.backdrop.nativeElement.classList.add('backdrop--open');
- this.panel.nativeElement.classList.add('panel--open');
- }
- public closePanel(): void {
- this.backdrop?.nativeElement.classList.remove('backdrop--open');
- this.panel?.nativeElement.classList.remove('panel--open');
- }
- public closeAll() {
- this.detailsAccessor.closePanel('cancel');
- this.modalAccessor.handleModalClosing('cancel');
- }
- public checkForActiveTab(): void {
- const tab = this.router.url.split('/')[2];
- switch (tab) {
- case 'stats':
- this.active = 1;
- break;
- case 'character':
- this.active = 2;
- break;
- case 'inventory':
- this.active = 3;
- break;
- case 'spellcards':
- this.active = 4;
- break;
- case 'spellbook':
- this.active = 5;
- break;
- case 'notes':
- this.active = 6;
- break;
- case 'npcs':
- this.active = 7;
- break;
- case 'places':
- this.active = 8;
- break;
- case 'quests':
- this.active = 9;
- break;
- case 'maps':
- this.active = 10;
- break;
- case 'ruleset':
- this.active = 11;
- break;
- case 'settings':
- this.active = 12;
- break;
- default:
- this.active = 1;
- break;
- }
- }
- public setActiveProperty(number: number) {
- this.active = number;
- }
- }
|