closes #39

LederCards · May 8, 2024 · 695fde5 · 695fde5
1 parent d6c8239
commit 695fde5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/app/card/card.page.html b/src/app/card/card.page.html
@@ -3,7 +3,7 @@
 </ion-header>
 
 <ion-content>
-  <div class="page-container">
+  <div class="page-container" #cardPage>
     @if(cardData(); as cardData) {
     <ion-grid>
       <ion-row>
@@ -49,7 +49,7 @@
           </ion-card>
 
           @if(faq().length > 0) {
-          <ion-card class="card-info">
+          <ion-card class="card-info" #faqSection>
             <ion-card-header>
               <ion-card-title>{{ 'Pages.Card.FAQ' | translate }}</ion-card-title>
             </ion-card-header>

diff --git a/src/app/card/card.page.ts b/src/app/card/card.page.ts
@@ -3,6 +3,9 @@ import {
   computed,
   inject,
   signal,
+  viewChild,
+  type ElementRef,
+  type OnDestroy,
   type OnInit,
   type Signal,
   type WritableSignal,
@@ -20,7 +23,9 @@ import { FAQService } from '../faq.service';
   templateUrl: './card.page.html',
   styleUrls: ['./card.page.scss'],
 })
-export class CardPage implements OnInit {
+export class CardPage implements OnInit, OnDestroy {
+  private cardPage = viewChild<ElementRef>('cardPage');
+
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private cardsService = inject(CardsService);
@@ -37,6 +42,8 @@ export class CardPage implements OnInit {
     return this.faqService.getCardFAQ(cardData.game, cardData.name);
   });
 
+  private clickListener!: () => void;
+
   ngOnInit() {
     const cardId = this.route.snapshot.paramMap.get('id');
     const cardData = this.cardsService.getCardById(cardId ?? '');
@@ -51,6 +58,30 @@ export class CardPage implements OnInit {
     this.template = compiledTemplate(cardData);
 
     this.cardData.set(cardData);
+
+    this.clickListener = this.cardPage()?.nativeElement.addEventListener(
+      'click',
+      (evt: Event) => {
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        const href = (evt.target as HTMLAnchorElement)?.href;
+        if (!href) return;
+
+        const url = new URL(href);
+        const [, , cardId] = url.pathname.split('/');
+        this.router.navigate(['/card', decodeURIComponent(cardId)]);
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.clickListener) {
+      this.cardPage()?.nativeElement.removeEventListener(
+        'click',
+        this.clickListener
+      );
+    }
   }
 
   search(query: string) {