From 667e843b0706d7f50734e3a9e3c83190ccc511a2 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 27 Oct 2018 23:58:00 -0400
Subject: [PATCH] created component to host text to parse and databind

---
 src/app/app.module.ts                         |  4 ++-
 .../databinded-text.component.html            |  2 ++
 .../databinded-text.component.scss            | 20 +++++++++++++
 .../databinded-text.component.spec.ts         | 25 +++++++++++++++++
 .../databinded-text.component.ts              | 28 +++++++++++++++++++
 .../stream/status/status.component.html       |  5 +++-
 .../stream/status/status.component.scss       | 23 +--------------
 .../stream/status/status.component.ts         |  2 +-
 8 files changed, 84 insertions(+), 25 deletions(-)
 create mode 100644 src/app/components/stream/status/databinded-text/databinded-text.component.html
 create mode 100644 src/app/components/stream/status/databinded-text/databinded-text.component.scss
 create mode 100644 src/app/components/stream/status/databinded-text/databinded-text.component.spec.ts
 create mode 100644 src/app/components/stream/status/databinded-text/databinded-text.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 44f2e0a1..8bc070c6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { UserProfileComponent } from './components/stream/user-profile/user-prof
 import { ThreadComponent } from './components/stream/thread/thread.component';
 import { HashtagComponent } from './components/stream/hashtag/hashtag.component';
 import { StreamOverlayComponent } from './components/stream/stream-overlay/stream-overlay.component';
+import { DatabindedTextComponent } from './components/stream/status/databinded-text/databinded-text.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -70,7 +71,8 @@ const routes: Routes = [
     UserProfileComponent,
     ThreadComponent,
     HashtagComponent,
-    StreamOverlayComponent
+    StreamOverlayComponent,
+    DatabindedTextComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.html b/src/app/components/stream/status/databinded-text/databinded-text.component.html
new file mode 100644
index 00000000..a7ccb8e3
--- /dev/null
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.html
@@ -0,0 +1,2 @@
+<div #content class="content" innerHTML="{{processedText}}"></div>
+ 
\ No newline at end of file
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.scss b/src/app/components/stream/status/databinded-text/databinded-text.component.scss
new file mode 100644
index 00000000..523e1dd9
--- /dev/null
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.scss
@@ -0,0 +1,20 @@
+@import "variables";
+
+//Mastodon styling
+:host ::ng-deep .content {
+    // font-size: 14px;
+    color: $status-primary-color;
+    & a,
+    .mention,
+    .ellipsis {
+        color: $status-links-color;
+    }
+    & .invisible {
+        display: none;
+    }
+    & p {
+        margin: 0px;
+        //font-size: .9em;
+        // font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.spec.ts b/src/app/components/stream/status/databinded-text/databinded-text.component.spec.ts
new file mode 100644
index 00000000..5df551dd
--- /dev/null
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatabindedTextComponent } from './databinded-text.component';
+
+describe('DatabindedTextComponent', () => {
+  let component: DatabindedTextComponent;
+  let fixture: ComponentFixture<DatabindedTextComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatabindedTextComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatabindedTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.ts b/src/app/components/stream/status/databinded-text/databinded-text.component.ts
new file mode 100644
index 00000000..27d7929e
--- /dev/null
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-databinded-text',
+    templateUrl: './databinded-text.component.html',
+    styleUrls: ['./databinded-text.component.scss']
+})
+export class DatabindedTextComponent implements OnInit {
+    private accounts: string[] = [];
+    private hastags: string[] = [];
+
+    processedText: string;
+
+    @Output() accountSelected = new EventEmitter<string>();
+    @Output() hashtagSelected = new EventEmitter<string>();
+    @Output() textSelected = new EventEmitter();
+
+    @Input('text')
+    set text(value: string){
+        this.processedText = value;
+    }
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index 22b60660..cdcd6638 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -14,7 +14,10 @@
     </a>
     <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">{{
         getCompactRelativeTime(status.created_at) }}</div>
-    <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div>
+    <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
+
+    <app-databinded-text class="status__content" [text]="displayedStatus.content"></app-databinded-text>
+
 
     <app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
 
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 4db923be..6fd305fa 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -77,6 +77,7 @@
         /*width: calc(100% - 50px);*/
         word-wrap: break-word;
         margin: 0 10px 0 $avatar-column-space;
+        display: block;        
     }
     // &__content p {
     //     margin: 0 !important;
@@ -90,28 +91,6 @@
     }
 }
 
-// .attachments {
-
-// }
-
-//Mastodon styling
-:host ::ng-deep .status__content {
-    color: $status-primary-color;
-    & a,
-    .mention,
-    .ellipsis {
-        color: $status-links-color;
-    }
-    & .invisible {
-        display: none;
-    }
-    & p {
-        margin: 0px;
-        //font-size: .9em;
-        // font-size: 14px;
-    }
-}
-
 .attachments {
     display: block;
     // width: calc(100% - 80px);
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index 047a1319..7ce73e4d 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/src/app/components/stream/status/status.component.ts
@@ -31,7 +31,7 @@ export class StatusComponent implements OnInit {
         this.status = value.status;
 
         //TEST
-        this.status.content += '<br/><br/><a href class="test">TEST</a>';
+        //this.status.content += '<br/><br/><a href class="test">TEST</a>';
 
 
         if (this.status.reblog) {