Refactor

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -1,8 +1,7 @@
-import { TimelineElement } from "../../../model/portfolio";
-import { html } from "../../../model/misc";
-import { PageContent } from "../../content/content";
+import { TimelineElement } from '../../../model/portfolio';
+import { html } from '../../../model/misc';
 
-import "./timeline-element.scss";
+import './timeline-element.scss';
 
 export const generate = (
   { date, title, figure, description, more, link }: TimelineElement,
@@ -15,8 +14,8 @@ export const generate = (
         </div>
         <div class="card">
             <h2>${title}</h2>
-            ${PageContent.parseTypedContent(figure)}
-            <p class="description">${description}</p>
+            ${figure.toHTML()}
+            ${description.toHTML()}
             ${
               more
                 ? `
@@ -26,9 +25,9 @@ export const generate = (
                     <a class="show-less">${showLess}</a>
                 </div>
                 `
-                : ""
+                : ''
             }
-            ${link ? PageContent.parseTypedContent(link) : ""}
+            ${link ? link.toHTML() : ''}
         </div>
     </section>
 `;

src/page/timeline/timeline-element/timeline-element.scss

@@ -76,8 +76,9 @@
       @include sub-title-font();
     }
 
-    .description {
+    & > p {
       font-style: italic;
+      text-align: center;
     }
 
     .more {

src/page/timeline/timeline-element/timeline-element.ts

@@ -18,16 +18,15 @@ export class PageTimelineElement extends PageElement {
 
     if (timelineElement.more) {
       const content = new PageContent(timelineElement.more);
-      super([content]);
+      super(root, [content]);
       this.isOpen = false;
       this.more = root.querySelector('.more');
-      this.more.appendChild(content.getElement());
+      this.more.appendChild(content.element);
       window.addEventListener('resize', this.handleResize.bind(this));
       root
         .querySelector('.buttons')
         .addEventListener('click', this.toggleOpen.bind(this));
-    } else super();
-    this.setElement(root);
+    } else super(root);
   }
 
   private toggleOpen() {
@@ -38,8 +37,8 @@ export class PageTimelineElement extends PageElement {
       PageTimelineElement.hide(showLess);
       this.closeMore();
     } else {
-      PageTimelineElement.hide(showMore);
       PageTimelineElement.show(showLess);
+      PageTimelineElement.hide(showMore);
       this.openMore();
     }
 

src/page/timeline/timeline.ts

@@ -1,21 +1,15 @@
-import { TimelineElement } from '../../model/portfolio';
+import { Timeline } from '../../model/portfolio';
 import { PageElement } from '../../framework/page-element';
 import { PageTimelineElement } from './timeline-element/timeline-element';
 import { generate } from './timeline.html';
 import { createElement } from '../../framework/helper/create-element';
+import { ContainerPage } from '../../framework/container-page';
 
-export class PageTimeline extends PageElement {
-  public constructor(
-    timeline: Array<TimelineElement>,
-    showMore: string,
-    showLess: string
-  ) {
-    const root = createElement(generate());
-    const elements = timeline.map(
-      e => new PageTimelineElement(e, showMore, showLess)
+export class PageTimeline extends ContainerPage {
+  public constructor({ elements, showMoreText, showLessText }: Timeline) {
+    super(
+      createElement(generate()),
+      elements.map(e => new PageTimelineElement(e, showMoreText, showLessText))
     );
-    elements.map(e => e.getElement()).forEach(e => root.appendChild(e));
-    super(elements);
-    this.setElement(root);
   }
 }