From 0b754bf7ae417dec7285b10f8a3d327c329a7cd9 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 25 Sep 2022 18:01:45 +0200
Subject: [PATCH] Open card when following link

---
 src/helper/title-to-fragment.ts               |  2 +-
 .../timeline-element/timeline-element.html.ts |  4 +--
 src/page/timeline-element/timeline-element.ts | 28 +++++++++++++------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/helper/title-to-fragment.ts b/src/helper/title-to-fragment.ts
index 48b951b..4dce638 100644
--- a/src/helper/title-to-fragment.ts
+++ b/src/helper/title-to-fragment.ts
@@ -1,2 +1,2 @@
 export const titleToFragment = (title: string): string =>
-  encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));
+  '#' + encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));
diff --git a/src/page/timeline-element/timeline-element.html.ts b/src/page/timeline-element/timeline-element.html.ts
index 3790acc..f2c9443 100644
--- a/src/page/timeline-element/timeline-element.html.ts
+++ b/src/page/timeline-element/timeline-element.html.ts
@@ -8,7 +8,7 @@ export const generate = (
   { date, title, description, more, links }: TimelineElementParameters,
   showMore: string
 ): html => `
-  <article id="${titleToFragment(title)}" class="timeline-element">
+  <article id="${titleToFragment(title).replace('#', '')}" class="timeline-element">
     <div class="line-container">
       <div class="line"></div>
       <p class="date">${date}</p>
@@ -17,7 +17,7 @@ export const generate = (
       <div class="figure"></div>
       <div class="lower">
         <h2>
-          <a href="#${titleToFragment(title)}">${title}</a>
+          <a href="${titleToFragment(title)}">${title}</a>
         </h2>
 
         <p class="description">${description}</p>
diff --git a/src/page/timeline-element/timeline-element.ts b/src/page/timeline-element/timeline-element.ts
index 05b1ad0..ea63864 100644
--- a/src/page/timeline-element/timeline-element.ts
+++ b/src/page/timeline-element/timeline-element.ts
@@ -1,4 +1,5 @@
 import { createElement } from '../../helper/create-element';
+import { titleToFragment } from '../../helper/title-to-fragment';
 import { PageElement } from '../page-element';
 import { TimelineElementParameters } from './timeline-element-parameters';
 import { generate } from './timeline-element.html';
@@ -8,50 +9,61 @@ export class TimelineElement extends PageElement {
   private more: HTMLElement;
 
   public constructor(
-    timelineElement: TimelineElementParameters,
+    private timelineElement: TimelineElementParameters,
     private readonly showMore: string,
     private readonly showLess: string
   ) {
     super(createElement(generate(timelineElement, showMore)));
-    this.isOpen = false;
     this.more = this.query('.more');
     addEventListener('resize', this.handleResize.bind(this));
 
     this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
+
     this.attachElementByReplacing(
       '.figure',
       timelineElement.figure instanceof PageElement
         ? timelineElement.figure
         : new PageElement(createElement(timelineElement.figure))
     );
-    this.isOpen = false;
+  }
+
+  protected initialize(): void {
+    super.initialize();
+
+    if (titleToFragment(this.timelineElement.title) === window.location.hash) {
+      this.openMore();
+    }
   }
 
   private toggleOpen() {
     if (this.isOpen) {
-      this.query('.info-button p').innerText = this.showMore;
       this.closeMore();
     } else {
-      this.query('.info-button p').innerText = this.showLess;
       this.openMore();
     }
-
-    this.isOpen = !this.isOpen;
   }
 
   private openMore() {
+    this.isOpen = true;
+
+    this.query('.info-button > p').innerText = this.showLess;
+
     const deltaHeight = this.more.scrollHeight;
     this.more.style.height = `${deltaHeight.toString()}px`;
   }
 
   private closeMore() {
+    this.isOpen = false;
+
+    this.query('.info-button > p').innerText = this.showMore;
+
     this.more.style.height = '0';
   }
 
   private handleResize() {
     if (this.isOpen) {
       this.more.style.height = 'auto';
-      this.openMore.bind(this);
+      this.openMore();
     }
   }
 }