From ed55aa8c759ee9f6a2be64a3a97f6cfb69c7a125 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 18 Apr 2020 00:45:27 -0400
Subject: [PATCH] added long post trucation

---
 .../databinded-text.component.html            |  7 ++-
 .../databinded-text.component.scss            | 43 +++++++++++++++++++
 .../databinded-text.component.ts              | 18 +++++++-
 .../stream/status/status.component.html       |  2 +-
 .../stream/status/status.component.scss       |  1 +
 src/sass/_variables.scss                      |  1 +
 6 files changed, 68 insertions(+), 4 deletions(-)

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
index fb00b4c1..0706a4b1 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.html
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.html
@@ -1 +1,6 @@
-<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText($event)"></div>
\ No newline at end of file
+<div class="content-wrapper">
+    <div #content class="content" [class.selectable]="textIsSelectable" [class.collapsed]="isCollapsed" innerHTML="{{processedText}}" (click)="selectText($event)"></div>
+    <div class="content-wrapper__expand" [class.content-wrapper__expand--selected]="selected" *ngIf="isCollapsed" (click)="selectText($event)">
+        <a href (click)="expand()" class="content-wrapper__expand--link" title="expand status">read more <fa-icon class="content-wrapper__expand--link--icon" [icon]="faAngleDown"></fa-icon></a>
+    </div>
+</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
index f3220d19..3f725dac 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.scss
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.scss
@@ -1,9 +1,52 @@
 @import "variables";
 
+$expand-color: $column-color;
+
 .selectable {
     cursor: pointer;
 }
 
+.collapsed {
+    max-height: 290px;
+    overflow: hidden;
+}
+
+.content-wrapper {
+    position: relative;
+    cursor: pointer;
+
+    &__expand {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding-top: 60px;
+        padding-left: 15px;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba($expand-color ,0.25), rgba($expand-color,0.5), $expand-color, $expand-color);
+        
+        &--link{
+            transition: all .2s;
+            color: #a9b5d8;
+            color: #c0c8e0;
+            // text-decoration: underline;
+
+            &:hover {
+                color: white;
+            }
+
+            &--icon {
+                position: relative;
+                top: 1px;
+            }
+        }
+
+        &--selected {
+            background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba($selected-status ,0.25), rgba($selected-status,0.5), $selected-status, $selected-status); 
+        }
+    }    
+}
+
+
 //Mastodon styling
 :host ::ng-deep .content {
     // font-size: 14px;
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
index d84e94b6..69014a97 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.ts
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.ts
@@ -1,16 +1,21 @@
 import { Component, OnInit, Input, EventEmitter, Output, Renderer2, ViewChild, ElementRef } from '@angular/core';
 
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+
 @Component({
     selector: 'app-databinded-text',
     templateUrl: './databinded-text.component.html',
     styleUrls: ['./databinded-text.component.scss']
 })
 export class DatabindedTextComponent implements OnInit {
+    faAngleDown = faAngleDown;
+
     private accounts: string[] = [];
     private hashtags: string[] = [];
     private links: string[] = [];
 
     processedText: string;
+    isCollapsed: boolean = false;
 
     @ViewChild('content') contentElement: ElementRef;
 
@@ -19,11 +24,15 @@ export class DatabindedTextComponent implements OnInit {
     @Output() textSelected = new EventEmitter();
 
     @Input() textIsSelectable: boolean = true;
+    @Input() selected: boolean;
 
     @Input('text')
     set text(value: string) {
-        // console.warn('text');
-        // console.warn(value);
+
+        let parser = new DOMParser();
+        var dom = parser.parseFromString(value, 'text/html')
+        this.isCollapsed = [...dom.body.textContent].length > 500;
+        //console.warn(this.isCollapsed);
 
         this.processedText = '';
 
@@ -73,6 +82,11 @@ export class DatabindedTextComponent implements OnInit {
         }
     }
 
+    expand(): boolean {
+        this.isCollapsed = false;
+        return false;
+    }
+
     private processHashtag(section: string) {
         let extractedLinkAndNext = section.split('</a>');
         let extractedHashtag = extractedLinkAndNext[0].split('#')[1].replace('<span>', '').replace('</span>', '');
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index c282ef80..1517a333 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -97,7 +97,7 @@
                 <span class="status__content-warning--title">sensitive content</span>
                 <span innerHTML="{{ contentWarningText }}"></span>
             </a>
-            <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent"
+            <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent" [selected]="isSelected"
                 (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
                 (textSelected)="textSelected()"></app-databinded-text>
 
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index bea3152a..0d61305c 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -38,6 +38,7 @@
     background-color: desaturate(lighten(#0f111a, 5%), 4%);
     background-color: #0a0a10;
     background-color: #1e2734;
+    background-color: $selected-status;
 }
 
 .status {
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 7b0d3918..1e80c59d 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -68,6 +68,7 @@ $status-editor-color: #14151a;
 $status-editor-footer-background: #535c7e;
 $status-editor-footer-background: #3e455f;
 $status-editor-footer-link-color: #e2e2e2;
+$selected-status: #1e2734;
 
 $autosuggest-background: #ffffff;
 $autosuggest-entry-background: #3e455f;