Implemented 'continue reading'

src/app/app-routing.module.ts

@@ -1,11 +1,10 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-
-import {AppComponent} from './app.component';
 import {HomeComponent} from './components/home/home.component';
 import {PostsComponent} from './components/posts/posts.component';
 import {CvComponent} from './components/cv/cv.component';
 import {RootComponent} from './components/root/root.component';
+import {FullpostComponent} from './components/fullpost/fullpost.component';
 
 const appRoutes: Routes = [
     {
@@ -15,6 +14,7 @@ const appRoutes: Routes = [
         {path: 'home', component: HomeComponent},
         {path: 'posts', component: PostsComponent},
         {path: 'cv', component: CvComponent},
+        {path: 'post/:id', component: FullpostComponent}
         // {path: '', redirectTo: 'home', pathMatch: 'full'},
         // {path: '*', redirectTo: 'home', pathMatch: 'full'}
       ]

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {StateService} from './services/state.service';
 import { ContactComponent } from './components/contact/contact.component';
 import { RootComponent } from './components/root/root.component';
 import { LanguagetoggleComponent } from './components/languagetoggle/languagetoggle.component';
+import { FullpostComponent } from './components/fullpost/fullpost.component';
 
 @NgModule({
   declarations: [
@@ -33,7 +34,8 @@ import { LanguagetoggleComponent } from './components/languagetoggle/languagetog
     PosttagComponent,
     ContactComponent,
     RootComponent,
-    LanguagetoggleComponent
+    LanguagetoggleComponent,
+    FullpostComponent
   ],
   imports: [
     BrowserModule,

src/app/components/fullpost/fullpost.component.html

@@ -0,0 +1 @@
+<app-post *ngIf="post !== undefined" [post]="post"></app-post>

src/app/components/fullpost/fullpost.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FullpostComponent } from './fullpost.component';
+
+describe('FullpostComponent', () => {
+  let component: FullpostComponent;
+  let fixture: ComponentFixture<FullpostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FullpostComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FullpostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/fullpost/fullpost.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {DataloaderService} from '../../services/dataloader.service';
+import {Post} from '../../model/post';
+import {StateService} from '../../services/state.service';
+
+@Component({
+  selector: 'app-fullpost',
+  templateUrl: './fullpost.component.html',
+  styleUrls: ['./fullpost.component.scss']
+})
+export class FullpostComponent implements OnInit {
+
+  post: Post;
+
+  constructor(private route: ActivatedRoute, private dataloaderService: DataloaderService, private stateService: StateService) { }
+
+  ngOnInit() {
+    //get the id of the post from the route
+    this.route.paramMap.subscribe(params=>{
+      let id = params.get('id');
+      console.log('the fullpost component gets id: '+id);
+
+      //fetch the posts and make sure you get the right one
+      this.dataloaderService.getPosts().subscribe(posts => {
+        posts.forEach(post=>{
+          if(post.id = id) {
+            this.post = post;
+          }
+        });
+      });
+    });
+  }
+
+}

src/app/components/post/post.component.html

@@ -13,4 +13,15 @@
     </div>
   </div>
   <div class="post-body" #htmlcontainer></div>
+
+  <div class="more" *ngIf="shortVersion === true">
+    <a routerLink="../post/{{post.id}}">
+      <app-languagetoggle [language]="'en'">
+        more
+      </app-languagetoggle>
+      <app-languagetoggle [language]="'nl'">
+        meer
+      </app-languagetoggle>
+    </a>
+  </div>
 </div>

src/app/components/post/post.component.scss

@@ -53,3 +53,8 @@
   }
 
 }
+
+.more {
+  border-left: 1px solid black;
+  padding-left: 25px;
+}

src/app/components/post/post.component.ts

@@ -11,8 +11,27 @@ import {StateService} from '../../services/state.service';
 export class PostComponent implements OnInit {
 
   @Input() post: Post;
-  @ViewChild('htmlcontainer') htmlContainer: ElementRef;
 
+  /**
+   * If this is set to true, the post component can reconfigure itself to display a short version. If false, it just shows the full version.
+   */
+  @Input() canBeShort: boolean;
+
+  @ViewChild('htmlcontainer')
+  htmlContainer: ElementRef;
+
+  /**
+   * A variable that indicates whether the component is displaying a short or long version.
+   * @type {boolean}
+   */
+  shortVersion = false;
+
+  /**
+   * Construct the PostComponent.
+   *
+   * @param {DataloaderService} dataloaderService
+   * @param {StateService} stateService
+   */
   constructor(private dataloaderService: DataloaderService, private stateService: StateService) { }
 
   ngOnInit() {
@@ -26,19 +45,40 @@ export class PostComponent implements OnInit {
     this.dataloaderService.getFullHtml(this.post, this.stateService.getLanguage()).subscribe(content => {
       // console.log('PostComponent got content for '+this.post.id);
       // this is not the cause of the memory leak:\
-      this.htmlContainer.nativeElement.innerHTML = content;
+      this.setContent(content);
     });
 
     this.stateService.getLanguageObservable().subscribe(language => {
       // change the content: language has been updated
       this.dataloaderService.getFullHtml(this.post, language).subscribe(content => {
-        this.htmlContainer.nativeElement.innerHTML = content;
+        this.setContent(content);
       });
     });
 
     console.log('PostComponent.ngOnInit is done.');
   }
 
+  /**
+   * Set the content in a clever way: if the post component is set to a short version, this can fix that up.
+   * @param {String} content
+   */
+  private setContent(content:String) {
+    if(this.canBeShort) {
+      const split = content.split("<splitter/>");
+      if(split.length==2) {
+        //only show the first one
+        this.htmlContainer.nativeElement.innerHTML = split[0];
+        this.shortVersion = true;
+      } else {
+        this.htmlContainer.nativeElement.innerHTML = content;
+        this.shortVersion = false;
+      }
+    } else {
+      this.htmlContainer.nativeElement.innerHTML = content;
+      this.shortVersion = false;
+    }
+  }
+
   isActiveTag(tag: string): boolean {
     return this.stateService.isActiveTag(tag);
   }

src/app/components/posts/posts.component.html

@@ -8,5 +8,5 @@
 </div>
 
 <div>
-  <app-post *ngFor='let post of filteredPosts' [post]="post"></app-post>
+  <app-post *ngFor='let post of filteredPosts' [post]="post" [canBeShort] = true></app-post>
 </div>

src/app/components/root/root.component.ts

@@ -67,6 +67,8 @@ export class RootComponent implements OnInit {
       this.pageType = 'Curriculum Vitae';
     } else if (this.router.url.endsWith('home')) {
         this.pageType = 'Home';
+    } else if (this.router.url.indexOf("post")!=-1) {
+        this.pageType = 'Post';
     } else {
       this.pageType = 'Joa did something wrong...';
     }

src/assets/post/first/full-en.html

@@ -6,6 +6,8 @@
   of projects (in-progress or done) or anything that comes to mind I'd like to share on something other than the usual
   social media suspects.</p>
 
+<splitter/>
+
 <p>Besides, it's nice to have a minimalistic Angular2/Bootstrap playground to do some styling experiments. I'll
   probably update
   this thing once in a while. Maybe even use a database, wouldn't <em>that</em> be something...</p>

src/assets/post/test/full-nl.html

@@ -1 +1,5 @@
 <p>Dit is een test post.</p>
+
+<splitter/>
+
+<p>En dit is de tweede paragraaf!</p>