socialnetworknews-web

commit 7086133abb9b51df10f12c4ba85e63a4766452a2
parent 60807822649a6b068c663d76f458359ec4096ff8
Author: MTRNord <mtrnord1@gmail.com>
Date:   Thu, 22 Mar 2018 21:13:55 +0100

Factor out card

Diffstat:
M
src/app/app.module.ts
 | 
2
++
A
src/app/card/card.component.html
 | 
26
++++++++++++++++++++++++++
A
src/app/card/card.component.scss
 | 
0

A
src/app/card/card.component.spec.ts
 | 
25
+++++++++++++++++++++++++
A
src/app/card/card.component.ts
 | 
32
++++++++++++++++++++++++++++++++
M
src/app/papers-list/papers-list.component.html
 | 
22
+---------------------

6 files changed, 86 insertions(+), 21 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { ApiService } from './api.service';
 
 import * as Raven from 'raven-js';
 import {ToastrModule} from 'ngx-toastr';
+import { CardComponent } from './card/card.component';
 Raven
   .config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
     environment: 'development',
@@ -42,6 +43,7 @@ export class RavenErrorHandler implements ErrorHandler {
     PapersComponent,
     TweetListComponent,
     PapersListComponent,
+    CardComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({appId: 'snn-app'}),
diff --git a/src/app/card/card.component.html b/src/app/card/card.component.html
@@ -0,0 +1,26 @@
+<article>
+  <!--<a href="{{item.tweet_link}}">-->
+  <div style="z-index: 2;">
+    <a (click)="goTo(lightboxItem)" >
+      <img *ngIf="image" [src]="image" class="thumbnail">
+    </a>
+
+    <!-- lightbox container hidden with CSS -->
+    <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+      <div class="img-wrapper">
+        <img *ngIf="image" [src]="image">
+      </div>
+    </a>
+
+    <div class="text">
+      <h3 *ngIf="title && link">
+        <a *ngIf="link" routerLink="{{link}}">{{title}}</a>
+      </h3>
+      <h3 *ngIf="title && !link">
+        {{title}}
+      </h3>
+      <p *ngIf="text">{{text}}</p>
+    </div>
+  </div>
+  <!--</a>-->
+</article>
diff --git a/src/app/card/card.component.scss b/src/app/card/card.component.scss
diff --git a/src/app/card/card.component.spec.ts b/src/app/card/card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/card/card.component.ts b/src/app/card/card.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent {
+  @Input() title;
+  @Input() image;
+  @Input() link;
+  @Input() text;
+
+  currentUrl: string;
+
+  constructor(private router: Router) {
+    router.events.subscribe((value) => {
+      if (value instanceof NavigationEnd ) {
+        this.currentUrl = value.url;
+      }
+    });
+  }
+
+  hide(el) {
+    el.style.display = '';
+  }
+
+  goTo(el): void {
+    el.style.display = 'block';
+  }
+}
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,23 +1,3 @@
 <div #container class="grid">
-  <article *ngFor="let item of data">
-    <!--<a href="{{item.tweet_link}}">-->
-    <div style="z-index: 2;">
-      <a (click)="goTo(lightboxItem)" >
-        <img *ngIf="item.paper_image" [src]="item.paper_image" class="thumbnail">
-      </a>
-
-      <!-- lightbox container hidden with CSS -->
-      <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
-        <div class="img-wrapper">
-          <img *ngIf="item.paper_image" [src]="item.paper_image">#
-        </div>
-      </a>
-
-      <div class="text">
-        <h3><a routerLink="/paper/{{item.uuid}}">{{item.name}}</a></h3>
-        <p *ngIf="item.text">{{item.description}}</p>
-      </div>
-    </div>
-    <!--</a>-->
-  </article>
+  <app-card *ngFor="let item of data" [title]="item.name" [link]="'/paper/'+item.uuid" [image]="item.paper_image" [text]="item.description"></app-card>
 </div>