navigation-panel.component.ts 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import { Component, ViewChild } from '@angular/core';
  2. import { NavigationEnd, Router } from '@angular/router';
  3. import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
  4. import { DetailsService } from 'src/services/details/details.service';
  5. import { ModalService } from 'src/services/modal/modal.service';
  6. @Component({
  7. selector: 'navigation-panel',
  8. templateUrl: './navigation-panel.component.html',
  9. styleUrl: './navigation-panel.component.scss',
  10. })
  11. export class NavigationPanelComponent {
  12. @ViewChild('navigationBackdrop') backdrop: any;
  13. @ViewChild('navigationPanel') panel: any;
  14. public active: number = 1;
  15. constructor(
  16. private navigation: NavigationPanelService,
  17. private router: Router,
  18. private detailsAccessor: DetailsService,
  19. private modalAccessor: ModalService,
  20. ) {}
  21. public ngOnInit(): void {
  22. this.navigation.showNavigationPanel$.subscribe((state) => {
  23. if (state) {
  24. this.openPanel();
  25. } else {
  26. this.closePanel();
  27. }
  28. });
  29. this.checkForActiveTab();
  30. this.router.events.subscribe((event) => {
  31. if (event instanceof NavigationEnd) {
  32. this.checkForActiveTab();
  33. }
  34. });
  35. }
  36. public openPanel(): void {
  37. this.backdrop.nativeElement.classList.add('backdrop--open');
  38. this.panel.nativeElement.classList.add('panel--open');
  39. }
  40. public closePanel(): void {
  41. this.backdrop?.nativeElement.classList.remove('backdrop--open');
  42. this.panel?.nativeElement.classList.remove('panel--open');
  43. }
  44. public closeAll() {
  45. this.detailsAccessor.closePanel('cancel');
  46. this.modalAccessor.handleModalClosing('cancel');
  47. }
  48. public checkForActiveTab(): void {
  49. const tab = this.router.url.split('/')[2];
  50. switch (tab) {
  51. case 'stats':
  52. this.active = 1;
  53. break;
  54. case 'character':
  55. this.active = 2;
  56. break;
  57. case 'inventory':
  58. this.active = 3;
  59. break;
  60. case 'spellcards':
  61. this.active = 4;
  62. break;
  63. case 'spellbook':
  64. this.active = 5;
  65. break;
  66. case 'notes':
  67. this.active = 6;
  68. break;
  69. case 'npcs':
  70. this.active = 7;
  71. break;
  72. case 'places':
  73. this.active = 8;
  74. break;
  75. case 'quests':
  76. this.active = 9;
  77. break;
  78. case 'maps':
  79. this.active = 10;
  80. break;
  81. case 'ruleset':
  82. this.active = 11;
  83. break;
  84. case 'settings':
  85. this.active = 12;
  86. break;
  87. default:
  88. this.active = 1;
  89. break;
  90. }
  91. }
  92. public setActiveProperty(number: number) {
  93. this.active = number;
  94. }
  95. }