Remove "framework"

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

@@ -1,10 +1,10 @@
-import { TimelineElement } from '../../../model/portfolio';
-import { html } from '../../../framework/model/misc';
+import { TimelineElement } from '../../../types/portfolio';
 
 import './timeline-element.scss';
+import { html } from '../../../types/html';
 
 export const generate = (
-  { date, title, figure, description, more, link }: TimelineElement,
+  { date, title, more }: TimelineElement,
   showMore: string,
   showLess: string
 ): html => `
@@ -15,8 +15,8 @@ export const generate = (
         </div>
         <div class="card">
             <h2>${title}</h2>
-            ${figure.toHTML(true)}
-            ${description.toHTML()}
+            <div class="figure"></div>
+            <div class="description"></div>
             ${
               more
                 ? `
@@ -28,7 +28,7 @@ export const generate = (
                 `
                 : ''
             }
-            ${link ? link.toHTML() : ''}
+            <div class="link"></div>
         </div>
     </section>
 `;

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

@@ -1,9 +1,9 @@
-import { TimelineElement } from '../../../model/portfolio';
+import { TimelineElement } from '../../../types/portfolio';
 import { PageContent } from '../../content/content';
-import { PageElement } from '../../../framework/page-element';
+import { PageElement } from '../../page-element';
 import { generate } from './timeline-element.html';
-import { createElement } from '../../../framework/helper/create-element';
-import { OnBodyDimensionsChangedEvent } from '../../../framework/events/concrete-events/on-body-dimensions-changed-event';
+import { createElement } from '../../../helper/create-element';
+import { OnBodyDimensionsChangedEvent } from '../../../events/concrete-events/on-body-dimensions-changed-event';
 
 export class PageTimelineElement extends PageElement {
   private isOpen: boolean;
@@ -18,15 +18,23 @@ export class PageTimelineElement extends PageElement {
 
     if (timelineElement.more) {
       const content = new PageContent(timelineElement.more);
-      super(root, [content]);
+      super(root);
+      this.children = [content];
       this.isOpen = false;
       this.more = root.querySelector('.more');
-      this.more.appendChild(content.element);
+      this.more.appendChild(content.htmlRoot);
       window.addEventListener('resize', this.handleResize.bind(this));
       root
         .querySelector('.buttons')
         .addEventListener('click', this.toggleOpen.bind(this));
     } else super(root);
+
+    this.attachElementByReplacing('.figure', timelineElement.figure);
+    this.attachElementByReplacing('.description', timelineElement.description);
+
+    if (timelineElement.link) {
+      this.attachElementByReplacing('.link', timelineElement.link);
+    }
   }
 
   private toggleOpen() {
@@ -46,15 +54,10 @@ export class PageTimelineElement extends PageElement {
   }
 
   private notifyOfHeightChange(deltaHeight: number = undefined) {
-    this.eventBroadcaster?.broadcastEvent(
-      new OnBodyDimensionsChangedEvent(deltaHeight)
-    );
+    this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent(deltaHeight));
 
     setTimeout(
-      () =>
-        this.eventBroadcaster?.broadcastEvent(
-          new OnBodyDimensionsChangedEvent()
-        ),
+      () => this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent()),
       250
     );
   }

src/page/timeline/timeline.html.ts

@@ -1,5 +1,5 @@
-import { html } from '../../framework/model/misc';
 import './timeline.scss';
+import { html } from '../../types/html';
 
 export const generate = (): html => `
     <div id="timeline"></div>

src/page/timeline/timeline.ts

@@ -1,14 +1,14 @@
-import { Timeline } from '../../model/portfolio';
+import { Timeline } from '../../types/portfolio';
 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';
+import { createElement } from '../../helper/create-element';
+import { PageElement } from '../page-element';
 
-export class PageTimeline extends ContainerPage {
+export class PageTimeline extends PageElement {
   public constructor({ elements, showMoreText, showLessText }: Timeline) {
-    super(
-      createElement(generate()),
-      elements.map(e => new PageTimelineElement(e, showMoreText, showLessText))
+    super(createElement(generate()));
+    elements.forEach(e =>
+      this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))
     );
   }
 }